@lmvz-ds/components 0.26.0 → 0.27.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-09T08:16:24",
+  "timestamp": "2026-06-11T12:19:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -6773,6 +6773,399 @@
         ]
       }
     },
+    {
+      "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",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.26.0",
+  "version": "0.27.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -76,6 +76,14 @@
       "types": "./components/lmvz-snackbar.d.ts",
       "import": "./components/lmvz-snackbar.js"
     },
+    "./lmvz-tab": {
+      "types": "./components/lmvz-tab.d.ts",
+      "import": "./components/lmvz-tab.js"
+    },
+    "./lmvz-tabs": {
+      "types": "./components/lmvz-tabs.d.ts",
+      "import": "./components/lmvz-tabs.js"
+    },
     "./lmvz-checkbox": {
       "import": "./components/lmvz-checkbox.js",
       "types": "./components/lmvz-checkbox.d.ts"

package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts

@@ -35,5 +35,6 @@ export declare class LmvzCheckbox extends ReactiveControllerHost implements Aria
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
     private handleChange;
+    private retargetInnerClicks;
     render(): any;
 }

package/types/components/lmvz-header/lmvz-header.d.ts

@@ -1,7 +1,7 @@
 import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
-import { type ListKeyboardNavigationHost } from '../../utils/aria/list-keyboard-controller';
+import { type DirectionalFocusHost } from '../../utils/aria/list-keyboard-controller';
 import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
-export declare class LmvzHeader extends ReactiveControllerHost implements AriaValidationHost, ListKeyboardNavigationHost {
+export declare class LmvzHeader extends ReactiveControllerHost implements AriaValidationHost, DirectionalFocusHost {
     readonly el: HTMLElement;
     get validationEl(): HTMLElement;
     private primarySlot?;

package/types/components/lmvz-tab/lmvz-tab.d.ts

@@ -0,0 +1,11 @@
+export declare class LmvzTab {
+    readonly el: HTMLElement;
+    private mediaSlotEl?;
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+    vertical: boolean;
+    private readonly handleMediaSlotChange;
+    componentDidLoad(): void;
+    render(): any;
+}

package/types/components/lmvz-tabs/lmvz-tabs.d.ts

@@ -0,0 +1,43 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import { type DirectionalFocusHost } from '../../utils/aria/list-keyboard-controller';
+import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
+export declare class LmvzTabs extends ReactiveControllerHost implements DirectionalFocusHost {
+    readonly el: HTMLElement;
+    private readonly instanceId;
+    private tabSlotEl?;
+    private panelSlotEl?;
+    private focusController;
+    value: string;
+    orientation: 'horizontal' | 'vertical';
+    lmvzChange: EventEmitter<{
+        value: string;
+    }>;
+    private resolvedValue?;
+    constructor();
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleValueChange(newValue: string): void;
+    handleOrientationChange(): void;
+    activateTab(value: string): Promise<void>;
+    getTabElements(): Promise<HTMLElement[]>;
+    setTabPanelIds(pairs: Array<[string, string]>): Promise<void>;
+    private get slottedTabs();
+    private get slottedPanels();
+    private readonly handleTabSlotChange;
+    private readonly handlePanelSlotChange;
+    private readonly handleTabReady;
+    private updateIconTabsAttr;
+    private syncFocusTargets;
+    private syncOrientation;
+    private syncTabOrientation;
+    private wireAriaIds;
+    private applySelection;
+    private isTabDisabled;
+    private findTabByValue;
+    private findNearestEnabled;
+    private selectTab;
+    private readonly handleTabClick;
+    private readonly handleKeydown;
+    render(): any;
+}