@lmvz-ds/components 0.21.0 → 0.22.0

package/hydrate/index.js

@@ -1835,9 +1835,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
         detail
       });
     }
@@ -2640,6 +2640,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
         hostRef.$deferredConnectedCallback$ = false;
         safeCall(instance, "connectedCallback", void 0, elm);
       }
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
@@ -3078,6 +3085,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -3097,6 +3105,32 @@ var setContentReference = (elm) => {
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners && win.document) {
+    listeners.map(([flags, name, method]) => {
+      const target = elm;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a2;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a2 = hostRef.$lazyInstance$) == null ? void 0 : _a2[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 function transformTag(tag) {
   return tag;
 }
@@ -5087,6 +5121,7 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
       if (!hostRef) {
         return;
       }
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
@@ -5352,7 +5387,7 @@ const lmvzActionCss = () => `:host{display:block}`;
 class LmvzAction {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.actionClick = createEvent(this, "actionClick");
+        this.actionClick = createEvent(this, "actionClick", 7);
     }
     actionClick;
     _onClick(event) {
@@ -5751,6 +5786,9 @@ const ariaAttributes = [
 ];
 const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+    }
     return inheritAttributes(el, attributesToInherit);
 };
 const raf = (h) => {
@@ -5865,10 +5903,13 @@ class LmvzButton extends ReactiveControllerHost {
     disabled = false;
     type = 'button';
     form;
+    formMethod;
+    name;
+    value;
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzActivation = createEvent(this, "lmvzActivation");
+        this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
         this.addController(new AriaValidationController(this));
         this.addController(new ElementActivationController(this, {
             localHandler: this.handleClick.bind(this),
@@ -5879,18 +5920,46 @@ 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) {
@@ -5905,7 +5974,7 @@ class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (hAsync(Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
+        return (hAsync(Host, { key: '6c44aa8a4b40927313461b5139e88066b855dca6', "aria-disabled": this.disabled ? 'true' : null }, hAsync("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 }, hAsync("slot", { key: '3ecce9c6ae978b72b14a807d93248a4566a13f4b' }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzButtonCss(); }
@@ -5918,7 +5987,10 @@ class LmvzButton extends ReactiveControllerHost {
             "variant": [513],
             "disabled": [516],
             "type": [1],
-            "form": [1]
+            "form": [1],
+            "formMethod": [1, "form-method"],
+            "name": [1],
+            "value": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5951,7 +6023,7 @@ const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.componen
 class LmvzCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.primaryAction = createEvent(this, "primaryAction");
+        this.primaryAction = createEvent(this, "primaryAction", 7);
     }
     cardTitle;
     imageUrl;
@@ -8194,7 +8266,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzChange = createEvent(this, "lmvzChange");
+        this.lmvzChange = createEvent(this, "lmvzChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8324,7 +8396,7 @@ 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) {
@@ -8332,7 +8404,7 @@ class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (hAsync(Host, { key: 'c77e8ae55531eefb31dd37b41b4851746a78f077', type: this.type, size: this.size }, hAsync("slot", { key: '3f4d0a8feb887080172d11facc01afbe730b2726', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '6ec135ebcb32f15fea342379ac2b1dfebbe76fa6', class: "content-overflow-wrapper" }, hAsync("slot", { key: '053afb88e2d6702428aab195bfcec6aff6d9c55f', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: 'ed51db073a512a32d12da59dee285708b83ae87b', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (hAsync(Host, { key: '14ee006aff40f125aef2e9a461e68e25c6ed27d6', type: this.type, size: this.size }, hAsync("slot", { key: '3222c7f40b833f344aa233c13e2644d6e928bf4c', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '4d1c9fa87ccda9387b945444e9ac6a50703a19e5', class: "content-overflow-wrapper" }, hAsync("slot", { key: '42866115b8a6c50e86663ed8934504240ee0e6fa', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '890afa73be440ee7e7620a024744be08fee57b83', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get watchers() { return {
         "type": [{
@@ -8686,7 +8758,7 @@ class LmvzInput extends ReactiveControllerHost {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzInput = createEvent(this, "lmvzInput");
+        this.lmvzInput = createEvent(this, "lmvzInput", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8824,7 +8896,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzActivation = createEvent(this, "lmvzActivation");
+        this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
         this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));
         this.addController(new ElementActivationController(this));
     }
@@ -8845,6 +8917,358 @@ class LmvzMenuItem extends ReactiveControllerHost {
     }; }
 }
 
+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;
+class LmvzModal 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 (hAsync(Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, hAsync("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, hAsync("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), hAsync("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, hAsync("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), hAsync("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, hAsync("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+    static get style() { return lmvzModalCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 777,
+        "$tagName$": "lmvz-modal",
+        "$members$": {
+            "open": [1540],
+            "closeLabel": [1, "close-label"],
+            "hasActions": [32],
+            "hasHeader": [32]
+        },
+        "$listeners$": [[0, "submit", "handleFormDialogSubmit"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["open", "open"]]
+    }; }
+}
+
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
 const lmvzSelectCss = () => `@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-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);       --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-select-height: 40px;   --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   cursor: pointer;   position: relative;   z-index: 1;   transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: 2px solid var(--lmvz-select-focus-color);   outline-offset: 2px; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);   font-weight: var(--lmvz-global-font-weight-500, 500);   color: var(--lmvz-select-text-color);   line-height: 1.4;   letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } img.sc-lmvz-select {   display: block;   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; }`;
@@ -8860,7 +9284,7 @@ class LmvzSelect 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;
@@ -8899,7 +9323,7 @@ class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (hAsync(Host, { key: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, hAsync("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, hAsync("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), hAsync("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, hAsync("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), hAsync("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, hAsync("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), hAsync("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 && hAsync("option", { key: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && hAsync("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
+        return (hAsync(Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, hAsync("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, hAsync("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), hAsync("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, hAsync("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), hAsync("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, hAsync("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), hAsync("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 && hAsync("option", { key: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && hAsync("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{
@@ -8947,7 +9371,7 @@ class LmvzToggle extends ReactiveControllerHost {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.lmvzChange = createEvent(this, "lmvzChange");
+        this.lmvzChange = createEvent(this, "lmvzChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8999,7 +9423,7 @@ class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (hAsync(Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, hAsync("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, hAsync("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 }), hAsync("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
+        return (hAsync(Host, { key: '49a543437a842709b6a3bfb00c828a40b227bb57' }, hAsync("span", { key: '746292d49c58656336037f7b07a9aaee9dbc6ed1', class: "track" }, hAsync("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 }), hAsync("span", { key: 'e5742029679333fcd66a25aeb3f8826dbb3a8956', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '4cb92eb975b8c337162986011497afdeb188ed4f', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -9044,6 +9468,7 @@ registerComponents([
   LmvzIcon,
   LmvzInput,
   LmvzMenuItem,
+  LmvzModal,
   LmvzSelect,
   LmvzToggle,
 ]);