@lmvz-ds/components 0.21.0 → 0.22.0

package/collection/components/lmvz-modal/lmvz-modal.css

@@ -0,0 +1,120 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@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));
+
+  /* TODO(LDHCID-135): Assumption until a modal container token/value is available. */
+  --lmvz-modal-shell-max-width: 40rem;
+}
+dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+}
+dialog::backdrop {
+  /* TODO(LDHCID-135): Missing token for the modal backdrop color */
+  /* Fallback for browsers without CSS Color Level 4 relative-color syntax (Chrome < 119, FF < 128, Safari < 16.4) */
+  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);
+  /* TODO(LDHCID-135): clarify overflow behaviour */
+  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);
+  /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
+}
+.close-button {
+  display: inline-flex;
+  flex: none;
+}
+::slotted([slot='actions'][hidden]) {
+  display: none;
+}

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

@@ -0,0 +1,448 @@
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { Host, h } from "@stencil/core";
+import closeIcon from "../../assets/icons/close-sm.svg";
+import { AriaValidationController, isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/component";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+const closeIconSvg = toValidSvgStringWithFallback(closeIcon);
+let modalIdCounter = 0;
+export class LmvzModal extends ReactiveControllerHost {
+    el;
+    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() {
+        super();
+        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 is() { return "lmvz-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controls the native dialog visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Schliessen'"
+                        }],
+                    "text": "Accessible label for the internal close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Schliessen'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActions": {},
+            "hasHeader": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dialogClose",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the host whenever the native dialog closes so framework wrappers can synchronize bound state."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogCancel",
+                "name": "cancel",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the host whenever the native dialog receives a `cancel` event (e.g. Escape key).\nCall `event.preventDefault()` to keep the dialog open."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "submit",
+                "method": "handleFormDialogSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -50,7 +50,7 @@ export class LmvzSelect 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 is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, h("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, 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 }), h("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), h("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
+        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 is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }

package/collection/integration/header-integration/header-integration.js

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '591e69a796357032fdefd54e81977cb6b818b653' }, h("lmvz-header", { key: 'bfc51bdc2979100082f210ad020ad3884837a1e7', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '808ee90cc2dbcaf59b1490ac4d59f0b8d445dace', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '08e8f747bae27ab19e58c44a28d3661ea4a019f6', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '5419724b8b29543206c33716bdd38edbb9e0ef25', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '04ea3fe11c3f64a1d023b71b496c44e8b6b4662b', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '4a0dc144d0e429d21fa8817973d5882aac6f11bb', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'b5e34ca29bb787409f1ff2d73e150e1f47e32afb', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '53ffb0fa8d8bcd35c5860d1594ec23edd4b64102', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '7959e991e4414173530efa34b2e12cb402a1c866', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '572a57ebfb71241913aa77c63ac21117aa66800a', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '758cc39b1cf02168a11090f393d51e18a36b0d01', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '47e14b75d64977fb871c907e199d37e5695c8d2d', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '19c4ca2458449afa9eeceb5b8aea972f85b9be0a', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '272b2252ae3890f09b7c380579f856990c8167a9', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'c32fa138419eec95caabfcffbc22cc6e25b24559', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '2e5c30345293206fcffe512e1b315fa5b8be6dbd' }, h("lmvz-header", { key: 'dbe611d59dffcfdf06d203e31e0d646cde923927', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'fd421b9c161ef0f57842bcb07900c8da6ba14e4f', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '0b4200c42ae74463446cd8098c4827bfc849fca2', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '761cdf8431f0ad98d8d28958f92eae465687ca64', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '7d43d800c5771cfc670159be3265fbbcc17f0571', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '22b6623ee071b51601fde8dfe4e6b2b26b2d7166', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'e67b0cd54221453941fba9942b2877b25261d266', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '5e512685f9d6aad712300ba4d9583c6030de39d5', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'f92949499f0c7e024616dd20474c1d1da7f6e0a4', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '96b87b3029a305d33b7705b62b517973368f9679', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'aa69a9c13c715492073d2724716ef0051dce164b', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '44484ab0f795ba76b81d8e5b00cf409d2a8cc465', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '511b7c91639eb9833928c9fdb14b881f5cca6b42', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: 'c628abdea87efaa5ef57f309298004b6919501ce', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '056de955f62486ad30b71f13934c7b527f8c5a56', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/components/index.d.ts

@@ -17,6 +17,8 @@ export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-i
 export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
 export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
 export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
+export { LmvzModal as LmvzModal } from '../../types/components/lmvz-modal/lmvz-modal';
+export { defineCustomElement as defineCustomElementLmvzModal } from './lmvz-modal';
 export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
 export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
 export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';

package/components/index.d.ts.bak

@@ -17,6 +17,8 @@ export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-i
 export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
 export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
 export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
+export { LmvzModal as LmvzModal } from '../../types/components/lmvz-modal/lmvz-modal';
+export { defineCustomElement as defineCustomElementLmvzModal } from './lmvz-modal';
 export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
 export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
 export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';

package/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C_bScbrd.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-BuFx0tTm.js";export{LmvzChip,c as chipSizes,a as chipTypes,defineCustomElement as defineCustomElementLmvzChip,i as iconSizes,b as iconWeights,d as inputTypes,t as textSizes}from"./lmvz-chip.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon,g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./lmvz-icon.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CK8cAKcB.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-DBc1BzQb.js";export{LmvzChip,c as chipSizes,a as chipTypes,defineCustomElement as defineCustomElementLmvzChip,i as iconSizes,b as iconWeights,d as inputTypes,t as textSizes}from"./lmvz-chip.js";export{g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./p-Boj0PCdB.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzModal,defineCustomElement as defineCustomElementLmvzModal}from"./lmvz-modal.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";

package/components/lmvz-action.js

@@ -1 +1 @@
-import{p as t,H as s,c,h as e,d as i,t as o}from"./p-C_bScbrd.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=c(this,"actionClick")}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return e(i,{key:"15c0f20e08cd5019abfd3bb71ec69d175dc5ba48",onClick:this._onClick.bind(this)},e("slot",{key:"f71a7853168d1b66b0a50b0f971d140385530ac3"}))}static get style(){return":host{display:block}"}},[257,"lmvz-action"]),a=n,l=function(){"undefined"!=typeof customElements&&["lmvz-action"].forEach((t=>{"lmvz-action"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{a as LmvzAction,l as defineCustomElement}
+import{p as t,d as s,c,h as e,H as i,t as o}from"./p-CK8cAKcB.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=c(this,"actionClick",7)}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return e(i,{key:"15c0f20e08cd5019abfd3bb71ec69d175dc5ba48",onClick:this._onClick.bind(this)},e("slot",{key:"f71a7853168d1b66b0a50b0f971d140385530ac3"}))}static get style(){return":host{display:block}"}},[257,"lmvz-action"]),a=n,l=function(){"undefined"!=typeof customElements&&["lmvz-action"].forEach((t=>{"lmvz-action"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{a as LmvzAction,l as defineCustomElement}