@lmvz-ds/components 0.22.0 → 0.23.0

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

@@ -0,0 +1,216 @@
+import { h, Host } from "@stencil/core";
+import { negate } from "@lmvz-ds/lib-ts/stream/negate.js";
+import { isAriaValidationEnabled } from "../..";
+import { canReceiveFocus } from "../../utils/component";
+export class LmvzButtonGroup {
+    actionsSlot;
+    validationMessageCache = [];
+    actionsStateObserver;
+    get primaryEnabledAction() {
+        return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
+    }
+    get hasActions() {
+        return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
+    }
+    componentDidLoad() {
+        this.handleActionsSlotChange();
+    }
+    disconnectedCallback() {
+        this.actionsStateObserver?.disconnect();
+    }
+    get assignedElements() {
+        return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
+    }
+    get assignedButtons() {
+        return this.assignedElements.filter(isActionButton);
+    }
+    get visibleButtons() {
+        return this.assignedButtons.filter(isVisible);
+    }
+    get enabledButtons() {
+        return this.visibleButtons.filter(negate(isDisabledButton));
+    }
+    getActionValidationResult() {
+        if (!this.visibleButtons.length) {
+            return [];
+        }
+        const primaryActions = this.visibleButtons.filter(isPrimaryAction);
+        const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
+        const issues = [];
+        const order = this.visibleButtons.toReversed();
+        if (primaryActions.length !== 1)
+            issues.push('LmvzModal actions slot must contain exactly one primary action.');
+        if (secondaryActions.length > 1)
+            issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
+        if (primaryActions.length) {
+            const primaryAction = primaryActions[0];
+            const secondaryAction = secondaryActions[0];
+            if (order.indexOf(primaryAction) !== 0)
+                issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
+            if (secondaryAction && order.indexOf(secondaryAction) !== 1)
+                issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
+        }
+        else if (secondaryActions.length) {
+            const secondaryAction = secondaryActions[0];
+            if (order.indexOf(secondaryAction) !== 0)
+                issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
+        }
+        return issues;
+    }
+    handleActionsSlotChange = () => {
+        this.observeActionState();
+        this.syncActionsState();
+    };
+    observeActionState() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.actionsStateObserver?.disconnect();
+        if (!this.assignedButtons.length)
+            return;
+        this.actionsStateObserver = new MutationObserver(() => {
+            this.syncActionsState();
+        });
+        this.assignedButtons.forEach((element) => {
+            this.actionsStateObserver?.observe(element, {
+                attributes: true,
+                attributeFilter: ['disabled', 'hidden', 'variant'],
+            });
+        });
+    }
+    syncActionsState() {
+        const assignedElements = this.assignedElements;
+        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.checkActions();
+        const length = this.visibleButtons.length;
+        for (let i = 0; i < length; i++) {
+            const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
+            const element = this.visibleButtons.at(i);
+            if (!element)
+                continue;
+            if (isLmvzButton(element)) {
+                if (!element.getAttribute('variant'))
+                    element.setAttribute('variant', variant);
+            }
+            else {
+                element.classList.add(variant);
+            }
+        }
+        this.focusPrimaryAction();
+    }
+    focusPrimaryAction() {
+        const focusTarget = this.primaryEnabledAction;
+        if (!focusTarget || typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(() => {
+            if (canReceiveFocus(focusTarget)) {
+                focusTarget.focus();
+            }
+        });
+    }
+    checkActions() {
+        if (!isAriaValidationEnabled())
+            return;
+        const issues = this.getActionValidationResult();
+        if (!issues.length) {
+            return;
+        }
+        issues.forEach((issue) => {
+            if (this.validationMessageCache.includes(issue))
+                return;
+            console.warn(issue);
+            this.validationMessageCache.push(issue);
+        });
+    }
+    render() {
+        return (h(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
+    }
+    static get is() { return "lmvz-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "primaryEnabledAction": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLButtonElement | undefined",
+                    "resolved": "HTMLButtonElement | undefined",
+                    "references": {
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false
+            },
+            "hasActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-actions"
+            }
+        };
+    }
+}
+function isActionButton(element) {
+    return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
+}
+function isLmvzButton(element) {
+    return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
+}
+function isDisabledButton(element) {
+    return element.hasAttribute('disabled') || element.disabled === true;
+}
+function isVisible(element) {
+    return !element.hasAttribute('hidden');
+}
+function getActionVariant(element) {
+    const variant = element.getAttribute('variant') ?? element.variant;
+    return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
+}
+function isPrimaryAction(element) {
+    return getActionVariant(element) === 'primary';
+}
+function isSecondaryAction(element) {
+    return getActionVariant(element) === 'secondary';
+}

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

@@ -47,13 +47,18 @@ h6 {
   margin: 0;
 }
 
+*[hidden] {
+  display: none !important;
+}
+
 }
 :host {
   /** component dependencies */
   /* * the (invalid nested) import will be handled by postcss */
   /* stylelint-disable no-invalid-position-at-import-rule */
   button {
-  --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+  /* secondary styling is default, primary is explicit */
+  --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000));
   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
@@ -62,7 +67,7 @@ h6 {
   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-button-border-width: 0;
   --lmvz-button-border-color: transparent;
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
 
   display: inline-flex;
   align-items: center;
@@ -109,18 +114,35 @@ button:is([disabled], .disabled) {
 }
 
 button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
 }
 
 button:not([disabled]):active {
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
+}
+
+button.primary {
+  --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);
+  --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff);
+  --lmvz-button-border-width: 0;
+  --lmvz-button-border-color: transparent;
+}
+
+button.primary:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+}
+
+button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 button.secondary {
   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
-  --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --lmvz-button-border-width: 0;
+  --lmvz-button-border-color: transparent;
 }
 
 button.secondary:not([disabled], .disabled):hover {
@@ -133,12 +155,6 @@ button.secondary:not([disabled], .disabled):active {
   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
-/* button.secondary:is([disabled], .disabled) {
-  --lmvz-button-background: var(--lmvz-global-color-neutral-200);
-  --lmvz-button-border-color: var(--lmvz-global-color-neutral-400);
-  --lmvz-button-color: var(--lmvz-global-color-neutral-700);
-} */
-
 button.tertiary {
   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);
@@ -152,11 +168,6 @@ button.tertiary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
 }
 
-/* button.tertiary:is([disabled], .disabled) {
-  --lmvz-button-background: var(--lmvz-global-color-neutral-100);
-  --lmvz-button-color: var(--lmvz-global-color-neutral-600);
-} */
-
 button.small {
   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));

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

@@ -19,7 +19,7 @@ export class LmvzCard {
         const imgStyle = {
             backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (h(Host, { key: '46c2832b4f90b9eb222749632bc7ad59cd645e10', role: "article" }, h("div", { key: 'cc387fe96cff2dd04c24f75cf838a2bf6f438279', class: "top" }, h("div", { key: 'f9a54a5f81378ef4265e1d74c36c78af002e8874', class: "image-wrapper", style: imgStyle }, h("div", { key: '76daed00408f7ae9ee46977637ddcd3d4f846380', class: "chip-slot" }, h("slot", { key: '6ad522ef7428166b876d0218ef8d801c4ef337f1', name: "chip" })))), h("div", { key: '9c9799668ac199cfecbe10061e271d70d70e2d07', class: "bottom" }, h("header", { key: '1bec743235bea5c7ab163225ffbd7bc6cf11f754' }, h("h2", { key: '06f8e14153328bc5ca920e71e09d9343047c440c', class: "title" }, this.cardTitle)), h("p", { key: '86b95db4e6464ca3236b4a03798013c3580819bf', class: "description" }, this.description), h("div", { key: '553dc998d5318a4730196baa0b9baff3a0a3369f', class: "actions" }, h("button", { key: '7532d01b46769198c23a1b1015c187fdefce146a', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '633d679ae59b1896aa2a06e04b4564569cf27a7d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'b72c45f93d259502b9d7c5ffb19e292a53c60ec6', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '2d9ecdeed986f142fb7ff477b56dece59549bbc7', role: "article" }, h("div", { key: '34fc9c3a1338b31ce73424e8c07c79a291ead85c', class: "top" }, h("div", { key: '1756e6b26d7f42499753c36ed0fc13755fe32bfe', class: "image-wrapper", style: imgStyle }, h("div", { key: 'cd8be8acc9e949092b6363024316d12d445a9fbc', class: "chip-slot" }, h("slot", { key: '26389ab3b7031b948ff1701857e6028446662cf5', name: "chip" })))), h("div", { key: '2fa61cd7bef437f15929ae39be7fa294e8778321', class: "bottom" }, h("header", { key: 'b237ca025e42a29f528f827dc3c83b3b0f9267c0' }, h("h2", { key: 'ffd0a509ba97acb75d4c15d0fd01eef08689a2a7', class: "title" }, this.cardTitle)), h("p", { key: 'c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1', class: "description" }, this.description), h("div", { key: '7663f93b41ef1e798b464bd6ad75ca8a53c0667b', class: "actions" }, h("button", { key: '3348e6700aa1571183558ab8fe4f73393c1cc943', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: 'd3a12cdabbdd68c3b04e06984db44abd3bbd22ea', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '80e31e6b691e18d1b42a2b4831349c3abf8e02b0', class: "icon-placeholder" }, "..."))))));
     }
     static get is() { return "lmvz-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -83,7 +83,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.lmvzChange.emit(this.checked);
     };
     render() {
-        return (h(Host, { key: '6014c885305bc9824f7a6d4f0ba8c642125f3a5b' }, h("div", { key: 'cbc6de2b684acfb00b77a366e707d73de74a0b8a', class: "pill" }, h("input", { key: '5b442512b6cab2e60a1d62fd40e4c868b1bf87ac', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '09c534b7c5642c620129ea05a4468bd584c56ce7', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: 'eaa49e1a60054f8efc62ade0446a4704f0bb46e9', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '8fb836d71cbb3d4eadaf67284f5bb52906549275', class: "content" }, h("label", { key: '8df862f11e9885158264908fdac6599f21ecba07', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '1e45e6177774e937311cddacd1a3d3379c9c6af5', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '83fc1f7cd6828973e52ef27604f12f94f41d7f4b', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: '70201fa49465f1e29b98bb251ea254be0293b1df' }, h("div", { key: 'dfeb788e3e2d9a8329e7798954c744eee616692e', class: "pill" }, h("input", { key: '79fefaa297a5fbbb1b7f180c7cf4cccf8650a1f0', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '8808a026274979678515b3e750065af38d62fff9', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '861c08fb2a5cc6f24d3ae0a9f28cb6d2f51beda4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '6dc36656d76bd3a6816553b4dcbdbea2c9bd2b0f', class: "content" }, h("label", { key: 'c343c4261e2eb231925d0f3ca0a83f9f3cdd0b9b', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '8473ed19adfe975b715a5e0b78c949c6b11de99e', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'e934cec1cc622908188cf9090e24988e5df45799', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: '14ee006aff40f125aef2e9a461e68e25c6ed27d6', type: this.type, size: this.size }, h("slot", { key: '3222c7f40b833f344aa233c13e2644d6e928bf4c', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '4d1c9fa87ccda9387b945444e9ac6a50703a19e5', class: "content-overflow-wrapper" }, h("slot", { key: '42866115b8a6c50e86663ed8934504240ee0e6fa', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '890afa73be440ee7e7620a024744be08fee57b83', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '70654d69189e77f9356853a921366083b2c4b969', type: this.type, size: this.size }, h("slot", { key: 'c7e667b93166286fe68a812dd8eec82885e3fc5e', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'af38dd0429b42685a114e26175ce42d09f5fdcc1', class: "content-overflow-wrapper" }, h("slot", { key: '924158498d65b9ac7c912b6b1a479016176e0b78', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '9ff0394dbfb2131fafe513d0f2d8ce26c7781f20', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '87ecb9948039ea2f4b998bf35865e5839708a65c', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4f1ae09b1a3e0a9c3eb12659b3952eef34cbd67b', class: "brand" }, h("slot", { key: '99c03f87f0b3462d9b44835ba34ee05c75373b22', name: "brand" }, h("img", { key: '1616ce8464c2e798a53bc7c879385e3882e4d32f', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'ff7c56dbc9e80ba9a0757683069e1cba168abcb6', "aria-label": "Hauptnavigation" }, h("div", { key: 'a3bb67d788b936422992b066431c73098ff2aa11', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'e85b93f943c6d97bd5a7fa6f75e4855785d09ec5', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'e9efcfc5d3a8cb991c255b32b205924dafb5aaf6', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '7314e6a72705d48b347fa30945b1d5513b87bfd3', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'aee503cddbf8964833934e594caf5faa6e073a02', class: "actions" }, h("slot", { key: '5c1b15c0507ef24f67e37cd1652b4cc5ce4cc104', name: "actions" }))));
+        return (h(Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, h("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, h("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, h("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, h("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, h("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: 'e76fe28500b3545b8917ecdad590da5bc04ed38f', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {

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

@@ -150,9 +150,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '3cbfee5fccbb5efe1bfb9c6622653e11d4896615', class: classNames('input-container', {
+        return (h("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '2712b0d5eda0ca1d4da70f362047df07acf922a5', class: "input-wrapper" }, h("slot", { key: '992bc86de6b3bdd3cdbac1c000d38a338e6e4474', name: "before-input" }), h("div", { key: '35ace7d889667f5d09eea76dcba161f8711c9b1c', class: "label-input-group" }, h("label", { key: '28520dddf331d35ba75283673aa81e0046628907', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b91766b86b1bc68ce3dbb4b734ee4aa40fe0759b', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'ed7cd4b64091256df1c3b939c1e22d6082fe58b9', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: '1e42c305b8e554fadd7c50fbbb54ea234c734b0a', name: "after-input" })), h("div", { key: '190a1a92971a717f3ef594615fbe4dd0c9a72493', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '4d07b45a51d3733caf09a1bbc56ae6f51411ecbc', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, h("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), h("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, h("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), h("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (h(Host, { key: 'a87116fba2d35c612e590c6b4e12c03b60d1ef0e' }, h("slot", { key: 'b302049db0b5818d4d7f90c043eb5c3caf48ca1b', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: '3a722fe1fbacabd99ac5a5bd23537a1ff383fb95' }, h("slot", { key: 'e475dd50bbd2f9f349edb61766a0b21c1fb1ae16', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -47,42 +47,52 @@ h6 {
   margin: 0;
 }
 
+*[hidden] {
+  display: none !important;
+}
+
 }
 :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;
+  /* TODO: missing token for modal/box gap */
+  --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
 }
 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);
+  background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29);
 }
 .modal-shell {
+  position: relative;
   display: flex;
   flex-direction: column;
+  inline-size: fit-content;
+  max-inline-size: clamp(40rem, 100%, 80vw);
   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);
+  padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem));
+  padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
+  border-radius: var(--lmvz-component-modal-border-radius, 18px);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
   /* TODO(LDHCID-135): clarify overflow behaviour */
   overflow: auto;
+
+  .close-button {
+    position: absolute;
+    top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  }
+}
+@media (min-width: 768px) {
+  .modal-shell {
+    max-inline-size: 100vw;
+  }
 }
 .header {
   display: flex;
@@ -102,19 +112,3 @@ dialog::backdrop {
   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;
-}