@lmvz-ds/components 0.25.0 → 0.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.25.0",
+  "version": "0.27.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -72,6 +72,18 @@
       "types": "./components/lmvz-select.d.ts",
       "import": "./components/lmvz-select.js"
     },
+    "./lmvz-snackbar": {
+      "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/api/ds.constants.d.ts

@@ -4,7 +4,7 @@ export declare const sizes: readonly ["xs", "sm", "md", "lg"];
 export declare const textSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const inputTypes: readonly ["text", "email", "password", "tel", "url", "search", "number"];
 export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
-export declare const iconWeights: readonly ["thin", "medium", "bold", "filled"];
+export declare const iconWeights: readonly ["thin", "medium", "bold"];
 export declare const chipTypes: readonly ["active", "warning", "success", "error", "neutral"];
 export declare const chipSizes: readonly ["default", "small"];
 export declare namespace LmvzDS {
@@ -32,3 +32,11 @@ export declare namespace Input {
     type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 }
+export declare const snackbarStatuses: readonly ["success", "warning", "error"];
+export declare const snackbarPriorities: readonly ["low", "normal", "high"];
+export declare const snackbarDismissReasons: readonly ["timeout", "manual", "action", "overridden", "swallowed"];
+export declare namespace Snackbar {
+    type Status = (typeof snackbarStatuses)[number];
+    type Priority = (typeof snackbarPriorities)[number];
+    type DismissReason = (typeof snackbarDismissReasons)[number];
+}

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-snackbar/lmvz-snackbar.d.ts

@@ -0,0 +1,21 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { Snackbar } from '../../api';
+export declare class LmvzSnackbar {
+    el: HTMLElement;
+    animationClass: string;
+    status: Snackbar.Status;
+    protected onStatusChange(): void;
+    message: string;
+    duration?: number;
+    priority?: Snackbar.Priority;
+    actionLabel?: string;
+    lmvzClose: EventEmitter<{
+        reason: Snackbar.DismissReason;
+    }>;
+    connectedCallback(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private applyAriaLiveAttributes;
+    private readonly handleActionClick;
+    render(): any;
+}

package/types/components/lmvz-snackbar/public.d.ts

@@ -0,0 +1,2 @@
+export { SnackbarController } from './snackbar-controller';
+export type { SnackbarDismissReason, SnackbarHandle, SnackbarOptions, SnackbarPriority, SnackbarStatus } from './snackbar-controller';

package/types/components/lmvz-snackbar/snackbar-controller.d.ts

@@ -0,0 +1,32 @@
+import type { Snackbar } from '../../api';
+export type SnackbarStatus = Snackbar.Status;
+export type SnackbarPriority = Snackbar.Priority;
+export type SnackbarDismissReason = Snackbar.DismissReason;
+export type SnackbarOptions = {
+    message: string;
+    status?: SnackbarStatus;
+    duration?: number;
+    priority?: SnackbarPriority;
+    actionLabel?: string;
+    onAction?: () => void;
+};
+export type SnackbarHandle = {
+    readonly id: string;
+    dismiss: () => void;
+    readonly closed: Promise<{
+        reason: SnackbarDismissReason;
+    }>;
+};
+export declare class SnackbarController {
+    private hostEl?;
+    private active?;
+    private getHost;
+    private clearTimer;
+    private scheduleTimer;
+    private dismissActive;
+    private pauseTimer;
+    private resumeTimer;
+    private applyToHost;
+    open(options: SnackbarOptions): SnackbarHandle;
+    dismiss(id?: string): void;
+}

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;
+}

package/types/components.d.ts

@@ -526,6 +526,95 @@ export declare namespace Components {
          */
         "value"?: string;
     }
+    export interface LmvzSnackbar {
+        "actionLabel"?: string;
+        "duration"?: number;
+        "hide": () => Promise<void>;
+        /**
+         * @default ''
+         */
+        "message": string;
+        /**
+         * @default 'normal'
+         */
+        "priority"?: Snackbar.Priority;
+        "show": () => Promise<void>;
+        /**
+         * @default 'success'
+         */
+        "status": Snackbar.Status;
+    }
+    /**
+     * The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.
+     * Selection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,
+     * and roving tabindex are all owned by the parent `lmvz-tabs` component.
+     */
+    export interface LmvzTab {
+        /**
+         * Whether the tab is disabled. Disabled tabs are not activatable and are skipped by arrow-key navigation in `lmvz-tabs`.
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Whether this tab is currently selected. Set by the parent `lmvz-tabs` component — do not set manually.
+         * @default false
+         */
+        "selected": boolean;
+        /**
+         * Unique value that identifies this tab within its `lmvz-tabs` parent. The parent uses this to track the selected tab.
+         */
+        "value": string;
+        /**
+         * Vertical orientation context. Set by the parent `lmvz-tabs` when `orientation="vertical"` — do not set manually. When true the selection indicator moves to the inline-start edge.
+         * @default false
+         */
+        "vertical": boolean;
+    }
+    /**
+     * The semantics and state owner for the WAI-ARIA tabs pattern.
+     * `lmvz-tabs` owns:
+     * - `tablist` / `tab` / `tabpanel` ARIA semantics
+     * - Selected-value state and manual activation (`Enter`, `Space`, click)
+     * - Roving `tabindex` via `DirectionalFocusController`
+     * - Horizontal scroll overflow (horizontal mode only)
+     * - Disabled-tab skipping and nearest-enabled fallback
+     * - Child registration and panel linkage via `aria-controls` / `aria-labelledby`
+     * Panels are consumer-authored light-DOM elements. Associate each panel with
+     * its tab by adding an `id` attribute — either matching `lmvz-tab[panel]` or
+     * derived positionally when no explicit id is provided.
+     * @event lmvzChange - Fired when a tab is activated. Detail: `{ value: string }`.
+     * @example ```html
+     * <lmvz-tabs value="home">
+     *   <lmvz-tab value="home">Home</lmvz-tab>
+     *   <lmvz-tab value="settings" disabled>Settings</lmvz-tab>
+     *   <div slot="panels" id="panel-home" role="tabpanel">Home content</div>
+     *   <div slot="panels" id="panel-settings" role="tabpanel">Settings content</div>
+     * </lmvz-tabs>
+     * ```
+     */
+    export interface LmvzTabs {
+        /**
+         * Programmatically activate a tab by value. Disabled tabs are ignored; emits `lmvzChange` on change.
+         */
+        "activateTab": (value: string) => Promise<void>;
+        /**
+         * Returns all slotted `lmvz-tab` elements. Exposed for external orchestration.
+         */
+        "getTabElements": () => Promise<HTMLElement[]>;
+        /**
+         * Layout and keyboard-navigation orientation.
+         * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+         * Wires `aria-controls` on each tab and `aria-labelledby` on each panel using the provided ordered array of `[tabId, panelId]` pairs. Callers only need this for explicit control; `lmvz-tabs` wires positional pairs automatically on `slotchange`.
+         */
+        "setTabPanelIds": (pairs: Array<[string, string]>) => Promise<void>;
+        /**
+         * The `value` of the currently selected tab.
+         */
+        "value": string;
+    }
     /**
      * Toggle (switch) component. Wraps a native `<input type="checkbox" role="switch">` for full keyboard and form support.
      * @example ```html
@@ -597,7 +686,7 @@ export declare namespace Icon {
 
 declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 
-declare const iconWeights: readonly ["thin", "medium", "bold", "filled"];
+declare const iconWeights: readonly ["thin", "medium", "bold"];
 
 export declare namespace Input {
     export type Type = (typeof inputTypes)[number];
@@ -1111,6 +1200,86 @@ export declare namespace JSX {
          */
         "value"?: string;
     }
+    export interface LmvzSnackbar {
+        "actionLabel"?: string;
+        "duration"?: number;
+        /**
+         * @default ''
+         */
+        "message"?: string;
+        "onLmvzClose"?: (event: LmvzSnackbarCustomEvent<{ reason: Snackbar.DismissReason }>) => void;
+        /**
+         * @default 'normal'
+         */
+        "priority"?: Snackbar.Priority;
+        /**
+         * @default 'success'
+         */
+        "status"?: Snackbar.Status;
+    }
+    /**
+     * The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.
+     * Selection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,
+     * and roving tabindex are all owned by the parent `lmvz-tabs` component.
+     */
+    export interface LmvzTab {
+        /**
+         * Whether the tab is disabled. Disabled tabs are not activatable and are skipped by arrow-key navigation in `lmvz-tabs`.
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Whether this tab is currently selected. Set by the parent `lmvz-tabs` component — do not set manually.
+         * @default false
+         */
+        "selected"?: boolean;
+        /**
+         * Unique value that identifies this tab within its `lmvz-tabs` parent. The parent uses this to track the selected tab.
+         */
+        "value": string;
+        /**
+         * Vertical orientation context. Set by the parent `lmvz-tabs` when `orientation="vertical"` — do not set manually. When true the selection indicator moves to the inline-start edge.
+         * @default false
+         */
+        "vertical"?: boolean;
+    }
+    /**
+     * The semantics and state owner for the WAI-ARIA tabs pattern.
+     * `lmvz-tabs` owns:
+     * - `tablist` / `tab` / `tabpanel` ARIA semantics
+     * - Selected-value state and manual activation (`Enter`, `Space`, click)
+     * - Roving `tabindex` via `DirectionalFocusController`
+     * - Horizontal scroll overflow (horizontal mode only)
+     * - Disabled-tab skipping and nearest-enabled fallback
+     * - Child registration and panel linkage via `aria-controls` / `aria-labelledby`
+     * Panels are consumer-authored light-DOM elements. Associate each panel with
+     * its tab by adding an `id` attribute — either matching `lmvz-tab[panel]` or
+     * derived positionally when no explicit id is provided.
+     * @event lmvzChange - Fired when a tab is activated. Detail: `{ value: string }`.
+     * @example ```html
+     * <lmvz-tabs value="home">
+     *   <lmvz-tab value="home">Home</lmvz-tab>
+     *   <lmvz-tab value="settings" disabled>Settings</lmvz-tab>
+     *   <div slot="panels" id="panel-home" role="tabpanel">Home content</div>
+     *   <div slot="panels" id="panel-settings" role="tabpanel">Settings content</div>
+     * </lmvz-tabs>
+     * ```
+     */
+    export interface LmvzTabs {
+        /**
+         * Emitted when a tab is activated. Detail: `{ value: string }`.
+         */
+        "onLmvzChange"?: (event: LmvzTabsCustomEvent<{ value: string }>) => void;
+        /**
+         * Layout and keyboard-navigation orientation.
+         * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+         * The `value` of the currently selected tab.
+         */
+        "value": string;
+    }
     /**
      * Toggle (switch) component. Wraps a native `<input type="checkbox" role="switch">` for full keyboard and form support.
      * @example ```html
@@ -1258,6 +1427,23 @@ export declare namespace JSX {
         "required": boolean;
         "name": string;
     }
+    export interface LmvzSnackbarAttributes {
+        "status": Snackbar.Status;
+        "message": string;
+        "duration": number;
+        "priority": Snackbar.Priority;
+        "actionLabel": string;
+    }
+    export interface LmvzTabAttributes {
+        "value": string;
+        "disabled": boolean;
+        "selected": boolean;
+        "vertical": boolean;
+    }
+    export interface LmvzTabsAttributes {
+        "value": string;
+        "orientation": 'horizontal' | 'vertical';
+    }
     export interface LmvzToggleAttributes {
         "label": string;
         "checked": boolean;
@@ -1282,6 +1468,9 @@ export declare namespace JSX {
         "lmvz-modal": Omit<LmvzModal, keyof LmvzModalAttributes> & { [K in keyof LmvzModal & keyof LmvzModalAttributes]?: LmvzModal[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `attr:${K}`]?: LmvzModalAttributes[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `prop:${K}`]?: LmvzModal[K] };
         "lmvz-radio": Omit<LmvzRadio, keyof LmvzRadioAttributes> & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes]?: LmvzRadio[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `attr:${K}`]?: LmvzRadioAttributes[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `prop:${K}`]?: LmvzRadio[K] } & OneOf<"label", LmvzRadio["label"], LmvzRadioAttributes["label"]>;
         "lmvz-select": Omit<LmvzSelect, keyof LmvzSelectAttributes> & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes]?: LmvzSelect[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `attr:${K}`]?: LmvzSelectAttributes[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `prop:${K}`]?: LmvzSelect[K] } & OneOf<"label", LmvzSelect["label"], LmvzSelectAttributes["label"]>;
+        "lmvz-snackbar": Omit<LmvzSnackbar, keyof LmvzSnackbarAttributes> & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes]?: LmvzSnackbar[K] } & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes as `attr:${K}`]?: LmvzSnackbarAttributes[K] } & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes as `prop:${K}`]?: LmvzSnackbar[K] };
+        "lmvz-tab": Omit<LmvzTab, keyof LmvzTabAttributes> & { [K in keyof LmvzTab & keyof LmvzTabAttributes]?: LmvzTab[K] } & { [K in keyof LmvzTab & keyof LmvzTabAttributes as `attr:${K}`]?: LmvzTabAttributes[K] } & { [K in keyof LmvzTab & keyof LmvzTabAttributes as `prop:${K}`]?: LmvzTab[K] } & OneOf<"value", LmvzTab["value"], LmvzTabAttributes["value"]>;
+        "lmvz-tabs": Omit<LmvzTabs, keyof LmvzTabsAttributes> & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes]?: LmvzTabs[K] } & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes as `attr:${K}`]?: LmvzTabsAttributes[K] } & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes as `prop:${K}`]?: LmvzTabs[K] } & OneOf<"value", LmvzTabs["value"], LmvzTabsAttributes["value"]>;
         "lmvz-toggle": Omit<LmvzToggle, keyof LmvzToggleAttributes> & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes]?: LmvzToggle[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `attr:${K}`]?: LmvzToggleAttributes[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `prop:${K}`]?: LmvzToggle[K] } & OneOf<"label", LmvzToggle["label"], LmvzToggleAttributes["label"]>;
     }
 }
@@ -1336,6 +1525,16 @@ export declare interface LmvzSelectCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzSelectElement;
 }
 
+export declare interface LmvzSnackbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzSnackbarElement;
+}
+
+export declare interface LmvzTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzTabsElement;
+}
+
 export declare interface LmvzToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLmvzToggleElement;
@@ -1345,6 +1544,18 @@ declare const scaleValues: readonly ["small", "default", "large"];
 
 declare const sizes: readonly ["xs", "sm", "md", "lg"];
 
+export declare namespace Snackbar {
+    export type Status = (typeof snackbarStatuses)[number];
+    export type Priority = (typeof snackbarPriorities)[number];
+    export type DismissReason = (typeof snackbarDismissReasons)[number];
+}
+
+declare const snackbarDismissReasons: readonly ["timeout", "manual", "action", "overridden", "swallowed"];
+
+declare const snackbarPriorities: readonly ["low", "normal", "high"];
+
+declare const snackbarStatuses: readonly ["success", "warning", "error"];
+
 export declare type SVGString = string & Brand.Brand<'SVG'>;
 
 declare const variants: readonly ["primary", "secondary", "tertiary"];

package/types/index.d.ts

@@ -3,3 +3,4 @@ export type * from './components.d.ts';
 export { chipSizes, chipTypes, iconSizes, iconWeights, inputTypes, textSizes } from './api/ds.constants';
 export type { LmvzDS, Typography } from './api';
 export * from './utils/public';
+export * from './components/lmvz-snackbar/public';

package/types/utils/aria/list-keyboard-controller.d.ts

@@ -1,13 +1,36 @@
 import type { ReactiveController } from '../reactive-controller-host';
-export type ListKeyboardNavigationHost = {
+export type DirectionalFocusHost = {
     el: HTMLElement;
 };
-export declare class ListKeyboardNavigationController implements ReactiveController {
+export type DirectionalFocusOrientation = 'horizontal' | 'vertical' | 'both';
+export type DirectionalFocusControllerConfig = {
+    orientation?: DirectionalFocusOrientation;
+    enableHomeAndEnd?: boolean;
+    manageTabIndex?: boolean;
+    onFocusTargetChange?: (element: HTMLElement) => void;
+    isFocusableElement?: (element: HTMLElement) => boolean;
+};
+export declare class DirectionalFocusController implements ReactiveController {
     private readonly host;
     private elements;
-    constructor(host: ListKeyboardNavigationHost);
-    hostDidRender(): void;
+    private currentElement?;
+    private readonly config;
+    constructor(host: DirectionalFocusHost, config?: DirectionalFocusControllerConfig);
+    hostConnected(): void;
+    hostDisconnected(): void;
     updateElements(elements: Element[]): void;
+    setCurrentElement(element: Element | undefined | null): void;
     private handleKeydown;
-    private getNextFocusableElement;
+    private getFocusIntent;
+    private getManagedActiveElement;
+    private getTargetElement;
+    private findFocusableFromIndex;
+    private syncManagedFocusTarget;
+    private selectManagedElement;
+    private updateTabIndexes;
+    private applyFocusTarget;
+    private canMoveFocusTo;
 }
+export type ListKeyboardNavigationHost = DirectionalFocusHost;
+export type ListKeyboardNavigationControllerConfig = DirectionalFocusControllerConfig;
+export { DirectionalFocusController as ListKeyboardNavigationController };