@lmvz-ds/components 0.20.0 → 0.22.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-20T12:42:52",
+  "timestamp": "2026-05-22T15:20:34",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -172,6 +172,67 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "formMethod",
+          "type": "\"dialog\" | \"get\" | \"post\" | undefined",
+          "complexType": {
+            "original": "'dialog' | 'get' | 'post'",
+            "resolved": "\"dialog\" | \"get\" | \"post\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "form-method",
+          "reflectToAttr": false,
+          "docs": "Native formmethod value forwarded to the hidden native submit button.\nUse `dialog` to support native dialog close/confirm flows from `lmvz-button`.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "dialog",
+              "type": "string"
+            },
+            {
+              "value": "get",
+              "type": "string"
+            },
+            {
+              "value": "post",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "Native button name forwarded to the hidden native submit button.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "scale",
           "type": "\"default\" | \"large\" | \"small\"",
@@ -284,6 +345,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "value",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "Native button value forwarded to the hidden native submit button.\nFor `formmethod=\"dialog\"` flows this becomes the dialog `returnValue`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "variant",
           "type": "\"primary\" | \"secondary\" | \"tertiary\"",
@@ -357,9 +444,15 @@
       ],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "lmvz-modal"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "lmvz-modal": [
+          "lmvz-button"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-card/lmvz-card.tsx",
@@ -1391,9 +1484,15 @@
       "slots": [],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "lmvz-modal"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "lmvz-modal": [
+          "lmvz-icon"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-input/lmvz-input.tsx",
@@ -5532,6 +5631,154 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/lmvz-modal/lmvz-modal.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-modal",
+      "readme": "# lmvz-modal\n\n\n",
+      "docs": "Native dialog-backed modal with inline `header`, body, and `actions` regions.\n\nThe implementation intentionally ignores Figma preview container sizes and instead sizes against the viewport plus LMVZ spacing tokens.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "header - Optional header content used as the dialog's accessible name when present."
+        },
+        {
+          "name": "slot",
+          "text": "default - Modal body content."
+        },
+        {
+          "name": "slot",
+          "text": "actions - Modal actions. Only direct `lmvz-button` children are allowed."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "close-label",
+          "reflectToAttr": false,
+          "docs": "Accessible label for the internal close button.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Schliessen'"
+            }
+          ],
+          "default": "'Schliessen'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "Controls the native dialog visibility.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "cancel",
+          "detail": "void",
+          "bubbles": false,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": false,
+          "docs": "Re-emitted from the host whenever the native dialog receives a `cancel` event (e.g. Escape key).\nCall `event.preventDefault()` to keep the dialog open.",
+          "docsTags": []
+        },
+        {
+          "event": "close",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": false,
+          "composed": true,
+          "docs": "Re-emitted from the host whenever the native dialog closes so framework wrappers can synchronize bound state.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "submit",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [
+        {
+          "name": "actions",
+          "docs": "Modal actions. Only direct `lmvz-button` children are allowed."
+        },
+        {
+          "name": "default",
+          "docs": "Modal body content."
+        },
+        {
+          "name": "header",
+          "docs": "Optional header content used as the dialog's accessible name when present."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "lmvz-button",
+        "lmvz-icon"
+      ],
+      "dependencyGraph": {
+        "lmvz-modal": [
+          "lmvz-button",
+          "lmvz-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/lmvz-select/lmvz-select.tsx",
       "encapsulation": "scoped",
@@ -5744,6 +5991,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.22.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -64,6 +64,10 @@
       "types": "./components/lmvz-menuitem.d.ts",
       "import": "./components/lmvz-menuitem.js"
     },
+    "./lmvz-modal": {
+      "types": "./components/lmvz-modal.d.ts",
+      "import": "./components/lmvz-modal.js"
+    },
     "./lmvz-select": {
       "types": "./components/lmvz-select.d.ts",
       "import": "./components/lmvz-select.js"
@@ -71,6 +75,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/api/index.d.ts

@@ -1,2 +1,8 @@
 export type * from './aria-types';
 export type * from './ds.types';
+
+declare global {
+  interface HTMLLmvzModalElement {
+    readonly dialog: HTMLDialogElement | undefined;
+  }
+}

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

@@ -16,8 +16,12 @@ export declare class LmvzButton extends ReactiveControllerHost implements AriaVa
     disabled: boolean;
     type: 'submit' | 'button';
     form?: FormRef;
+    formMethod?: 'dialog' | 'get' | 'post';
+    name?: string;
+    value?: string;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     private renderHiddenButton;
     private submitForm;
     private handleClick;