@lmvz-ds/components 0.20.0 → 0.21.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-20T12:42:52",
+  "timestamp": "2026-05-21T07:12:41",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -5744,6 +5744,353 @@
       "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>"
+          },
+          "signature": "reportValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Reports validation errors to the user",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "lmvzChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the toggle is switched. Event detail is the new checked state.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
     }
   ],
   "typeLibrary": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -71,6 +71,10 @@
     "./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-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

@@ -407,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;
@@ -809,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;
@@ -890,6 +994,15 @@ 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;
@@ -902,6 +1015,7 @@ export declare namespace JSX {
         "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"]>;
     }
 }
 
@@ -945,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"];