@lmvz-ds/components 0.20.0 → 0.22.0

package/esm/lmvz-modal.entry.js

@@ -0,0 +1,347 @@
+import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-Aa_425iY.js';
+import { t as toValidSvgStringWithFallback } from './svg-B2YoIRuh.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-lF2kXM1x.js';
+import { i as inheritAriaAttributes, g as getDeepActiveElement } from './component-DOTK1OW3.js';
+import { i as isAriaValidationEnabled } from './aria-loader-BVolm0lC.js';
+import './logger-CGmJG63p.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 = toValidSvgStringWithFallback(closeSmSvg);
+let modalIdCounter = 0;
+const LmvzModal = class extends ReactiveControllerHost {
+    get el() { return 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();
+        registerInstance(this, hostRef);
+        this.dialogClose = createEvent(this, "close", 6);
+        this.dialogCancel = createEvent(this, "cancel", 1);
+        this.addController(new 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 = 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 = 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 (!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 (h(Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, h("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, h("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), h("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, h("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), h("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, h("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+LmvzModal.style = lmvzModalCss();
+
+export { LmvzModal as lmvz_modal };

package/esm/lmvz-select.entry.js

@@ -1,5 +1,5 @@
-import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-saW7O-EW.js';
-import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-DHcPpJW7.js';
+import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-Aa_425iY.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-lF2kXM1x.js';
 import './aria-loader-BVolm0lC.js';
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
@@ -17,7 +17,7 @@ const LmvzSelect = class extends ReactiveControllerHost {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzChange = createEvent(this, "lmvzChange");
+        this.lmvzChange = createEvent(this, "lmvzChange", 7);
         this.addController(new AriaValidationController(this));
     }
     lmvzChange;
@@ -56,7 +56,7 @@ const LmvzSelect = class extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, h("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, h("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), h("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, h("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), h("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, h("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), 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 && h("option", { key: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && h("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
+        return (h(Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, h("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, h("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), h("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, h("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), h("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, h("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), 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 && h("option", { key: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && h("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

package/esm/lmvz-toggle.entry.js

@@ -0,0 +1,94 @@
+import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-Aa_425iY.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-lF2kXM1x.js';
+import { c as componentOnReady } from './component-DOTK1OW3.js';
+import './aria-loader-BVolm0lC.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; }`;
+
+let toggleIdCounter = 0;
+const LmvzToggle = class extends ReactiveControllerHost {
+    get el() { return getElement(this); }
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInputElement;
+    toggleId = `lmvz-toggle-${toggleIdCounter++}`;
+    lmvzChange;
+    label;
+    checked = false;
+    disabled = false;
+    required = false;
+    name;
+    value = 'on';
+    form;
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.lmvzChange = createEvent(this, "lmvzChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.addController(new AriaValidationController(this));
+    }
+    formAssociatedCallback(_form) {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    handleCheckedChange(checked) {
+        this.internals.setFormValue?.(checked ? this.value : null);
+    }
+    handleDisabledChange(disabled) {
+        if (disabled && this.nativeInputElement) {
+            this.nativeInputElement.blur();
+        }
+    }
+    async focusToggle() {
+        this.nativeInputElement?.focus();
+    }
+    async blurToggle() {
+        this.nativeInputElement?.blur();
+    }
+    async checkValidity() {
+        return this.nativeInputElement?.checkValidity?.() ?? false;
+    }
+    async reportValidity() {
+        return this.nativeInputElement?.reportValidity?.() ?? false;
+    }
+    async getInputElement() {
+        if (!this.nativeInputElement) {
+            await new Promise((resolve) => componentOnReady(this.el, resolve));
+        }
+        return Promise.resolve(this.nativeInputElement);
+    }
+    handleChange = (event) => {
+        const newChecked = event.target.checked;
+        this.checked = newChecked;
+        this.lmvzChange.emit(newChecked);
+    };
+    render() {
+        return (h(Host, { key: '49a543437a842709b6a3bfb00c828a40b227bb57' }, h("span", { key: '746292d49c58656336037f7b07a9aaee9dbc6ed1', class: "track" }, 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 }), h("span", { key: 'e5742029679333fcd66a25aeb3f8826dbb3a8956', class: "thumb", "aria-hidden": "true" })), h("label", { key: '4cb92eb975b8c337162986011497afdeb188ed4f', htmlFor: this.toggleId }, this.label)));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
+            }]
+    }; }
+};
+LmvzToggle.style = lmvzToggleCss();
+
+export { LmvzToggle as lmvz_toggle };

package/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-saW7O-EW.js';
-export { s as setNonce } from './index-saW7O-EW.js';
+import { b as bootstrapLazy } from './index-Aa_425iY.js';
+export { s as setNonce } from './index-Aa_425iY.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-button",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[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",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon",[[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",[[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",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]]], options);
+  return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasActions":[32],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[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",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[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",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select",[[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",[[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",[[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);
 };
 
 export { defineCustomElements };

package/esm/{reactive-controller-host-DHcPpJW7.js → reactive-controller-host-lF2kXM1x.js}

@@ -1,5 +1,5 @@
 import { i as isAriaValidationEnabled, u as useVerboseLogging, A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, q as queueValidation } from './aria-loader-BVolm0lC.js';
-import { B as Build } from './index-saW7O-EW.js';
+import { B as Build } from './index-Aa_425iY.js';
 
 class AriaValidationController {
     host;