@lmvz-ds/components 0.35.2 → 0.36.1

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

@@ -1,11 +1,166 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
-var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
+var index = require('./index-BgvZ4y-3.js');
+var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 require('./aria-loader-DWUVcapD.js');
 
-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-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, #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.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, #a31419); } .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);   border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);   box-sizing: border-box;   cursor: pointer;   position: relative;   z-index: 1;   transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .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: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-select-text-color);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }  .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   flex-shrink: 0; }  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; } [size='small'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h {   --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.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   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)); }`;
+const defaultConfig = {
+    wrap: true,
+    typeaheadTimeoutMs: 500,
+};
+class ListboxController {
+    options = [];
+    _activeId;
+    _selectedId;
+    config;
+    typeaheadBuffer = '';
+    typeaheadTimer;
+    constructor(config = {}) {
+        this.config = { ...defaultConfig, ...config };
+    }
+    hostDisconnected() {
+        this.clearTypeaheadTimer();
+    }
+    get activeId() {
+        return this._activeId;
+    }
+    get activeDescendantId() {
+        return this._activeId;
+    }
+    get selectedId() {
+        return this._selectedId;
+    }
+    setOptions(options) {
+        this.options = options;
+        if (this._activeId && this.findEnabledIndex(this._activeId) !== -1)
+            return;
+        const fallback = (this._selectedId && this.findEnabledIndex(this._selectedId) !== -1 ? this._selectedId : undefined) ?? this.firstEnabledOption()?.id;
+        this.setActiveId(fallback);
+    }
+    setActiveId(id) {
+        if (id !== undefined && !this.isEnabledId(id))
+            return;
+        if (id === this._activeId)
+            return;
+        this._activeId = id;
+        this.config.onActiveChange?.(id);
+    }
+    setSelectedId(id) {
+        this._selectedId = id;
+    }
+    selectOption(id) {
+        if (!this.isEnabledId(id))
+            return;
+        this._selectedId = id;
+        this.config.onSelect?.(id);
+    }
+    selectActive() {
+        if (this._activeId)
+            this.selectOption(this._activeId);
+    }
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveActive('next');
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveActive('previous');
+                return true;
+            case 'Home':
+                event.preventDefault();
+                this.setActiveId(this.firstEnabledOption()?.id);
+                return true;
+            case 'End':
+                event.preventDefault();
+                this.setActiveId(this.lastEnabledOption()?.id);
+                return true;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActive();
+                return true;
+            case 'Escape':
+                event.preventDefault();
+                this.config.onClose?.();
+                return true;
+            default:
+                return this.handleTypeahead(event);
+        }
+    }
+    clearTypeahead() {
+        this.typeaheadBuffer = '';
+        this.clearTypeaheadTimer();
+    }
+    moveActive(direction) {
+        const enabledOptions = this.enabledOptions();
+        if (!enabledOptions.length)
+            return;
+        const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
+        if (currentIndex === -1) {
+            this.setActiveId((direction === 'next' ? enabledOptions[0] : enabledOptions[enabledOptions.length - 1])?.id);
+            return;
+        }
+        const step = direction === 'next' ? 1 : -1;
+        const rawIndex = currentIndex + step;
+        if (rawIndex < 0 || rawIndex >= enabledOptions.length) {
+            if (!this.config.wrap)
+                return;
+            const wrappedIndex = (rawIndex + enabledOptions.length) % enabledOptions.length;
+            this.setActiveId(enabledOptions[wrappedIndex]?.id);
+            return;
+        }
+        this.setActiveId(enabledOptions[rawIndex]?.id);
+    }
+    handleTypeahead(event) {
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+            return false;
+        event.preventDefault();
+        this.typeaheadBuffer += event.key.toLowerCase();
+        this.restartTypeaheadTimer();
+        const enabledOptions = this.enabledOptions();
+        if (!enabledOptions.length)
+            return true;
+        const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
+        const orderedFromCurrent = [...enabledOptions.slice(currentIndex + 1), ...enabledOptions.slice(0, currentIndex + 1)];
+        const match = orderedFromCurrent.find((option) => option.label.toLowerCase().startsWith(this.typeaheadBuffer));
+        if (match)
+            this.setActiveId(match.id);
+        return true;
+    }
+    restartTypeaheadTimer() {
+        this.clearTypeaheadTimer();
+        this.typeaheadTimer = setTimeout(() => {
+            this.typeaheadBuffer = '';
+        }, this.config.typeaheadTimeoutMs);
+    }
+    clearTypeaheadTimer() {
+        if (this.typeaheadTimer !== undefined) {
+            clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = undefined;
+        }
+    }
+    enabledOptions() {
+        return this.options.filter((option) => !option.disabled);
+    }
+    firstEnabledOption() {
+        return this.enabledOptions()[0];
+    }
+    lastEnabledOption() {
+        const enabledOptions = this.enabledOptions();
+        return enabledOptions[enabledOptions.length - 1];
+    }
+    isEnabledId(id) {
+        return this.findEnabledIndex(id) !== -1;
+    }
+    findEnabledIndex(id) {
+        return this.enabledOptions().findIndex((option) => option.id === id);
+    }
+}
+
+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;   --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-alternate, #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.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, #a31419);    padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .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, .select-trigger.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; }  .select-trigger.sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   width: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);   box-sizing: border-box;   cursor: pointer;   position: relative;   z-index: 1;   transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [highlighted].sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select {   border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select {   border-color: var(--lmvz-select-error-color); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.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)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-select-text-color);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap;   text-align: left; }  .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   flex-shrink: 0; }  .lmvz-select-native-options.sc-lmvz-select {   display: none; } [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 {   padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; } [role='alert'].sc-lmvz-select {   padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   color: var(--lmvz-select-error-color);   line-height: normal; } [size='small'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h {   --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.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   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)); }  .lmvz-select-option.sc-lmvz-select {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);    display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   border-radius: var(--lmvz-semantic-border-radius-md, 6px);   background-color: var(--lmvz-select-option-background);   color: var(--lmvz-select-option-color);   cursor: pointer;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   transition:     background-color 0.15s ease,     color 0.15s ease; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   position: relative;   z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option[aria-selected='true'].sc-lmvz-select {   --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select {   cursor: not-allowed;   pointer-events: none;   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }`;
 
 let selectIdCounter = 0;
 const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -13,60 +168,312 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     get validationEl() {
         return this.el;
     }
+    internals;
     selectId = `lmvz-select-${selectIdCounter++}`;
-    nativeSelectEl;
+    triggerId = `${this.selectId}-trigger`;
+    popoverId = `${this.selectId}-listbox`;
+    triggerEl;
+    optionsSourceEl;
+    optionsMutationObserver;
+    initialValue;
+    initialValueCaptured = false;
+    flatOptions = [];
+    optionsById = new Map();
+    listboxController = new ListboxController({
+        onActiveChange: (id) => {
+            this.activeId = id;
+        },
+        onSelect: (id) => this.handleOptionSelect(id),
+        onClose: () => this.closePopover(),
+    });
+    get helperId() {
+        return this.helperText ? `${this.selectId}-helper` : undefined;
+    }
+    get showErrorMessage() {
+        return this.error && Boolean(this.errorMessage);
+    }
+    get errorId() {
+        return `${this.selectId}-error`;
+    }
+    get describedBy() {
+        const ids = [];
+        if (this.helperId)
+            ids.push(this.helperId);
+        if (this.showErrorMessage)
+            ids.push(this.errorId);
+        return ids.length > 0 ? ids.join(' ') : undefined;
+    }
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
         this.lmvzChange = index.createEvent(this, "lmvzChange", 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 ariaValidationController.AriaValidationController(this));
+        this.addController(this.listboxController);
     }
     lmvzChange;
     value;
     label;
     helperText;
+    nativeError = false;
+    errorFromProp = false;
+    get error() {
+        return this.errorFromProp || this.nativeError;
+    }
+    set error(value) {
+        this.errorFromProp = value;
+    }
+    errorMessage;
     disabled = false;
     required = false;
     name;
     size = 'default';
     highlighted = false;
     selectedLabel = '';
+    selectedId;
+    activeId;
+    isOpen = false;
+    optionGroups = [];
     get hasValue() {
         return Boolean(this.value);
     }
+    componentWillLoad() {
+        this.updateValidity();
+        super.componentWillLoad();
+    }
     componentDidLoad() {
-        this.syncSelectedLabel();
+        this.handleSlotChange();
+        this.observeSlottedOptionMutations();
+        this.updateValidity();
         super.componentDidLoad();
     }
+    disconnectedCallback() {
+        this.optionsMutationObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    observeSlottedOptionMutations() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.optionsMutationObserver?.disconnect();
+        this.optionsMutationObserver = new MutationObserver(this.handleSlotChange);
+        this.optionsMutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['disabled', 'selected', 'value', 'label'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    async focusTrigger() {
+        this.triggerEl?.focus();
+    }
+    async blurTrigger() {
+        this.triggerEl?.blur();
+    }
+    async checkValidity() {
+        return this.internals.checkValidity?.() ?? true;
+    }
+    async reportValidity() {
+        return this.internals.reportValidity?.() ?? true;
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage ?? '';
+    }
+    formAssociatedCallback(form) {
+        if (!form)
+            return;
+        this.internals.setFormValue?.(this.value ?? '');
+    }
+    formResetCallback() {
+        this.internals.setValidity?.({});
+        this.value = this.initialValue;
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
     handleValueChange(newValue) {
-        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
-            this.nativeSelectEl.value = newValue ?? '';
+        this.applySelectionFromValue();
+        if (this.selectedId && !this.isOpen) {
+            this.listboxController.setActiveId(this.selectedId);
         }
-        this.syncSelectedLabel();
+        this.internals.setFormValue?.(newValue ?? '');
+        this.updateValidity();
     }
-    syncSelectedLabel() {
-        if (!this.nativeSelectEl)
+    handleRequiredChange() {
+        this.updateValidity();
+    }
+    handleDisabledChange(disabled) {
+        if (!disabled)
             return;
-        const idx = this.nativeSelectEl.selectedIndex;
-        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
+        this.closePopover();
+        this.triggerEl?.blur();
     }
-    handleChange = (event) => {
-        const select = event.target;
-        this.value = select.value;
-        this.syncSelectedLabel();
-        this.lmvzChange.emit(select.value);
+    handleSlotChange = () => {
+        const container = this.optionsSourceEl;
+        if (!container)
+            return;
+        const { flat, groups } = parseOptionElements(container, this.selectId);
+        this.flatOptions = flat;
+        this.optionsById = new Map(flat.map((option) => [option.id, option]));
+        this.optionGroups = groups;
+        if (!this.value) {
+            const preselected = flat.find((option) => option.selected && !option.disabled);
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.applySelectionFromValue();
+        this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
+        if (!this.initialValueCaptured) {
+            this.initialValue = this.value;
+            this.initialValueCaptured = true;
+        }
+    };
+    applySelectionFromValue() {
+        const match = this.value ? this.flatOptions.find((option) => option.value === this.value) : undefined;
+        this.selectedId = match?.id;
+        this.selectedLabel = match?.label ?? '';
+        this.listboxController.setSelectedId(match?.id);
+    }
+    updateValidity() {
+        if (this.required && !this.value) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
+    handleOptionSelect(id) {
+        const option = this.optionsById.get(id);
+        if (!option)
+            return;
+        const isNewValue = option.value !== this.value;
+        this.value = option.value;
+        if (isNewValue) {
+            this.lmvzChange.emit(option.value);
+        }
+        this.closePopover();
+    }
+    handleOptionClick = (option) => {
+        if (option.disabled || this.disabled)
+            return;
+        this.listboxController.selectOption(option.id);
     };
+    handleLabelClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerEl?.focus();
+        this.openPopover();
+    };
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closePopover();
+        }
+        else {
+            this.openPopover();
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (!this.isOpen) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.openPopover();
+            }
+            return;
+        }
+        this.listboxController.handleKeydown(event);
+    };
+    handleTriggerBlur = () => {
+        this.closePopover();
+    };
+    handlePopoverClose = () => {
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    };
+    openPopover() {
+        if (this.isOpen || this.disabled)
+            return;
+        this.isOpen = true;
+    }
+    closePopover() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    }
+    renderOptionGroups() {
+        return this.optionGroups.map((group, groupIndex) => group.label ? (index.h("div", { role: "group", "aria-label": group.label, key: `lmvz-select-group-${groupIndex}` }, group.options.map((option) => this.renderOption(option)))) : (group.options.map((option) => this.renderOption(option))));
+    }
+    renderOption(option) {
+        return (index.h("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": option.id === this.selectedId ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, option.label));
+    }
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: 'f1180d4a5f1c30414b06c19314eb75630aa181f7', "data-highlighted": String(this.highlighted) }, index.h("div", { key: '01088c7f3315faab1fb23c99cf8b30f7d59abfc6', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '34d23292b6b65fac000f822e1e2839e28b1bfee9', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: 'ba171cdd9b53f8fa7b7fcb2c39a0b4aa69940b95', "aria-hidden": "true" }, " *")), index.h("div", { key: '798a6ef187b4aaaa45ecb3d6f94c30e7facb7a38', "aria-hidden": "true" }, index.h("span", { key: '33ea2169d94f4f8cf6263ed0c3bd6a9e593207a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '0ea2d4987587a1a42dfd037dcefeed3f1b3356ef', "aria-hidden": "true" }, " *")), index.h("span", { key: '7bd24b3921cc5cd261f563476a79d61a288d60bb' }, index.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" }, index.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" })))), index.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 && index.h("option", { key: '5ffa7ffb7cd79c28a8bd212cc4d123dceb77aad4', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '8a4141ead35cfd07c14d869715397d12ea8b64d7' }))), this.helperText && index.h("div", { key: 'dc5ccd28b0a903f6ed674d994e302caed1d9e9bb', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: '0bcc303a802db20a6be6558b8add53d0fa398493', "data-highlighted": String(this.highlighted) }, index.h("div", { key: 'e248f8277b4786b34dfd064cb9c7b70302cf018a', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '1c97c830d5782cadad98fb895d70c438031d3457', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && index.h("span", { key: '16157962846bffc111f5c672852f7b23e9ed2b73', "aria-hidden": "true" }, " *")), index.h("div", { key: 'bc5e3e6b335723cfd9872ff955a1e8d664d4eeb8', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": hasValue ? `${this.label}, ${this.selectedLabel}` : this.label, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, index.h("span", { key: '620c6108f679c8e5563c0e21d7b89d71434c01a2' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'a2183941c7843bae3e9989f8e8b26be28fbbf6d7', "aria-hidden": "true" }, " *")), index.h("span", { key: 'b57e14bda44dc0de5a35623a5cb203b7f570c802', "aria-hidden": "true" }, index.h("svg", { key: '71ac319e398f07f7e65fe1f73f6d2a7c08b631a8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '80b4a978471251ee8d2cce2d74a48fad750db125', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("lmvz-popover", { key: '15528c9a3f1404c385f4eb865cf78ef5891dcb32', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), index.h("div", { key: 'f1b833973497e6dfd2013522e067382c73baa7a1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, index.h("slot", { key: '670bf62c50cbdd965342279b99e303614771ffa1', onSlotchange: this.handleSlotChange }))), this.helperText && (index.h("div", { key: '849e35da09bff25896b08f275c265baa0ee12960', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (index.h("div", { key: 'd01c2dca8767aa815d08d895f308c42150cc3263', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
+            }],
+        "required": [{
+                "handleRequiredChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
             }]
     }; }
 };
+function parseOptionElements(container, idPrefix) {
+    const flat = [];
+    const groups = [];
+    let looseGroup;
+    let optionIndex = 0;
+    const toOptionData = (optionEl, disabledOverride = false) => {
+        const option = optionEl;
+        const data = {
+            id: `${idPrefix}-option-${optionIndex++}`,
+            value: option.value,
+            label: (option.textContent ?? '').trim(),
+            disabled: disabledOverride || option.disabled,
+            selected: option.selected,
+        };
+        flat.push(data);
+        return data;
+    };
+    Array.from(container.children).forEach((child) => {
+        if (child.tagName === 'OPTGROUP') {
+            looseGroup = undefined;
+            const optgroup = child;
+            const options = Array.from(optgroup.querySelectorAll('option')).map((option) => toOptionData(option, optgroup.disabled));
+            groups.push({ label: optgroup.label || undefined, options });
+            return;
+        }
+        if (child.tagName === 'OPTION') {
+            if (!looseGroup) {
+                looseGroup = { label: undefined, options: [] };
+                groups.push(looseGroup);
+            }
+            looseGroup.options.push(toOptionData(child));
+        }
+    });
+    return { flat, groups };
+}
 LmvzSelect.style = lmvzSelectCss();
 
 exports.lmvz_select = LmvzSelect;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
+var index = require('./index-BgvZ4y-3.js');
 var warning = require('./warning-WEX_ABWL.js');
 
 const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
@@ -67,7 +67,7 @@ const LmvzSnackbar = class {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (index.h(index.Host, { key: '6c2898f187ed9b456dd0c13294eb466270b116cb', class: this.animationClass }, index.h("lmvz-icon", { key: '9b4903f0e2099d44f0ed1773ed23f948b894f603', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: '38163523ce0bba29dbe387e5c808ae9f5f2c2c55', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: 'bf5eb3e5075dec7c10f95a46db207ccb3181c88b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (index.h(index.Host, { key: 'f58c7657bf5511c72930dfc54ace4af1ff7f3554', class: this.animationClass }, index.h("lmvz-icon", { key: '8632b42b9b246bf58480fb17ca336ce5f0883845', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: '4ca56d2cdf29415c6d21cc50399dc28aebb8de99', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: 'd09043056b968421143aa180f464effcd7b781fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get watchers() { return {
         "status": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
+var index = require('./index-BgvZ4y-3.js');
 
 const lmvzSpinnerCss = () => `:host{--spinner-size:1rem;display:inline-block;width:var(--spinner-size);height:var(--spinner-size)}:host([size='large']){--spinner-size:2rem;}svg{width:100%;height:100%;transform-origin:center;animation:lmvz-spinner-rotate var(--lmvz-global-duration-slow, 800ms) linear infinite;color:var(--lmvz-semantic-color-border-active, #0f8acc)}circle{fill:none;stroke:currentcolor;stroke-width:var(--lmvz-component-icon-border-width-strong, 1.5px);stroke-linecap:round;stroke-dasharray:75 25;vector-effect:non-scaling-stroke}@keyframes lmvz-spinner-rotate{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){svg{animation:none}}`;
 
@@ -12,7 +12,7 @@ const LmvzSpinner = class {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (index.h(index.Host, { key: '75f8aabfe2eae72d29c5f0aa0663d0c37286ab78', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: 'aadf9daaa1f363752e08eed3136fc8a8f15d3bdf', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'e658f4be70b5bd03b3828071cbce977576afa3c8', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (index.h(index.Host, { key: 'cf60fcf652f377a66596cc51138bb73f7465a4e7', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '121ab46a591242fbc0f1c3540e8f2a7b72c9582a', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'fe649394c9bd6e7a06113e9a50b595bb890a6fac', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
 };
 LmvzSpinner.style = lmvzSpinnerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
+var index = require('./index-BgvZ4y-3.js');
 
 const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   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); }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    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);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   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 {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --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.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label {   display: contents; } `;
 
@@ -22,7 +22,7 @@ const LmvzTab = class {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (index.h(index.Host, { key: '6bb908c4956e84cd344fc8e81b400d33bb2dce98' }, index.h("button", { key: 'fbc5b650c9bfb5653d17f9a66a14ffbf0fe87f83', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'a16da4d11ecca9db3d03da3b0076b698295ead1f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'e9e83fd4aa556716af3c7b7e52e1e1d8a5a33061', class: "label" }, index.h("slot", { key: 'a4c0378e62d67d7bcc772ff6a77ae1a86f41208c' })), index.h("span", { key: 'de03b763d99f55b8773334df3d18c2d3855de4de', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (index.h(index.Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, index.h("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, index.h("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), index.h("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
-var directionalFocusController = require('./directional-focus-controller-DBat-oF7.js');
+var index = require('./index-BgvZ4y-3.js');
+var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
-require('./element.util-CRS_YJ59.js');
+require('./element.util-BlhcwmfR.js');
+require('./aria.constants-DPK5mQEL.js');
 
 const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   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); }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  :host([orientation='vertical']) .tablist {   flex-direction: column;   overflow: visible auto; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
 
@@ -243,7 +244,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (index.h(index.Host, { key: '98df29f336a3ea47efa6c76a773de28c5174c718', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '7e35ae180c4ebf2f5a82e0fad0977cd3c38ac659', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: '2520bc8b8988a60b37a067828ad237bf8dcfcc59', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: 'bd4a954b6caca2d9f2eb588f58590821ec4af888', part: "panels-container", class: "panels-container" }, index.h("slot", { key: 'b4dffff530328e6e4c8d305895ef4dd2d5952757', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (index.h(index.Host, { key: '33205038c047420618800be3ef755e1d13a0127c', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: 'e803f772c5b187326fc80cfa2d3b9d74f6ee1df8', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: '6871a7b6b26c6251ceb544c03b245450aa53373d', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '17721962da2ecf107a5b878dea996812c61be998', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '485de66efc7812ecb2368a6b01b0d8ab63971497', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{