@lmvz-ds/components 0.24.0 → 0.26.0

package/cjs/lmvz-radio.cjs.entry.js

@@ -0,0 +1,334 @@
+'use strict';
+
+var index = require('./index-BCFBLj0e.js');
+var reactiveControllerHost = require('./reactive-controller-host-DrtMkMd7.js');
+require('./aria-loader-BRo2FTGh.js');
+
+function groupKey(name, scope) {
+    if (scope instanceof HTMLFormElement) {
+        if (!scope.dataset['lmvzRadioGroupId']) {
+            scope.dataset['lmvzRadioGroupId'] = String(Math.random());
+        }
+        return `${name}::form::${scope.dataset['lmvzRadioGroupId']}`;
+    }
+    return `${name}::document`;
+}
+function getScope(el) {
+    return el.closest('form') ?? document;
+}
+function getNativeInput(host) {
+    return host.el.shadowRoot?.querySelector('input') ?? host.el.querySelector('input') ?? null;
+}
+class RadioGroup {
+    hosts = [];
+    _focusedHost = null;
+    _focusinHandler = (event) => {
+        if (!this.hosts.some((h) => h.el.contains(event.target))) {
+            this.clearFocused();
+        }
+    };
+    register(host) {
+        if (!this.hosts.includes(host)) {
+            const wasEmpty = this.hosts.length === 0;
+            this.hosts.push(host);
+            this.sortHosts();
+            if (wasEmpty) {
+                document.addEventListener('focusin', this._focusinHandler, true);
+            }
+        }
+    }
+    unregister(host) {
+        if (host === this._focusedHost) {
+            this._focusedHost = null;
+        }
+        this.hosts = this.hosts.filter((h) => h !== host);
+        if (this.hosts.length === 0) {
+            document.removeEventListener('focusin', this._focusinHandler, true);
+        }
+    }
+    get sortedEnabled() {
+        return this.hosts.filter((h) => !h.disabled);
+    }
+    setFocused(host) {
+        this._focusedHost = host;
+        this.updateTabindex();
+        host.focusInput();
+    }
+    clearFocused() {
+        this._focusedHost = null;
+        this.updateTabindex();
+    }
+    select(selectedHost) {
+        this._focusedHost = null;
+        for (const host of this.hosts) {
+            host.checked = host === selectedHost;
+        }
+        this.updateTabindex();
+    }
+    updateTabindex() {
+        const enabled = this.sortedEnabled;
+        const checkedHost = this.hosts.find((h) => h.checked);
+        let tabbableHost;
+        if (this._focusedHost && enabled.includes(this._focusedHost)) {
+            tabbableHost = this._focusedHost;
+        }
+        else {
+            tabbableHost = checkedHost ?? enabled[0] ?? null;
+        }
+        for (const host of this.hosts) {
+            const input = getNativeInput(host);
+            if (input) {
+                input.tabIndex = host === tabbableHost ? 0 : -1;
+            }
+        }
+    }
+    sortHosts() {
+        this.hosts.sort((a, b) => {
+            const pos = a.el.compareDocumentPosition(b.el);
+            return pos & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+    }
+}
+class RadioGroupController {
+    host;
+    static registry = new Map();
+    group = null;
+    _groupKey = null;
+    _scope = null;
+    constructor(host) {
+        this.host = host;
+    }
+    hostConnected() {
+        const { group, key, scope } = RadioGroupController.acquireGroup(this.host);
+        this._groupKey = key;
+        this._scope = scope;
+        this.group = group;
+        this.group.register(this.host);
+        this.group.updateTabindex();
+    }
+    hostDidRender() {
+        this.group?.updateTabindex();
+    }
+    hostDisconnected() {
+        if (this.group) {
+            this.group.unregister(this.host);
+            this.group.updateTabindex();
+            RadioGroupController.releaseGroup(this._groupKey, this._scope);
+            this._groupKey = null;
+            this._scope = null;
+            this.group = null;
+        }
+    }
+    get sortedEnabled() {
+        return this.group?.sortedEnabled ?? [];
+    }
+    select(selectedHost) {
+        this.group?.select(selectedHost);
+    }
+    setFocused(host) {
+        this.group?.setFocused(host);
+    }
+    clearFocused() {
+        this.group?.clearFocused();
+    }
+    updateTabindex() {
+        this.group?.updateTabindex();
+    }
+    static acquireGroup(host) {
+        const name = host.name;
+        if (!name) {
+            return { group: new RadioGroup(), key: null, scope: null };
+        }
+        const scope = getScope(host.el);
+        const key = groupKey(name, scope);
+        let entry = RadioGroupController.registry.get(key);
+        if (!entry) {
+            entry = { group: new RadioGroup(), refCount: 0 };
+            RadioGroupController.registry.set(key, entry);
+        }
+        entry.refCount++;
+        return { group: entry.group, key, scope };
+    }
+    static releaseGroup(key, scope) {
+        if (!key)
+            return;
+        const entry = RadioGroupController.registry.get(key);
+        if (!entry)
+            return;
+        entry.refCount--;
+        if (entry.refCount <= 0) {
+            RadioGroupController.registry.delete(key);
+            if (scope instanceof HTMLFormElement) {
+                scope.removeAttribute('data-lmvz-radio-group-id');
+            }
+        }
+    }
+}
+
+const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --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-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --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-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    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));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   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));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   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.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }`;
+
+const focusWithinCss = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
+
+let radioIdCounter = 0;
+const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
+    get el() { return index.getElement(this); }
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInput;
+    radioId = `lmvz-radio-${radioIdCounter++}`;
+    initialChecked = false;
+    radioGroupController;
+    get helperId() {
+        return this.helperText ? `${this.radioId}-helper` : undefined;
+    }
+    label;
+    checked = false;
+    value = 'on';
+    name;
+    disabled = false;
+    required = false;
+    error = false;
+    helperText;
+    form;
+    autofocus = false;
+    _handlingNativeChange = false;
+    _handlingFormReset = false;
+    handleCheckedChange(newVal, oldVal) {
+        this.internals.setFormValue?.(newVal ? this.value : null);
+        if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(false);
+        }
+        if (newVal && !oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(true);
+        }
+    }
+    handleValueChange(newVal) {
+        if (this.checked) {
+            this.internals.setFormValue?.(newVal);
+        }
+    }
+    handleLabelChange(newVal) {
+        if (!newVal) {
+            console.warn('[lmvz-radio] label prop is required and must not be empty');
+        }
+    }
+    lmvzChange;
+    lmvzActivation;
+    async focusInput() {
+        this.nativeInput?.focus();
+    }
+    async checkValidity() {
+        return this.internals?.checkValidity() ?? true;
+    }
+    async reportValidity() {
+        return this.internals?.reportValidity() ?? true;
+    }
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.lmvzChange = index.createEvent(this, "lmvzChange", 7);
+        this.lmvzActivation = index.createEvent(this, "lmvzActivation", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.addController(new reactiveControllerHost.AriaValidationController(this, {
+            reValidateOnPropChanges: true,
+        }));
+        this.radioGroupController = new RadioGroupController(this);
+        this.addController(this.radioGroupController);
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+        super.componentWillLoad();
+    }
+    formAssociatedCallback() {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this._handlingFormReset = true;
+        try {
+            this.checked = this.initialChecked;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string')
+            return;
+        this._handlingFormReset = true;
+        try {
+            this.checked = state === this.value;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    handleChange = (event) => {
+        this._handlingNativeChange = true;
+        try {
+            const input = event.target;
+            this.checked = input.checked;
+            this.lmvzChange.emit(this.checked);
+            this.radioGroupController.select(this);
+            this.lmvzActivation.emit();
+        }
+        finally {
+            this._handlingNativeChange = false;
+        }
+    };
+    handleKeydown(event) {
+        const { key } = event;
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(key))
+            return;
+        event.preventDefault();
+        const radios = this.radioGroupController.sortedEnabled;
+        if (radios.length === 0)
+            return;
+        const currentIndex = radios.indexOf(this);
+        if (currentIndex === -1)
+            return;
+        let targetIndex;
+        if (key === 'ArrowDown' || key === 'ArrowRight') {
+            targetIndex = (currentIndex + 1) % radios.length;
+        }
+        else if (key === 'ArrowUp' || key === 'ArrowLeft') {
+            targetIndex = (currentIndex - 1 + radios.length) % radios.length;
+        }
+        else if (key === 'Home') {
+            targetIndex = 0;
+        }
+        else {
+            targetIndex = radios.length - 1;
+        }
+        const target = radios[targetIndex];
+        if (!target)
+            return;
+        this.radioGroupController.setFocused(target);
+    }
+    render() {
+        return (index.h(index.Host, { key: '0226e313fcf4fe3c3cf343cfe0776cf71da169a6' }, index.h("input", { key: '5bb1f733d2f29217bc7544d8fd24f6b21bedc654', 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 }), index.h("span", { key: 'ae18f49167d1a2e8e6ec4ceca435e69e3d79f593', class: "circle", "aria-hidden": "true" }, this.checked && index.h("span", { key: '5dfb65105831a672f2a47952aff987cd45e9b178', class: "dot" })), index.h("span", { key: 'df148ca52be7e580226d94ff9aef4e3cf5a6182c', class: "content" }, index.h("label", { key: 'e042c57755eadb64692ace49204dccb1ee03ed1c', htmlFor: this.radioId }, this.label), index.h("span", { key: 'a90b0bef927dddb39f9e6357adf888e0818a3c5a', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }],
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "label": [{
+                "handleLabelChange": 0
+            }]
+    }; }
+};
+LmvzRadio.style = lmvzRadioCss() + focusWithinCss();
+
+exports.lmvz_radio = LmvzRadio;

package/cjs/lmvz-select.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-lW-SEvL7.js');
-var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
+var index = require('./index-BCFBLj0e.js');
+var reactiveControllerHost = require('./reactive-controller-host-DrtMkMd7.js');
 require('./aria-loader-BRo2FTGh.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
-const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);       --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-select-height: 40px;   --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   cursor: pointer;   position: relative;   z-index: 1;   transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: 2px solid var(--lmvz-select-focus-color);   outline-offset: 2px; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);   font-weight: var(--lmvz-global-font-weight-500, 500);   color: var(--lmvz-select-text-color);   line-height: 1.4;   letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } img.sc-lmvz-select {   display: block;   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; }`;
+const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);       --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-select-height: 40px;   --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #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); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   cursor: pointer;   position: relative;   z-index: 1;   transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);   font-weight: var(--lmvz-global-font-weight-500, 500);   color: var(--lmvz-select-text-color);   line-height: 1.4;   letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } img.sc-lmvz-select {   display: block;   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; }`;
 
 let selectIdCounter = 0;
 const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, index.h("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, index.h("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), index.h("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, index.h("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), index.h("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, index.h("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '035b19878300ac1f7b04b61157e39587782b44f7', 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 && index.h("option", { key: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && index.h("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: '597245455ffb9b5f83472a7970fb1c6c92017fd2' }, index.h("div", { key: 'edeb4d02d5a5291e60fd2d26d16edc500a355b63', class: "select-wrapper" }, index.h("label", { key: 'd0068817bb3586467d73284cecc03de393c37589', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '624ee28842aed8c01651c7758099bccc446840d6', "aria-hidden": "true" }, " *")), index.h("div", { key: '184591bc8ac11e9eed17795ce21319591e6d4211', "aria-hidden": "true" }, index.h("span", { key: '53e673521ed26125c24fb529d6016e3827b47a44' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '7af1a756e3343701ad066f3c107b2028126c5f09', "aria-hidden": "true" }, " *")), index.h("span", { key: '6210f2069758f8579f67780530fd294210875b3f' }, index.h("img", { key: '05aa6cf110ba0c7eacd36f59525144c61f0705d9', src: chevronDownSvg, alt: "" }))), index.h("select", { key: 'dc9dfe93226858f73f1d5a655388b9ce3a5e4037', 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 && index.h("option", { key: '38ffb95d089932d0ce0c6a5629004679d3f7f857', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '51b96884bb010b0a93f24b8b2f3f91a7b040e220' }))), this.helperText && index.h("div", { key: 'f7149a48024e87d2a3843d96674e45cb91fd9cf4', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

package/cjs/lmvz-snackbar.cjs.entry.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var index = require('./index-BCFBLj0e.js');
+
+const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
+
+const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkMyMiA2LjQ3NzE1IDE3LjUyMjggMiAxMiAyWk0xMiA3QzExLjQ0NzcgNyAxMSA3LjQ0NzcyIDExIDhDMTEgOC41NTIyOCAxMS40NDc3IDkgMTIgOUMxMi41NTIzIDkgMTMgOC41NTIyOCAxMyA4QzEzIDcuNDQ3NzIgMTIuNTUyMyA3IDEyIDdaTTExIDExQzEwLjQ0NzcgMTEgMTAgMTEuNDQ3NyAxMCAxMkMxMCAxMi41NTIzIDEwLjQ0NzcgMTMgMTEgMTNWMTZDMTEgMTYuNTUyMyAxMS40NDc3IDE3IDEyIDE3SDEzQzEzLjU1MjMgMTcgMTQgMTYuNTUyMyAxNCAxNkMxNCAxNS40NDc3IDEzLjU1MjMgMTUgMTMgMTVWMTJDMTMgMTEuNDQ3NyAxMi41NTIzIDExIDEyIDExSDExWiIvPgo8L3N2Zz4K';
+
+const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
+
+const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));left:50%;transform:translateX(-50%);z-index:2147483000;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));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));pointer-events:auto;font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c);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)}: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)}: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)}lmvz-icon{flex-shrink:0}.message{white-space:nowrap}@keyframes snackbar-enter{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes snackbar-leave{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(100%);opacity:0}}:host(.entering){animation:snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards}:host(.leaving){pointer-events:none;animation:snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards}@media (prefers-reduced-motion: reduce){:host(.entering){animation:none;transition:opacity 80ms ease;opacity:1}:host(.leaving){pointer-events:none;animation:none;transition:opacity 80ms ease;opacity:0}}`;
+
+const STATUS_SVG = {
+    success: infoSvg,
+    warning: warningSvg,
+    error: alertSvg,
+};
+const LmvzSnackbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lmvzClose = index.createEvent(this, "lmvzClose", 6);
+    }
+    get el() { return index.getElement(this); }
+    animationClass = '';
+    status = 'success';
+    onStatusChange() {
+        this.applyAriaLiveAttributes();
+    }
+    message = '';
+    duration;
+    priority = 'normal';
+    actionLabel;
+    lmvzClose;
+    connectedCallback() {
+        if (typeof document !== 'undefined') {
+            this.applyAriaLiveAttributes();
+        }
+    }
+    async show() {
+        this.animationClass = '';
+        requestAnimationFrame(() => {
+            this.animationClass = 'entering';
+        });
+    }
+    async hide() {
+        this.animationClass = 'leaving';
+        await new Promise((resolve) => {
+            const timeout = setTimeout(resolve, 300);
+            const onAnimationEnd = () => {
+                clearTimeout(timeout);
+                this.el.removeEventListener('animationend', onAnimationEnd);
+                resolve();
+            };
+            this.el.addEventListener('animationend', onAnimationEnd);
+        });
+    }
+    applyAriaLiveAttributes() {
+        if (this.status === 'error') {
+            this.el.setAttribute('role', 'alert');
+            this.el.setAttribute('aria-live', 'assertive');
+        }
+        else {
+            this.el.setAttribute('role', 'status');
+            this.el.setAttribute('aria-live', 'polite');
+        }
+        this.el.setAttribute('aria-atomic', 'true');
+    }
+    handleActionClick = () => {
+        this.lmvzClose.emit({ reason: 'action' });
+        this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
+    };
+    render() {
+        return (index.h(index.Host, { key: '3cf529e3a1971926546758d2e04c3860fde23961', class: this.animationClass }, index.h("lmvz-icon", { key: '3bc7fb142b19ca4f01c04d33759bcd52cd46c77e', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: 'b2d00f1602baefa7f1025d927d66f8867e3e7ce5', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: '92966ab42ef1c5fca044adf5b60a02b54ddcd43a', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+    }
+    static get watchers() { return {
+        "status": [{
+                "onStatusChange": 0
+            }]
+    }; }
+};
+LmvzSnackbar.style = lmvzSnackbarCss();
+
+exports.lmvz_snackbar = LmvzSnackbar;

package/cjs/lmvz-toggle.cjs.entry.js

@@ -1,11 +1,13 @@
 'use strict';
 
-var index = require('./index-lW-SEvL7.js');
-var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
+var index = require('./index-BCFBLj0e.js');
+var reactiveControllerHost = require('./reactive-controller-host-DrtMkMd7.js');
 var component = require('./component-C7cavwmZ.js');
 require('./aria-loader-BRo2FTGh.js');
 
-const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-toggle-h {   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));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .sc-lmvz-toggle-h:focus-within {      outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);   outline-offset: 2px; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
+const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-toggle-h {   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));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
+
+const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
 
 let toggleIdCounter = 0;
 const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -79,7 +81,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, index.h("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, index.h("input", { key: '80650720ac6276f7c8996e071d8104e98002e06e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, index.h("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, index.h("input", { key: '8113919f2c474b61a2745a000fd4995f81b58c1e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -91,6 +93,6 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
             }]
     }; }
 };
-LmvzToggle.style = lmvzToggleCss();
+LmvzToggle.style = lmvzToggleCss() + focusWithinCss();
 
 exports.lmvz_toggle = LmvzToggle;

package/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-lW-SEvL7.js');
+var index = require('./index-BCFBLj0e.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button_3.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/{reactive-controller-host-BOFg4vL-.js → reactive-controller-host-DrtMkMd7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var ariaLoader = require('./aria-loader-BRo2FTGh.js');
-var index = require('./index-lW-SEvL7.js');
+var index = require('./index-BCFBLj0e.js');
 
 class AriaValidationController {
     host;

package/collection/api/ds.constants.js

@@ -4,6 +4,9 @@ export const sizes = ['xs', 'sm', 'md', 'lg'];
 export const textSizes = [...sizes, 'xl'];
 export const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
 export const iconSizes = [...sizes, 'inherit'];
-export const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+export const iconWeights = ['thin', 'medium', 'bold'];
 export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
 export const chipSizes = ['default', 'small'];
+export const snackbarStatuses = ['success', 'warning', 'error'];
+export const snackbarPriorities = ['low', 'normal', 'high'];
+export const snackbarDismissReasons = ['timeout', 'manual', 'action', 'overridden', 'swallowed'];

package/collection/collection-manifest.json

@@ -11,14 +11,16 @@
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
     "components/lmvz-modal/lmvz-modal.js",
+    "components/lmvz-radio/lmvz-radio.js",
     "components/lmvz-select/lmvz-select.js",
+    "components/lmvz-snackbar/lmvz-snackbar.js",
     "components/lmvz-toggle/lmvz-toggle.js",
     "integration/header-integration/header-integration.js"
   ],
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.4",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],