@lmvz-ds/components 0.21.0 → 0.22.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-21T07:12:41",
+  "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",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.21.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"

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;

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

@@ -0,0 +1,58 @@
+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 LmvzModal extends ReactiveControllerHost implements AriaValidationHost {
+    readonly el: HTMLLmvzModalElement;
+    private inheritedAriaAttributes;
+    private dialogEl?;
+    private dialogStateObserver?;
+    private actionsStateObserver?;
+    private headerSlot?;
+    private actionsSlot?;
+    private closeButtonEl?;
+    private previouslyFocusedElement;
+    private wrappedDialogShowModal?;
+    private lastActionValidationMessage?;
+    private pendingCloseReturnValue;
+    private readonly dialogTitleId;
+    private hasActions;
+    private hasHeader;
+    open: boolean;
+    closeLabel: string;
+    dialogClose: EventEmitter<void>;
+    dialogCancel: EventEmitter<void>;
+    get dialog(): HTMLDialogElement | undefined;
+    get validationEl(): HTMLDialogElement | HTMLLmvzModalElement;
+    get validationSlot(): HTMLSlotElement | undefined;
+    constructor();
+    protected handleFormDialogSubmit(event: SubmitEvent): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    protected handleOpenChange(): void;
+    private get dialogAccessibilityAttributes();
+    private get actionButtons();
+    private get enabledActionButtons();
+    private get assignedActionElements();
+    private isDisabledActionButton;
+    private getActionVariant;
+    private getActionValidationResult;
+    private hasAssignedContent;
+    private observeDialogState;
+    private isVisibleActionButton;
+    private capturePreviouslyFocusedElement;
+    private ensureDialogShowModalCapture;
+    private syncDialogVisibility;
+    private focusPrimaryAction;
+    private restoreFocus;
+    private readonly handleCloseButtonClick;
+    private readonly handleDialogCancel;
+    private readonly handleDialogClose;
+    private readonly handleHeaderSlotChange;
+    private observeActionState;
+    private syncActionsState;
+    private handleActionsSlotChange;
+    private checkActions;
+    render(): any;
+}

package/types/components.d.ts

@@ -27,6 +27,14 @@ export declare namespace Components {
          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
          */
         "form"?: FormRef;
+        /**
+         * Native formmethod value forwarded to the hidden native submit button. Use `dialog` to support native dialog close/confirm flows from `lmvz-button`.
+         */
+        "formMethod"?: 'dialog' | 'get' | 'post';
+        /**
+         * Native button name forwarded to the hidden native submit button.
+         */
+        "name"?: string;
         /**
          * Scale of the button
          * @default 'default'
@@ -42,6 +50,10 @@ export declare namespace Components {
          * @default 'button'
          */
         "type": 'submit' | 'button';
+        /**
+         * Native button value forwarded to the hidden native submit button. For `formmethod="dialog"` flows this becomes the dialog `returnValue`.
+         */
+        "value"?: string;
         /**
          * Variant of the button
          * @default 'secondary', since the primary button should be marked as such in context
@@ -364,6 +376,22 @@ export declare namespace Components {
          */
         "ti": number;
     }
+    /**
+     * Native dialog-backed modal with inline `header`, body, and `actions` regions.
+     * The implementation intentionally ignores Figma preview container sizes and instead sizes against the viewport plus LMVZ spacing tokens.
+     */
+    export interface LmvzModal {
+        /**
+         * Accessible label for the internal close button.
+         * @default 'Schliessen'
+         */
+        "closeLabel": string;
+        /**
+         * Controls the native dialog visibility.
+         * @default false
+         */
+        "open": boolean;
+    }
     /**
      * Select component with floating label and pill-shaped trigger.
      * Wraps a native `<select>` element for full keyboard and form support.
@@ -505,6 +533,14 @@ export declare namespace JSX {
          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
          */
         "form"?: FormRef;
+        /**
+         * Native formmethod value forwarded to the hidden native submit button. Use `dialog` to support native dialog close/confirm flows from `lmvz-button`.
+         */
+        "formMethod"?: 'dialog' | 'get' | 'post';
+        /**
+         * Native button name forwarded to the hidden native submit button.
+         */
+        "name"?: string;
         /**
          * Event emitted when the button is activated, either by a click or by pressing "Enter" when the button is focused.
          */
@@ -524,6 +560,10 @@ export declare namespace JSX {
          * @default 'button'
          */
         "type"?: 'submit' | 'button';
+        /**
+         * Native button value forwarded to the hidden native submit button. For `formmethod="dialog"` flows this becomes the dialog `returnValue`.
+         */
+        "value"?: string;
         /**
          * Variant of the button
          * @default 'secondary', since the primary button should be marked as such in context
@@ -822,6 +862,30 @@ export declare namespace JSX {
          */
         "ti"?: number;
     }
+    /**
+     * Native dialog-backed modal with inline `header`, body, and `actions` regions.
+     * The implementation intentionally ignores Figma preview container sizes and instead sizes against the viewport plus LMVZ spacing tokens.
+     */
+    export interface LmvzModal {
+        /**
+         * Accessible label for the internal close button.
+         * @default 'Schliessen'
+         */
+        "closeLabel"?: string;
+        /**
+         * Re-emitted from the host whenever the native dialog receives a `cancel` event (e.g. Escape key). Call `event.preventDefault()` to keep the dialog open.
+         */
+        "onCancel"?: (event: LmvzModalCustomEvent<void>) => void;
+        /**
+         * Re-emitted from the host whenever the native dialog closes so framework wrappers can synchronize bound state.
+         */
+        "onClose"?: (event: LmvzModalCustomEvent<void>) => void;
+        /**
+         * Controls the native dialog visibility.
+         * @default false
+         */
+        "open"?: boolean;
+    }
     /**
      * Select component with floating label and pill-shaped trigger.
      * Wraps a native `<select>` element for full keyboard and form support.
@@ -921,6 +985,9 @@ export declare namespace JSX {
         "disabled": boolean;
         "type": 'submit' | 'button';
         "form": FormRef;
+        "formMethod": 'dialog' | 'get' | 'post';
+        "name": string;
+        "value": string;
     }
     export interface LmvzCardAttributes {
         "cardTitle": string;
@@ -986,6 +1053,10 @@ export declare namespace JSX {
         "role": string;
         "ti": number;
     }
+    export interface LmvzModalAttributes {
+        "open": boolean;
+        "closeLabel": string;
+    }
     export interface LmvzSelectAttributes {
         "value": string;
         "label": string;
@@ -1014,6 +1085,7 @@ export declare namespace JSX {
         "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-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-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"]>;
     }
@@ -1054,6 +1126,11 @@ export declare interface LmvzMenuitemCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzMenuitemElement;
 }
 
+export declare interface LmvzModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzModalElement;
+}
+
 export declare interface LmvzSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLmvzSelectElement;

package/cjs/lmvz-icon.cjs.entry.js

@@ -1,100 +0,0 @@
-'use strict';
-
-var index = require('./index-C2yDXRqP.js');
-var svg = require('./svg-BMBduILB.js');
-var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
-var icons = require('./icons-BQASWgk-.js');
-require('./logger-DsM6xg6V.js');
-require('./aria-loader-Cec1zR2g.js');
-
-const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
-
-const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
-    intersectionObserver;
-    ariaValidationController = new reactiveControllerHost.AriaValidationController(this);
-    get el() { return index.getElement(this); }
-    validationEl;
-    icon;
-    weight = 'medium';
-    size = 'md';
-    iconset;
-    iconData;
-    visible = false;
-    ariaLabel;
-    get ariaHidden() {
-        return !this.ariaLabel;
-    }
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.addController(this.ariaValidationController);
-    }
-    connectedCallback() {
-        this.waitUntilVisible(() => {
-            this.visible = true;
-            this.loadIconPathData();
-        });
-        super.connectedCallback();
-    }
-    disconnectedCallback() {
-        if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
-            this.intersectionObserver.disconnect();
-        }
-        this.intersectionObserver = undefined;
-        super.disconnectedCallback();
-    }
-    async loadIconPathData() {
-        const { icon, iconset, visible } = this;
-        if (!icon || !visible) {
-            return;
-        }
-        const maybeIcon = svg.parseSvgString(icon);
-        if (maybeIcon) {
-            this.iconData = maybeIcon;
-            return;
-        }
-        this.iconData = await icons.resolveIconSvg({
-            icon,
-            iconset,
-        });
-    }
-    componentDidRender() {
-        this.validationEl = this.el.querySelector('svg');
-        this.ariaValidationController.revalidateAria();
-        super.componentDidRender();
-    }
-    render() {
-        return index.h(index.Host, { key: 'e76fe28500b3545b8917ecdad590da5bc04ed38f', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
-    }
-    waitUntilVisible(callback, rootMargin = 50) {
-        if (typeof window === 'undefined' || !window.IntersectionObserver) {
-            callback();
-            return;
-        }
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            entries.some((entry) => {
-                if (entry.isIntersecting) {
-                    if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
-                        this.intersectionObserver.disconnect();
-                    }
-                    this.intersectionObserver = undefined;
-                    callback();
-                    return true;
-                }
-                return false;
-            });
-        }, { rootMargin: `${rootMargin}px` });
-        this.intersectionObserver.observe(this.el);
-    }
-    static get watchers() { return {
-        "icon": [{
-                "loadIconPathData": 0
-            }],
-        "iconset": [{
-                "loadIconPathData": 0
-            }]
-    }; }
-};
-LmvzIcon.style = lmvzIconCss();
-
-exports.lmvz_icon = LmvzIcon;