@lmvz-ds/components 0.21.0 → 0.22.0

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

@@ -0,0 +1,349 @@
+'use strict';
+
+var index = require('./index-lW-SEvL7.js');
+var svg = require('./svg-BMBduILB.js');
+var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
+var component = require('./component-C7cavwmZ.js');
+var ariaLoader = require('./aria-loader-Cec1zR2g.js');
+require('./logger-DsM6xg6V.js');
+
+const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
+
+const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {   display: contents;   color: var(--lmvz-semantic-color-on-surface-primary, #000000);    --lmvz-modal-shell-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));   --lmvz-modal-shell-gap: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));   --lmvz-modal-actions-gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-modal-viewport-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));       --lmvz-modal-shell-max-width: 40rem; } dialog {   border: none;   padding: 0;   background: transparent;   color: var(--lmvz-semantic-color-on-surface-primary, #000000); } dialog::backdrop {         background: rgba(0, 0, 0, 0.19);   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.19); } .modal-shell {   display: flex;   flex-direction: column;   gap: var(--lmvz-modal-shell-gap);   inline-size: min(calc(100vw - (2 * var(--lmvz-modal-viewport-padding))), var(--lmvz-modal-shell-max-width));   max-inline-size: 100%;   padding: var(--lmvz-modal-shell-padding);   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);      overflow: auto; } .header {   display: flex;   align-items: flex-start;   justify-content: flex-end;   gap: var(--lmvz-modal-shell-gap); } .title {   min-inline-size: 0;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4     Router); } .has-title .title {   flex: 1 1 auto; } .body {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .actions {   display: flex;   flex-wrap: wrap;   justify-content: flex-end;   gap: var(--lmvz-modal-actions-gap);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);    } .close-button {   display: inline-flex;   flex: none; } ::slotted([slot='actions'][hidden]) {   display: none; } `;
+
+const closeIconSvg = svg.toValidSvgStringWithFallback(closeSmSvg);
+let modalIdCounter = 0;
+const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
+    get el() { return index.getElement(this); }
+    inheritedAriaAttributes = {};
+    dialogEl;
+    dialogStateObserver;
+    actionsStateObserver;
+    headerSlot;
+    actionsSlot;
+    closeButtonEl;
+    previouslyFocusedElement = null;
+    wrappedDialogShowModal;
+    lastActionValidationMessage;
+    pendingCloseReturnValue;
+    dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
+    hasActions = false;
+    hasHeader = false;
+    open = false;
+    closeLabel = 'Schliessen';
+    dialogClose;
+    dialogCancel;
+    get dialog() {
+        return this.dialogEl;
+    }
+    get validationEl() {
+        return this.dialogEl ?? this.el;
+    }
+    get validationSlot() {
+        return this.actionsSlot;
+    }
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.dialogClose = index.createEvent(this, "close", 6);
+        this.dialogCancel = index.createEvent(this, "cancel", 1);
+        this.addController(new reactiveControllerHost.AriaValidationController(this, { validationTiming: 'slot' }));
+    }
+    handleFormDialogSubmit(event) {
+        const form = event.target;
+        const submitter = event.submitter;
+        const isDialogForm = form.method === 'dialog' || submitter?.getAttribute('formmethod') === 'dialog';
+        if (!isDialogForm)
+            return;
+        event.preventDefault();
+        this.dialogEl?.close(submitter?.value ?? '');
+    }
+    connectedCallback() {
+        this.inheritedAriaAttributes = component.inheritAriaAttributes(this.el, ['role']);
+        Object.defineProperty(this.el, 'dialog', {
+            configurable: true,
+            enumerable: true,
+            get: () => {
+                this.ensureDialogShowModalCapture();
+                return this.dialogEl;
+            },
+        });
+        super.connectedCallback();
+    }
+    componentDidLoad() {
+        this.handleHeaderSlotChange();
+        this.handleActionsSlotChange();
+        this.observeDialogState();
+        this.syncDialogVisibility();
+        super.componentDidLoad();
+    }
+    disconnectedCallback() {
+        this.actionsStateObserver?.disconnect();
+        this.dialogStateObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    componentDidRender() {
+        if (this.open) {
+            this.focusPrimaryAction();
+        }
+        super.componentDidRender();
+    }
+    handleOpenChange() {
+        this.syncDialogVisibility();
+    }
+    get dialogAccessibilityAttributes() {
+        const attributes = { ...this.inheritedAriaAttributes };
+        delete attributes['aria-label'];
+        delete attributes['aria-labelledby'];
+        if (this.hasHeader) {
+            attributes['aria-labelledby'] = this.dialogTitleId;
+            return attributes;
+        }
+        const inheritedLabelledBy = this.inheritedAriaAttributes['aria-labelledby'];
+        if (typeof inheritedLabelledBy === 'string') {
+            attributes['aria-labelledby'] = inheritedLabelledBy;
+            return attributes;
+        }
+        const inheritedLabel = this.inheritedAriaAttributes['aria-label'];
+        if (typeof inheritedLabel === 'string') {
+            attributes['aria-label'] = inheritedLabel;
+        }
+        return attributes;
+    }
+    get actionButtons() {
+        return (this.actionsSlot?.assignedElements({ flatten: true }) ?? []).filter((element) => {
+            return this.isVisibleActionButton(element);
+        });
+    }
+    get enabledActionButtons() {
+        return this.actionButtons.filter((element) => {
+            return !this.isDisabledActionButton(element);
+        });
+    }
+    get assignedActionElements() {
+        return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
+    }
+    isDisabledActionButton(element) {
+        return element.hasAttribute('disabled') || element.disabled === true;
+    }
+    getActionVariant(element) {
+        const variant = element.getAttribute('variant') ?? element.variant;
+        return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
+    }
+    getActionValidationResult() {
+        if (!this.actionButtons.length) {
+            return {};
+        }
+        const primaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'primary');
+        const secondaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'secondary');
+        const issues = [
+            primaryActions.length !== 1 ? `${primaryActions.length} primary action${primaryActions.length === 1 ? '' : 's'}` : undefined,
+            secondaryActions.length > 1 ? `${secondaryActions.length} secondary actions` : undefined,
+        ].filter((issue) => Boolean(issue));
+        return {
+            errorMessage: issues.length
+                ? `LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${issues.join(' and ')}.`
+                : undefined,
+            primaryAction: primaryActions[0],
+        };
+    }
+    hasAssignedContent(slot) {
+        return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return Boolean(node.textContent?.trim());
+            }
+            return node.nodeType === Node.ELEMENT_NODE;
+        }));
+    }
+    observeDialogState() {
+        if (!this.dialogEl || typeof MutationObserver === 'undefined')
+            return;
+        this.dialogStateObserver?.disconnect();
+        this.dialogStateObserver = new MutationObserver(() => {
+            if (!this.dialogEl || this.dialogEl.open === this.open)
+                return;
+            if (this.dialogEl.open) {
+                this.open = true;
+                return;
+            }
+            this.open = false;
+        });
+        this.dialogStateObserver.observe(this.dialogEl, {
+            attributes: true,
+            attributeFilter: ['open'],
+        });
+    }
+    isVisibleActionButton(element) {
+        return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
+    }
+    capturePreviouslyFocusedElement() {
+        const dialog = this.dialogEl;
+        const activeElement = component.getDeepActiveElement(document);
+        if (!dialog || !activeElement || dialog.contains(activeElement))
+            return;
+        this.previouslyFocusedElement = activeElement;
+    }
+    ensureDialogShowModalCapture() {
+        const dialog = this.dialogEl;
+        if (!dialog || typeof dialog.showModal !== 'function')
+            return;
+        const showModal = dialog.showModal;
+        if (showModal === this.wrappedDialogShowModal)
+            return;
+        const wrappedShowModal = () => {
+            this.capturePreviouslyFocusedElement();
+            return showModal.call(dialog);
+        };
+        Object.defineProperty(dialog, 'showModal', {
+            configurable: true,
+            value: wrappedShowModal,
+        });
+        this.wrappedDialogShowModal = wrappedShowModal;
+    }
+    syncDialogVisibility() {
+        const dialog = this.dialogEl;
+        if (!dialog)
+            return;
+        if (this.open) {
+            if (!dialog.open) {
+                this.capturePreviouslyFocusedElement();
+                if (typeof dialog.showModal === 'function') {
+                    dialog.showModal();
+                }
+                else {
+                    dialog.setAttribute('open', '');
+                }
+            }
+            this.focusPrimaryAction();
+            return;
+        }
+        if (!dialog.open)
+            return;
+        if (typeof dialog.close === 'function') {
+            dialog.close();
+        }
+        else {
+            dialog.removeAttribute('open');
+            this.handleDialogClose();
+        }
+    }
+    focusPrimaryAction() {
+        const primaryAction = this.enabledActionButtons.find((element) => {
+            return this.getActionVariant(element) === 'primary';
+        }) ?? this.enabledActionButtons[0];
+        const focusTarget = primaryAction ?? this.closeButtonEl;
+        if (!focusTarget || typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(() => {
+            if (this.open) {
+                focusTarget.focus();
+            }
+        });
+    }
+    restoreFocus() {
+        if (!this.previouslyFocusedElement?.isConnected)
+            return;
+        this.previouslyFocusedElement.focus();
+        this.previouslyFocusedElement = null;
+    }
+    handleCloseButtonClick = () => {
+        if (!this.dialogEl)
+            return;
+        const dialogWithRequestClose = this.dialogEl;
+        if (typeof dialogWithRequestClose.requestClose === 'function') {
+            this.pendingCloseReturnValue = 'close';
+            dialogWithRequestClose.requestClose('close');
+            return;
+        }
+        if (typeof this.dialogEl.close === 'function') {
+            this.dialogEl.close('close');
+            return;
+        }
+        this.handleDialogClose();
+    };
+    handleDialogCancel = (event) => {
+        event.preventDefault();
+        const emitted = this.dialogCancel.emit();
+        if (emitted.defaultPrevented) {
+            this.pendingCloseReturnValue = undefined;
+            return;
+        }
+        const returnValue = this.pendingCloseReturnValue;
+        this.pendingCloseReturnValue = undefined;
+        this.dialogEl?.close(returnValue);
+    };
+    handleDialogClose = () => {
+        console.log('Dialog close handler called');
+        if (this.open) {
+            this.open = false;
+        }
+        this.restoreFocus();
+        this.dialogClose.emit();
+    };
+    handleHeaderSlotChange = () => {
+        this.hasHeader = this.hasAssignedContent(this.headerSlot);
+    };
+    observeActionState() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.actionsStateObserver?.disconnect();
+        if (!this.assignedActionElements.length)
+            return;
+        this.actionsStateObserver = new MutationObserver(() => {
+            this.syncActionsState();
+        });
+        this.assignedActionElements.forEach((element) => {
+            this.actionsStateObserver?.observe(element, {
+                attributes: true,
+                attributeFilter: ['disabled', 'hidden', 'variant'],
+            });
+        });
+    }
+    syncActionsState() {
+        const assignedElements = this.assignedActionElements;
+        assignedElements.forEach((element) => {
+            const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
+            if (isAllowedAction)
+                return;
+            if (!element.hasAttribute('hidden')) {
+                element.setAttribute('hidden', '');
+            }
+            if (element.getAttribute('aria-hidden') !== 'true') {
+                element.setAttribute('aria-hidden', 'true');
+            }
+        });
+        this.hasActions = assignedElements.some((element) => this.isVisibleActionButton(element));
+        this.checkActions();
+        if (this.open) {
+            this.focusPrimaryAction();
+        }
+    }
+    handleActionsSlotChange = () => {
+        this.syncActionsState();
+        this.observeActionState();
+    };
+    checkActions() {
+        if (!ariaLoader.isAriaValidationEnabled())
+            return;
+        const { errorMessage } = this.getActionValidationResult();
+        if (!errorMessage) {
+            this.lastActionValidationMessage = undefined;
+            return;
+        }
+        if (this.lastActionValidationMessage === errorMessage)
+            return;
+        console.error(errorMessage);
+        this.lastActionValidationMessage = errorMessage;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, index.h("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, index.h("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), index.h("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, index.h("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), index.h("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, index.h("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+LmvzModal.style = lmvzModalCss();
+
+exports.lmvz_modal = LmvzModal;

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
+var index = require('./index-lW-SEvL7.js');
+var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
 require('./aria-loader-Cec1zR2g.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
@@ -19,7 +19,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.lmvzChange = index.createEvent(this, "lmvzChange");
+        this.lmvzChange = index.createEvent(this, "lmvzChange", 7);
         this.addController(new reactiveControllerHost.AriaValidationController(this));
     }
     lmvzChange;
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, index.h("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, index.h("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), index.h("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, index.h("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), index.h("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, index.h("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '841c86f1d340cd36475a7757e9cad5f33aeac710', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && index.h("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, index.h("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, index.h("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), index.h("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, index.h("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), index.h("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, index.h("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), index.h("select", { key: 'b443a08e1436f75af572e102e8d43a9c3d031810', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && index.h("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
-var component = require('./component-Csg9MtNK.js');
+var index = require('./index-lW-SEvL7.js');
+var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
+var component = require('./component-C7cavwmZ.js');
 require('./aria-loader-Cec1zR2g.js');
 
 const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .sc-lmvz-toggle-h:focus-within {      outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);   outline-offset: 2px; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
@@ -27,7 +27,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.lmvzChange = index.createEvent(this, "lmvzChange");
+        this.lmvzChange = index.createEvent(this, "lmvzChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -79,7 +79,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, index.h("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, index.h("input", { key: '6e90ec39ec856fa38097e6224c7fed50b23088e5', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '49a543437a842709b6a3bfb00c828a40b227bb57' }, index.h("span", { key: '746292d49c58656336037f7b07a9aaee9dbc6ed1', class: "track" }, index.h("input", { key: 'ae329571344b05d9af814fdc1cc792e1c600d807', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: 'e5742029679333fcd66a25aeb3f8826dbb3a8956', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '4cb92eb975b8c337162986011497afdeb188ed4f', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-C2yDXRqP.js');
+var index = require('./index-lW-SEvL7.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasActions":[32],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/{reactive-controller-host-BA4ZhjKA.js → reactive-controller-host-DnSTWHCF.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var ariaLoader = require('./aria-loader-Cec1zR2g.js');
-var index = require('./index-C2yDXRqP.js');
+var index = require('./index-lW-SEvL7.js');
 
 class AriaValidationController {
     host;

package/collection/assets/icons/close-sm.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6L12 12M12 12L18 18M12 12L6 18M12 12L18 6" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "components/lmvz-icon/lmvz-icon.js",
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
+    "components/lmvz-modal/lmvz-modal.js",
     "components/lmvz-select/lmvz-select.js",
     "components/lmvz-toggle/lmvz-toggle.js",
     "integration/header-integration/header-integration.js"

package/collection/components/lmvz-button/lmvz-button.js

@@ -19,6 +19,9 @@ export class LmvzButton extends ReactiveControllerHost {
     disabled = false;
     type = 'button';
     form;
+    formMethod;
+    name;
+    value;
     constructor() {
         super();
         this.addController(new AriaValidationController(this));
@@ -31,18 +34,46 @@ export class LmvzButton extends ReactiveControllerHost {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         super.connectedCallback();
     }
+    disconnectedCallback() {
+        this.formButtonEl?.remove();
+        this.formButtonEl = null;
+        this.formEl = null;
+        super.disconnectedCallback();
+    }
     renderHiddenButton() {
-        const formEl = (this.formEl = findFormByRef(this.form, this.el));
-        if (!formEl)
+        if (this.type !== 'submit') {
+            this.formButtonEl?.remove();
+            this.formButtonEl = null;
+            this.formEl = null;
             return;
-        const { formButtonEl } = this;
-        if (formButtonEl !== null && formEl.contains(formButtonEl))
+        }
+        const formEl = findFormByRef(this.form, this.el);
+        if (!formEl) {
+            this.formButtonEl?.remove();
+            this.formButtonEl = null;
+            this.formEl = null;
             return;
-        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
-        newFormButtonEl.type = 'submit';
-        newFormButtonEl.style.display = 'none';
-        newFormButtonEl.disabled = this.disabled;
-        formEl.appendChild(newFormButtonEl);
+        }
+        this.formEl = formEl;
+        const formButtonEl = this.formButtonEl ?? document.createElement('button');
+        formButtonEl.type = 'submit';
+        formButtonEl.style.display = 'none';
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.name = this.name ?? '';
+        formButtonEl.value = this.value ?? '';
+        if (this.formMethod) {
+            formButtonEl.setAttribute('formmethod', this.formMethod);
+        }
+        else {
+            formButtonEl.removeAttribute('formmethod');
+        }
+        if (this.formButtonEl !== formButtonEl) {
+            this.formButtonEl = formButtonEl;
+        }
+        if (formButtonEl.parentElement !== formEl) {
+            formButtonEl.remove();
+            formEl.appendChild(formButtonEl);
+        }
     }
     submitForm(ev) {
         if (this.formEl && this.formButtonEl) {
@@ -57,7 +88,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
+        return (h(Host, { key: '6c44aa8a4b40927313461b5139e88066b855dca6', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '3696f0ad46a03fe9573571b46a56772def87bf53', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '3ecce9c6ae978b72b14a807d93248a4566a13f4b' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -225,6 +256,63 @@ export class LmvzButton extends ReactiveControllerHost {
                 "setter": false,
                 "reflect": false,
                 "attribute": "form"
+            },
+            "formMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dialog' | 'get' | 'post'",
+                    "resolved": "\"dialog\" | \"get\" | \"post\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native formmethod value forwarded to the hidden native submit button.\nUse `dialog` to support native dialog close/confirm flows from `lmvz-button`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-method"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button name forwarded to the hidden native submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button value forwarded to the hidden native submit button.\nFor `formmethod=\"dialog\"` flows this becomes the dialog `returnValue`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }

package/collection/components/lmvz-chip/lmvz-chip.js

@@ -40,7 +40,7 @@ export class LmvzChip extends ReactiveControllerHost {
         this.checkContent();
     }
     checkContent = debounce(() => {
-        if (!isAriaValidationEnabled)
+        if (!isAriaValidationEnabled())
             return;
         const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
         if (!elements.length) {
@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: 'c77e8ae55531eefb31dd37b41b4851746a78f077', type: this.type, size: this.size }, h("slot", { key: '3f4d0a8feb887080172d11facc01afbe730b2726', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '6ec135ebcb32f15fea342379ac2b1dfebbe76fa6', class: "content-overflow-wrapper" }, h("slot", { key: '053afb88e2d6702428aab195bfcec6aff6d9c55f', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'ed51db073a512a32d12da59dee285708b83ae87b', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '14ee006aff40f125aef2e9a461e68e25c6ed27d6', type: this.type, size: this.size }, h("slot", { key: '3222c7f40b833f344aa233c13e2644d6e928bf4c', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '4d1c9fa87ccda9387b945444e9ac6a50703a19e5', class: "content-overflow-wrapper" }, h("slot", { key: '42866115b8a6c50e86663ed8934504240ee0e6fa', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '890afa73be440ee7e7620a024744be08fee57b83', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }