@lmvz-ds/components 0.19.0 → 0.21.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-18T09:58:50",
+  "timestamp": "2026-05-21T07:12:41",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -506,6 +506,415 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/lmvz-checkbox/lmvz-checkbox.tsx",
+      "encapsulation": "scoped",
+      "tag": "lmvz-checkbox",
+      "readme": "# lmvz-checkbox\n\nAccessible, form-associated checkbox built as a Stencil scoped web component. Participates in native HTML forms via `ElementInternals` and emits a `lmvzChange` event on toggle.\n\n## Usage\n\n### Basic\n\n```html\n<lmvz-checkbox label=\"Accept terms and conditions\"></lmvz-checkbox>\n\n<!-- With helper text -->\n<lmvz-checkbox\n  label=\"Subscribe to newsletter\"\n  helper-text=\"You can unsubscribe at any time.\"\n></lmvz-checkbox>\n\n<!-- Required with error state -->\n<lmvz-checkbox\n  label=\"I agree to the privacy policy\"\n  required\n  error\n  error-message=\"You must accept the privacy policy to continue.\"\n></lmvz-checkbox>\n```\n\n### Form integration\n\n`lmvz-checkbox` participates in native form submission via `ElementInternals`. Use `name` to set the field name and `value` to control the submitted value (defaults to `'on'`).\n\n```html\n<form id=\"signup-form\">\n  <lmvz-checkbox\n    name=\"terms\"\n    label=\"Accept terms and conditions\"\n    value=\"accepted\"\n    required\n  ></lmvz-checkbox>\n  <button type=\"submit\">Submit</button>\n</form>\n```\n\n```js\ndocument.getElementById('signup-form').addEventListener('submit', (event) => {\n  event.preventDefault();\n  const data = new FormData(event.target);\n  // data.get('terms') === 'accepted' when checked, null when unchecked\n  console.log(data.get('terms'));\n});\n```\n\nTo associate the checkbox with a form outside its DOM subtree, pass the form element's `id` via the `form` attribute:\n\n```html\n<form id=\"external-form\">...</form>\n<lmvz-checkbox name=\"consent\" label=\"I consent\" form=\"external-form\"></lmvz-checkbox>\n```\n\n## Reflected Attributes\n\nThe following props are reflected as HTML attributes and can be used in CSS attribute selectors:\n\n| Prop | Attribute |\n|------|-----------|\n| `checked` | `checked` |\n| `disabled` | `disabled` |\n| `required` | `required` |\n| `error` | `error` |\n\n## CSS Custom Properties\n\nOverride these on the `:host` element to theme the component. All defaults reference LMVZ semantic or global design tokens.\n\n| Custom Property | Default | Purpose |\n|----------------|---------|---------|\n| `--checkbox-box-size` | `var(--lmvz-global-dimension-s18)` | Width and height of the checkbox box |\n| `--checkbox-border-radius` | `var(--lmvz-global-dimension-s4)` | Border radius of the checkbox box |\n| `--checkbox-border-color` | `var(--lmvz-semantic-color-border-default)` | Default (unchecked) border color |\n| `--checkbox-border-color-hover` | `var(--lmvz-semantic-color-border-hover)` | Border color on hover |\n| `--checkbox-border-color-checked` | `var(--lmvz-semantic-color-border-active)` | Border color when checked |\n| `--checkbox-border-color-error` | `var(--lmvz-semantic-color-status-on-danger)` | Border color in error state |\n| `--checkbox-focus-color` | `var(--lmvz-semantic-color-status-on-active)` | Focus ring color |\n| `--checkbox-checkmark-color` | `var(--lmvz-semantic-color-border-active)` | Checkmark SVG stroke color |\n| `--checkbox-label-color` | `var(--lmvz-semantic-color-on-surface-primary)` | Label text color (default and hover) |\n| `--checkbox-label-color-checked` | `var(--lmvz-semantic-color-status-on-active)` | Label text color when checked |\n| `--checkbox-wrapper-bg-hover` | `var(--lmvz-semantic-color-int-tertiary-hover)` | Pill background on hover |\n| `--checkbox-wrapper-bg-checked` | `var(--lmvz-semantic-color-status-active)` | Pill background when checked |\n| `--checkbox-ripple-bg` | `var(--lmvz-semantic-color-int-secondary-hover)` | Ripple dot color |\n| `--checkbox-helper-color` | `var(--lmvz-semantic-color-on-surface-secondary)` | Helper text color |\n| `--checkbox-error-color` | `var(--lmvz-semantic-color-status-on-danger)` | Error message text color |\n| `--checkbox-disabled-opacity` | `var(--lmvz-component-input-disabled-opacity)` | Opacity when disabled — see caveat below |\n\n## Known Caveats\n\n### Checkbox box size uses a generic dimension token (5.1)\n\n`--checkbox-box-size` defaults to `--lmvz-global-dimension-s18` (18 px). This is a global dimension token; a component-specific token (`component.checkbox.box-size`) is the recommended long-term solution. The effective rendered size is 18 px until that token exists.\n\n### Border-radius uses a generic dimension token (5.2)\n\n`--checkbox-border-radius` defaults to `--lmvz-global-dimension-s4` (4 px). This is a generic dimension token. If `component.checkbox.border-radius` is introduced, this property should be migrated to it.\n\n### Checked label contrast borderline (5.3)\n\nWhen checked, the label text color (`--lmvz-semantic-color-status-on-active`, `#0e7ab4`) against the checked wrapper background (`--lmvz-semantic-color-status-active`, `#f1f9fe`) produces approximately 4.4:1 contrast. This is marginally below the WCAG AA minimum of 4.5:1 for normal text. This was accepted as a design trade-off. Verify contrast against the actual rendered background before each accessibility audit.\n\n### Helper text font-weight inconsistency with `lmvz-input` (5.6)\n\nHelper text renders at `font-weight: 400` per the `body-sm` design token. `lmvz-input` uses `font-weight: 500` for its helper text — a pre-existing inconsistency in the design system. `lmvz-checkbox` intentionally follows the token-specified value. This should be resolved at the design system token level.\n\n### Disabled opacity token export bug (5.7)\n\n`--lmvz-component-input-disabled-opacity` resolves from `global.opacity.opacity-disabled`, which has a known Supernova export bug: the token value is stored as `\"40px\"` (dimension type) instead of `0.4` (unitless number). If disabled checkboxes render at full opacity or at an incorrect size, apply the following workaround at the consuming app level:\n\n```css\nlmvz-checkbox[disabled] {\n  --checkbox-disabled-opacity: 0.4;\n}\n```\n\nThis token bug should be tracked and fixed in `packages/design-tokens`.\n",
+      "docs": "Checkbox component with form association, ARIA validation, and accessible label support.",
+      "docsTags": [
+        {
+          "name": "example",
+          "text": "```html\n<lmvz-checkbox label=\"Accept terms\" name=\"terms\" required></lmvz-checkbox>\n```"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autofocus",
+          "reflectToAttr": false,
+          "docs": "Whether the checkbox should autofocus.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "checked",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is checked.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is disabled.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is in an error state.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "errorMessage",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error-message",
+          "reflectToAttr": false,
+          "docs": "Error message displayed when error is true. Required when error=true.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "form",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "Form id to associate with (for out-of-form usage).",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "helperText",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Helper / description text displayed below the label.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Label text for the checkbox. Required for accessibility.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "Name attribute for form submission via ElementInternals.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "required",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is required.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "Form submission value when checked.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'on'"
+            }
+          ],
+          "default": "'on'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "checkValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Returns whether the checkbox satisfies its validation constraints.",
+          "docsTags": []
+        },
+        {
+          "name": "focusInput",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "focusInput() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the native checkbox input.",
+          "docsTags": []
+        },
+        {
+          "name": "reportValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "reportValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Reports validation errors to the user.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "lmvzChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted whenever the checkbox checked state changes.\nEvent detail contains the new checked boolean value.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/lmvz-chip/lmvz-chip.tsx",
       "encapsulation": "shadow",
@@ -5041,82 +5450,295 @@
           "mutable": false,
           "attr": "role",
           "reflectToAttr": true,
-          "docs": "Accessibility role exposed by the host element.",
+          "docs": "Accessibility role exposed by the host element.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'menuitem'"
+            },
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "default": "'menuitem'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "ti",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "tabindex",
+          "reflectToAttr": true,
+          "docs": "Keeps the host focusable for keyboard navigation inside `lmvz-header`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            },
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "lmvzActivation",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the menu item is activated, either by a click or by pressing \"Enter\" or \"Space\" while the menu item is focused.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/lmvz-select/lmvz-select.tsx",
+      "encapsulation": "scoped",
+      "tag": "lmvz-select",
+      "readme": "# lmvz-select\n\n\n",
+      "docs": "Select component with floating label and pill-shaped trigger.\nWraps a native `<select>` element for full keyboard and form support.",
+      "docsTags": [
+        {
+          "name": "example",
+          "text": "```html\n<lmvz-select label=\"Country\" name=\"country\">\n  <option value=\"ch\">Switzerland</option>\n  <option value=\"de\">Germany</option>\n  <option value=\"at\">Austria</option>\n</lmvz-select>\n```"
+        },
+        {
+          "name": "example",
+          "text": "```typescript\nconst select = document.querySelector('lmvz-select');\nselect.addEventListener('lmvzChange', (e) => console.log(e.detail));\n```"
+        },
+        {
+          "name": "slot",
+          "text": "default - Native `<option>` or `<optgroup>` elements."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether the select is disabled.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "helperText",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Helper text displayed below the select field.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "Name attribute passed to the native select for form submission.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "required",
+          "reflectToAttr": true,
+          "docs": "Whether a value is required.",
           "docsTags": [
             {
               "name": "default",
-              "text": "'menuitem'"
-            },
-            {
-              "name": "readonly",
-              "text": ""
+              "text": "false"
             }
           ],
-          "default": "'menuitem'",
+          "default": "false",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": false,
           "required": false,
-          "getter": true,
+          "getter": false,
           "setter": false
         },
         {
-          "name": "ti",
-          "type": "number",
+          "name": "value",
+          "type": "string | undefined",
           "complexType": {
-            "original": "number",
-            "resolved": "number",
+            "original": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
-          "mutable": false,
-          "attr": "tabindex",
-          "reflectToAttr": true,
-          "docs": "Keeps the host focusable for keyboard navigation inside `lmvz-header`.",
-          "docsTags": [
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "Currently selected value.",
+          "docsTags": [],
+          "values": [
             {
-              "name": "default",
-              "text": "0"
+              "type": "string"
             },
             {
-              "name": "readonly",
-              "text": ""
-            }
-          ],
-          "default": "0",
-          "values": [
-            {
-              "type": "number"
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
-          "getter": true,
+          "getter": false,
           "setter": false
         }
       ],
       "methods": [],
       "events": [
         {
-          "event": "lmvzActivation",
-          "detail": "void",
+          "event": "lmvzChange",
+          "detail": "string",
           "bubbles": true,
           "complexType": {
-            "original": "void",
-            "resolved": "void",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when the menu item is activated, either by a click or by pressing \"Enter\" or \"Space\" while the menu item is focused.",
+          "docs": "Emitted when the user selects a new option. Detail contains the new value.",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Native `<option>` or `<optgroup>` elements."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -5124,27 +5746,48 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/lmvz-select/lmvz-select.tsx",
+      "filePath": "src/components/lmvz-toggle/lmvz-toggle.tsx",
       "encapsulation": "scoped",
-      "tag": "lmvz-select",
-      "readme": "# lmvz-select\n\n\n",
-      "docs": "Select component with floating label and pill-shaped trigger.\nWraps a native `<select>` element for full keyboard and form support.",
+      "tag": "lmvz-toggle",
+      "readme": "# lmvz-toggle\n\n\n",
+      "docs": "Toggle (switch) component. Wraps a native `<input type=\"checkbox\" role=\"switch\">` for full keyboard and form support.",
       "docsTags": [
         {
           "name": "example",
-          "text": "```html\n<lmvz-select label=\"Country\" name=\"country\">\n  <option value=\"ch\">Switzerland</option>\n  <option value=\"de\">Germany</option>\n  <option value=\"at\">Austria</option>\n</lmvz-select>\n```"
-        },
-        {
-          "name": "example",
-          "text": "```typescript\nconst select = document.querySelector('lmvz-select');\nselect.addEventListener('lmvzChange', (e) => console.log(e.detail));\n```"
-        },
-        {
-          "name": "slot",
-          "text": "default - Native `<option>` or `<optgroup>` elements."
+          "text": "```html\n<lmvz-toggle label=\"Enable notifications\" name=\"notifications\" required></lmvz-toggle>\n```"
         }
       ],
       "usage": {},
       "props": [
+        {
+          "name": "checked",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "checked",
+          "reflectToAttr": true,
+          "docs": "Whether the toggle is checked",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -5156,7 +5799,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "Whether the select is disabled.",
+          "docs": "Whether the toggle is disabled",
           "docsTags": [
             {
               "name": "default",
@@ -5175,7 +5818,7 @@
           "setter": false
         },
         {
-          "name": "helperText",
+          "name": "form",
           "type": "string | undefined",
           "complexType": {
             "original": "string",
@@ -5183,9 +5826,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "helper-text",
+          "attr": "form",
           "reflectToAttr": false,
-          "docs": "Helper text displayed below the select field.",
+          "docs": "Form id to associate with",
           "docsTags": [],
           "values": [
             {
@@ -5211,7 +5854,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present.",
+          "docs": "Label text for the toggle",
           "docsTags": [],
           "values": [
             {
@@ -5234,7 +5877,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Name attribute passed to the native select for form submission.",
+          "docs": "Name attribute for form integration",
           "docsTags": [],
           "values": [
             {
@@ -5260,7 +5903,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": true,
-          "docs": "Whether a value is required.",
+          "docs": "Whether the toggle is required",
           "docsTags": [
             {
               "name": "default",
@@ -5280,56 +5923,169 @@
         },
         {
           "name": "value",
-          "type": "string | undefined",
+          "type": "string",
           "complexType": {
             "original": "string",
-            "resolved": "string | undefined",
+            "resolved": "string",
             "references": {}
           },
-          "mutable": true,
+          "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "Currently selected value.",
-          "docsTags": [],
+          "docs": "Value submitted with the form when checked",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'on'"
+            }
+          ],
+          "default": "'on'",
           "values": [
             {
               "type": "string"
-            },
-            {
-              "type": "undefined"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "blurToggle",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "blurToggle() => Promise<void>",
+          "parameters": [],
+          "docs": "Removes focus from the toggle",
+          "docsTags": []
+        },
+        {
+          "name": "checkValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "checkValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Returns whether the toggle satisfies its validation constraints",
+          "docsTags": []
+        },
+        {
+          "name": "focusToggle",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "focusToggle() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the toggle",
+          "docsTags": []
+        },
+        {
+          "name": "getInputElement",
+          "returns": {
+            "type": "Promise<HTMLInputElement | undefined>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<HTMLInputElement | undefined>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLInputElement": {
+                "location": "global",
+                "id": "global::HTMLInputElement"
+              }
+            },
+            "return": "Promise<HTMLInputElement | undefined>"
+          },
+          "signature": "getInputElement() => Promise<HTMLInputElement | undefined>",
+          "parameters": [],
+          "docs": "Returns the native HTMLInputElement.\n\nPromise resolves when the element is ready and the input is available.",
+          "docsTags": []
+        },
+        {
+          "name": "reportValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "reportValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Reports validation errors to the user",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "lmvzChange",
-          "detail": "string",
+          "detail": "boolean",
           "bubbles": true,
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user selects a new option. Detail contains the new value.",
+          "docs": "Emitted when the toggle is switched. Event detail is the new checked state.",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [],
-      "slots": [
-        {
-          "name": "default",
-          "docs": "Native `<option>` or `<optgroup>` elements."
-        }
-      ],
+      "slots": [],
       "parts": [],
       "states": [],
       "dependents": [],