@redvars/peacock 3.3.2 → 3.4.0

package/dist/{snackbar-74YCdMPL.js → select-C3XAzenC.js}

@@ -1,12 +1,14 @@
-import { a as i, _ as __decorate, n, i as i$1, b, A, c as __classPrivateFieldGet, w } from './IndividualComponent-Dt5xirYG.js';
-import { r, e as e$3 } from './class-map-59YGWLnx.js';
+import { a as i, _ as __decorate, i as i$1, b, A, c as __classPrivateFieldGet, w } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
 import { e as e$1 } from './directive-Cuw6h7YA.js';
-import { e as e$2, o as o$4 } from './unsafe-html-C2r3PyzF.js';
+import { e as e$2, o as o$4 } from './unsafe-html-D3GHRaGQ.js';
 import { c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, r as redispatchEvent, a as isDarkMode, i as isActivationClick, d as dispatchActivationClick, t as throttle } from './dispatch-event-utils-B4odODQf.js';
+import { e as e$3 } from './class-map-3TAnCMAX.js';
 import { a as e, e as e$4 } from './query-QBcUV-L_.js';
-import { o as o$3 } from './style-map-DcB52w-l.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-pALI5fmV.js';
-import { s as spread } from './button-ClzS8JLq.js';
+import { o as o$3 } from './style-map-CRFEoCEg.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-DKAIv5BB.js';
+import { s as spread } from './button-COYCtuA8.js';
 
 /**
  * @license
@@ -39,7 +41,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$K = i`* {
+var css_248z$O = i`* {
   box-sizing: border-box;
 }
 
@@ -168,7 +170,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$K];
+Icon.styles = [css_248z$O];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -188,7 +190,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$J = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -279,7 +281,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$J];
+Avatar.styles = [css_248z$N];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -287,7 +289,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$I = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -359,12 +361,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$I];
+Badge.styles = [css_248z$M];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$H = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -473,7 +475,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$H];
+Divider.styles = [css_248z$L];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -481,7 +483,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$G = i`/**
+var css_248z$K = i`/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -554,9 +556,403 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$G];
+Elevation.styles = [css_248z$K];
+
+var css_248z$J = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: contents;
+  --_segmented-button-height: 2.5rem;
+  --_segmented-button-outline-color: var(--color-outline, #79747e);
+  --_segmented-button-selected-container-color: var(--color-secondary-container, #e8def8);
+  --_segmented-button-selected-label-text-color: var(--color-on-secondary-container, #1d192b);
+  --_segmented-button-unselected-label-text-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-disabled-opacity: 0.38;
+  --_segmented-button-state-layer-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-selected-state-layer-color: var(--color-on-secondary-container, #1d192b);
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--segmented-button-height, var(--_segmented-button-height));
+  padding: 0 1.5rem;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  background: transparent;
+  overflow: hidden;
+  transition: background-color 200ms ease, color 200ms ease;
+}
+.segment .content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+  color: var(--segmented-button-unselected-label-text-color, var(--_segmented-button-unselected-label-text-color));
+}
+.segment .content .check-icon,
+.segment .content .leading-icon {
+  --icon-size: 1.125rem;
+  --icon-color: currentColor;
+  flex-shrink: 0;
+}
+.segment .content .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.segment .state-layer {
+  position: absolute;
+  inset: 0;
+  background: var(--_segmented-button-state-layer-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms ease;
+}
+.segment {
+  /* right-side divider between segments */
+}
+.segment .segment-outline {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: var(--segmented-button-outline-color, var(--_segmented-button-outline-color));
+  pointer-events: none;
+}
+.segment:hover:not(.disabled) .state-layer {
+  opacity: 0.08;
+}
+.segment.has-focus:not(.disabled) .state-layer {
+  opacity: 0.12;
+}
+.segment.active:not(.disabled) .state-layer {
+  opacity: 0.16;
+}
+.segment {
+  /* Selected state */
+}
+.segment.selected {
+  background-color: var(--segmented-button-selected-container-color, var(--_segmented-button-selected-container-color));
+}
+.segment.selected .content {
+  color: var(--segmented-button-selected-label-text-color, var(--_segmented-button-selected-label-text-color));
+}
+.segment.selected .state-layer {
+  background: var(--_segmented-button-selected-state-layer-color);
+}
+.segment {
+  /* Disabled state */
+}
+.segment.disabled {
+  cursor: not-allowed;
+  opacity: var(--segmented-button-disabled-opacity, var(--_segmented-button-disabled-opacity));
+  pointer-events: none;
+}
+
+:host(:last-child) .segment-outline {
+  display: none;
+}`;
+
+/**
+ * @label Segmented Button
+ * @tag wc-segmented-button
+ * @rawTag segmented-button
+ * @summary An individual segment within a segmented button group.
+ * @parentRawTag segmented-button-group
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
+ *
+ * @cssprop --segmented-button-height: Height of the segmented button.
+ * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.
+ * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.
+ * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.
+ * @cssprop --segmented-button-outline-color: Outline / border color.
+ * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.
+ *
+ * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+class SegmentedButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value associated with this segment.
+         */
+        this.value = '';
+        /**
+         * Whether this segment is currently selected.
+         */
+        this.selected = false;
+        /**
+         * If true, the user cannot interact with this segment.
+         */
+        this.disabled = false;
+        this.hasFocus = false;
+        this.isActive = false;
+        this._windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this._mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this._keyDownHandler = (evt) => {
+            if (evt.key === ' ' || evt.key === 'Enter') {
+                evt.preventDefault();
+                this.isActive = true;
+                this._toggle(evt);
+            }
+        };
+        this._clickHandler = (ev) => {
+            this._toggle(ev);
+        };
+        this._blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }));
+        };
+        this._focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('mouseup', this._windowMouseUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this._windowMouseUp);
+    }
+    _toggle(ev) {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('segmented-button--change', {
+            detail: {
+                value: this.value || this.textContent?.trim(),
+                selected: !this.selected,
+                originalEvent: ev,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /** Sets focus on the segment. */
+    focus() {
+        this.renderRoot.querySelector('.segment')?.focus();
+    }
+    /** Removes focus from the segment. */
+    blur() {
+        this.renderRoot.querySelector('.segment')?.blur();
+    }
+    render() {
+        const cssClasses = {
+            segment: true,
+            selected: this.selected,
+            disabled: this.disabled,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            'has-icon': !!this.icon,
+        };
+        return b `
+      <div
+        class=${e$3(cssClasses)}
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.disabled}
+        @click=${this._clickHandler}
+        @mousedown=${this._mouseDownHandler}
+        @keydown=${this._keyDownHandler}
+        @blur=${this._blurHandler}
+        @focus=${this._focusHandler}
+      >
+        <div class="state-layer"></div>
+        <div class="content">
+          ${this.selected
+            ? b `<wc-icon class="check-icon" name="check"></wc-icon>`
+            : this.icon
+                ? b `<wc-icon class="leading-icon" name=${this.icon}></wc-icon>`
+                : A}
+          <span class="label"><slot></slot></span>
+        </div>
+        <div class="segment-outline"></div>
+      </div>
+    `;
+    }
+}
+SegmentedButton.styles = [css_248z$J];
+__decorate([
+    n({ type: String, reflect: true })
+], SegmentedButton.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButton.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButton.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], SegmentedButton.prototype, "icon", void 0);
+__decorate([
+    r()
+], SegmentedButton.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], SegmentedButton.prototype, "isActive", void 0);
+
+var css_248z$I = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  --_segmented-button-group-shape: var(--shape-corner-full, 9999px);
+}
+
+.segmented-button-group {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--segmented-button-group-shape, var(--_segmented-button-group-shape));
+  border: 1px solid var(--segmented-button-outline-color, var(--color-outline, #79747e));
+  overflow: hidden;
+  min-width: max-content;
+}
+.segmented-button-group ::slotted(wc-segmented-button) {
+  flex: 1;
+}`;
+
+/**
+ * @label Segmented Button Group
+ * @tag wc-segmented-button-group
+ * @rawTag segmented-button-group
+ * @summary A container for segmented buttons following Material Design 3.
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the Material Design 3 specification.</p>
+ * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>
+ *
+ * @cssprop --segmented-button-group-shape: Border-radius of the group container.
+ *
+ * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+class SegmentedButtonGroup extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true, multiple segments can be selected simultaneously.
+         * Defaults to single-select mode.
+         */
+        this.multiSelect = false;
+        /**
+         * When true, in single-select mode the currently selected segment can be
+         * deselected by clicking it again (allowing an empty selection).
+         * Defaults to `false`.
+         */
+        this.nullable = false;
+        this._onSegmentChange = (ev) => {
+            ev.stopPropagation();
+            const target = ev.composedPath()[0];
+            const segments = this._getSegments();
+            if (this.multiSelect) {
+                target.selected = !target.selected;
+            }
+            else {
+                if (target.selected && this.nullable) {
+                    target.selected = false;
+                }
+                else {
+                    segments.forEach(seg => {
+                        seg.selected = seg === target;
+                    });
+                }
+            }
+            const selectedValues = segments
+                .filter(s => s.selected)
+                .map(s => s.value || s.textContent?.trim() || '');
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: {
+                    value: selectedValues[0] ?? null,
+                    values: selectedValues,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('segmented-button--change', this._onSegmentChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('segmented-button--change', this._onSegmentChange);
+    }
+    _getSegments() {
+        return Array.from(this.querySelectorAll('wc-segmented-button'));
+    }
+    render() {
+        return b `
+      <div class="segmented-button-group" role="group">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+SegmentedButtonGroup.styles = [css_248z$I];
+SegmentedButtonGroup.SegmentedButton = SegmentedButton;
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'multi-select' })
+], SegmentedButtonGroup.prototype, "multiSelect", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$F = i`:host {
+var css_248z$H = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -593,7 +989,7 @@ class FocusRing extends i$1 {
     constructor() {
         super(...arguments);
         this.visible = false;
-        this.element = '';
+        this.for = '';
     }
     render() {
         return A;
@@ -609,6 +1005,15 @@ class FocusRing extends i$1 {
             this.detach();
         }
     }
+    set forElement(value) {
+        if (value) {
+            this._focusTarget = value;
+            this.attach();
+        }
+        else {
+            this.detach();
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.attach();
@@ -618,8 +1023,8 @@ class FocusRing extends i$1 {
         super.disconnectedCallback();
     }
     __focusin() {
-        // @ts-ignore
-        this.visible = this._control[this.element].matches(':focus-visible') ?? false;
+        const focusTarget = this.__getFocusTarget();
+        this.visible = focusTarget?.matches(':focus-visible') ?? false;
     }
     __focusout() {
         this.visible = false;
@@ -627,37 +1032,41 @@ class FocusRing extends i$1 {
     __pointerdown() {
         this.visible = false;
     }
+    __getFocusTarget() {
+        if (this._focusTarget) {
+            return this._focusTarget;
+        }
+        const focusTarget = document.getElementById(this.for);
+        if (focusTarget) {
+            return focusTarget;
+        }
+        return undefined;
+    }
     attach() {
-        // @ts-ignore
-        if (this._control && this._control[this.element]) {
-            // @ts-ignore
-            this._control[this.element].addEventListener('focusin', this.__focusin.bind(this));
-            // @ts-ignore
-            this._control[this.element].addEventListener('focusout', this.__focusin.bind(this));
-            // @ts-ignore
-            this._control[this.element].addEventListener('pointerdown', this.__focusin.bind(this));
+        const focusTarget = this.__getFocusTarget();
+        if (focusTarget) {
+            focusTarget.addEventListener('focusin', this.__focusin.bind(this));
+            focusTarget.addEventListener('focusout', this.__focusout.bind(this));
+            focusTarget.addEventListener('pointerdown', this.__pointerdown.bind(this));
         }
     }
     detach() {
-        // @ts-ignore
-        if (this._control && this._control[this.element]) {
-            // @ts-ignore
-            this._control[this.element].removeEventListener('focusin', this.__focusin);
-            // @ts-ignore
-            this._control[this.element].removeEventListener('focusout', this.__focusout);
-            // @ts-ignore
-            this._control[this.element].removeEventListener('pointerdown', this.__pointerdown);
+        const focusTarget = this.__getFocusTarget();
+        if (focusTarget) {
+            focusTarget.removeEventListener('focusin', this.__focusin.bind(this));
+            focusTarget.removeEventListener('focusout', this.__focusout.bind(this));
+            focusTarget.removeEventListener('pointerdown', this.__pointerdown.bind(this));
         }
         this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$F];
+FocusRing.styles = [css_248z$H];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
 __decorate([
     n({ type: String })
-], FocusRing.prototype, "element", void 0);
+], FocusRing.prototype, "for", void 0);
 
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
@@ -744,10 +1153,26 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  *
  * @example
  * ```html
- * <button style="position: relative;">
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
  *   <wc-ripple></wc-ripple>
- *   Click me
- * </button>
+ *   Ripple Effect
+ * </div>
  * ```
  * @tags display
  */
@@ -1112,7 +1537,7 @@ __decorate([
     e$4('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$E = i`* {
+var css_248z$G = i`* {
   box-sizing: border-box;
 }
 
@@ -1282,7 +1707,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$E];
+AccordionItem.styles = [css_248z$G];
 __decorate([
     n({ type: String, reflect: true })
 ], AccordionItem.prototype, "heading", void 0);
@@ -1296,7 +1721,7 @@ __decorate([
     e$4('.accordion-heading')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$D = i`* {
+var css_248z$F = i`* {
   box-sizing: border-box;
 }
 
@@ -1415,7 +1840,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$D];
+Accordion.styles = [css_248z$F];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, attribute: 'allow-multiple' })
@@ -1424,7 +1849,7 @@ __decorate([
     o$2({ selector: 'p-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$C = i`* {
+var css_248z$E = i`* {
   box-sizing: border-box;
 }
 
@@ -1495,7 +1920,7 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$C];
+Link.styles = [css_248z$E];
 __decorate([
     n({ reflect: true })
 ], Link.prototype, "href", void 0);
@@ -1506,7 +1931,7 @@ __decorate([
     r()
 ], Link.prototype, "tabIndexValue", void 0);
 
-var css_248z$B = i`* {
+var css_248z$D = i`* {
   box-sizing: border-box;
 }
 
@@ -1643,7 +2068,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$A = i`:host([color=default]) {
+var css_248z$C = i`:host([color=default]) {
   --filled-tag-container-color: var(--color-surface);
   --filled-tag-label-text-color: var(--color-on-surface);
   --tonal-tag-container-color: var(--color-surface-container);
@@ -1709,7 +2134,7 @@ var css_248z$A = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$z = i`.tag {
+var css_248z$B = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1808,7 +2233,7 @@ class Tag extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Tag.styles = [css_248z$B, css_248z$A, css_248z$z];
+Tag.styles = [css_248z$D, css_248z$C, css_248z$B];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -1822,7 +2247,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$y = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -1934,7 +2359,7 @@ var css_248z$y = i`* {
   color: var(--background);
 }`;
 
-var css_248z$x = i`:host([color=red]) {
+var css_248z$z = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -1963,7 +2388,7 @@ var css_248z$x = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$w = i`.tag {
+var css_248z$y = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2101,7 +2526,7 @@ class Chip extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$y, css_248z$x, css_248z$w];
+Chip.styles = [css_248z$A, css_248z$z, css_248z$y];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2118,7 +2543,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$v = i`:host {
+var css_248z$x = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2324,9 +2749,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$v];
+LinearProgress.styles = [css_248z$x];
 
-var css_248z$u = i`:host {
+var css_248z$w = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2489,9 +2914,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$u];
+CircularProgress.styles = [css_248z$w];
 
-var css_248z$t = i`:host {
+var css_248z$v = i`:host {
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
   display: inline-block;
@@ -2595,12 +3020,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$t];
+Skeleton.styles = [css_248z$v];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$s = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -2773,7 +3198,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$s];
+Input.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -2832,7 +3257,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$r = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -3200,7 +3625,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$r];
+Field.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3256,7 +3681,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$q = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -3453,7 +3878,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$q];
+NumberField.styles = [css_248z$s];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3515,7 +3940,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -3682,7 +4107,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$p];
+DatePicker.styles = [css_248z$r];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -3738,7 +4163,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$o = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -3905,7 +4330,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$o];
+TimePicker.styles = [css_248z$q];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -3961,7 +4386,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$n = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -4121,7 +4546,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$n];
+Textarea.styles = [css_248z$p];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4180,7 +4605,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$m = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -4521,7 +4946,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$m];
+Switch.styles = [css_248z$o];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4565,7 +4990,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$l = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -5035,7 +5460,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$l];
+Checkbox.styles = [css_248z$n];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5082,7 +5507,7 @@ __decorate([
     e$4('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$k = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -5169,9 +5594,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$k];
+Spinner.styles = [css_248z$m];
 
-var css_248z$j = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -5265,7 +5690,7 @@ var css_248z$j = i`* {
  *
  * @example
  * ```html
- * <wc-container size="lg">Content</wc-container>
+ * <wc-container style="width: 80%; border: 1px dotted black;" size="md">Content</wc-container>
  * ```
  */
 class Container extends i$1 {
@@ -5289,12 +5714,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$j];
+Container.styles = [css_248z$l];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$i = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -5365,6 +5790,13 @@ var css_248z$i = i`* {
   .empty-state .content {
     width: 50%;
   }
+  .empty-state .headline {
+    font-family: var(--typography-title-medium-font-family) !important;
+    font-size: var(--typography-title-medium-font-size) !important;
+    font-weight: var(--typography-title-medium-font-weight) !important;
+    line-height: var(--typography-title-medium-line-height) !important;
+    letter-spacing: var(--typography-title-medium-letter-spacing) !important;
+  }
 }
 @container emptystate (max-width: 671px) {
   .empty-state .empty-state-container {
@@ -5376,6 +5808,13 @@ var css_248z$i = i`* {
     width: 100%;
     justify-content: center;
   }
+  .empty-state .headline {
+    font-family: var(--typography-title-small-font-family) !important;
+    font-size: var(--typography-title-small-font-size) !important;
+    font-weight: var(--typography-title-small-font-weight) !important;
+    line-height: var(--typography-title-small-line-height) !important;
+    letter-spacing: var(--typography-title-small-letter-spacing) !important;
+  }
 }`;
 
 /**
@@ -5387,7 +5826,7 @@ var css_248z$i = i`* {
  *
  * @example
  * ```html
- * <wc-empty-state headline="No items found"></wc-empty-state>
+ * <wc-empty-state width="80%" headline="No items found"></wc-empty-state>
  * ```
  */
 class EmptyState extends i$1 {
@@ -5417,7 +5856,7 @@ class EmptyState extends i$1 {
     __renderTitle() {
         if (!this.headline)
             return A;
-        return b `<div class="title">${this.headline}</div>`;
+        return b `<div class="headline">${this.headline}</div>`;
     }
     __renderDescription() {
         if (!this.description)
@@ -5450,7 +5889,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$i];
+EmptyState.styles = [css_248z$k];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -5464,7 +5903,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$h = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7290,7 +7729,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$h];
+Tooltip.styles = [css_248z$j];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -7314,7 +7753,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$g = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -7356,7 +7795,7 @@ ol {
  * SPDX-License-Identifier: BSD-3-Clause
  */const o=o=>o??A;
 
-var css_248z$f = i`* {
+var css_248z$h = i`* {
   box-sizing: border-box;
 }
 
@@ -7486,7 +7925,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$f];
+BreadcrumbItem.styles = [css_248z$h];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -7540,13 +7979,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$g];
+Breadcrumb.styles = [css_248z$i];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$e = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -7556,22 +7995,34 @@ var css_248z$e = i`* {
 
 .menu {
   display: flex;
-  position: relative;
+  position: fixed;
   z-index: var(--menu-z-index, 1000);
   min-width: 112px;
   padding-block: var(--spacing-050);
+  transform-origin: top center;
+  --_menu-enter-duration: var(--duration-medium1, 250ms);
+  --_menu-exit-duration: var(--duration-short4, 200ms);
+  --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  transition-property: opacity, transform, visibility;
+  transition-duration: var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
+  transition-delay: 0ms, 0ms, var(--_menu-exit-duration);
+  transition-timing-function: var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
 }
 .menu.closed {
-  display: none;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  transform: translateY(-4px) scale(0.97);
 }
 .menu.open {
-  display: flex;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
+  transform: translateY(0) scale(1);
+  transition-duration: var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
+  transition-delay: 0ms, 0ms, 0ms;
+  transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
 }
 .menu .menu-content {
   display: flex;
@@ -7617,6 +8068,12 @@ var css_248z$e = i`* {
   --elevation-container-shape-variant: var(--_container-corner-shape-variant);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .menu {
+    transition: none;
+    transform: none;
+  }
+}
 .menu {
   --_container-shape-start-start: var(--shape-corner-large);
   --_container-shape-start-end: var(--shape-corner-large);
@@ -7630,7 +8087,7 @@ var css_248z$e = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$d = i`* {
+var css_248z$f = i`* {
   box-sizing: border-box;
 }
 
@@ -7640,6 +8097,7 @@ var css_248z$d = i`* {
 
 :host {
   padding-inline: var(--spacing-050);
+  outline: none;
 }
 
 .menu-item {
@@ -7741,7 +8199,7 @@ var css_248z$d = i`* {
   display: none;
 }`;
 
-var css_248z$c = i`:host-context([variant=standard]) {
+var css_248z$e = i`:host-context([variant=standard]) {
   --menu-item-label-color: var(--color-on-surface-variant);
   --menu-item-label-selected-color: var(--color-on-tertiary-container);
   --menu-item-container-selected-color: var(--color-tertiary-container);
@@ -7855,9 +8313,6 @@ class MenuItem extends i$1 {
     __isLink() {
         return !!this.href;
     }
-    get focusTarget() {
-        return this;
-    }
     render() {
         const isLink = this.__isLink();
         const cssClasses = {
@@ -7891,11 +8346,7 @@ class MenuItem extends i$1 {
     }
     renderContent() {
         return b `
-      <wc-focus-ring
-        class="focus-ring"
-        .control=${this}
-        element="focusTarget"
-      ></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this}></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
@@ -7909,7 +8360,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$d, css_248z$c];
+MenuItem.styles = [css_248z$f, css_248z$e];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "disabled", void 0);
@@ -8005,8 +8456,13 @@ class Menu extends i$1 {
         this._closeReason = { kind: 'programmatic' };
         this._onItemActivate = (event) => {
             const customEvent = event;
+            const { item } = customEvent.detail;
+            const ownedItems = this.items;
+            if (!ownedItems.includes(item)) {
+                return;
+            }
             const enabledItems = this._enabledItems();
-            const nextIndex = enabledItems.indexOf(customEvent.detail.item);
+            const nextIndex = enabledItems.indexOf(item);
             if (nextIndex >= 0) {
                 this.activeIndex = nextIndex;
                 this._syncRovingTabIndex();
@@ -8014,6 +8470,9 @@ class Menu extends i$1 {
         };
         this._onItemRequestClose = (event) => {
             const customEvent = event;
+            if (!this.items.includes(customEvent.detail.item)) {
+                return;
+            }
             if (customEvent.defaultPrevented) {
                 return;
             }
@@ -8027,6 +8486,9 @@ class Menu extends i$1 {
             if (!this.open) {
                 return;
             }
+            if (!this._ownsKeyboardEvent(event)) {
+                return;
+            }
             switch (event.key) {
                 case 'ArrowDown':
                     event.preventDefault();
@@ -8175,7 +8637,6 @@ class Menu extends i$1 {
         for (let index = 0; index < enabledItems.length; index += 1) {
             const currentItem = enabledItems[index];
             currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
-            currentItem.selected = index === this.activeIndex;
         }
     }
     _setActiveByOffset(offset) {
@@ -8212,6 +8673,11 @@ class Menu extends i$1 {
     _getFirstEnabledItem() {
         return this._enabledItems()[0] ?? null;
     }
+    _ownsKeyboardEvent(event) {
+        const path = event.composedPath();
+        const ownedItems = this.items;
+        return path.some(target => target instanceof MenuItem && ownedItems.includes(target));
+    }
     _isWithinMenuTree(node) {
         if (!node) {
             return false;
@@ -8309,7 +8775,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$e];
+Menu.styles = [css_248z$g];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -8342,7 +8808,7 @@ __decorate([
     e$4('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$b = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -8536,7 +9002,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$b];
+SubMenu.styles = [css_248z$d];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -8556,7 +9022,7 @@ __decorate([
     o$2({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$a = i`@charset "UTF-8";
+var css_248z$c = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -8713,7 +9179,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$a];
+Image.styles = [css_248z$c];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -8736,7 +9202,7 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-var css_248z$9 = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -8765,7 +9231,7 @@ var css_248z$9 = i`* {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: var(--_tab-height);
+  height: 100%;
   padding: 0 var(--_container-padding);
   width: 100%;
   cursor: pointer;
@@ -8780,43 +9246,47 @@ var css_248z$9 = i`* {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   color: var(--_label-text-color);
   opacity: var(--_label-text-opacity, 1);
+  transition: color var(--duration-short4) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard);
   --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
   --icon-color: var(--_label-text-color);
 }
-.tab .tab-content .slot-container {
-  display: none;
-}
 .tab .tab-content ::slotted([slot=icon]) {
-  flex: none;
   color: var(--_label-text-color);
   --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
   --icon-color: var(--_label-text-color);
 }
 .tab .tab-content ::slotted([slot=badge]) {
-  flex: none;
-  margin-inline-start: var(--_tab-badge-label-spacing, 0);
   --badge-color: var(--_tab-badge-color, var(--color-error));
 }
-.tab.has-icon .tab-content {
-  gap: var(--_tab-icon-label-spacing);
-}
 .tab .indicator {
   position: absolute;
   pointer-events: none;
   z-index: 1;
-  opacity: 0;
   background: var(--_active-indicator-color);
   border-radius: var(--_active-indicator-shape);
-  transform-origin: left bottom;
+  transform: scaleX(0.6);
+  transform-origin: center bottom;
   height: var(--_active-indicator-height);
   inset: auto 0px 0px;
   opacity: 0;
+  transition: transform var(--duration-medium2) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard);
+  will-change: transform, opacity;
+}
+.tab .background {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  transform: scaleX(0.6);
+  transform-origin: center center;
+  transition: transform var(--duration-medium2) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard), background-color var(--duration-short4) var(--easing-standard);
+  will-change: transform, opacity;
 }
 .tab.has-content .slot-container {
   display: flex;
@@ -8858,8 +9328,7 @@ var css_248z$9 = i`* {
   border-end-end-radius: var(--_container-shape-end-end);
 }
 
-:host-context([variant=line]) .tab {
-  --_tab-height: 100%;
+:host-context([variant=primary]) .tab {
   --_container-padding: 1rem;
   --_tab-icon-size: 1.5rem;
   --_tab-icon-label-spacing: 0.5rem;
@@ -8873,33 +9342,49 @@ var css_248z$9 = i`* {
   --_container-shape-end-end: var(--shape-corner-small);
   --_active-indicator-color: var(--color-primary);
   --_active-indicator-shape: 3px 3px 0 0;
-  --_active-indicator-height: 3px;
+  --_active-indicator-height: 2px;
 }
-:host-context([variant=line]) .tab .focus-ring {
+:host-context([variant=primary]) .tab .focus-ring {
   inset: 3px 3px 4px 3px;
 }
-:host-context([variant=line]) .tab.active .tab-content .indicator {
+:host-context([variant=primary]) .tab .tab-content {
+  flex-direction: column;
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section {
+  position: relative;
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section ::slotted([slot=badge]) {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 3px);
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section ::slotted([slot=badge][value]) {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 6px);
+}
+:host-context([variant=primary]) .tab.active .indicator {
   opacity: 1;
+  transform: scaleX(1);
 }
-:host-context([variant=line]) .tab.active .focus-ring {
+:host-context([variant=primary]) .tab.active .focus-ring {
   inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
 }
-:host-context([variant=line]) .tab:hover:not(:where(.disabled)) {
+:host-context([variant=primary]) .tab:hover:not(:where(.disabled)) {
   --_container-state-opacity: 0.08;
 }
-:host-context([variant=line]) .tab.pressed:not(:where(.disabled)) {
+:host-context([variant=primary]) .tab.pressed:not(:where(.disabled)) {
   --_container-state-opacity: 0.12;
 }
-:host-context([variant=line]) .tab.disabled {
+:host-context([variant=primary]) .tab.disabled {
   --_label-text-color: var(--color-on-surface);
   --_label-text-opacity: 0.38;
 }
-:host-context([variant=line]) .tab.disabled .ripple {
+:host-context([variant=primary]) .tab.disabled .ripple {
   display: none;
 }
 
-:host-context([variant=line-secondary]) .tab {
-  --_tab-height: 100%;
+:host-context([variant=secondary]) .tab {
   --_container-padding: 1rem;
   --_tab-icon-size: 1.25rem;
   --_tab-icon-label-spacing: 0.5rem;
@@ -8915,27 +9400,169 @@ var css_248z$9 = i`* {
   --_active-indicator-shape: 0;
   --_active-indicator-height: 2px;
 }
-:host-context([variant=line-secondary]) .tab .focus-ring {
+:host-context([variant=secondary]) .tab .focus-ring {
   inset: 3px 3px 4px 3px;
 }
-:host-context([variant=line-secondary]) .tab.active .indicator.secondary {
+:host-context([variant=secondary]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=secondary]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=secondary]) .tab.active .indicator {
   opacity: 1;
+  transform: scaleX(1);
 }
-:host-context([variant=line-secondary]) .tab.active .focus-ring {
+:host-context([variant=secondary]) .tab.active .focus-ring {
   inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
 }
-:host-context([variant=line-secondary]) .tab:hover:not(:where(.disabled)) {
+:host-context([variant=secondary]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=secondary]) .tab.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=secondary]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=secondary]) .tab.disabled .ripple {
+  display: none;
+}
+
+:host-context([variant=filled]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+  --_container-shape-start-start: var(--shape-corner-medium);
+  --_container-shape-start-end: var(--shape-corner-medium);
+  --_container-shape-end-start: var(--shape-corner-medium);
+  --_container-shape-end-end: var(--shape-corner-medium);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-surface);
+}
+:host-context([variant=filled]) .tab .focus-ring {
+  inset: 2px;
+}
+:host-context([variant=filled]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=filled]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=filled]) .tab .indicator {
+  display: none;
+}
+:host-context([variant=filled]) .tab .ripple {
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+:host-context([variant=filled]) .tab .background {
+  corner-shape: var(--_container-corner-shape-variant);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  background: var(--_active-surface-color);
+}
+:host-context([variant=filled]) .tab.active {
+  --_label-text-color: var(--color-on-surface);
+}
+:host-context([variant=filled]) .tab.active .background {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=filled]) .tab.active .ripple {
+  display: none;
+}
+:host-context([variant=filled]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=filled]) .tab.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=filled]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=filled]) .tab.disabled .ripple {
+  display: none;
+}
+
+:host-context([variant=contained]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--color-primary);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-secondary-container);
+}
+:host-context([variant=contained]) .tab .focus-ring {
+  inset: 2px;
+}
+:host-context([variant=contained]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=contained]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=contained]) .tab .indicator {
+  display: none;
+}
+:host-context([variant=contained]) .tab .ripple {
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+:host-context([variant=contained]) .tab .background {
+  corner-shape: var(--_container-corner-shape-variant);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  background: var(--_active-surface-color);
+}
+:host-context([variant=contained]) .tab.active {
+  --_label-text-color: var(--color-on-secondary-container);
+}
+:host-context([variant=contained]) .tab.active .background {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=contained]) .tab:hover:not(:where(.disabled)) {
   --_container-state-opacity: 0.08;
 }
-:host-context([variant=line-secondary]) .tab.pressed:not(:where(.disabled)) {
+:host-context([variant=contained]) .tab.pressed:not(:where(.disabled)) {
   --_container-state-opacity: 0.12;
 }
-:host-context([variant=line-secondary]) .tab.disabled {
+:host-context([variant=contained]) .tab.disabled {
   --_label-text-color: var(--color-on-surface);
   --_label-text-opacity: 0.38;
 }
-:host-context([variant=line-secondary]) .tab.disabled .ripple {
+:host-context([variant=contained]) .tab.disabled .ripple {
   display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab .tab-content,
+  .tab .indicator,
+  .tab .background {
+    transition: none;
+  }
 }`;
 
 var _Tab_id;
@@ -9022,7 +9649,7 @@ class Tab extends i$1 {
     }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
             this.slotHasContent = hasContent;
             this.requestUpdate();
         });
@@ -9038,6 +9665,9 @@ class Tab extends i$1 {
     __isLink() {
         return !!this.href;
     }
+    __getParentTabsVariant() {
+        return this.closest('wc-tabs')?.variant ?? 'primary';
+    }
     // private handleKeyDown(evt: KeyboardEvent) {
     //   if (this.disabled || this.showLoader) return;
     //   if (evt.key === 'Enter' || evt.key === ' ') {
@@ -9048,13 +9678,15 @@ class Tab extends i$1 {
     // }
     render() {
         const isLink = this.__isLink();
+        const variant = this.__getParentTabsVariant();
         const cssClasses = {
             tab: true,
             'tab-element': true,
             disabled: this.disabled,
             pressed: this.isPressed,
             active: this.active,
-            'has-content': this.slotHasContent || !!this.label,
+            [`variant-${variant}`]: true,
+            'has-content': this.slotHasContent,
             'has-icon': this.slotHasIcon,
             'has-badge': this.slotHasBadge,
         };
@@ -9070,7 +9702,7 @@ class Tab extends i$1 {
               ?disabled=${this.disabled}
               ${spread(this.configAria)}
             >
-              ${this.renderTabContent()}
+              ${this.renderTabContent(variant)}
             </button>`;
         }
         return b `<a
@@ -9087,30 +9719,94 @@ class Tab extends i$1 {
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >
-        ${this.renderTabContent()}
+        ${this.renderTabContent(variant)}
       </a>`;
     }
-    renderTabContent() {
+    renderTabContent(variant) {
+        switch (variant) {
+            case 'secondary':
+                return this.renderSecondaryTabContent();
+            case 'contained':
+                return this.renderContainedTabContent();
+            case 'filled':
+                return this.renderFilledTabContent();
+            case 'primary':
+            default:
+                return this.renderPrimaryTabContent();
+        }
+    }
+    renderPrimaryTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      
+      <div class="tab-content">
+
+        <div class="icon-section">
+          <slot name="badge"></slot>
+          <slot name="icon"></slot>
+        </div>
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <div class="indicator"></div>
+        
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    renderSecondaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} element="tabElement"></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
       
       <div class="tab-content">
+
         <slot name="icon"></slot>
 
         <div class="slot-container">
-          <slot>${this.label || A}</slot>
+          <slot></slot>
         </div>
 
         <slot name="badge"></slot>
-
-        <div class="indicator"></div>
       </div>
 
-      <div class="secondary indicator"></div>
+      <div class="indicator"></div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    renderContainedTabContent() {
+        return this.renderSegmentedTabContent();
+    }
+    renderFilledTabContent() {
+        return this.renderSegmentedTabContent();
+    }
+    renderSegmentedTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="tab-content">
+        <slot name="icon"></slot>
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="badge"></slot>
+      </div>
 
       ${this.__renderDisabledReason()}
     `;
@@ -9135,7 +9831,7 @@ class Tab extends i$1 {
     }
 }
 _Tab_id = new WeakMap();
-Tab.styles = [css_248z$9];
+Tab.styles = [css_248z$b];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tab.prototype, "active", void 0);
@@ -9145,9 +9841,6 @@ __decorate([
 __decorate([
     n({ type: String })
 ], Tab.prototype, "disabledReason", void 0);
-__decorate([
-    n({ type: String })
-], Tab.prototype, "label", void 0);
 __decorate([
     n({ type: String })
 ], Tab.prototype, "value", void 0);
@@ -9182,7 +9875,7 @@ __decorate([
     e$4('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$a = i`* {
   box-sizing: border-box;
 }
 
@@ -9196,7 +9889,7 @@ var css_248z$8 = i`* {
   height: 100%;
 }`;
 
-var css_248z$7 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -9208,14 +9901,44 @@ var css_248z$7 = i`* {
   display: flex;
   position: relative;
   width: 100%;
+  height: var(--tabs-height);
+}
+
+:host([variant=primary]) {
+  --tabs-height: 4rem;
+}
+:host([variant=primary]) .tabs {
+  border-bottom: 1px solid var(--color-surface-variant);
 }
 
-:host-context([variant=line]), :host([variant=line]) {
+:host([variant=secondary]) {
   --tabs-height: 3rem;
 }
-:host-context([variant=line]) .tabs, :host([variant=line]) .tabs {
-  height: var(--tabs-height);
+:host([variant=secondary]) .tabs {
   border-bottom: 1px solid var(--color-surface-variant);
+}
+
+:host([variant=filled]) {
+  --tabs-height: 3rem;
+}
+:host([variant=filled]) .tabs {
+  align-items: stretch;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: var(--shape-corner-small);
+  background: var(--color-surface-container-high);
+}
+
+:host([variant=contained]) {
+  --tabs-height: 3rem;
+}
+:host([variant=contained]) .tabs {
+  align-items: stretch;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: var(--shape-corner-extra-small);
+  border: 1px solid var(--color-outline-variant);
+  background: var(--color-surface);
 }`;
 
 /**
@@ -9230,7 +9953,7 @@ var css_248z$7 = i`* {
  * @example
  * ```html
  * <wc-tabs>
- *   <wc-tab>Tab 1</wc-tab>
+ *   <wc-tab active>Tab 1</wc-tab>
  *   <wc-tab>Tab 2</wc-tab>
  * </wc-tabs>
  * ```
@@ -9239,6 +9962,7 @@ var css_248z$7 = i`* {
 class Tabs extends i$1 {
     constructor() {
         super(...arguments);
+        this.variant = 'primary';
         this.managed = false;
         this.__handleTabClick = (event) => {
             if (this.managed)
@@ -9248,7 +9972,8 @@ class Tabs extends i$1 {
             const clickedTab = path.find(node => node instanceof Element && node.tagName.toLowerCase() === 'wc-tab');
             if (!clickedTab)
                 return;
-            const tabs = Array.from(this.querySelectorAll('wc-tab'));
+            const previousActiveTab = this.__getActiveTab();
+            const tabs = this.__getTabs();
             let clickedIndex = -1;
             for (let index = 0; index < tabs.length; index += 1) {
                 const tab = tabs[index];
@@ -9257,6 +9982,8 @@ class Tabs extends i$1 {
                     clickedIndex = index;
             }
             clickedTab.active = true;
+            this.__animateIndicatorTransition(previousActiveTab, clickedTab);
+            this.__lastActiveTab = clickedTab;
             this.dispatchEvent(new CustomEvent('tab-click', {
                 bubbles: true,
                 composed: true,
@@ -9271,10 +9998,96 @@ class Tabs extends i$1 {
         super.connectedCallback();
         this.addEventListener('click', this.__handleTabClick);
     }
+    firstUpdated() {
+        this.__mutationObserver = new MutationObserver(() => {
+            this.__syncIndicatorsFromActiveState();
+        });
+        this.__mutationObserver.observe(this, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['active', 'disabled'],
+        });
+        this.__lastActiveTab = this.__getActiveTab();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('variant')) {
+            this.__lastActiveTab = this.__getActiveTab();
+        }
+    }
     disconnectedCallback() {
+        this.__mutationObserver?.disconnect();
         this.removeEventListener('click', this.__handleTabClick);
         super.disconnectedCallback();
     }
+    __getTabs() {
+        return Array.from(this.querySelectorAll('wc-tab'));
+    }
+    __getActiveTab() {
+        return this.__getTabs().find(tab => tab.active && !tab.disabled);
+    }
+    static __getTabIndicator(tab) {
+        if (!tab?.shadowRoot)
+            return undefined;
+        return tab.shadowRoot.querySelector('.indicator');
+    }
+    static __getTabBackground(tab) {
+        if (!tab?.shadowRoot)
+            return undefined;
+        return tab.shadowRoot.querySelector('.background');
+    }
+    __getAnimationElements(previousTab, nextTab) {
+        if (this.variant === 'primary' || this.variant === 'secondary') {
+            return {
+                previous: Tabs.__getTabIndicator(previousTab),
+                next: Tabs.__getTabIndicator(nextTab),
+            };
+        }
+        if (this.variant === 'filled' || this.variant === 'contained') {
+            return {
+                previous: Tabs.__getTabBackground(previousTab),
+                next: Tabs.__getTabBackground(nextTab),
+            };
+        }
+        return {
+            previous: undefined,
+            next: undefined,
+        };
+    }
+    __animateIndicatorTransition(previousTab, nextTab) {
+        if (!previousTab || !nextTab || previousTab === nextTab)
+            return;
+        const { previous: previousAnimationElement, next: nextAnimationElement } = this.__getAnimationElements(previousTab, nextTab);
+        if (!previousAnimationElement || !nextAnimationElement)
+            return;
+        const previousRect = previousTab.getBoundingClientRect();
+        const nextRect = nextTab.getBoundingClientRect();
+        const incomingOffset = previousRect.left - nextRect.left;
+        const outgoingOffset = nextRect.left - previousRect.left;
+        const incomingScale = previousRect.width / nextRect.width;
+        const outgoingScale = nextRect.width / previousRect.width;
+        nextAnimationElement.style.transition = 'none';
+        nextAnimationElement.style.opacity = '0';
+        nextAnimationElement.style.transform = `translateX(${incomingOffset}px) scaleX(${incomingScale})`;
+        previousAnimationElement.style.transition = 'none';
+        previousAnimationElement.style.opacity = '1';
+        previousAnimationElement.style.transform = 'translateX(0) scaleX(1)';
+        requestAnimationFrame(() => {
+            nextAnimationElement.style.transition = '';
+            previousAnimationElement.style.transition = '';
+            nextAnimationElement.style.opacity = '1';
+            nextAnimationElement.style.transform = 'translateX(0) scaleX(1)';
+            previousAnimationElement.style.opacity = '0';
+            previousAnimationElement.style.transform = `translateX(${outgoingOffset}px) scaleX(${outgoingScale})`;
+        });
+    }
+    __syncIndicatorsFromActiveState() {
+        const activeTab = this.__getActiveTab();
+        if (this.__lastActiveTab && activeTab && this.__lastActiveTab !== activeTab) {
+            this.__animateIndicatorTransition(this.__lastActiveTab, activeTab);
+        }
+        this.__lastActiveTab = activeTab;
+    }
     render() {
         return b `
       <div class="tabs">
@@ -9283,13 +10096,16 @@ class Tabs extends i$1 {
     `;
     }
 }
-Tabs.styles = [css_248z$7];
+Tabs.styles = [css_248z$9];
 Tabs.Tab = Tab;
+__decorate([
+    n({ reflect: true })
+], Tabs.prototype, "variant", void 0);
 __decorate([
     n({ type: Boolean })
 ], Tabs.prototype, "managed", void 0);
 
-var css_248z$6 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -9331,7 +10147,7 @@ class TabPanel extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabPanel.styles = [css_248z$6];
+TabPanel.styles = [css_248z$8];
 __decorate([
     n({ reflect: true })
 ], TabPanel.prototype, "value", void 0);
@@ -9366,7 +10182,6 @@ __decorate([
 class TabGroup extends i$1 {
     constructor() {
         super(...arguments);
-        this.variant = 'line';
         this.onTabClick = (event) => {
             const custom = event;
             event.stopPropagation();
@@ -9485,14 +10300,11 @@ class TabGroup extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabGroup.styles = [css_248z$8];
+TabGroup.styles = [css_248z$a];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
-__decorate([
-    n({ reflect: true })
-], TabGroup.prototype, "variant", void 0);
 
-var css_248z$5 = i`:host {
+var css_248z$7 = i`:host {
   --_track-height: 4px;
   --_thumb-size: 20px;
   --thumb-half: 10px;
@@ -9534,7 +10346,6 @@ var css_248z$5 = i`:host {
   position: absolute;
   height: 100%;
   background-color: var(--_active-track-color);
-  transition: width 0.1s ease-out;
   will-change: width;
 }
 
@@ -9765,7 +10576,7 @@ class Slider extends i$1 {
     `;
     }
 }
-Slider.styles = [css_248z$5];
+Slider.styles = [css_248z$7];
 __decorate([
     n({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -9794,7 +10605,7 @@ __decorate([
     e$4('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
-var css_248z$4 = i`* {
+var css_248z$6 = i`* {
   box-sizing: border-box;
 }
 
@@ -10328,7 +11139,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$4];
+Table.styles = [css_248z$6];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -10387,7 +11198,7 @@ __decorate([
     r()
 ], Table.prototype, "isHorizontallyScrolled", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$5 = i`* {
   box-sizing: border-box;
 }
 
@@ -10569,7 +11380,7 @@ class Pagination extends i$1 {
     `;
     }
 }
-Pagination.styles = [css_248z$3];
+Pagination.styles = [css_248z$5];
 __decorate([
     n({ type: Number })
 ], Pagination.prototype, "page", void 0);
@@ -10583,7 +11394,7 @@ __decorate([
     n({ type: Array, attribute: 'page-sizes' })
 ], Pagination.prototype, "pageSizes", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -10898,7 +11709,7 @@ class TreeNode extends i$1 {
     </div>`;
     }
 }
-TreeNode.styles = [css_248z$2];
+TreeNode.styles = [css_248z$4];
 __decorate([
     n({ type: String, reflect: true })
 ], TreeNode.prototype, "value", void 0);
@@ -10930,7 +11741,7 @@ __decorate([
     e$4('.tree-node-content')
 ], TreeNode.prototype, "_nativeElement", void 0);
 
-var css_248z$1 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -11093,13 +11904,13 @@ class TreeView extends i$1 {
     </div>`;
     }
 }
-TreeView.styles = [css_248z$1];
+TreeView.styles = [css_248z$3];
 TreeView.Node = TreeNode;
 __decorate([
     n({ type: String, attribute: 'selected-node', reflect: true })
 ], TreeView.prototype, "selectedNode", void 0);
 
-var css_248z = i`* {
+var css_248z$2 = i`* {
   box-sizing: border-box;
 }
 
@@ -11302,7 +12113,7 @@ class Snackbar extends i$1 {
     `;
     }
 }
-Snackbar.styles = [css_248z];
+Snackbar.styles = [css_248z$2];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Snackbar.prototype, "open", void 0);
@@ -11322,5 +12133,1161 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], Snackbar.prototype, "multiline", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, TreeNode as G, TreeView as H, Icon as I, LinearProgress as L, Menu as M, NumberField as N, Pagination as P, Ripple as R, Skeleton as S, Tab as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, Slider as n, Snackbar as o, Spinner as p, SubMenu as q, Switch as r, TabGroup as s, TabPanel as t, Table as u, Tabs as v, Tag as w, Textarea as x, TimePicker as y, Tooltip as z };
-//# sourceMappingURL=snackbar-74YCdMPL.js.map
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --radio-size: 20px;
+  --radio-dot-size: 12px;
+  --radio-selected-color: var(--color-primary);
+  --radio-unselected-color: var(--color-on-surface-variant);
+  --radio-state-layer-size: 40px;
+  --radio-disabled-opacity: 0.38;
+}
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: 8px;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+}
+.radio .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.radio .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--radio-state-layer-size);
+  height: var(--radio-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.radio .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .outer-circle {
+  position: absolute;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border: 2px solid var(--radio-unselected-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.radio .inner-circle {
+  position: absolute;
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  background: var(--radio-selected-color);
+  border-radius: 50%;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.radio:hover:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.08;
+  background: var(--color-on-surface);
+}
+.radio:hover:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .container {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.active:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+
+.radio.state-checked .outer-circle {
+  border-color: var(--radio-selected-color);
+}
+.radio.state-checked .inner-circle {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.radio.readonly {
+  cursor: default;
+}
+.radio.readonly .state-layer {
+  display: none;
+}
+.radio.readonly .outer-circle {
+  border-color: var(--color-on-surface-variant);
+}
+.radio.readonly.state-checked .inner-circle {
+  background: var(--color-on-surface-variant);
+}
+
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: var(--radio-disabled-opacity);
+}
+.radio.disabled .state-layer {
+  display: none;
+}
+.radio.disabled .label {
+  color: var(--color-on-surface);
+}
+.radio.disabled .outer-circle {
+  border-color: var(--color-on-surface);
+}
+.radio.disabled.state-checked .inner-circle {
+  background: var(--color-on-surface);
+}`;
+
+class Radio extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The input field name for grouping radios.
+         */
+        this.name = '';
+        /**
+         * The submitted value when this radio is selected.
+         */
+        this.value = '';
+        /**
+         * The radio label.
+         */
+        this.label = '';
+        /**
+         * Whether the radio is selected.
+         */
+        this.checked = false;
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the radio is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the radio. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        this.hasFocus = false;
+        this.isActive = false;
+        this.slotHasContent = false;
+        this.isGroupFocusTarget = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.selectRadio(evt);
+            }
+            else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
+                evt.preventDefault();
+                this.navigateGroup(Radio.DIRECTION_NEXT);
+            }
+            else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
+                evt.preventDefault();
+                this.navigateGroup(Radio.DIRECTION_PREVIOUS);
+            }
+        };
+        this.clickHandler = (ev) => {
+            this.selectRadio(ev);
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes() || !!this.label;
+        this.updateGroupFocusTarget();
+    }
+    updated(changedProps) {
+        if (changedProps.has('label')) {
+            this.slotHasContent = this.hasChildNodes() || !!this.label;
+        }
+        if (changedProps.has('checked') && this.checked) {
+            this.uncheckSiblings();
+        }
+        if (changedProps.has('checked') || changedProps.has('name')) {
+            this.updateGroupFocusTarget();
+        }
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            const attrValue = this.getAttribute('tabindex');
+            if (attrValue !== null) {
+                this.tabindex = parseInt(attrValue, 10);
+            }
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    selectRadio(ev) {
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.checked) {
+            this.checked = true;
+            this.uncheckSiblings();
+            this.dispatchChange(ev);
+        }
+        this.containerElement?.focus();
+    }
+    dispatchChange(ev) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value, checked: this.checked, originalEvent: ev },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    uncheckSiblings() {
+        if (!this.name || !this.checked)
+            return;
+        const radios = this.getGroupRadios();
+        radios.forEach(radio => {
+            if (radio === this)
+                return;
+            radio.checked = false;
+        });
+    }
+    getGroupRadios() {
+        if (!this.name)
+            return [this];
+        const scopeRoot = this.closest('form') ?? document;
+        return Array.from(scopeRoot.querySelectorAll(`wc-radio[name="${this.name}"]`));
+    }
+    isRadioEnabled(radio) {
+        return !radio.disabled && !radio.readonly;
+    }
+    updateGroupFocusTarget() {
+        const group = this.getGroupRadios();
+        if (!group.length)
+            return;
+        const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));
+        if (!enabledGroup.length) {
+            group.forEach(radio => {
+                radio.isGroupFocusTarget = false;
+            });
+            return;
+        }
+        const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+        group.forEach(radio => {
+            radio.isGroupFocusTarget = radio === target;
+        });
+    }
+    navigateGroup(direction) {
+        const group = this.getGroupRadios().filter(radio => this.isRadioEnabled(radio));
+        if (!group.length)
+            return;
+        const currentIndex = group.indexOf(this);
+        const startIndex = currentIndex >= 0 ? currentIndex : 0;
+        const nextIndex = (startIndex + direction + group.length) % group.length;
+        const target = group[nextIndex];
+        target.selectRadio();
+        target.containerElement?.focus();
+    }
+    /**
+     * Sets focus on the radio.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the radio.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            radio: true,
+            'state-checked': this.checked,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$3(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.isGroupFocusTarget
+            ? this.tabindex !== undefined
+                ? this.tabindex
+                : 0
+            : -1}
+          role="radio"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.checked}
+          @click=${this.clickHandler}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outer-circle"></div>
+          <div class="inner-circle"></div>
+        </div>
+
+        <input
+          type="radio"
+          class="input-native"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          aria-hidden="true"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+    }
+}
+Radio.DIRECTION_NEXT = 1;
+Radio.DIRECTION_PREVIOUS = -1;
+Radio.styles = [css_248z$1];
+__decorate([
+    n({ type: String })
+], Radio.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "value", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Radio.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Radio.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Radio.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isGroupFocusTarget", void 0);
+__decorate([
+    e$4('.container')
+], Radio.prototype, "containerElement", void 0);
+__decorate([
+    e$4('.input-native')
+], Radio.prototype, "nativeElement", void 0);
+
+var css_248z = i`@charset "UTF-8";
+* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Make the field wrapper behave as a select (pointer cursor) */
+.select-field {
+  cursor: pointer;
+}
+
+.select-trigger {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 1.5rem;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  min-width: 0;
+}
+.select-trigger:focus-visible {
+  outline: none;
+}
+
+.display-value {
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.placeholder {
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--color-on-surface-variant);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Typeahead search input */
+.search-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--color-on-surface);
+  cursor: pointer;
+}
+.search-input::placeholder {
+  color: var(--color-on-surface-variant);
+}
+.search-input:focus {
+  cursor: text;
+}
+
+/* Field end slot wrapper */
+.field-end-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+}
+
+/* Dropdown chevron icon */
+.dropdown-icon {
+  --icon-size: 1.5rem;
+  --icon-color: var(--color-on-surface-variant);
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+.dropdown-icon.dropdown-icon--open {
+  transform: rotate(180deg);
+}
+
+/* Clear button */
+.clear-btn {
+  --button-container-shape: var(--shape-corner-full);
+}
+
+/* Multi-select chips area — single scrollable row, no vertical growth */
+.chips-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+.chips-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Disabled state */
+:host([disabled]) .select-trigger,
+:host([disabled]) .select-field {
+  cursor: not-allowed;
+}
+
+/* Readonly state */
+:host([readonly]) .select-trigger,
+:host([readonly]) .select-field {
+  cursor: default;
+}`;
+
+/**
+ * @label Select Option
+ * @tag wc-option
+ * @rawTag option
+ * @parentRawTag select
+ *
+ * @summary A declarative option element for use inside wc-select.
+ *
+ * @example
+ * ```html
+ * <wc-select label="Fruit">
+ *   <wc-option value="apple">Apple</wc-option>
+ *   <wc-option value="banana">Banana</wc-option>
+ * </wc-select>
+ * ```
+ */
+class SelectOptionElement extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The option's submitted value.
+         */
+        this.value = '';
+        /**
+         * Optional Material Symbol icon name shown before the label.
+         */
+        this.icon = '';
+        /**
+         * Disables the option so it cannot be selected.
+         */
+        this.disabled = false;
+        // ── Managed by wc-select ──────────────────────────────────────────────────
+        /** Reflects whether this option is currently selected. Set by wc-select. */
+        this.selected = false;
+        /**
+         * When true the menu stays open after selection (used for multi-select).
+         * Set by wc-select.
+         */
+        this.keepOpen = false;
+        /**
+         * When true the option is hidden and excluded from keyboard navigation
+         * because it does not match the current typeahead search query.
+         * Set by wc-select.
+         */
+        this.filtered = false;
+    }
+    /**
+     * Returns the inner `wc-menu-item` element.
+     * `wc-menu` discovers this via its `items` getter which checks `el.item`
+     * as a `MenuItem` proxy, so keyboard navigation and activation work
+     * without `wc-option` extending `MenuItem` directly.
+     */
+    get item() {
+        const el = this._menuItemEl;
+        // Narrow to MenuItem — the shadow DOM only ever contains a wc-menu-item
+        // (a MenuItem subclass), so this cast is safe by construction.
+        return el != null ? el : null;
+    }
+    render() {
+        return b `
+      <wc-menu-item
+        value=${this.value}
+        ?disabled=${this.disabled || this.filtered}
+        ?selected=${this.selected}
+        ?keep-open=${this.keepOpen}
+      >
+        ${this.icon
+            ? b `<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
+            : A}
+        <slot></slot>
+        ${this.selected && this.keepOpen
+            ? b `<wc-icon
+              name="check"
+              slot="trailing-supporting-text"
+            ></wc-icon>`
+            : A}
+      </wc-menu-item>
+    `;
+    }
+}
+SelectOptionElement.styles = [
+    i `
+      :host {
+        display: contents;
+      }
+      :host([filtered]) {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    n({ type: String, reflect: true })
+], SelectOptionElement.prototype, "value", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SelectOptionElement.prototype, "icon", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'keep-open' })
+], SelectOptionElement.prototype, "keepOpen", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "filtered", void 0);
+__decorate([
+    e$4('wc-menu-item')
+], SelectOptionElement.prototype, "_menuItemEl", void 0);
+
+/**
+ * @label Select
+ * @tag wc-select
+ * @rawTag select
+ *
+ * @summary A dropdown select component supporting single and multi-select with optional typeahead search.
+ * @overview
+ * Select builds on wc-field and wc-menu to provide a fully-featured dropdown picker.
+ *
+ * - Single and multi-select modes
+ * - Client-side typeahead with `search="contains"`
+ * - Server-side typeahead with `search="managed"`
+ * - Multi-select chips display
+ *
+ * @example
+ * ```html
+ * <wc-select label="Fruit" placeholder="Pick a fruit...">
+ *   <wc-option value="apple">Apple</wc-option>
+ *   <wc-option value="banana">Banana</wc-option>
+ * </wc-select>
+ * ```
+ * @tags form
+ */
+class Select extends BaseInput {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of options to display in the dropdown.
+         * Setting this property creates matching `<wc-option>` children automatically.
+         */
+        this.options = [];
+        /**
+         * The selected value. For multi-select, a comma-separated list of values.
+         */
+        this.value = '';
+        /**
+         * Enable multi-select mode.
+         */
+        this.multiple = false;
+        /**
+         * Enable typeahead search.
+         * - `'contains'`: filters options client-side.
+         * - `'managed'`: emits a `select-search` event for server-controlled filtering.
+         */
+        this.search = '';
+        /**
+         * Placeholder text shown when no value is selected.
+         */
+        this.placeholder = '';
+        /**
+         * Label displayed above the field.
+         */
+        this.label = '';
+        /**
+          * Show a clear button in single-select mode when a value is selected.
+         */
+        this.clearable = false;
+        /**
+         * Visual variant of the field.
+         */
+        this.variant = 'default';
+        /**
+         * Helper text displayed below the field.
+         */
+        this.helperText = '';
+        this.error = false;
+        this.errorText = '';
+        this.warning = false;
+        this.warningText = '';
+        this._open = false;
+        this._focused = false;
+        this._searchQuery = '';
+        /** True when all options are filtered out by the current search query. */
+        this._noOptionsVisible = false;
+    }
+    get _menu() {
+        return this.renderRoot?.querySelector('wc-menu') ?? null;
+    }
+    focus() {
+        this._triggerEl?.focus();
+    }
+    blur() {
+        this._triggerEl?.blur();
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    updated(changedProperties) {
+        if (changedProperties.has('options')) {
+            this._syncProgrammaticOptions();
+        }
+        this._syncOptionStates();
+    }
+    // ── Programmatic options ───────────────────────────────────────────────────
+    /**
+     * Reconciles the `options` property with auto-generated `<wc-option>` light-DOM
+     * children (marked `data-generated`).  Declarative children placed by the
+     * consumer are left untouched.
+     */
+    _syncProgrammaticOptions() {
+        this.querySelectorAll('wc-option[data-generated]').forEach(el => el.remove());
+        for (const opt of this.options) {
+            const el = new SelectOptionElement();
+            el.value = opt.value;
+            if (opt.icon)
+                el.icon = opt.icon;
+            el.textContent = opt.label;
+            el.dataset.generated = '';
+            this.appendChild(el);
+        }
+    }
+    // ── Option state sync ──────────────────────────────────────────────────────
+    /**
+     * Pushes `selected`, `keepOpen`, and `filtered` state onto every `<wc-option>`
+     * child element so each one can render itself correctly.
+     */
+    _syncOptionStates() {
+        const optEls = Array.from(this.querySelectorAll('wc-option'));
+        let visibleCount = 0;
+        for (const opt of optEls) {
+            opt.selected = this._isSelected(opt.value);
+            opt.keepOpen = this.multiple;
+            if (this.search && this.search !== 'managed' && this._searchQuery) {
+                const q = this._searchQuery.toLowerCase();
+                const label = opt.textContent?.trim() ?? '';
+                opt.filtered = !label.toLowerCase().includes(q);
+                if (!opt.filtered)
+                    visibleCount++;
+            }
+            else {
+                opt.filtered = false;
+                visibleCount++;
+            }
+        }
+        this._noOptionsVisible = optEls.length > 0 && visibleCount === 0;
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────────
+    get _selectedValues() {
+        if (!this.value)
+            return [];
+        return this.value
+            .split(',')
+            .map(v => v.trim())
+            .filter(Boolean);
+    }
+    _isSelected(value) {
+        return this._selectedValues.includes(value);
+    }
+    /** Returns the display label for a given option value. */
+    _getLabelForValue(val) {
+        for (const opt of this.querySelectorAll('wc-option')) {
+            if (opt.value === val)
+                return opt.textContent?.trim() ?? val;
+        }
+        // Fallback to options array (before wc-option children are created)
+        return this.options.find(o => o.value === val)?.label ?? val;
+    }
+    get _displayLabel() {
+        if (!this.value)
+            return '';
+        const firstValue = this._selectedValues[0];
+        if (!firstValue)
+            return '';
+        return this._getLabelForValue(firstValue);
+    }
+    get _isPopulated() {
+        return !!this.value;
+    }
+    // ── Menu open/close ────────────────────────────────────────────────────────
+    _openMenu() {
+        if (this.disabled || this.readonly)
+            return;
+        this._open = true;
+        this._focused = true;
+        const menu = this._menu;
+        if (menu && this._triggerEl) {
+            menu.anchorElement = this._triggerEl;
+            menu.show();
+        }
+        if (this.search) {
+            this._searchQuery = '';
+            // Use rAF so that the search input receives focus *after* wc-menu has
+            // finished showing and potentially focused a menu item.
+            this.updateComplete.then(() => {
+                requestAnimationFrame(() => {
+                    this._searchInputEl?.focus();
+                });
+            });
+        }
+    }
+    _closeMenu() {
+        if (!this._open)
+            return;
+        this._open = false;
+        this._focused = false;
+        this._searchQuery = '';
+        this._menu?.close();
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    _handleTriggerClick(event) {
+        // Ignore clicks that originated inside the search input — those should not
+        // toggle the menu (the input needs to stay open so the user can type).
+        if (event.target instanceof HTMLInputElement) {
+            return;
+        }
+        if (this._open) {
+            this._closeMenu();
+        }
+        else {
+            this._openMenu();
+        }
+    }
+    _handleTriggerKeyDown(event) {
+        // When the typeahead search input is active, let the input handle its own
+        // keys (Space, Enter, etc.). Only intercept Escape to close the menu.
+        if (event.target instanceof HTMLInputElement) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this._closeMenu();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this._open)
+                    this._openMenu();
+                break;
+            case 'Escape':
+                if (this._open) {
+                    event.preventDefault();
+                    this._closeMenu();
+                }
+                break;
+        }
+    }
+    _handleMenuClosed() {
+        this._open = false;
+        this._focused = false;
+        this._searchQuery = '';
+    }
+    _handleMenuItemActivate(event) {
+        const item = event.detail?.item;
+        if (!item)
+            return;
+        const val = item.value;
+        if (!val)
+            return;
+        if (this.multiple) {
+            const values = this._selectedValues;
+            const idx = values.indexOf(val);
+            if (idx >= 0) {
+                values.splice(idx, 1);
+            }
+            else {
+                values.push(val);
+            }
+            this.value = values.join(',');
+        }
+        else {
+            this.value = val;
+            this._closeMenu();
+        }
+        this._dispatchChange();
+    }
+    _dispatchChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleSearchInput(event) {
+        this._searchQuery = event.target.value;
+        if (this.search === 'managed') {
+            this.dispatchEvent(new CustomEvent('select-search', {
+                detail: { value: this._searchQuery },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _handleClear(event) {
+        event.stopPropagation();
+        this.value = '';
+        this._dispatchChange();
+    }
+    _handleChipDismiss(event, chipValue) {
+        event.stopPropagation();
+        const values = this._selectedValues.filter(v => v !== chipValue);
+        this.value = values.join(',');
+        this._dispatchChange();
+    }
+    // ── Render helpers ─────────────────────────────────────────────────────────
+    _renderTriggerContent() {
+        // Typeahead: when open, show a text input for filtering
+        if (this.search && this._open) {
+            return b `<input
+        class="search-input"
+        .value=${this._searchQuery}
+        placeholder=${this._displayLabel || this.placeholder}
+        @input=${this._handleSearchInput}
+      />`;
+        }
+        // Multi-select: show chips for selected items
+        if (this.multiple && this._selectedValues.length > 0) {
+            return b `<div class="chips-container">
+        ${this._selectedValues.map(val => b `
+            <wc-chip
+              dismissible
+              value=${val}
+              @tag--dismiss=${(e) => this._handleChipDismiss(e, val)}
+            >${this._getLabelForValue(val)}</wc-chip
+            >
+          `)}
+      </div>`;
+        }
+        // Single select: show selected label or placeholder
+        const label = this._displayLabel;
+        if (!label) {
+            return b `<span class="placeholder">${this.placeholder}</span>`;
+        }
+        return b `<span class="display-value">${label}</span>`;
+    }
+    _renderFieldEnd() {
+        const showClear = this.clearable &&
+            !this.multiple &&
+            !!this.value &&
+            !this.disabled &&
+            !this.readonly;
+        return b `
+      ${showClear
+            ? b `<wc-icon-button
+            class="clear-btn"
+            variant="text"
+            size="sm"
+            name="close"
+            @click=${this._handleClear}
+          ></wc-icon-button>`
+            : A}
+      <wc-icon
+        class=${e$3({
+            'dropdown-icon': true,
+            'dropdown-icon--open': this._open,
+        })}
+        name="arrow_drop_down"
+      ></wc-icon>
+    `;
+    }
+    render() {
+        return b `
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${this._isPopulated || this._open}
+        ?focused=${this._focused}
+        .host=${this}
+        class="select-field"
+      >
+        <div
+          class="select-trigger"
+          tabindex=${this.disabled ? -1 : 0}
+          role="combobox"
+          aria-expanded=${String(this._open)}
+          aria-haspopup="listbox"
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+        >
+          ${this._renderTriggerContent()}
+        </div>
+
+        <div slot="field-end" class="field-end-wrapper">
+          ${this._renderFieldEnd()}
+        </div>
+      </wc-field>
+
+      <wc-menu
+        placement="bottom-start"
+        aria-label=${this.label || 'Options'}
+        @closed=${this._handleMenuClosed}
+        @menu-item-activate=${(e) => this._handleMenuItemActivate(e)}
+      >
+        <slot></slot>
+        ${this._noOptionsVisible
+            ? b `<wc-menu-item disabled>No options</wc-menu-item>`
+            : A}
+      </wc-menu>
+    `;
+    }
+}
+Select.styles = [css_248z];
+__decorate([
+    n({ type: Array })
+], Select.prototype, "options", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Select.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Select.prototype, "multiple", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "search", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "placeholder", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean })
+], Select.prototype, "clearable", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], Select.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Select.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], Select.prototype, "errorText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Select.prototype, "warning", void 0);
+__decorate([
+    n({ type: String, attribute: 'warning-text' })
+], Select.prototype, "warningText", void 0);
+__decorate([
+    r()
+], Select.prototype, "_open", void 0);
+__decorate([
+    r()
+], Select.prototype, "_focused", void 0);
+__decorate([
+    r()
+], Select.prototype, "_searchQuery", void 0);
+__decorate([
+    r()
+], Select.prototype, "_noOptionsVisible", void 0);
+__decorate([
+    e$4('.select-trigger')
+], Select.prototype, "_triggerEl", void 0);
+__decorate([
+    e$4('.search-input')
+], Select.prototype, "_searchInputEl", void 0);
+
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tabs as G, Tag as H, Icon as I, Textarea as J, TimePicker as K, LinearProgress as L, Menu as M, NumberField as N, Tooltip as O, Pagination as P, TreeNode as Q, Radio as R, SegmentedButton as S, Tab as T, TreeView as U, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, Ripple as n, SegmentedButtonGroup as o, Select as p, SelectOptionElement as q, Skeleton as r, Slider as s, Snackbar as t, Spinner as u, SubMenu as v, Switch as w, TabGroup as x, TabPanel as y, Table as z };
+//# sourceMappingURL=select-C3XAzenC.js.map