@lmvz-ds/components 0.19.0 → 0.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.19.0",
+  "version": "0.21.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -67,6 +67,14 @@
     "./lmvz-select": {
       "types": "./components/lmvz-select.d.ts",
       "import": "./components/lmvz-select.js"
+    },
+    "./lmvz-checkbox": {
+      "import": "./components/lmvz-checkbox.js",
+      "types": "./components/lmvz-checkbox.d.ts"
+    },
+    "./lmvz-toggle": {
+      "types": "./components/lmvz-toggle.d.ts",
+      "import": "./components/lmvz-toggle.js"
     }
   },
   "main": "./index.cjs.js",

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

@@ -0,0 +1,39 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
+import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
+export declare class LmvzCheckbox extends ReactiveControllerHost implements AriaValidationHost {
+    readonly el: HTMLElement;
+    get validationEl(): HTMLElement;
+    internals: ElementInternals;
+    private nativeInput;
+    private checkboxId;
+    private initialChecked;
+    private get helperId();
+    private get errorId();
+    private get ariaDescribedBy();
+    label: string;
+    checked: boolean;
+    value: string;
+    name?: string;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    form?: string;
+    autofocus: boolean;
+    private checkedState;
+    protected handleCheckedChange(val: boolean): void;
+    lmvzChange: EventEmitter<boolean>;
+    focusInput(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    constructor();
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData): void;
+    private handleChange;
+    render(): any;
+}

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

@@ -0,0 +1,31 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
+import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
+export declare class LmvzToggle extends ReactiveControllerHost implements AriaValidationHost {
+    readonly el: HTMLElement;
+    get validationEl(): HTMLElement;
+    internals: ElementInternals;
+    private nativeInputElement?;
+    private toggleId;
+    lmvzChange: EventEmitter<boolean>;
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    name?: string;
+    value: string;
+    form?: string;
+    constructor();
+    formAssociatedCallback(_form: HTMLFormElement | undefined): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    handleCheckedChange(checked: boolean): void;
+    handleDisabledChange(disabled: boolean): void;
+    focusToggle(): Promise<void>;
+    blurToggle(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getInputElement(): Promise<HTMLInputElement | undefined>;
+    private handleChange;
+    render(): any;
+}

package/types/components.d.ts

@@ -67,6 +67,76 @@ export declare namespace Components {
          */
         "primaryActionLabel": string;
     }
+    /**
+     * Checkbox component with form association, ARIA validation, and accessible label support.
+     * @example ```html
+     * <lmvz-checkbox label="Accept terms" name="terms" required></lmvz-checkbox>
+     * ```
+     */
+    export interface LmvzCheckbox {
+        /**
+         * Whether the checkbox should autofocus.
+         * @default false
+         */
+        "autofocus": boolean;
+        /**
+         * Returns whether the checkbox satisfies its validation constraints.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+         * Whether the checkbox is checked.
+         * @default false
+         */
+        "checked": boolean;
+        /**
+         * Whether the checkbox is disabled.
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Whether the checkbox is in an error state.
+         * @default false
+         */
+        "error": boolean;
+        /**
+         * Error message displayed when error is true. Required when error=true.
+         */
+        "errorMessage"?: string;
+        /**
+         * Sets focus on the native checkbox input.
+         */
+        "focusInput": () => Promise<void>;
+        /**
+         * Form id to associate with (for out-of-form usage).
+         */
+        "form"?: string;
+        /**
+         * Helper / description text displayed below the label.
+         */
+        "helperText"?: string;
+        /**
+         * Label text for the checkbox. Required for accessibility.
+         */
+        "label": string;
+        /**
+         * Name attribute for form submission via ElementInternals.
+         */
+        "name"?: string;
+        /**
+         * Reports validation errors to the user.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+         * Whether the checkbox is required.
+         * @default false
+         */
+        "required": boolean;
+        /**
+         * Form submission value when checked.
+         * @default 'on'
+         */
+        "value": string;
+    }
     /**
      * The chip displays a compact semantic status as a non-interactive UI element.
      */
@@ -337,6 +407,66 @@ export declare namespace Components {
          */
         "value"?: string;
     }
+    /**
+     * Toggle (switch) component. Wraps a native `<input type="checkbox" role="switch">` for full keyboard and form support.
+     * @example ```html
+     * <lmvz-toggle label="Enable notifications" name="notifications" required></lmvz-toggle>
+     * ```
+     */
+    export interface LmvzToggle {
+        /**
+         * Removes focus from the toggle
+         */
+        "blurToggle": () => Promise<void>;
+        /**
+         * Returns whether the toggle satisfies its validation constraints
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+         * Whether the toggle is checked
+         * @default false
+         */
+        "checked": boolean;
+        /**
+         * Whether the toggle is disabled
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Sets focus on the toggle
+         */
+        "focusToggle": () => Promise<void>;
+        /**
+         * Form id to associate with
+         */
+        "form"?: string;
+        /**
+         * Returns the native HTMLInputElement.  Promise resolves when the element is ready and the input is available.
+         */
+        "getInputElement": () => Promise<HTMLInputElement | undefined>;
+        /**
+         * Label text for the toggle
+         */
+        "label": string;
+        /**
+         * Name attribute for form integration
+         */
+        "name"?: string;
+        /**
+         * Reports validation errors to the user
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+         * Whether the toggle is required
+         * @default false
+         */
+        "required": boolean;
+        /**
+         * Value submitted with the form when checked
+         * @default 'on'
+         */
+        "value": string;
+    }
 }
 
 export declare type FormRef = string | HTMLFormElement | undefined;
@@ -423,6 +553,68 @@ export declare namespace JSX {
          */
         "primaryActionLabel"?: string;
     }
+    /**
+     * Checkbox component with form association, ARIA validation, and accessible label support.
+     * @example ```html
+     * <lmvz-checkbox label="Accept terms" name="terms" required></lmvz-checkbox>
+     * ```
+     */
+    export interface LmvzCheckbox {
+        /**
+         * Whether the checkbox should autofocus.
+         * @default false
+         */
+        "autofocus"?: boolean;
+        /**
+         * Whether the checkbox is checked.
+         * @default false
+         */
+        "checked"?: boolean;
+        /**
+         * Whether the checkbox is disabled.
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Whether the checkbox is in an error state.
+         * @default false
+         */
+        "error"?: boolean;
+        /**
+         * Error message displayed when error is true. Required when error=true.
+         */
+        "errorMessage"?: string;
+        /**
+         * Form id to associate with (for out-of-form usage).
+         */
+        "form"?: string;
+        /**
+         * Helper / description text displayed below the label.
+         */
+        "helperText"?: string;
+        /**
+         * Label text for the checkbox. Required for accessibility.
+         */
+        "label": string;
+        /**
+         * Name attribute for form submission via ElementInternals.
+         */
+        "name"?: string;
+        /**
+         * Emitted whenever the checkbox checked state changes. Event detail contains the new checked boolean value.
+         */
+        "onLmvzChange"?: (event: LmvzCheckboxCustomEvent<boolean>) => void;
+        /**
+         * Whether the checkbox is required.
+         * @default false
+         */
+        "required"?: boolean;
+        /**
+         * Form submission value when checked.
+         * @default 'on'
+         */
+        "value"?: string;
+    }
     /**
      * The chip displays a compact semantic status as a non-interactive UI element.
      */
@@ -677,6 +869,50 @@ export declare namespace JSX {
          */
         "value"?: string;
     }
+    /**
+     * Toggle (switch) component. Wraps a native `<input type="checkbox" role="switch">` for full keyboard and form support.
+     * @example ```html
+     * <lmvz-toggle label="Enable notifications" name="notifications" required></lmvz-toggle>
+     * ```
+     */
+    export interface LmvzToggle {
+        /**
+         * Whether the toggle is checked
+         * @default false
+         */
+        "checked"?: boolean;
+        /**
+         * Whether the toggle is disabled
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Form id to associate with
+         */
+        "form"?: string;
+        /**
+         * Label text for the toggle
+         */
+        "label": string;
+        /**
+         * Name attribute for form integration
+         */
+        "name"?: string;
+        /**
+         * Emitted when the toggle is switched. Event detail is the new checked state.
+         */
+        "onLmvzChange"?: (event: LmvzToggleCustomEvent<boolean>) => void;
+        /**
+         * Whether the toggle is required
+         * @default false
+         */
+        "required"?: boolean;
+        /**
+         * Value submitted with the form when checked
+         * @default 'on'
+         */
+        "value"?: string;
+    }
 
     export interface LmvzButtonAttributes {
         "ti": number;
@@ -692,6 +928,19 @@ export declare namespace JSX {
         "description": string;
         "primaryActionLabel": string;
     }
+    export interface LmvzCheckboxAttributes {
+        "label": string;
+        "checked": boolean;
+        "value": string;
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "error": boolean;
+        "errorMessage": string;
+        "helperText": string;
+        "form": string;
+        "autofocus": boolean;
+    }
     export interface LmvzChipAttributes {
         "type": Chip.Type;
         "size": Chip.Size;
@@ -745,17 +994,28 @@ export declare namespace JSX {
         "required": boolean;
         "name": string;
     }
+    export interface LmvzToggleAttributes {
+        "label": string;
+        "checked": boolean;
+        "disabled": boolean;
+        "required": boolean;
+        "name": string;
+        "value": string;
+        "form": string;
+    }
 
     export interface IntrinsicElements {
         "lmvz-action": LmvzAction;
         "lmvz-button": Omit<LmvzButton, keyof LmvzButtonAttributes> & { [K in keyof LmvzButton & keyof LmvzButtonAttributes]?: LmvzButton[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `attr:${K}`]?: LmvzButtonAttributes[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `prop:${K}`]?: LmvzButton[K] };
         "lmvz-card": Omit<LmvzCard, keyof LmvzCardAttributes> & { [K in keyof LmvzCard & keyof LmvzCardAttributes]?: LmvzCard[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `attr:${K}`]?: LmvzCardAttributes[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `prop:${K}`]?: LmvzCard[K] } & OneOf<"cardTitle", LmvzCard["cardTitle"], LmvzCardAttributes["cardTitle"]>;
+        "lmvz-checkbox": Omit<LmvzCheckbox, keyof LmvzCheckboxAttributes> & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes]?: LmvzCheckbox[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `attr:${K}`]?: LmvzCheckboxAttributes[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `prop:${K}`]?: LmvzCheckbox[K] } & OneOf<"label", LmvzCheckbox["label"], LmvzCheckboxAttributes["label"]>;
         "lmvz-chip": Omit<LmvzChip, keyof LmvzChipAttributes> & { [K in keyof LmvzChip & keyof LmvzChipAttributes]?: LmvzChip[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `attr:${K}`]?: LmvzChipAttributes[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `prop:${K}`]?: LmvzChip[K] };
         "lmvz-header": Omit<LmvzHeader, keyof LmvzHeaderAttributes> & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes]?: LmvzHeader[K] } & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes as `attr:${K}`]?: LmvzHeaderAttributes[K] } & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes as `prop:${K}`]?: LmvzHeader[K] };
         "lmvz-icon": Omit<LmvzIcon, keyof LmvzIconAttributes> & { [K in keyof LmvzIcon & keyof LmvzIconAttributes]?: LmvzIcon[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `attr:${K}`]?: LmvzIconAttributes[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `prop:${K}`]?: LmvzIcon[K] } & OneOf<"icon", LmvzIcon["icon"], LmvzIconAttributes["icon"]>;
         "lmvz-input": Omit<LmvzInput, keyof LmvzInputAttributes> & { [K in keyof LmvzInput & keyof LmvzInputAttributes]?: LmvzInput[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `attr:${K}`]?: LmvzInputAttributes[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `prop:${K}`]?: LmvzInput[K] } & OneOf<"label", LmvzInput["label"], LmvzInputAttributes["label"]>;
         "lmvz-menuitem": Omit<LmvzMenuitem, keyof LmvzMenuitemAttributes> & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes]?: LmvzMenuitem[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `attr:${K}`]?: LmvzMenuitemAttributes[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `prop:${K}`]?: LmvzMenuitem[K] };
         "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-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"]>;
     }
 }
 
@@ -774,6 +1034,11 @@ export declare interface LmvzCardCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzCardElement;
 }
 
+export declare interface LmvzCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzCheckboxElement;
+}
+
 declare namespace LmvzDS {
     type Variant = (typeof variants)[number];
     type Size = (typeof sizes)[number];
@@ -794,6 +1059,11 @@ export declare interface LmvzSelectCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzSelectElement;
 }
 
+export declare interface LmvzToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzToggleElement;
+}
+
 declare const scaleValues: readonly ["small", "default", "large"];
 
 declare const sizes: readonly ["xs", "sm", "md", "lg"];

package/types/utils/icons/icons.d.ts

@@ -1,7 +1,6 @@
 import type { IconPropsFallback, IconPropsForSet, IconPropsForSetWithoutFallback, KnownIconSetId } from '@lmvz-ds/lib-icon-api';
 import type { SVGString } from '@lmvz-ds/lib-ts/validation/SVGString.d.ts';
 export type IconData = SVGString;
-export declare const emptyDefaultSvg: () => import("@lmvz-ds/lib-ts/validation/SVGString.js").SVGString;
 export declare function resolveIconSvg<I extends KnownIconSetId>(options: IconPropsForSet<I>): Promise<IconData>;
 export declare function resolveIconSvg(options: IconPropsFallback): Promise<IconData>;
 export declare function typedIconFromSet<S extends string>(iconset: S, icon: IconPropsForSetWithoutFallback<S>['icon']): IconPropsForSetWithoutFallback<S>;