Enhance component attribute handling and enforce strict types

src/Components/CardPrimaryAction.php

@@ -1,5 +1,7 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
@@ -26,7 +28,10 @@ public function render()
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
-        $attributes = $attributes->merge(['tabindex' => 0]);
+        $attributes = $attributes->merge([
+            'tabindex' => 0,
+            'data-mdc-auto-init' => 'MDCRipple',
+        ]);
 
         return $attributes->class([
             'mdc-card__primary-action',

src/Components/Checkbox.php

@@ -1,10 +1,18 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 
+/**
+ * @see https://mui.com/material-ui/react-checkbox/
+ * @see https://m2.material.io/components/checkboxes/web
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-checkbox
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/checkbox
+ */
 class Checkbox extends Component
 {
     public ?string $color;
@@ -39,6 +47,14 @@ public function render()
         return 'mbv::checkbox';
     }
 
+    public function wrapperAttributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return [
+            'class' => 'mdc-checkbox '.($attributes->has('disabled') ? 'mdc-checkbox--disabled' : ''),
+            'data-mdc-auto-init' => 'MDCCheckbox',
+        ];
+    }
+
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
         $attributes = $attributes->merge(['type' => 'checkbox']);

src/Components/Chip.php

@@ -1,10 +1,20 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 
+/**
+ * Material Blade Chip Component
+ *
+ * @see https://m2.material.io/components/chips
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips/deprecated
+ * @see https://github.com/sensasi-delight/material-blade
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/chips
+ */
 class Chip extends Component
 {
     public string $label;
@@ -46,7 +56,10 @@ public function render()
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
-        $attributes = $attributes->merge(['role' => 'row']);
+        $attributes = $attributes->merge([
+            'role' => 'row',
+            'data-mdc-auto-init' => 'MDCChip',
+        ]);
 
         return $attributes->class([
             'mdc-chip',

src/Components/ChipSet.php

@@ -1,10 +1,18 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ * @see https://m2.material.io/components/chips/web
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-chips/deprecated
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/chips
+ */
 class ChipSet extends Component
 {
     public string $variant;
@@ -32,7 +40,10 @@ public function render()
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
-        $attributes = $attributes->merge(['role' => 'grid']);
+        $attributes = $attributes->merge([
+            'data-mdc-auto-init' => 'MDCChipSet',
+            'role' => 'grid',
+        ]);
 
         return $attributes->class([
             'mdc-chip-set',

src/Components/CircularProgress.php

@@ -1,11 +1,21 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use MaterialBlade\Helper;
 
+/**
+ * Material Blade Circular Progress Component
+ *
+ * @see https://m2.material.io/components/progress-indicators
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-circular-progress
+ * @see https://github.com/sensasi-delight/material-blade
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/circular-progress-indicator
+ */
 class CircularProgress extends Component
 {
     public string $color;
@@ -44,6 +54,10 @@ private function validateComponent(ComponentAttributeBag $attributes)
         if (! $attributes->has('aria-label')) {
             throw new \Exception('Progress bars is conform to the WAI-ARIA Progressbar Specification, the \'aria-label\' attribute is required');
         }
+
+        if ($this->value !== null && ($this->value < 0 || $this->value > 1)) {
+            throw new \Exception('The "value" attribute must be between 0 and 1');
+        }
     }
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
@@ -52,9 +66,8 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
 
         $attributes = $attributes->merge([
             'role' => 'progressbar',
-            'aria-valuemin' => 0,
-            'aria-valuemax' => 1,
-            'aria-valuenow' => $this->value ?: 0,
+            'data-mdc-auto-init' => 'MDCCircularProgress',
+            'data-value' => $this->value ?: '0',
         ]);
 
         if ($this->color !== 'primary') {

src/Components/DataTable.php

@@ -1,9 +1,19 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 
+/**
+ * Material Blade Data Table Component
+ *
+ * @see https://m2.material.io/components/data-tables
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-data-table
+ * @see https://github.com/sensasi-delight/material-blade
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/data-table
+ */
 class DataTable extends Component
 {
     public bool $isWithCheckbox;

src/Components/LinearProgress.php

@@ -1,11 +1,21 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use MaterialBlade\Helper;
 
+/**
+ * Material Blade Linear Progress Component
+ *
+ * @see https://m2.material.io/components/progress-indicators
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-linear-progress
+ * @see https://github.com/sensasi-delight/material-blade
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/linear-progress-indicator
+ */
 class LinearProgress extends Component
 {
     public string $color;
@@ -44,6 +54,14 @@ private function validateComponent(ComponentAttributeBag $attributes)
         if (! $attributes->has('aria-label')) {
             throw new \Exception('Progress bars is conform to the WAI-ARIA Progressbar Specification, the \'aria-label\' attribute is required');
         }
+
+        if ($this->value !== null && ($this->value < 0 || $this->value > 1)) {
+            throw new \Exception('The "value" attribute must be between 0 and 1');
+        }
+
+        if ($this->bufferValue !== null && ($this->bufferValue < 0 || $this->bufferValue > 1)) {
+            throw new \Exception('The "bufferValue" attribute must be between 0 and 1');
+        }
     }
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
@@ -52,9 +70,8 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
 
         $attributes = $attributes->merge([
             'role' => 'progressbar',
-            'aria-valuemin' => 0,
-            'aria-valuemax' => 1,
-            'aria-valuenow' => $this->value ?: 0,
+            'data-mdc-auto-init' => 'MDCLinearProgress',
+            'data-value' => $this->value ?: 0,
         ]);
 
         if ($this->bufferValue !== null) {

src/Components/Radio.php

@@ -54,4 +54,17 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
             'mdc-radio__native-control',
         ]);
     }
+
+    /**
+     * Preprocess attributes for the radio wrapper
+     *
+     * @return ComponentAttributeBag
+     */
+    public function wrapperAttributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return new ComponentAttributeBag([
+            'class' => 'mdc-radio '.($attributes->has('disabled') ? 'mdc-radio--disabled ' : '').($this->touch ? 'mdc-radio--touch' : ''),
+            'data-mdc-auto-init' => 'MDCRadio',
+        ]);
+    }
 }

src/Components/Snackbar.php

@@ -1,11 +1,19 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\Support\HtmlString;
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 
+/**
+ * @see https://mui.com/material-ui/react-snackbar/
+ * @see https://m2.material.io/components/snackbars/web
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-snackbar
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/snackbar
+ */
 class Snackbar extends Component
 {
     public string $variant;
@@ -35,7 +43,7 @@ public function render()
         return 'mbv::snackbar';
     }
 
-    public function validateComponent(HtmlString $slot)
+    public function validateComponent(string|HtmlString $slot)
     {
         if (! $this->message && $slot->isEmpty()) {
             throw new \Exception('Please fill the "message" attribute or the component slot', 1);
@@ -44,6 +52,10 @@ public function validateComponent(HtmlString $slot)
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
+        $attributes = $attributes->merge([
+            'data-mdc-auto-init' => 'MDCSnackbar',
+        ]);
+
         return $attributes->class([
             'mdc-snackbar',
             "mdc-snackbar--$this->variant" => $this->variant !== 'default',

src/Components/SwitchToggle.php

@@ -1,11 +1,19 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use MaterialBlade\Helper;
 
+/**
+ * @see https://mui.com/material-ui/react-switch/
+ * @see https://m2.material.io/components/switches/web
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-switch
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/switch
+ */
 class SwitchToggle extends Component
 {
     public string $color;
@@ -43,16 +51,19 @@ public function render()
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
-        $attributes = $attributes->merge([
+        $mergeAttributes = [
+            'data-mdc-auto-init' => 'MDCSwitch',
             'type' => 'button',
             'role' => 'switch',
             'aria-checked' => $this->isOn,
-        ]);
+        ];
 
         if ($this->color !== 'primary') {
-            $attributes = $attributes->merge(['style' => $attributes->prepends('--mdc-theme-primary: '.Helper::getColor($this->color))]);
+            $mergeAttributes['style'] = $attributes->prepends('--mdc-theme-primary: '.Helper::getColor($this->color));
         }
 
+        $attributes = $attributes->merge($mergeAttributes);
+
         return $attributes->class([
             'mdc-switch',
             'mdc-switch--'.($this->isOn ? 'selected' : 'unselected'),

src/Components/TabBar.php

@@ -1,11 +1,19 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use MaterialBlade\Helper;
 
+/**
+ * @see https://mui.com/material-ui/react-tabs/
+ * @see https://m2.material.io/components/tabs/web
+ * @see https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-tab-bar
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/tabs
+ */
 class TabBar extends Component
 {
     public string $color;
@@ -60,11 +68,16 @@ public function render()
 
     public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
+        $mergeAttributes = [
+            'data-mdc-auto-init' => 'MDCTabBar',
+            'role' => 'tablist',
+        ];
+
         if ($this->color !== 'initial') {
-            $attributes = $attributes->merge(['style' => $attributes->prepends('background-color: '.Helper::getColor($this->color))]);
+            $mergeAttributes['style'] = $attributes->prepends('background-color: '.Helper::getColor($this->color));
         }
 
-        $attributes = $attributes->merge(['role' => 'tablist']);
+        $attributes = $attributes->merge($mergeAttributes);
 
         return $attributes->class([
             'mdc-tab-bar',