@lmvz-ds/components 0.34.0 → 0.35.1

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

@@ -12,14 +12,47 @@ const TYPE_SVG = {
     warning: WARNING_SVG,
 };
 const BLOCK_TAGS = new Set([
-    'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE',
-    'CAPTION', 'COLGROUP',
-    'DD', 'DETAILS', 'DIALOG', 'DIV', 'DL', 'DT',
-    'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
-    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HGROUP', 'HR',
-    'LI', 'MAIN', 'MENU', 'NAV',
-    'OL', 'P', 'PRE',
-    'SECTION', 'TABLE', 'TBODY', 'TD', 'TH', 'THEAD', 'TFOOT', 'TR',
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'CAPTION',
+    'COLGROUP',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LI',
+    'MAIN',
+    'MENU',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SECTION',
+    'TABLE',
+    'TBODY',
+    'TD',
+    'TH',
+    'THEAD',
+    'TFOOT',
+    'TR',
     'UL',
 ]);
 export class LmvzMessage {
@@ -60,7 +93,7 @@ export class LmvzMessage {
     }
     render() {
         const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
-        return (h(Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && h("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, h("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        return (h(Host, { key: '99dad82a6300fb8d089f1ea688186d4b4316a058', role: role }, this.leadingIcon && h("span", { key: '2adf33102f7075a83ebf29d9b6e0d433a17beb68', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '286d3d0ea065534b84be18c927b2fcd7f30f34bd', class: "message" }, h("slot", { key: '261e865980515a816382b2c7c6b3a52b500308bf', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '46d964c0490bbdd47426fc228db0e3ccb108b416', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: 'ce1ec8beb756c2e11c948e227f94f81bd5568c88', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '5361c424e77ffea7984c2fd42357666cd86ba1d6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
     }
     static get is() { return "lmvz-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -67,7 +67,7 @@ hr {
   display: contents;
 
   /* TODO: missing token for modal/box gap */
-  --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
 }
 dialog {
   border: none;
@@ -104,8 +104,8 @@ dialog::backdrop {
 
   .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));
+    top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
 .header {
@@ -116,7 +116,7 @@ dialog::backdrop {
 }
 .title {
   min-inline-size: 0;
-  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5
     Router);
 }
 .has-title .title {

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

@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), h("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, h("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), h("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
+        return (h(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '72e17391097dfa756e572764f40080b6eec222b2', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '7bbae1aefa9ccc6646d5861683e3476339a545e4', icon: closeIconSvg }))), h("div", { key: '9f22628448e9af527eb10ef2602c498afc55c029', class: "body" }, h("slot", { key: '413e72707749b3abc987ef47a81cccda4b874c84' })), h("footer", { key: 'a1a8f648e88d1f9045e9cf866d332aac69e033df', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '7d7eeee7a2551a09bfb4fc513bde48828be5ee8b', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '76b00523167c5fa08f11fc351a37638227401711', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,36 @@
+import { vi } from "vitest";
+export const mockDialogMethods = (dialog) => {
+    const showModal = vi.fn(() => {
+        dialog.open = true;
+        const closeButton = dialog.querySelector('.close-button');
+        closeButton?.focus();
+    });
+    const close = vi.fn((returnValue) => {
+        dialog.returnValue = returnValue ?? '';
+        dialog.open = false;
+        const closeEvent = dialog.ownerDocument.createEvent('Event');
+        closeEvent.initEvent('close', true, true);
+        dialog.dispatchEvent(closeEvent);
+    });
+    Object.defineProperty(dialog, 'showModal', {
+        configurable: true,
+        value: showModal,
+    });
+    Object.defineProperty(dialog, 'close', {
+        configurable: true,
+        value: close,
+    });
+    const requestClose = vi.fn((returnValue) => {
+        const cancelEvent = dialog.ownerDocument.createEvent('Event');
+        cancelEvent.initEvent('cancel', false, true);
+        dialog.dispatchEvent(cancelEvent);
+        if (!cancelEvent.defaultPrevented) {
+            close(returnValue);
+        }
+    });
+    Object.defineProperty(dialog, 'requestClose', {
+        configurable: true,
+        value: requestClose,
+    });
+    return { showModal, close, requestClose };
+};

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

@@ -1,14 +1,18 @@
 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";
+import { isFocusControllerHost } from "../../utils/aria/directional-focus-controller";
+import { addElementActivationListener } from "../../utils/aria/element-activation-controller";
+import { wait, waitFrame } from "../../utils/async/async.util";
+import { canReceiveFocus, getDeepActiveElement, isActionButton, isHtmlElement, isInteractiveElement, walkShadowDOMUntil } from "../../utils/element/element.util";
 export class LmvzPopover {
     el;
-    closureController = new AbortController();
+    extEventController = new AbortController();
+    closureController;
     containerEl;
     slotEl;
     previouslyFocusedElement = null;
+    anchorEl;
     open = false;
     anchor;
     placement = 'bottom-start';
@@ -34,7 +38,6 @@ export class LmvzPopover {
     }
     componentDidLoad() {
         autoAssignId(this.el);
-        validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -44,24 +47,40 @@ export class LmvzPopover {
             this.onClose();
         }
     }
-    handleAnchorChange() {
-        if (this.open) {
-            this.updatePosition();
+    async handleAnchorChange(anchor) {
+        if (!anchor) {
+            console.warn('anchor property missing for popover', this.el?.id);
+            this.anchor = undefined;
+            return;
         }
+        await wait();
+        this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
+        this.setupAnchorEl();
+        if (!this.open)
+            return;
+        this.updatePosition();
     }
     disconnectedCallback() {
         this.removeCloseHandlers();
+        this.extEventController.abort();
     }
-    resolveAnchor() {
-        if (!this.anchor)
-            return null;
-        if (typeof this.anchor === 'string') {
-            return document.getElementById(this.anchor);
+    setupAnchorEl() {
+        const { anchorEl } = this;
+        if (!anchorEl) {
+            console.warn('no anchor element set for', this);
+            return;
+        }
+        if (!anchorEl.hasAttribute('aria-haspopup')) {
+            anchorEl.setAttribute('aria-haspopup', 'dialog');
         }
-        return this.anchor;
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+        if (isActionButton(anchorEl)) {
+            addElementActivationListener(anchorEl, this.toggle.bind(this), this.extEventController.signal);
+        }
+        validatePopoverAria(this.el, this.label, this.anchor, anchorEl);
     }
     async updatePosition() {
-        const anchorEl = this.resolveAnchor();
+        const { anchorEl } = this;
         const container = this.containerEl;
         if (!anchorEl || !container)
             return;
@@ -76,7 +95,6 @@ export class LmvzPopover {
     async onOpen() {
         this.previouslyFocusedElement = getDeepActiveElement(document);
         this.setupCloseHandlers();
-        console.log('onOpen');
         await waitFrame();
         await this.updatePosition();
         autoAssignId(this.el);
@@ -94,20 +112,14 @@ export class LmvzPopover {
         this.lmvzClose.emit();
     }
     applyAnchorAriaOpen() {
-        const anchorEl = this.resolveAnchor();
-        if (!anchorEl)
+        if (!this.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'));
+        this.anchorEl.setAttribute('aria-expanded', 'true');
     }
     applyAnchorAriaClose() {
-        const anchorEl = this.resolveAnchor();
-        if (!anchorEl)
+        if (!this.anchorEl)
             return;
-        anchorEl.setAttribute('aria-expanded', 'false');
+        this.anchorEl.setAttribute('aria-expanded', 'false');
     }
     focusFirst() {
         const { slotEl } = this;
@@ -115,6 +127,12 @@ export class LmvzPopover {
             return;
         const assigned = slotEl.assignedElements({ flatten: true });
         for (const el of assigned) {
+            if (!isHtmlElement(el))
+                continue;
+            if (isFocusControllerHost(el)) {
+                el.initFocus();
+                return;
+            }
             const focusable = walkShadowDOMUntil(el, canReceiveFocus);
             if (focusable) {
                 focusable.focus();
@@ -136,6 +154,7 @@ export class LmvzPopover {
         }
     }
     setupCloseHandlers() {
+        this.closureController = new AbortController();
         const options = { signal: this.closureController.signal };
         document.addEventListener('mousedown', (event) => {
             if (!this.open)
@@ -153,10 +172,10 @@ export class LmvzPopover {
         }, options);
     }
     removeCloseHandlers() {
-        this.closureController.abort();
+        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) }))));
+        return (h(Host, { key: '744dae23d80c1e81a0b8bd2e9fcb02c6669d54cd' }, h("div", { key: '7f40e25f1e05738b2bbf900b90613004eb188395', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '5a400fd9e697254007973f2dce172588fe3760ee', ref: (el) => (this.slotEl = el) }))));
     }
     static get is() { return "lmvz-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -323,6 +342,11 @@ export class LmvzPopover {
             }
         };
     }
+    static get states() {
+        return {
+            "anchorEl": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "lmvzOpen",
@@ -433,7 +457,10 @@ export class LmvzPopover {
                 "methodName": "handleOpenChange"
             }, {
                 "propName": "anchor",
-                "methodName": "handleAnchorChange"
+                "methodName": "handleAnchorChange",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }

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);
@@ -117,7 +117,7 @@ label {
 }
 .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;
 }
@@ -150,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-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-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 {

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

@@ -25,7 +25,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -49,9 +49,9 @@ button {
   justify-content: center;
   gap: var(--lmvz-component-component-spacing-0-default, 4px);
 
-  padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
-  padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
 
   border: none;
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
@@ -89,9 +89,9 @@ button:active {
   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
 }
 :host([has-media]) button {
-  padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
-  padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
+  padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
 }
 :host([has-media]) button:hover {
@@ -145,10 +145,10 @@ button:active {
   --lmvz-component-color: var(--lmvz-tab-color);
 }
 ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
 }
 :host([has-media]) ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
 }
 .label {
   display: contents;

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

@@ -25,7 +25,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -47,7 +47,7 @@ hr {
   display: none; /* Chrome/Safari */
 }
 :host([has-icon-tabs]) .tablist {
-  gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   background: none;
   border-radius: 0;
 }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
+import { DirectionalFocusController } from "../../utils/aria/directional-focus-controller";
 import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let tabsIdCounter = 0;
 export class LmvzTabs extends ReactiveControllerHost {
@@ -43,6 +43,9 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.syncFocusTargets();
         this.syncTabOrientation();
     }
+    async initFocus() {
+        this.focusController.initFocus();
+    }
     async activateTab(value) {
         const tab = this.findTabByValue(value);
         if (!tab || this.isTabDisabled(tab))
@@ -232,7 +235,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, h("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: '98df29f336a3ea47efa6c76a773de28c5174c718', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '7e35ae180c4ebf2f5a82e0fad0977cd3c38ac659', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '2520bc8b8988a60b37a067828ad237bf8dcfcc59', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: 'bd4a954b6caca2d9f2eb588f58590821ec4af888', part: "panels-container", class: "panels-container" }, h("slot", { key: 'b4dffff530328e6e4c8d305895ef4dd2d5952757', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -317,6 +320,23 @@ export class LmvzTabs extends ReactiveControllerHost {
     }
     static get methods() {
         return {
+            "initFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically set focus to the first managed element.",
+                    "tags": []
+                }
+            },
             "activateTab": {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",

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

@@ -41,8 +41,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
-  padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
   /* min-height: 38px; */
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
@@ -74,7 +74,7 @@
   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);
 }
 :host(:not([disabled]):hover) .track {
-  border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1);
 }
 :host([checked]) .track {
   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);