@lmvz-ds/components 0.33.0 → 0.35.0

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

@@ -0,0 +1,470 @@
+import { Host, h } from "@stencil/core";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { waitFrame } from "../../utils/async/async.util";
+import { canReceiveFocus, getDeepActiveElement, isInteractiveElement, walkShadowDOMUntil } from "../../utils/element/element.util";
+export class LmvzPopover {
+    el;
+    closureController = new AbortController();
+    containerEl;
+    slotEl;
+    previouslyFocusedElement = null;
+    open = false;
+    anchor;
+    placement = 'bottom-start';
+    size = 'sm';
+    autoFocus = true;
+    label;
+    lmvzOpen;
+    lmvzClose;
+    lmvzCancel;
+    async show() {
+        this.open = true;
+    }
+    async hide() {
+        this.triggerClose();
+    }
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    componentDidLoad() {
+        autoAssignId(this.el);
+        validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.onOpen();
+        }
+        else {
+            this.onClose();
+        }
+    }
+    handleAnchorChange() {
+        if (this.open) {
+            this.updatePosition();
+        }
+    }
+    disconnectedCallback() {
+        this.removeCloseHandlers();
+    }
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.getElementById(this.anchor);
+        }
+        return this.anchor;
+    }
+    async updatePosition() {
+        const anchorEl = this.resolveAnchor();
+        const container = this.containerEl;
+        if (!anchorEl || !container)
+            return;
+        const placement = toFloatingUiPlacement(this.placement);
+        const { x, y } = await computePosition(anchorEl, container, {
+            placement,
+            middleware: [offset(4), flip(), shift({ padding: 8 })],
+        });
+        container.style.left = `${x}px`;
+        container.style.top = `${y}px`;
+    }
+    async onOpen() {
+        this.previouslyFocusedElement = getDeepActiveElement(document);
+        this.setupCloseHandlers();
+        console.log('onOpen');
+        await waitFrame();
+        await this.updatePosition();
+        autoAssignId(this.el);
+        this.applyAnchorAriaOpen();
+        this.lmvzOpen.emit();
+        await waitFrame();
+        if (this.autoFocus) {
+            this.focusFirst();
+        }
+    }
+    onClose() {
+        this.removeCloseHandlers();
+        this.applyAnchorAriaClose();
+        this.restoreFocus();
+        this.lmvzClose.emit();
+    }
+    applyAnchorAriaOpen() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        if (!anchorEl.hasAttribute('aria-haspopup')) {
+            anchorEl.setAttribute('aria-haspopup', 'dialog');
+        }
+        anchorEl.setAttribute('aria-expanded', 'true');
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+    }
+    applyAnchorAriaClose() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        anchorEl.setAttribute('aria-expanded', 'false');
+    }
+    focusFirst() {
+        const { slotEl } = this;
+        if (!slotEl)
+            return;
+        const assigned = slotEl.assignedElements({ flatten: true });
+        for (const el of assigned) {
+            const focusable = walkShadowDOMUntil(el, canReceiveFocus);
+            if (focusable) {
+                focusable.focus();
+                return;
+            }
+        }
+    }
+    restoreFocus() {
+        const el = this.previouslyFocusedElement;
+        if (el?.isConnected) {
+            el.focus();
+        }
+        this.previouslyFocusedElement = null;
+    }
+    triggerClose() {
+        const event = this.lmvzCancel.emit();
+        if (!event.defaultPrevented) {
+            this.open = false;
+        }
+    }
+    setupCloseHandlers() {
+        const options = { signal: this.closureController.signal };
+        document.addEventListener('mousedown', (event) => {
+            if (!this.open)
+                return;
+            if (this.el.contains(event.target))
+                return;
+            this.triggerClose();
+        }, options);
+        document.addEventListener('keydown', (event) => {
+            if (!this.open)
+                return;
+            if (event.key !== 'Escape')
+                return;
+            this.triggerClose();
+        }, options);
+    }
+    removeCloseHandlers() {
+        this.closureController.abort();
+    }
+    render() {
+        return (h(Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, h("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
+    }
+    static get is() { return "lmvz-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-popover.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": "Whether the popover is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLElement",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The anchor element or its id. Used for positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"end\" | \"start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom-start'"
+                        }],
+                    "text": "Preferred placement relative to the anchor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'sm'"
+                        }],
+                    "text": "Controls the size variant of the card surface."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to move focus to the first focusable element on open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the popover container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzOpen",
+                "name": "lmvzOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzClose",
+                "name": "lmvzClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzCancel",
+                "name": "lmvzCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired before light-dismiss or Escape close.\nCall `event.preventDefault()` to veto the close."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the popover.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the popover, firing lmvzCancel first. If cancelled, the popover stays open.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover open state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "anchor",
+                "methodName": "handleAnchorChange"
+            }];
+    }
+}
+let popoverIdCounter = 0;
+function autoAssignId(hostEl) {
+    if (!hostEl.getAttribute('id')) {
+        hostEl.setAttribute('id', `lmvz-popover-${popoverIdCounter++}`);
+    }
+}
+function toFloatingUiPlacement(placement) {
+    if (placement === 'start')
+        return 'left';
+    if (placement === 'end')
+        return 'right';
+    return placement;
+}
+function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
+    if (!isAriaValidationEnabled())
+        return;
+    const hasAriaLabel = !!label;
+    const hasAriaLabelledBy = hostEl.hasAttribute('aria-labelledby');
+    if (!hasAriaLabel && !hasAriaLabelledBy) {
+        console.warn('[lmvz-popover] Host element has no accessible label. Provide a `label` prop or an `aria-labelledby` attribute pointing to a valid element.');
+    }
+    if (!anchorProp)
+        return;
+    if (!anchorEl) {
+        console.warn('[lmvz-popover] Anchor prop is set but resolved to null. Ensure the anchor element exists in the DOM when the component loads.');
+        return;
+    }
+    if (!isInteractiveElement(anchorEl)) {
+        console.warn('[lmvz-popover] Anchor element is not interactive. Ensure the anchor is a button, link, input, select, textarea, has a `tabindex` attribute, or has an ARIA role that implies interactivity (button, link, menuitem, option, combobox, listbox, checkbox, radio, switch, tab).');
+    }
+}

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

@@ -45,9 +45,9 @@
 
   --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
-  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);
   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 
   --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
@@ -55,7 +55,7 @@
 
   --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
+  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
 
   --radio-easing: var(--lmvz-global-easing-default, ease);
   --radio-duration: 0.2s;
@@ -63,8 +63,8 @@
   display: flex;
   align-items: center;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   overflow: clip;
   cursor: pointer;
@@ -74,8 +74,8 @@
 }
 input {
   position: absolute;
-  inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   opacity: 0;
   width: var(--radio-circle-size);
   height: var(--radio-circle-size);
@@ -110,16 +110,14 @@ input {
   min-width: 0;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--radio-label-color);
   cursor: pointer;
   transition: color var(--radio-duration) var(--radio-easing);
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;
 }
@@ -152,7 +150,7 @@ label {
   border-color: var(--radio-border-color-error);
 }
 :host([error]) .helper-text {
-  color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 /* Disabled state */
 :host([disabled]) {

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

@@ -137,7 +137,7 @@ export class LmvzRadio extends ReactiveControllerHost {
         this.radioGroupController.setFocused(target);
     }
     render() {
-        return (h(Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, h("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), h("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, h("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), h("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: 'c233b8f8e67016dd9a8622359bd91d3193735438' }, h("input", { key: '6a0a028f4ae346b60f86109d33058f7a04f0f2f8', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'f86096dd776236e07292dab77a37aeedffb8d8d4', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '8e93beefee742af62775d4d5945df8d13adb739f', class: "dot" })), h("span", { key: '19df96e6d015d0f74c96781ae49191a542a4f41d', class: "content" }, h("label", { key: 'b678b54ca139191ff78d5f503b73ea407eeb0708', htmlFor: this.radioId }, this.label), h("span", { key: '4a1e8a60594e959cb5549dd20b3d35a715ce1d99', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,20 +49,20 @@
   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
-  --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 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, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 .select-wrapper {
   position: relative;
@@ -201,7 +201,7 @@ select {
   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
 }
 :host([size='small']) div[aria-hidden] > span:first-child {
-  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='small']) div[aria-hidden] svg {
   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
@@ -211,7 +211,7 @@ select {
   --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='large']) div[aria-hidden] > span:first-child {
   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));

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

@@ -51,7 +51,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', 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: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
+        return (h(Host, { key: 'f1180d4a5f1c30414b06c19314eb75630aa181f7', "data-highlighted": String(this.highlighted) }, h("div", { key: '01088c7f3315faab1fb23c99cf8b30f7d59abfc6', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '34d23292b6b65fac000f822e1e2839e28b1bfee9', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'ba171cdd9b53f8fa7b7fcb2c39a0b4aa69940b95', "aria-hidden": "true" }, " *")), h("div", { key: '798a6ef187b4aaaa45ecb3d6f94c30e7facb7a38', "aria-hidden": "true" }, h("span", { key: '33ea2169d94f4f8cf6263ed0c3bd6a9e593207a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '0ea2d4987587a1a42dfd037dcefeed3f1b3356ef', "aria-hidden": "true" }, " *")), h("span", { key: '7bd24b3921cc5cd261f563476a79d61a288d60bb' }, h("svg", { key: '9887853724abada1fe36f7225db7903ee6e4040d', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: 'b55a82230d46944ca3bd46f00f8c59b1a75ab8b8', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: 'd786f49b4522baf4c803ed3046b3606f29d6dae1', 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: '5ffa7ffb7cd79c28a8bd212cc4d123dceb77aad4', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '8a4141ead35cfd07c14d869715397d12ea8b64d7' }))), this.helperText && h("div", { key: 'dc5ccd28b0a903f6ed674d994e302caed1d9e9bb', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
 :host {
   position: fixed;
-  bottom: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  bottom: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   left: 50%;
   transform: translateX(-50%);
   z-index: 2147483000; /* TODO(tokens): promote to design-token */
@@ -8,40 +8,40 @@
   width: max-content;
   border: 1px solid transparent;
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  gap: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 
   pointer-events: auto;
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
 
   /* this will be picked up by lmvz-icon as well */
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 
   color: var(--lmvz-component-color);
 }
 
 :host([status='success']) {
-  background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
-  border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  background-color: var(--lmvz-semantic-color-status-success, #c2e6e1);
+  border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 }
 
 :host([status='warning']) {
-  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 :host([status='error']) {
-  background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
-  border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
-  --lmvz-component-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0);
+  border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 
 lmvz-icon {