@lmvz-ds/components 0.25.0 → 0.27.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-02T16:23:34",
+  "timestamp": "2026-06-11T12:19:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -452,12 +452,16 @@
       ],
       "states": [],
       "dependents": [
-        "lmvz-modal"
+        "lmvz-modal",
+        "lmvz-snackbar"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "lmvz-modal": [
           "lmvz-button"
+        ],
+        "lmvz-snackbar": [
+          "lmvz-button"
         ]
       }
     },
@@ -1512,10 +1516,10 @@
         },
         {
           "name": "weight",
-          "type": "\"bold\" | \"filled\" | \"medium\" | \"thin\" | undefined",
+          "type": "\"bold\" | \"medium\" | \"thin\" | undefined",
           "complexType": {
             "original": "Icon.IconWeight",
-            "resolved": "\"bold\" | \"filled\" | \"medium\" | \"thin\" | undefined",
+            "resolved": "\"bold\" | \"medium\" | \"thin\" | undefined",
             "references": {
               "Icon": {
                 "location": "import",
@@ -1541,10 +1545,6 @@
               "value": "bold",
               "type": "string"
             },
-            {
-              "value": "filled",
-              "type": "string"
-            },
             {
               "value": "medium",
               "type": "string"
@@ -1582,12 +1582,16 @@
       "parts": [],
       "states": [],
       "dependents": [
-        "lmvz-modal"
+        "lmvz-modal",
+        "lmvz-snackbar"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "lmvz-modal": [
           "lmvz-icon"
+        ],
+        "lmvz-snackbar": [
+          "lmvz-icon"
         ]
       }
     },
@@ -6500,93 +6504,56 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/lmvz-toggle/lmvz-toggle.tsx",
-      "encapsulation": "scoped",
-      "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-toggle label=\"Enable notifications\" name=\"notifications\" required></lmvz-toggle>\n```"
-        }
-      ],
+      "filePath": "src/components/lmvz-snackbar/lmvz-snackbar.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-snackbar",
+      "readme": "# lmvz-snackbar\n\nBrief notification displayed at the bottom center of the screen with optional auto-dismiss. Use snackbars to communicate non-blocking confirmations, warnings, or errors to the user.\n\n## Status Semantics\n\nThe snackbar's `status` prop controls both the visual appearance and accessibility semantics:\n\n| Status | ARIA Role | aria-live | Semantic Meaning |\n|--------|-----------|-----------|------------------|\n| `success` | `status` | `polite` | Non-critical confirmation or successful action. Announced when convenient. |\n| `warning` | `status` | `polite` | Non-blocking warning that the user should be aware of. Announced when convenient. |\n| `error` | `alert` | `assertive` | Critical error requiring immediate attention. Announced with interruption. |\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `status` | `'success' \\| 'warning' \\| 'error'` | `'success'` | Status variant controlling color, icon, and ARIA role/aria-live. |\n| `message` | `string` | `''` | Message text displayed in the snackbar. |\n| `duration` | `number \\| undefined` | `undefined` | Auto-dismiss timeout in milliseconds. `undefined` uses the per-status default (5000 ms for success/warning, 8000 ms for error). Set to `0` to disable auto-dismiss and require manual dismissal. |\n| `priority` | `'low' \\| 'normal' \\| 'high'` | `'normal'` | Priority level. When a snackbar is already visible, an incoming higher-priority call overrides it; lower-priority calls are silently swallowed with no queue. |\n| `showLeadingIcon` | `boolean` | `true` | Show the status-specific leading icon (info for success, warning triangle for warning, exclamation for error). |\n| `actionLabel` | `string \\| undefined` | `undefined` | Optional action button label. When set, an action button is rendered. |\n\n## Methods\n\n### `show() => Promise<void>`\n\nTriggers the entry animation. Used internally by the controller; may be called directly when using the snackbar as a declarative component.\n\n### `hide() => Promise<void>`\n\nTriggers the exit animation and waits for completion before resolving. The animation duration is 300 ms.\n\n## Events\n\n### `lmvzClose`\n\nFired when the snackbar is dismissed. The event detail includes the dismiss reason:\n\n```typescript\ntype lmvzClose = CustomEvent<{ reason: 'timeout' | 'manual' | 'action' | 'overridden' | 'swallowed' }>;\n```\n\n**Reason meanings:**\n- `'timeout'` — Auto-dismiss timer elapsed.\n- `'manual'` — Dismissed by calling the controller's `dismiss()` or the component's `hide()` method.\n- `'action'` — User clicked the action button.\n- `'overridden'` — A higher-priority snackbar call displaced this one.\n- `'swallowed'` — A lower-priority call was ignored because a higher-priority snackbar was already visible (controller only).\n\n## ARIA & Accessibility\n\n- The snackbar host element has a dynamic `role` that changes with the `status` prop: `role=\"status\"` for success/warning, `role=\"alert\"` for error.\n- `aria-live` is set to `\"polite\"` for success/warning (non-interrupting announcements) and `\"assertive\"` for error (interrupting announcements).\n- The leading status icon is marked `aria-hidden=\"true\"` because its information is redundant with the status prop and role semantics.\n- The optional action button uses its `actionLabel` text as its accessible name (via native button semantics).\n- The snackbar does not receive focus on appearance. Keyboard users can tab to the action button if present.\n\n## Motion & Reduced Motion\n\nThe snackbar slides up from the bottom with a fade-in on entry, and slides down with a fade-out on exit. Both animations use a duration of 200 ms.\n\nWhen `prefers-reduced-motion: reduce` is active, spatial motion (slide) is removed and replaced with a brief opacity-only fade (80 ms), providing a perceptual cue without distracting motion.\n\n## Color Contrast\n\nThe error variant (`status=\"error\"`) achieves a color contrast ratio of 4.5:1 (WCAG AA) between the error surface color and text. The success and warning variants also meet WCAG AA contrast requirements.\n\n## Examples\n\n### Imperative Usage with Controller\n\nMost applications use the snackbar via the imperative `SnackbarController` API. The controller manages a singleton host element and handles priority-based override logic automatically:\n\n```typescript\nimport { SnackbarController } from '@lmvz-ds/components';\n\n// Show a success notification\nSnackbarController.open({\n  message: 'Your changes have been saved.',\n  status: 'success',\n  duration: 5000, // auto-dismiss after 5 seconds\n});\n\n// Show an error with an action\nconst handle = SnackbarController.open({\n  message: 'Upload failed.',\n  status: 'error',\n  duration: 8000,\n  actionLabel: 'Retry',\n  onAction: () => {\n    console.log('User clicked Retry');\n    retryUpload();\n  },\n});\n\n// Wait for dismissal (for any reason)\nhandle.closed.then(({ reason }) => {\n  console.log(`Closed due to: ${reason}`);\n});\n\n// Manually dismiss\nhandle.dismiss();\n```\n\n### Priority Override\n\nThe controller enforces a single visible snackbar. Higher-priority calls override lower-priority ones:\n\n```typescript\n// High-priority error appears\nSnackbarController.open({\n  message: 'Critical error',\n  status: 'error',\n  priority: 'high',\n});\n\n// Low-priority confirmation is silently swallowed\nconst handle = SnackbarController.open({\n  message: 'Saved.',\n  status: 'success',\n  priority: 'low',\n});\n\nhandle.closed.then(({ reason }) => {\n  console.log(reason); // 'swallowed'\n});\n```\n\n### Declarative Usage\n\nFor in-place rendering (e.g., in tests or special layouts), the snackbar can be declared in HTML and controlled via `show()`/`hide()` methods:\n\n```html\n<lmvz-snackbar\n  message=\"Operation complete\"\n  status=\"success\"\n  show-leading-icon=\"true\"\n></lmvz-snackbar>\n```\n\n```typescript\nconst snackbar = document.querySelector('lmvz-snackbar');\nawait snackbar.show();\n// ... later\nawait snackbar.hide();\n```\n",
+      "docs": "Brief notification displayed at the bottom center of the screen with optional auto-dismiss. Use snackbars to communicate non-blocking confirmations, warnings, or errors to the user.",
+      "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "checked",
-          "type": "boolean",
+          "name": "actionLabel",
+          "type": "string | undefined",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
+            "original": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
           "mutable": true,
-          "attr": "checked",
-          "reflectToAttr": true,
-          "docs": "Whether the toggle is checked",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
+          "attr": "action-label",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
           "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 toggle is disabled",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
+              "type": "string"
+            },
             {
-              "type": "boolean"
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "form",
-          "type": "string | undefined",
+          "name": "duration",
+          "type": "number | undefined",
           "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
+            "original": "number",
+            "resolved": "number | undefined",
             "references": {}
           },
-          "mutable": false,
-          "attr": "form",
+          "mutable": true,
+          "attr": "duration",
           "reflectToAttr": false,
-          "docs": "Form id to associate with",
+          "docs": "",
           "docsTags": [],
           "values": [
             {
-              "type": "string"
+              "type": "number"
             },
             {
               "type": "undefined"
@@ -6598,43 +6565,71 @@
           "setter": false
         },
         {
-          "name": "label",
+          "name": "message",
           "type": "string",
           "complexType": {
             "original": "string",
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
-          "attr": "label",
+          "mutable": true,
+          "attr": "message",
           "reflectToAttr": false,
-          "docs": "Label text for the toggle",
-          "docsTags": [],
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
           "values": [
             {
               "type": "string"
             }
           ],
           "optional": false,
-          "required": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "name",
-          "type": "string | undefined",
+          "name": "priority",
+          "type": "\"high\" | \"low\" | \"normal\" | undefined",
           "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
+            "original": "Snackbar.Priority",
+            "resolved": "\"high\" | \"low\" | \"normal\" | undefined",
+            "references": {
+              "Snackbar": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Snackbar",
+                "referenceLocation": "Snackbar"
+              }
+            }
           },
-          "mutable": false,
-          "attr": "name",
+          "mutable": true,
+          "attr": "priority",
           "reflectToAttr": false,
-          "docs": "Name attribute for form integration",
-          "docsTags": [],
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'normal'"
+            }
+          ],
+          "default": "'normal'",
           "values": [
             {
+              "value": "high",
+              "type": "string"
+            },
+            {
+              "value": "low",
+              "type": "string"
+            },
+            {
+              "value": "normal",
               "type": "string"
             },
             {
@@ -6647,55 +6642,42 @@
           "setter": false
         },
         {
-          "name": "required",
-          "type": "boolean",
+          "name": "status",
+          "type": "\"error\" | \"success\" | \"warning\"",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
+            "original": "Snackbar.Status",
+            "resolved": "\"error\" | \"success\" | \"warning\"",
+            "references": {
+              "Snackbar": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Snackbar",
+                "referenceLocation": "Snackbar"
+              }
+            }
           },
-          "mutable": false,
-          "attr": "required",
+          "mutable": true,
+          "attr": "status",
           "reflectToAttr": true,
-          "docs": "Whether the toggle is required",
+          "docs": "",
           "docsTags": [
             {
               "name": "default",
-              "text": "false"
+              "text": "'success'"
             }
           ],
-          "default": "false",
+          "default": "'success'",
           "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": "Value submitted with the form when checked",
-          "docsTags": [
+              "value": "error",
+              "type": "string"
+            },
             {
-              "name": "default",
-              "text": "'on'"
-            }
-          ],
-          "default": "'on'",
-          "values": [
+              "value": "success",
+              "type": "string"
+            },
             {
+              "value": "warning",
               "type": "string"
             }
           ],
@@ -6707,7 +6689,7 @@
       ],
       "methods": [
         {
-          "name": "blurToggle",
+          "name": "hide",
           "returns": {
             "type": "Promise<void>",
             "docs": ""
@@ -6723,35 +6705,13 @@
             },
             "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>",
+          "signature": "hide() => Promise<void>",
           "parameters": [],
-          "docs": "Returns whether the toggle satisfies its validation constraints",
+          "docs": "",
           "docsTags": []
         },
         {
-          "name": "focusToggle",
+          "name": "show",
           "returns": {
             "type": "Promise<void>",
             "docs": ""
@@ -6767,50 +6727,757 @@
             },
             "return": "Promise<void>"
           },
-          "signature": "focusToggle() => Promise<void>",
+          "signature": "show() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the toggle",
+          "docs": "",
           "docsTags": []
-        },
+        }
+      ],
+      "events": [
         {
-          "name": "getInputElement",
-          "returns": {
-            "type": "Promise<HTMLInputElement | undefined>",
-            "docs": ""
-          },
+          "event": "lmvzClose",
+          "detail": "{ reason: \"timeout\" | \"manual\" | \"action\" | \"overridden\" | \"swallowed\"; }",
+          "bubbles": true,
           "complexType": {
-            "signature": "() => Promise<HTMLInputElement | undefined>",
-            "parameters": [],
+            "original": "{ reason: Snackbar.DismissReason }",
+            "resolved": "{ reason: \"timeout\" | \"manual\" | \"action\" | \"overridden\" | \"swallowed\"; }",
             "references": {
-              "Promise": {
-                "location": "global",
-                "id": "global::Promise"
-              },
-              "HTMLInputElement": {
-                "location": "global",
-                "id": "global::HTMLInputElement"
+              "Snackbar": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Snackbar",
+                "referenceLocation": "Snackbar"
               }
-            },
-            "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.",
+          "cancelable": false,
+          "composed": true,
+          "docs": "",
           "docsTags": []
-        },
-        {
-          "name": "reportValidity",
-          "returns": {
-            "type": "Promise<boolean>",
-            "docs": ""
-          },
-          "complexType": {
-            "signature": "() => Promise<boolean>",
-            "parameters": [],
-            "references": {
-              "Promise": {
-                "location": "global",
-                "id": "global::Promise"
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "lmvz-icon",
+        "lmvz-button"
+      ],
+      "dependencyGraph": {
+        "lmvz-snackbar": [
+          "lmvz-icon",
+          "lmvz-button"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/lmvz-tab/lmvz-tab.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-tab",
+      "readme": "# lmvz-tab\n\nThe `lmvz-tab` is the individual tab trigger primitive. It must be used as a direct child of `lmvz-tabs`, which owns selection state, ARIA semantics (`tablist`/`tab`/`tabpanel`), keyboard management, and roving `tabindex`.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n</lmvz-tabs>\n```\n\n### With media slot (icon above label)\n\n```html\n<lmvz-tab value=\"home\">\n  <lmvz-icon slot=\"media\" name=\"home\" aria-hidden=\"true\"></lmvz-icon>\n  Home\n</lmvz-tab>\n```\n\n> **Icon-only tabs**: When no visible label is provided, supply an `aria-label` on the `lmvz-tab` element itself to maintain accessibility.\n\n## Visual states\n\n| State    | Description                                                                 |\n| -------- | --------------------------------------------------------------------------- |\n| Default  | Neutral interactive surface; hidden selection indicator.                    |\n| Selected | Active-tinted container; active-colored text; full-width 4 px gradient bar at bottom (horizontal) or inline-start (vertical). |\n| Disabled | Reduced opacity; non-interactive. Set by consumer via `disabled` attribute. |\n| Focus    | DS-style outline ring, distinct from the selection indicator.               |\n\n## Orientation\n\nThe `vertical` attribute is set automatically by `lmvz-tabs` when `orientation=\"vertical\"`. When vertical, the selection indicator bar moves from the bottom edge to the inline-start edge of the button.\n",
+      "docs": "The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.\n\nSelection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,\nand roving tabindex are all owned by the parent `lmvz-tabs` component.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Label text or arbitrary inline content for the tab."
+        },
+        {
+          "name": "slot",
+          "text": "media   - Optional icon or image placed above the label in the tab stack."
+        },
+        {
+          "name": "part",
+          "text": "button - The inner `<button role=\"tab\">` element."
+        },
+        {
+          "name": "part",
+          "text": "indicator - The selection indicator bar."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether the tab is disabled.\nDisabled tabs are not activatable and are skipped by arrow-key navigation in `lmvz-tabs`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "Whether this tab is currently selected.\nSet by the parent `lmvz-tabs` component — do not set manually.",
+          "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": true,
+          "docs": "Unique value that identifies this tab within its `lmvz-tabs` parent.\nThe parent uses this to track the selected tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "vertical",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "vertical",
+          "reflectToAttr": true,
+          "docs": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` — do not set manually.\nWhen true the selection indicator moves to the inline-start edge.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Label text or arbitrary inline content for the tab."
+        },
+        {
+          "name": "media",
+          "docs": "Optional icon or image placed above the label in the tab stack."
+        }
+      ],
+      "parts": [
+        {
+          "name": "button",
+          "docs": "The inner `<button role=\"tab\">` element."
+        },
+        {
+          "name": "indicator",
+          "docs": "The selection indicator bar."
+        }
+      ],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/lmvz-tabs/lmvz-tabs.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-tabs",
+      "readme": "# lmvz-tabs\n\n`lmvz-tabs` is the WAI-ARIA Tabs pattern owner. It renders a `tablist` containing `lmvz-tab` trigger children and links them to consumer-authored panel elements via `aria-controls` / `aria-labelledby`. Selection state, keyboard management (roving `tabindex`, directional focus, manual activation), disabled-tab skipping, and overflow behaviour are all owned here.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\" id=\"my-tabs\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-home\">Home content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-profile\" hidden>Profile content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-settings\" hidden>Settings content</div>\n</lmvz-tabs>\n```\n\n### Panels — slotted content model\n\nPanels are **consumer-authored** light-DOM elements placed in the `panels` slot. The component does **not** own or render a `lmvz-tab-panel` primitive — consumers supply any element they like (a `<div>`, a custom element, a route outlet, …).\n\n`lmvz-tabs` automatically pairs each panel with the corresponding tab by position:\n- It sets `aria-controls=\"<panelId>\"` on each `lmvz-tab` button.\n- It sets `aria-labelledby=\"<tabId>\"` on each panel element.\n\nIf you need an explicit mapping instead of positional pairing, call the `setTabPanelIds` method with an ordered array of `[tabId, panelId]` tuples.\n\nPanel **visibility** (the `hidden` attribute) is the consumer's responsibility. Listen to the `lmvzChange` event and toggle the relevant panel.\n\n### Reacting to tab changes\n\n```ts\nconst tabs = document.querySelector('lmvz-tabs');\n\ntabs.addEventListener('lmvzChange', (event) => {\n  const { value } = event.detail; // the newly-activated tab value\n  // show/hide panels as appropriate\n});\n```\n\n### Vertical orientation\n\n```html\n<lmvz-tabs value=\"home\" orientation=\"vertical\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <div slot=\"panels\" role=\"tabpanel\">Home content</div>\n  <div slot=\"panels\" role=\"tabpanel\" hidden>Profile content</div>\n</lmvz-tabs>\n```\n\nWhen `orientation=\"vertical\"` the tab list stacks vertically, arrow navigation switches to up/down, and the selection indicator moves to the inline-start edge of each tab trigger.\n\n## Keyboard interaction\n\n| Key                   | Behaviour                                                |\n| --------------------- | -------------------------------------------------------- |\n| `←` / `→` (horizontal) | Move focus to previous / next enabled tab.              |\n| `↑` / `↓` (vertical)   | Move focus to previous / next enabled tab.              |\n| `Home`                | Move focus to the first enabled tab.                     |\n| `End`                 | Move focus to the last enabled tab.                      |\n| `Enter` / `Space`     | Activate the currently focused tab (manual activation).  |\n| `Tab`                 | Leave the tab list; focus moves to the active panel.     |\n\nDisabled tabs are skipped during arrow-key navigation and cannot be activated.\n\n## Disabled-tab fallback\n\nWhen the selected tab becomes disabled at runtime, `lmvz-tabs` automatically activates the nearest enabled tab (preferring the next sibling, then the previous). If no enabled tab exists the selection value is left unchanged.\n",
+      "docs": "The semantics and state owner for the WAI-ARIA tabs pattern.\n\n`lmvz-tabs` owns:\n- `tablist` / `tab` / `tabpanel` ARIA semantics\n- Selected-value state and manual activation (`Enter`, `Space`, click)\n- Roving `tabindex` via `DirectionalFocusController`\n- Horizontal scroll overflow (horizontal mode only)\n- Disabled-tab skipping and nearest-enabled fallback\n- Child registration and panel linkage via `aria-controls` / `aria-labelledby`\n\nPanels are consumer-authored light-DOM elements. Associate each panel with\nits tab by adding an `id` attribute — either matching `lmvz-tab[panel]` or\nderived positionally when no explicit id is provided.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default   - `lmvz-tab` trigger elements."
+        },
+        {
+          "name": "slot",
+          "text": "panels    - Arbitrary panel elements."
+        },
+        {
+          "name": "part",
+          "text": "panels-container  - The container wrapping the slotted panels."
+        },
+        {
+          "name": "event",
+          "text": "lmvzChange - Fired when a tab is activated. Detail: `{ value: string }`."
+        },
+        {
+          "name": "example",
+          "text": "```html\n<lmvz-tabs value=\"home\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n\n  <div slot=\"panels\" id=\"panel-home\" role=\"tabpanel\">Home content</div>\n  <div slot=\"panels\" id=\"panel-settings\" role=\"tabpanel\">Settings content</div>\n</lmvz-tabs>\n```"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "complexType": {
+            "original": "'horizontal' | 'vertical'",
+            "resolved": "\"horizontal\" | \"vertical\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "orientation",
+          "reflectToAttr": true,
+          "docs": "Layout and keyboard-navigation orientation.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'horizontal'"
+            }
+          ],
+          "default": "'horizontal'",
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "The `value` of the currently selected tab.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "activateTab",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(value: string) => Promise<void>",
+            "parameters": [
+              {
+                "name": "value",
+                "type": "string",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "activateTab(value: string) => Promise<void>",
+          "parameters": [
+            {
+              "name": "value",
+              "type": "string",
+              "docs": ""
+            }
+          ],
+          "docs": "Programmatically activate a tab by value.\nDisabled tabs are ignored; emits `lmvzChange` on change.",
+          "docsTags": []
+        },
+        {
+          "name": "getTabElements",
+          "returns": {
+            "type": "Promise<HTMLElement[]>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<HTMLElement[]>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            },
+            "return": "Promise<HTMLElement[]>"
+          },
+          "signature": "getTabElements() => Promise<HTMLElement[]>",
+          "parameters": [],
+          "docs": "Returns all slotted `lmvz-tab` elements.\nExposed for external orchestration.",
+          "docsTags": []
+        },
+        {
+          "name": "setTabPanelIds",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(pairs: Array<[string, string]>) => Promise<void>",
+            "parameters": [
+              {
+                "name": "pairs",
+                "type": "[string, string][]",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "Array": {
+                "location": "global",
+                "id": "global::Array"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "setTabPanelIds(pairs: Array<[string, string]>) => Promise<void>",
+          "parameters": [
+            {
+              "name": "pairs",
+              "type": "[string, string][]",
+              "docs": ""
+            }
+          ],
+          "docs": "Wires `aria-controls` on each tab and `aria-labelledby` on each panel\nusing the provided ordered array of `[tabId, panelId]` pairs.\nCallers only need this for explicit control; `lmvz-tabs` wires positional\npairs automatically on `slotchange`.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "lmvzChange",
+          "detail": "{ value: string; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ value: string }",
+            "resolved": "{ value: string; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a tab is activated.\nDetail: `{ value: string }`.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "`lmvz-tab` trigger elements."
+        },
+        {
+          "name": "panels",
+          "docs": "Arbitrary panel elements."
+        }
+      ],
+      "parts": [
+        {
+          "name": "panels-container",
+          "docs": "The container wrapping the slotted panels."
+        }
+      ],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/lmvz-toggle/lmvz-toggle.tsx",
+      "encapsulation": "scoped",
+      "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-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",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether the toggle is disabled",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "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",
+          "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 toggle",
+          "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 integration",
+          "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 toggle 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": "Value submitted with the form when checked",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'on'"
+            }
+          ],
+          "default": "'on'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "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>"
@@ -6877,6 +7544,11 @@
       "declaration": "any",
       "docstring": "",
       "path": "src/api/index.d.ts"
+    },
+    "src/api/index.d.ts::Snackbar": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.d.ts"
     }
   }
 }