@redvars/peacock 3.3.3 → 3.5.0

package/dist/{radio-b70_Ie9n.js → select-4pl4XBj7.js}

@@ -1,24 +1,108 @@
-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 { e as e$1 } from './directive-Cuw6h7YA.js';
-import { e as e$2, o as o$4 } from './unsafe-html-C2r3PyzF.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 { 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-ZPhl09Yt.js';
+import { e as e$2, o as o$4 } from './unsafe-html-BsGUjx94.js';
+import { e as e$3 } from './class-map-YU7g0o3B.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.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 { d as BaseHyperlink } from './button-DMN1dPAg.js';
+import { o as o$2 } from './style-map-DVmWOuYy.js';
+import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import { B as BaseInput, i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DicqGkCJ.js';
+import { o as o$3 } from './fab-C5Nzxk0E.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
 
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function o$2(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}
+ */function o$1(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class t extends e$2{}t.directiveName="unsafeSVG",t.resultType=2;const o$1=e$1(t);
+ */class t extends e$2{}t.directiveName="unsafeSVG",t.resultType=2;const o=e$1(t);
+
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+function sanitizeSvg(rawSvg) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+        const scripts = Array.from(doc.querySelectorAll('script'));
+        scripts.forEach(n => n.remove());
+        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+        foreigns.forEach(n => n.remove());
+        const all = Array.from(doc.querySelectorAll('*'));
+        all.forEach(el => {
+            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+            attrs.forEach(a => el.removeAttribute(a.name));
+        });
+        const el = doc.documentElement;
+        if (!el)
+            return '';
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(el);
+    }
+    catch (e) {
+        return '';
+    }
+}
+
+async function createCacheFetch(name) {
+    let cache = null;
+    // This map tracks requests currently being processed
+    const inFlightRequests = new Map();
+    try {
+        cache = await window.caches.open(name);
+    }
+    catch (e) {
+        console.warn('window.caches access not allowed');
+    }
+    return async (url) => {
+        if (inFlightRequests.has(url)) {
+            return inFlightRequests.get(url);
+        }
+        const fetchPromise = (async () => {
+            const request = new Request(url);
+            if (cache) {
+                const cachedResponse = await cache.match(request);
+                if (cachedResponse) {
+                    return cachedResponse.text();
+                }
+            }
+            const urlObj = new URL(request.url);
+            const isSameOrigin = urlObj.origin === window.location.origin;
+            const response = await fetch(request.url, {
+                method: 'GET',
+                mode: isSameOrigin ? 'no-cors' : 'cors',
+                credentials: isSameOrigin ? 'same-origin' : 'omit',
+            });
+            if (response.status === 404) {
+                console.error(`[Fetch Error] Resource not found (404): ${url}`);
+                return '';
+            }
+            const result = await response.text();
+            if (cache && response.status === 200) {
+                await cache.put(request, new Response(result, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                }));
+            }
+            return result;
+        })();
+        inFlightRequests.set(url, fetchPromise);
+        try {
+            return await fetchPromise;
+        }
+        finally {
+            inFlightRequests.delete(url);
+        }
+    };
+}
 
 const PROVIDERS = {
     'material-symbols': (name) => `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,
@@ -39,7 +123,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$L = i`* {
+var css_248z$O = i`* {
   box-sizing: border-box;
 }
 
@@ -108,7 +192,7 @@ class Icon extends i$1 {
         // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
         return b ` <div class="icon">
       ${this.svgContent
-            ? o$1(this.svgContent)
+            ? o(this.svgContent)
             : b `<slot name="fallback"></slot>`}
     </div>`;
     }
@@ -168,7 +252,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$L];
+Icon.styles = [css_248z$O];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -188,7 +272,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$K = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -279,7 +363,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$K];
+Avatar.styles = [css_248z$N];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -287,7 +371,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$J = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -359,12 +443,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$J];
+Badge.styles = [css_248z$M];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$I = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -473,7 +557,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$I];
+Divider.styles = [css_248z$L];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -481,7 +565,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$H = 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 +638,403 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$H];
+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$G = i`:host {
+var css_248z$H = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -593,7 +1071,7 @@ class FocusRing extends i$1 {
     constructor() {
         super(...arguments);
         this.visible = false;
-        this.element = '';
+        this.for = '';
     }
     render() {
         return A;
@@ -609,8 +1087,17 @@ class FocusRing extends i$1 {
             this.detach();
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
+    set forElement(value) {
+        if (value) {
+            this._focusTarget = value;
+            this.attach();
+        }
+        else {
+            this.detach();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.attach();
     }
     disconnectedCallback() {
@@ -618,8 +1105,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 +1114,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$G];
+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 +1235,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 +1619,7 @@ __decorate([
     e$4('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$F = i`* {
+var css_248z$G = i`* {
   box-sizing: border-box;
 }
 
@@ -1122,81 +1629,145 @@ var css_248z$F = i`* {
 
 :host {
   display: block;
-  --accordion-item-title-align: start;
 }
 
-.accordion-item .accordion-heading {
-  cursor: pointer;
-  width: 100%;
-  border-radius: 0;
-  border: 0;
-  padding: 0 var(--spacing-200);
-  background: var(--accordion-item-heading-background, transparent);
+.expansion-panel {
+  border: var(--_accordion-item-border, 1px solid var(--color-outline-variant));
+  border-radius: var(--shape-corner-medium);
+  background-color: var(--_accordion-item-background, var(--color-surface-container-low));
+  overflow: hidden;
+  transition: background-color var(--duration-medium1) var(--easing-standard), border-color var(--duration-medium1) var(--easing-standard);
+}
+.expansion-panel .header-button {
+  position: relative;
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 var(--spacing-300);
+  gap: var(--spacing-200);
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: start;
   color: var(--color-on-surface);
-  justify-content: flex-start;
-  gap: 0.5rem;
-  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;
+  overflow: hidden;
 }
-.accordion-item .accordion-heading .accordion-title {
-  width: 100%;
-  text-align: var(--accordion-item-title-align);
+.expansion-panel .header-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-on-surface);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-short4) var(--easing-standard);
 }
-.accordion-item .accordion-heading:focus-visible {
+.expansion-panel .header-button:not(:disabled):hover::before {
+  opacity: 0.08;
+}
+.expansion-panel .header-button:focus-visible {
+  outline: none;
   outline: 2px solid var(--color-black);
 }
-.accordion-item .accordion-heading .accordion-icon {
+.expansion-panel .header-button:focus-visible::before {
+  opacity: 0.12;
+}
+.expansion-panel .header-label {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--spacing-150) 0;
+  min-width: 0;
+}
+.expansion-panel .panel-title {
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expansion-panel .panel-description {
+  font-family: var(--typography-body-small-font-family) !important;
+  font-size: var(--typography-body-small-font-size) !important;
+  font-weight: var(--typography-body-small-font-weight) !important;
+  line-height: var(--typography-body-small-line-height) !important;
+  letter-spacing: var(--typography-body-small-letter-spacing) !important;
+  color: var(--color-on-surface-variant);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expansion-panel .panel-description[hidden] {
+  display: none;
+}
+.expansion-panel ::slotted([slot=header-actions]) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-100);
+}
+.expansion-panel .toggle-icon {
   --icon-size: 1.5rem;
-  --icon-color: currentColor;
-  transition: transform var(--duration-short2) var(--easing-standard);
+  --icon-color: var(--color-on-surface-variant);
+  flex-shrink: 0;
+  transition: transform var(--duration-medium1) var(--easing-standard);
 }
-.accordion-item .item-section {
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-  text-align: start;
-  transition: all var(--duration-short2) var(--easing-standard);
+.expansion-panel .panel-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+}
+.expansion-panel .content-inner {
+  overflow: hidden;
+  min-height: 0;
+  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;
+  color: var(--color-on-surface-variant);
 }
-.accordion-item:not(.disabled) .accordion-heading:hover {
-  --accordion-item-heading-background: var(--color-inverse-primary);
+.expansion-panel.disabled {
+  background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+  border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
 }
-.accordion-item.disabled .accordion-heading {
+.expansion-panel.disabled .header-button {
   cursor: not-allowed;
+  pointer-events: none;
   opacity: 0.38;
 }
-.accordion-item.open .item-section {
-  height: 100%;
-  pointer-events: auto;
-  opacity: 1;
-  padding: var(--spacing-100) var(--spacing-800) var(--spacing-300) var(--spacing-200);
+.expansion-panel.open {
+  background-color: var(--color-surface-container);
+  border-color: transparent;
 }
-.accordion-item.open .accordion-icon {
-  transform: rotate(180deg);
+.expansion-panel.open .panel-content {
+  grid-template-rows: 1fr;
+  border-block-start: 1px solid var(--color-outline-variant);
 }
-
-/*
- * Sizes
- */
-.accordion-item .accordion-heading {
-  height: 2.5rem;
+.expansion-panel.open .content-inner {
+  padding: 0 var(--spacing-300) var(--spacing-200);
 }
-
-:host-context([size=sm]) .accordion-item .accordion-heading {
-  height: 2rem;
+.expansion-panel.open .toggle-icon {
+  transform: rotate(180deg);
 }
-
-:host-context([size=lg]) .accordion-item .accordion-heading {
-  height: 3rem;
+.expansion-panel.disabled {
+  background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+  border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
 }
 
-:host-context(p-accordion[align=start]) .accordion-item .accordion-heading {
-  flex-direction: row;
+:host([toggle-position=before]) .header-button {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+:host([toggle-position=before]) .header-label {
+  flex: 1;
 }`;
 
 var _AccordionItem_id;
@@ -1204,13 +1775,27 @@ var _AccordionItem_id;
  * @label Accordion Item
  * @tag wc-accordion-item
  * @rawTag accordion-item
- * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
+ * @summary An expansion panel with a header that reveals or hides associated content. Follows Material Design 3 expansion panel guidelines.
  * @parentRawTag accordion
  *
+ * @slot - The body content revealed when the panel is expanded.
+ * @slot heading - The panel title. Renders as `body-large` text.
+ * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.
+ * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.
+ *
+ * @part header - The header `<button>` element.
+ * @part title - The title text container.
+ * @part description - The description text container.
+ * @part content - The expandable content region wrapper.
+ *
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.
+ *
  * @example
  * ```html
  * <wc-accordion-item>
- * Testing
+ *   <span slot="heading">Personal information</span>
+ *   <span slot="description">Fill in your details</span>
+ *   <p>Content goes here.</p>
  * </wc-accordion-item>
  * ```
  * @tags display
@@ -1220,17 +1805,25 @@ class AccordionItem extends i$1 {
         super(...arguments);
         _AccordionItem_id.set(this, crypto.randomUUID());
         /**
-         * The menu item value.
-         */
-        this.heading = '';
-        /**
-         * If true, the user cannot interact with the button. Defaults to `false`.
+         * Whether the user cannot interact with the panel.
          */
         this.disabled = false;
         /**
-         * Menu item selection state.
+         * Whether the panel is expanded.
          */
         this.open = false;
+        /**
+         * Whether to hide the expand/collapse toggle indicator icon.
+         */
+        this.hideToggle = false;
+        /**
+         * Position of the toggle icon relative to the panel title.
+         * `'after'` places it at the trailing end (default, matches M3).
+         * `'before'` places it at the leading start.
+         */
+        this.togglePosition = 'after';
+        this._hasDescriptionSlot = false;
+        this._hasHeadingSlot = false;
     }
     focus() {
         this.buttonElement?.focus();
@@ -1238,54 +1831,91 @@ class AccordionItem extends i$1 {
     blur() {
         this.buttonElement?.blur();
     }
-    __handleToggle() {
+    _handleToggle() {
         if (this.disabled)
             return;
         this.open = !this.open;
-        this.dispatchEvent(new CustomEvent('accordion-item--toggle', {
+        this.dispatchEvent(new CustomEvent('accordion-item:toggle', {
             bubbles: true,
             composed: true,
-            detail: { open: this.open, id: __classPrivateFieldGet(this, _AccordionItem_id, "f") },
+            detail: { open: this.open },
         }));
     }
+    static _onSlotChange(e, setter) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        setter(nodes.some(n => n.nodeType === Node.TEXT_NODE
+            ? (n.textContent?.trim() ?? '') !== ''
+            : true));
+    }
+    _renderToggleIcon() {
+        if (this.hideToggle)
+            return A;
+        return b `<wc-icon
+      class="toggle-icon"
+      name="keyboard_arrow_down"
+      aria-hidden="true"
+    ></wc-icon>`;
+    }
     render() {
-        return b `<div
-      class=${e$3({
-            'accordion-item': true,
+        return b `
+      <div
+        class=${e$3({
+            'expansion-panel': true,
             open: this.open,
             disabled: this.disabled,
         })}
-    >
-      <button
-        id=${`accordion-heading-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
-        tabindex="0"
-        aria-controls=${`accordion-control-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
-        class="accordion-heading"
-        aria-disabled=${this.disabled}
-        @click=${this.__handleToggle}
-        aria-expanded=${this.open}
       >
-        <wc-icon class="accordion-icon" name="keyboard_arrow_down"></wc-icon>
-        <div part="title" class="accordion-title">
-          <slot name="heading">${this.heading}</slot>
+        <button
+          id=${`panel-header-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          part="header"
+          class="header-button"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-controls=${`panel-content-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          aria-disabled=${this.disabled}
+          aria-expanded=${this.open}
+          ?disabled=${this.disabled}
+          @click=${this._handleToggle}
+        >
+          ${this.togglePosition === 'before' ? this._renderToggleIcon() : A}
+          <span class="header-label">
+            <span part="title" class="panel-title">
+              <slot
+                name="heading"
+                @slotchange=${(e) => AccordionItem._onSlotChange(e, v => { this._hasHeadingSlot = v; })}
+              ></slot>
+            </span>
+            <span
+              part="description"
+              class="panel-description"
+              ?hidden=${!this._hasDescriptionSlot}
+            >
+              <slot
+                name="description"
+                @slotchange=${(e) => AccordionItem._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}
+              ></slot>
+            </span>
+          </span>
+          <slot name="header-actions" class="header-actions"></slot>
+          ${this.togglePosition === 'after' ? this._renderToggleIcon() : A}
+        </button>
+        <div
+          id=${`panel-content-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+          part="content"
+          class="panel-content"
+          role="region"
+          aria-labelledby=${`panel-header-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
+        >
+          <div class="content-inner">
+            <slot></slot>
+          </div>
         </div>
-      </button>
-      <div
-        class="item-section slot-main"
-        id=${`accordion-control-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
-        aria-labelledby=${`accordion-heading-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
-        role="region"
-      >
-        <slot></slot>
       </div>
-    </div>`;
+    `;
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$F];
-__decorate([
-    n({ type: String, reflect: true })
-], AccordionItem.prototype, "heading", void 0);
+AccordionItem.styles = [css_248z$G];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1293,10 +1923,22 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "open", void 0);
 __decorate([
-    e$4('.accordion-heading')
+    n({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
+], AccordionItem.prototype, "hideToggle", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'toggle-position' })
+], AccordionItem.prototype, "togglePosition", void 0);
+__decorate([
+    r()
+], AccordionItem.prototype, "_hasDescriptionSlot", void 0);
+__decorate([
+    r()
+], AccordionItem.prototype, "_hasHeadingSlot", void 0);
+__decorate([
+    e$4('.header-button')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$E = i`* {
+var css_248z$F = i`* {
   box-sizing: border-box;
 }
 
@@ -1308,27 +1950,38 @@ var css_248z$E = i`* {
   display: block;
 }
 
-slot::slotted(:not(:last-child)) {
-  border-block-start: 1px solid var(--color-outline);
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
 }
 
-slot::slotted(:last-child) {
-  border-block-start: 1px solid var(--color-outline);
-  border-block-end: 1px solid var(--color-outline);
+:host([display-mode=flat]) .accordion {
+  gap: 0;
+}
+:host([display-mode=flat]) slot::slotted(wc-accordion-item) {
+  --_accordion-item-border: none;
+  --_accordion-item-background: transparent;
 }`;
 
 /**
  * @label Accordion
  * @tag wc-accordion
  * @rawTag accordion
- * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
+ * @summary A vertically stacked set of expansion panels. Follows Material Design 3 expansion panel guidelines.
  *
  * @example
  * ```html
  * <wc-accordion>
- *     <wc-accordion-item heading="Accordion">
- *         Content
- *     </wc-accordion-item>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 1</span>
+ *     <span slot="description">Summary text</span>
+ *     Content
+ *   </wc-accordion-item>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 2</span>
+ *     Content
+ *   </wc-accordion-item>
  * </wc-accordion>
  * ```
  * @tags display
@@ -1336,7 +1989,17 @@ slot::slotted(:last-child) {
 class Accordion extends i$1 {
     constructor() {
         super(...arguments);
-        this.allowMultiple = false;
+        /**
+         * Whether multiple panels can be expanded simultaneously.
+         * When `false` (default), expanding one panel collapses all others.
+         */
+        this.multi = false;
+        /**
+         * Display mode for the accordion.
+         * `'default'` renders panels with a subtle background on expand and dividers between items.
+         * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
+         */
+        this.displayMode = 'default';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -1348,17 +2011,15 @@ class Accordion extends i$1 {
     disconnectedCallback() {
         super.disconnectedCallback();
         // @ts-ignore
-        // eslint-disable-next-line no-undef
         this.removeEventListener('accordion-item:toggle', this._onItemToggle);
         this.removeEventListener('keydown', this._onKeyDown);
     }
     _onItemToggle(e) {
         const targetItem = e.target;
-        // Stop event bubbling if it came from a nested accordion
-        // We check if the target item is a direct child of *this* accordion
+        // Ignore events from nested accordions — only handle direct children
         if (targetItem.parentElement !== this)
             return;
-        if (!this.allowMultiple && targetItem.open) {
+        if (!this.multi && targetItem.open) {
             this.items.forEach(item => {
                 if (item !== targetItem && item.open) {
                     // eslint-disable-next-line no-param-reassign
@@ -1368,16 +2029,10 @@ class Accordion extends i$1 {
         }
     }
     _onKeyDown(e) {
-        // 1. Find which item currently has its HEADER focused.
-        // We check the shadowRoot of each item to see if the internal <button> is the active element.
         const focusedItemIndex = this.items.findIndex(item => {
-            // Access the Shadow DOM of the item
             const root = item.shadowRoot;
-            // Check if the focused element inside that shadow DOM is the toggle button
-            return root?.activeElement?.classList.contains('accordion-heading');
+            return root?.activeElement?.classList.contains('header-button');
         });
-        // 2. If no header is focused (e.g., focus is on body content or outside), do nothing.
-        // This prevents stealing focus when the user is typing in a form inside the accordion.
         if (focusedItemIndex === -1)
             return;
         let nextIndex = -1;
@@ -1385,12 +2040,10 @@ class Accordion extends i$1 {
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                // Cycle next
                 nextIndex = (focusedItemIndex + 1) % this.items.length;
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                // Cycle previous
                 nextIndex =
                     (focusedItemIndex - 1 + this.items.length) % this.items.length;
                 break;
@@ -1403,11 +2056,9 @@ class Accordion extends i$1 {
                 nextIndex = this.items.length - 1;
                 break;
         }
-        // 3. Apply Focus
         if (nextIndex !== -1) {
             const itemToFocus = this.items[nextIndex];
-            // Select the button inside the Shadow DOM of the target item
-            const button = itemToFocus.shadowRoot?.querySelector('.accordion-heading');
+            const button = itemToFocus.shadowRoot?.querySelector('.header-button');
             button?.focus();
         }
     }
@@ -1415,16 +2066,19 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$E];
+Accordion.styles = [css_248z$F];
 Accordion.Item = AccordionItem;
 __decorate([
-    n({ type: Boolean, attribute: 'allow-multiple' })
-], Accordion.prototype, "allowMultiple", void 0);
+    n({ type: Boolean, reflect: true })
+], Accordion.prototype, "multi", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'display-mode' })
+], Accordion.prototype, "displayMode", void 0);
 __decorate([
-    o$2({ selector: 'p-accordion-item' })
+    o$1({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$D = i`* {
+var css_248z$E = i`* {
   box-sizing: border-box;
 }
 
@@ -1474,14 +2128,7 @@ var css_248z$D = i`* {
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-class Link extends i$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * Sets or retrieves the window or frame at which to target content.
-         */
-        this.target = '_self';
-    }
+class Link extends BaseHyperlink(i$1) {
     render() {
         return b `<a
       class=${e$3({
@@ -1495,18 +2142,9 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$D];
-__decorate([
-    n({ reflect: true })
-], Link.prototype, "href", void 0);
-__decorate([
-    n()
-], Link.prototype, "target", void 0);
-__decorate([
-    r()
-], Link.prototype, "tabIndexValue", void 0);
+Link.styles = [css_248z$E];
 
-var css_248z$C = i`* {
+var css_248z$D = i`* {
   box-sizing: border-box;
 }
 
@@ -1643,7 +2281,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$B = 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 +2347,7 @@ var css_248z$B = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$A = i`.tag {
+var css_248z$B = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1808,7 +2446,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$C, css_248z$B, css_248z$A];
+Tag.styles = [css_248z$D, css_248z$C, css_248z$B];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -1822,7 +2460,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$z = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -1934,7 +2572,7 @@ var css_248z$z = i`* {
   color: var(--background);
 }`;
 
-var css_248z$y = 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 +2601,7 @@ var css_248z$y = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$x = i`.tag {
+var css_248z$y = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2101,7 +2739,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$z, css_248z$y, css_248z$x];
+Chip.styles = [css_248z$A, css_248z$z, css_248z$y];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2118,7 +2756,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$w = i`:host {
+var css_248z$x = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2308,7 +2946,7 @@ class LinearProgress extends BaseProgress {
             <div class="track track-start"></div>
             <div
               class="active-indicator"
-              style="${o$3({
+              style="${o$2({
             width: `${this.__getPercentageValue()}%`,
         })}"
             ></div>
@@ -2324,9 +2962,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$w];
+LinearProgress.styles = [css_248z$x];
 
-var css_248z$v = i`:host {
+var css_248z$w = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2468,7 +3106,7 @@ class CircularProgress extends BaseProgress {
               cx="8"
               cy="8"
               r="6"
-              style="${o$3({
+              style="${o$2({
             strokeDasharray: `${circumference}`,
             strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
         })}"
@@ -2489,9 +3127,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$v];
+CircularProgress.styles = [css_248z$w];
 
-var css_248z$u = 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 +3233,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$u];
+Skeleton.styles = [css_248z$v];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$t = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -2773,7 +3411,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$t];
+Input.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -2832,7 +3470,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$s = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -3200,7 +3838,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$s];
+Field.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3256,7 +3894,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$r = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -3453,7 +4091,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$r];
+NumberField.styles = [css_248z$s];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3515,7 +4153,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$q = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -3682,7 +4320,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$q];
+DatePicker.styles = [css_248z$r];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -3738,7 +4376,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -3905,7 +4543,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$p];
+TimePicker.styles = [css_248z$q];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -3961,7 +4599,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$o = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -4121,7 +4759,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$o];
+Textarea.styles = [css_248z$p];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4180,7 +4818,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$n = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -4521,7 +5159,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$n];
+Switch.styles = [css_248z$o];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4565,7 +5203,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$m = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -5035,7 +5673,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$m];
+Checkbox.styles = [css_248z$n];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5082,7 +5720,7 @@ __decorate([
     e$4('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$l = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -5169,9 +5807,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$l];
+Spinner.styles = [css_248z$m];
 
-var css_248z$k = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -5265,7 +5903,7 @@ var css_248z$k = 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 +5927,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$k];
+Container.styles = [css_248z$l];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$j = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -5335,12 +5973,12 @@ var css_248z$j = i`* {
   flex-direction: column;
   justify-content: center;
 }
-.content .title {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
+.content .headline {
+  font-family: var(--typography-headline-medium-font-family) !important;
+  font-size: var(--typography-headline-medium-font-size) !important;
+  font-weight: var(--typography-headline-medium-font-weight) !important;
+  line-height: var(--typography-headline-medium-line-height) !important;
+  letter-spacing: var(--typography-headline-medium-letter-spacing) !important;
   margin-bottom: var(--spacing-200);
   color: var(--color-on-surface);
 }
@@ -5369,13 +6007,20 @@ var css_248z$j = i`* {
 @container emptystate (max-width: 671px) {
   .empty-state .empty-state-container {
     flex-direction: column;
-    gap: var(--spacing-200);
+    gap: var(--spacing-150);
   }
   .empty-state .empty-state-container .illustration {
     height: auto;
     width: 100%;
     justify-content: center;
   }
+  .empty-state .content .headline {
+    font-family: var(--typography-headline-small-font-family) !important;
+    font-size: var(--typography-headline-small-font-size) !important;
+    font-weight: var(--typography-headline-small-font-weight) !important;
+    line-height: var(--typography-headline-small-line-height) !important;
+    letter-spacing: var(--typography-headline-small-letter-spacing) !important;
+  }
 }`;
 
 /**
@@ -5387,7 +6032,7 @@ var css_248z$j = i`* {
  *
  * @example
  * ```html
- * <wc-empty-state headline="No items found"></wc-empty-state>
+ * <wc-empty-state style="width:100%" headline="No items found"></wc-empty-state>
  * ```
  */
 class EmptyState extends i$1 {
@@ -5417,7 +6062,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 +6095,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$j];
+EmptyState.styles = [css_248z$k];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -5464,7 +6109,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$i = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7290,7 +7935,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$i];
+Tooltip.styles = [css_248z$j];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -7314,7 +7959,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$h = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -7350,13 +7995,7 @@ ol {
   pointer-events: none;
 }`;
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??A;
-
-var css_248z$g = i`* {
+var css_248z$h = i`* {
   box-sizing: border-box;
 }
 
@@ -7465,8 +8104,8 @@ class BreadcrumbItem extends i$1 {
               <a
                 class="breadcrumb-link"
                 itemprop="item"
-                href=${o(this.href)}
-                target=${o(this.target)}
+                href=${o$3(this.href)}
+                target=${o$3(this.target)}
                 ${this.target === '_blank'
                 ? b `rel="noopener noreferrer"`
                 : A}
@@ -7486,7 +8125,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$g];
+BreadcrumbItem.styles = [css_248z$h];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -7540,13 +8179,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$h];
+Breadcrumb.styles = [css_248z$i];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$f = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -7556,22 +8195,40 @@ var css_248z$f = i`* {
 
 .menu {
   display: flex;
-  position: relative;
+  position: fixed;
   z-index: var(--menu-z-index, 1000);
+  width: var(--menu-width, max-content);
+  max-width: 100vw;
   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.preview {
+  position: relative;
+  pointer-events: auto;
 }
 .menu .menu-content {
   display: flex;
@@ -7617,6 +8274,12 @@ var css_248z$f = 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 +8293,7 @@ var css_248z$f = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$e = i`* {
+var css_248z$f = i`* {
   box-sizing: border-box;
 }
 
@@ -7640,6 +8303,7 @@ var css_248z$e = i`* {
 
 :host {
   padding-inline: var(--spacing-050);
+  outline: none;
 }
 
 .menu-item {
@@ -7741,7 +8405,7 @@ var css_248z$e = i`* {
   display: none;
 }`;
 
-var css_248z$d = 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 +8519,6 @@ class MenuItem extends i$1 {
     __isLink() {
         return !!this.href;
     }
-    get focusTarget() {
-        return this;
-    }
     render() {
         const isLink = this.__isLink();
         const cssClasses = {
@@ -7891,11 +8552,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 +8566,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$e, css_248z$d];
+MenuItem.styles = [css_248z$f, css_248z$e];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "disabled", void 0);
@@ -7981,9 +8638,9 @@ class MenuSurfaceController {
  *
  * @example
  * ```html
- * <wc-menu>
+ * <wc-menu preview>
  *   <wc-menu-item>Item 1</wc-menu-item>
- *   <wc-menu-item>Item 2</wc-menu-item>
+ *   <wc-menu-item selected>Item 2</wc-menu-item>
  * </wc-menu>
  * ```
  */
@@ -7993,6 +8650,7 @@ class Menu extends i$1 {
         this.open = false;
         this.variant = 'standard';
         this.anchor = '';
+        this.preview = false;
         this.stayOpenOnOutsideClick = false;
         this.stayOpenOnFocusout = false;
         this.isSubmenu = false;
@@ -8005,8 +8663,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 +8677,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 +8693,9 @@ class Menu extends i$1 {
             if (!this.open) {
                 return;
             }
+            if (!this._ownsKeyboardEvent(event)) {
+                return;
+            }
             switch (event.key) {
                 case 'ArrowDown':
                     event.preventDefault();
@@ -8175,7 +8844,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 +8880,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;
@@ -8294,8 +8967,9 @@ class Menu extends i$1 {
         return b `<div
       class=${e$3({
             'menu': true,
-            open: this.open,
-            closed: !this.open,
+            open: !this.preview && this.open,
+            closed: !this.preview && !this.open,
+            preview: this.preview,
             [`variant-${this.variant}`]: true,
         })}
       aria-hidden=${String(!this.open)}
@@ -8309,7 +8983,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$f];
+Menu.styles = [css_248z$g];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -8320,6 +8994,9 @@ __decorate([
 __decorate([
     n({ type: String })
 ], Menu.prototype, "anchor", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Menu.prototype, "preview", void 0);
 __decorate([
     n({ type: Boolean, attribute: 'stay-open-on-outside-click' })
 ], Menu.prototype, "stayOpenOnOutsideClick", void 0);
@@ -8342,7 +9019,7 @@ __decorate([
     e$4('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$c = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -8359,6 +9036,7 @@ let subMenuIdCounter = 0;
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
+ * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 class SubMenu extends i$1 {
@@ -8536,7 +9214,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$c];
+SubMenu.styles = [css_248z$d];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -8550,13 +9228,13 @@ __decorate([
     n({ type: String, attribute: 'menu-corner' })
 ], SubMenu.prototype, "menuCorner", void 0);
 __decorate([
-    o$2({ slot: 'item' })
+    o$1({ slot: 'item' })
 ], SubMenu.prototype, "_items", void 0);
 __decorate([
-    o$2({ slot: 'menu' })
+    o$1({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$b = i`@charset "UTF-8";
+var css_248z$c = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -8713,7 +9391,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$b];
+Image.styles = [css_248z$c];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -8736,7 +9414,7 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-var css_248z$a = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -8765,7 +9443,7 @@ var css_248z$a = 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,48 +9458,52 @@ var css_248z$a = 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.has-content .slot-container {
-  display: flex;
-  flex: none;
-  justify-content: center;
+.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;
+  flex: none;
+  justify-content: center;
 }
 .tab.disabled {
   cursor: not-allowed;
@@ -8858,8 +9540,7 @@ var css_248z$a = 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 +9554,49 @@ var css_248z$a = 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 +9612,169 @@ var css_248z$a = 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;
@@ -9038,6 +9877,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 +9890,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 +9914,7 @@ class Tab extends i$1 {
               ?disabled=${this.disabled}
               ${spread(this.configAria)}
             >
-              ${this.renderTabContent()}
+              ${this.renderTabContent(variant)}
             </button>`;
         }
         return b `<a
@@ -9087,30 +9931,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 +10043,7 @@ class Tab extends i$1 {
     }
 }
 _Tab_id = new WeakMap();
-Tab.styles = [css_248z$a];
+Tab.styles = [css_248z$b];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tab.prototype, "active", void 0);
@@ -9145,9 +10053,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 +10087,7 @@ __decorate([
     e$4('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
-var css_248z$9 = i`* {
+var css_248z$a = i`* {
   box-sizing: border-box;
 }
 
@@ -9196,7 +10101,7 @@ var css_248z$9 = i`* {
   height: 100%;
 }`;
 
-var css_248z$8 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -9208,14 +10113,44 @@ var css_248z$8 = 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 +10165,7 @@ var css_248z$8 = 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 +10174,7 @@ var css_248z$8 = i`* {
 class Tabs extends i$1 {
     constructor() {
         super(...arguments);
+        this.variant = 'primary';
         this.managed = false;
         this.__handleTabClick = (event) => {
             if (this.managed)
@@ -9248,7 +10184,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 +10194,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 +10210,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 +10308,16 @@ class Tabs extends i$1 {
     `;
     }
 }
-Tabs.styles = [css_248z$8];
+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$7 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -9331,7 +10359,7 @@ class TabPanel extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabPanel.styles = [css_248z$7];
+TabPanel.styles = [css_248z$8];
 __decorate([
     n({ reflect: true })
 ], TabPanel.prototype, "value", void 0);
@@ -9366,7 +10394,6 @@ __decorate([
 class TabGroup extends i$1 {
     constructor() {
         super(...arguments);
-        this.variant = 'line';
         this.onTabClick = (event) => {
             const custom = event;
             event.stopPropagation();
@@ -9485,14 +10512,11 @@ class TabGroup extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabGroup.styles = [css_248z$9];
+TabGroup.styles = [css_248z$a];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
-__decorate([
-    n({ reflect: true })
-], TabGroup.prototype, "variant", void 0);
 
-var css_248z$6 = i`:host {
+var css_248z$7 = i`:host {
   --_track-height: 4px;
   --_thumb-size: 20px;
   --thumb-half: 10px;
@@ -9508,6 +10532,17 @@ var css_248z$6 = i`:host {
   touch-action: none;
 }
 
+.slider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  width: 100%;
+}
+
+.slider.with-value .slider-container {
+  flex: 1;
+}
+
 .slider-container {
   position: relative;
   display: flex;
@@ -9521,6 +10556,14 @@ var css_248z$6 = i`:host {
   opacity: 0.38;
 }
 
+.value-display {
+  min-width: 2.25rem;
+  text-align: end;
+  color: var(--color-on-surface-variant);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 .track {
   position: absolute;
   width: 100%;
@@ -9534,7 +10577,6 @@ var css_248z$6 = i`:host {
   position: absolute;
   height: 100%;
   background-color: var(--_active-track-color);
-  transition: width 0.1s ease-out;
   will-change: width;
 }
 
@@ -9657,6 +10699,10 @@ class Slider extends i$1 {
          * Whether to show labels on the slider.
          */
         this.labeled = true;
+        /**
+         * Whether to show the current value beside the slider.
+         */
+        this.showValue = false;
         this.isDragging = false;
         this.onMouseMove = (e) => {
             if (this.isDragging) {
@@ -9739,33 +10785,38 @@ class Slider extends i$1 {
     render() {
         const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
         return b `
-      <div 
-        class="slider-container ${this.disabled ? 'disabled' : ''}"
-        @mousedown=${this.onMouseDown}
-        @touchstart=${this.onMouseDown}
-      >
-        <div class="track">
-          <div class="track-active" style=${o$3({ width: `${percentage}%` })}></div>
-        </div>
-
+      <div class="slider ${this.showValue ? 'with-value' : ''}">
         <div 
-          class="thumb" 
-          role="slider"
-          tabindex="${this.disabled ? -1 : 0}"
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuenow=${this.value}
-          aria-disabled=${this.disabled}
-          style=${o$3({ left: `calc(${percentage}% - var(--thumb-half))` })}
-          @keydown=${this.handleKeyDown}
+          class="slider-container ${this.disabled ? 'disabled' : ''}"
+          @mousedown=${this.onMouseDown}
+          @touchstart=${this.onMouseDown}
         >
-          ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
+          <div class="track">
+            <div class="track-active" style=${o$2({ width: `${percentage}%` })}></div>
+          </div>
+
+          <div 
+            class="thumb" 
+            role="slider"
+            aria-label="Slider"
+            tabindex="${this.disabled ? -1 : 0}"
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this.value}
+            aria-disabled=${this.disabled}
+            style=${o$2({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            @keydown=${this.handleKeyDown}
+          >
+            ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
+          </div>
         </div>
+
+        ${this.showValue ? b `<output class="value-display" aria-live="polite">${this.value}</output>` : ''}
       </div>
     `;
     }
 }
-Slider.styles = [css_248z$6];
+Slider.styles = [css_248z$7];
 __decorate([
     n({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -9784,6 +10835,9 @@ __decorate([
 __decorate([
     n({ type: Boolean })
 ], Slider.prototype, "labeled", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-value' })
+], Slider.prototype, "showValue", void 0);
 __decorate([
     r()
 ], Slider.prototype, "isDragging", void 0);
@@ -9794,7 +10848,7 @@ __decorate([
     e$4('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$6 = i`* {
   box-sizing: border-box;
 }
 
@@ -10328,7 +11382,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$5];
+Table.styles = [css_248z$6];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -10387,7 +11441,7 @@ __decorate([
     r()
 ], Table.prototype, "isHorizontallyScrolled", void 0);
 
-var css_248z$4 = i`* {
+var css_248z$5 = i`* {
   box-sizing: border-box;
 }
 
@@ -10400,59 +11454,67 @@ var css_248z$4 = i`* {
 }
 
 .pagination {
-  background: var(--color-surface, #fff);
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-200, 1rem);
+  background: var(--color-surface, #fff);
+  padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+}
+@media (max-width: 48rem) {
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: var(--spacing-100, 0.5rem);
+  }
 }
-.pagination .page-sizes-select {
-  margin-inline-start: var(--spacing-100, 0.5rem);
+.pagination .page-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  min-inline-size: max-content;
 }
 .pagination .page-size-label {
+  font-family: var(--typography-body-small-font-family);
+  font-size: var(--typography-body-small-font-size);
+  font-weight: var(--typography-body-small-font-weight);
+  line-height: var(--typography-body-small-line-height);
+  letter-spacing: var(--typography-body-small-letter-spacing);
+  color: var(--color-on-surface-variant);
+  white-space: nowrap;
+}
+.pagination .page-size-select {
+  inline-size: 5.5rem;
+  min-inline-size: 5.5rem;
+  --field-container-height: 2.5rem;
+}
+.pagination .pagination-item-count {
+  margin-inline-start: auto;
   display: flex;
   align-items: center;
-  gap: var(--spacing-100, 0.5rem);
+}
+@media (max-width: 48rem) {
+  .pagination .pagination-item-count {
+    order: 3;
+    margin-inline-start: 0;
+    inline-size: 100%;
+  }
+}
+.pagination .pagination-text {
   font-family: var(--typography-body-medium-font-family);
   font-size: var(--typography-body-medium-font-size);
   font-weight: var(--typography-body-medium-font-weight);
   line-height: var(--typography-body-medium-line-height);
   letter-spacing: var(--typography-body-medium-letter-spacing);
   color: var(--color-on-surface-variant);
-  white-space: nowrap;
 }
-.pagination .page-size-select {
-  border: 1px solid var(--color-outline-variant);
-  background: var(--color-surface, #fff);
-  color: var(--color-on-surface);
-  padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
-  cursor: pointer;
-  outline: none;
-  height: 2.5rem;
-  font-family: var(--typography-body-medium-font-family);
-  font-size: var(--typography-body-medium-font-size);
-  font-weight: var(--typography-body-medium-font-weight);
-  line-height: var(--typography-body-medium-line-height);
-  letter-spacing: var(--typography-body-medium-letter-spacing);
-}
-.pagination .page-size-select:focus {
-  outline: 2px solid var(--color-primary);
-}
-.pagination .pagination-item-count {
-  margin-inline-start: var(--spacing-150, 0.75rem);
-  flex: 1;
-  display: flex;
+.pagination .pagination-actions {
+  display: inline-flex;
   align-items: center;
+  gap: var(--spacing-025, 0.125rem);
 }
-.pagination .pagination-text {
-  font-family: var(--typography-body-medium-font-family);
-  font-size: var(--typography-body-medium-font-size);
-  font-weight: var(--typography-body-medium-font-weight);
-  line-height: var(--typography-body-medium-line-height);
-  letter-spacing: var(--typography-body-medium-letter-spacing);
-  color: var(--color-on-surface-variant);
-}
-.pagination .arrows {
-  --border-radius: 0;
-  --button-height: calc(2.5rem - 2px);
+.pagination .nav-button {
+  --button-container-shape: 999px;
 }`;
 
 const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
@@ -10468,7 +11530,7 @@ const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
  *
  * @example
  * ```html
- * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * <wc-pagination style="width: 100%;" page="1" page-size="10" total-items="100"></wc-pagination>
  * ```
  * @tags navigation, data
  */
@@ -10491,6 +11553,62 @@ class Pagination extends i$1 {
          * Supported page size options.
          */
         this.pageSizes = DEFAULT_PAGE_SIZES;
+        this.handlePreviousPage = () => {
+            this.setPage(this.page - 1);
+        };
+        this.handleNextPage = () => {
+            this.setPage(this.page + 1);
+        };
+    }
+    willUpdate(changedProperties) {
+        // Normalize page-size options so the select always has valid numeric values.
+        const normalizedPageSizes = [...new Set(this.pageSizes
+                .map(size => Number(size))
+                .filter(size => Number.isFinite(size) && size > 0)
+                .map(size => Math.trunc(size)))];
+        if (!normalizedPageSizes.length) {
+            normalizedPageSizes.push(...DEFAULT_PAGE_SIZES);
+        }
+        if (changedProperties.has('pageSizes') &&
+            (this.pageSizes.length !== normalizedPageSizes.length ||
+                this.pageSizes.some((size, index) => size !== normalizedPageSizes[index]))) {
+            this.pageSizes = normalizedPageSizes;
+        }
+        if (!this.pageSizes.includes(this.pageSize)) {
+            this.pageSize = this.pageSizes[0] ?? DEFAULT_PAGE_SIZES[0];
+        }
+        if (!Number.isFinite(this.totalItems) || this.totalItems < 0) {
+            this.totalItems = 0;
+        }
+        if (!Number.isFinite(this.page) || this.page < 1) {
+            this.page = 1;
+        }
+        const maxPage = this.getTotalPages();
+        if (this.page > maxPage) {
+            this.page = maxPage;
+        }
+    }
+    getTotalPages() {
+        if (this.totalItems <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
+    }
+    setPage(nextPage) {
+        const clampedPage = Math.min(Math.max(1, nextPage), this.getTotalPages());
+        if (clampedPage === this.page)
+            return;
+        this.page = clampedPage;
+        this.dispatchPageEvent();
+    }
+    handlePageSizeChange(event) {
+        const rawValue = event.detail?.value;
+        const parsedPageSize = Number.parseInt(rawValue ?? '', 10);
+        if (!Number.isFinite(parsedPageSize) || parsedPageSize <= 0) {
+            return;
+        }
+        this.pageSize = parsedPageSize;
+        this.page = 1;
+        this.dispatchPageEvent();
     }
     dispatchPageEvent() {
         this.dispatchEvent(new CustomEvent('page', {
@@ -10500,76 +11618,57 @@ class Pagination extends i$1 {
         }));
     }
     render() {
-        const startItem = this.pageSize * (this.page - 1);
+        const startItem = this.totalItems === 0 ? 0 : this.pageSize * (this.page - 1) + 1;
         const endItem = Math.min(this.pageSize * this.page, this.totalItems);
         const isFirstPage = this.page === 1;
         const isLastPage = this.pageSize * this.page >= this.totalItems;
         return b `
       <div class="pagination">
-        <div class="page-sizes-select">
-          <label class="page-size-label">
-            Items per page:
-            <select
-              class="page-size-select"
-              .value=${String(this.pageSize)}
-              @change=${(e) => {
-            this.pageSize = parseInt(e.target.value, 10);
-            this.page = 1;
-            this.dispatchPageEvent();
-        }}
-            >
-              ${this.pageSizes.map(size => b `
-                  <option value=${size} ?selected=${this.pageSize === size}>
-                    ${size}
-                  </option>
-                `)}
-            </select>
-          </label>
+        <div class="page-size">
+          <span class="page-size-label">Items per page:</span>
+          <wc-select
+            class="page-size-select"
+            .value=${String(this.pageSize)}
+            aria-label="Items per page"
+            @change=${this.handlePageSizeChange}
+          >
+            ${this.pageSizes.map(size => b `<wc-option value=${String(size)}>${size}</wc-option>`)}
+          </wc-select>
         </div>
+
         <div class="pagination-item-count">
           <span class="pagination-text">
-            ${startItem} - ${endItem} of ${this.totalItems} items
+            ${startItem} - ${endItem} of ${this.totalItems}
           </span>
         </div>
-        <div class="pagination-right">
-          <div class="table-footer-right-content">
-            <div class="table-footer-right-content-pagination">
-              <wc-button
-                class="arrows"
-                color="secondary"
-                variant="text"
-                ?disabled=${isFirstPage}
-                @click=${() => {
-            if (!isFirstPage) {
-                this.page -= 1;
-                this.dispatchPageEvent();
-            }
-        }}
-              >
-                <wc-icon slot="icon" name="arrow--left"></wc-icon>
-              </wc-button>
-              <wc-button
-                color="secondary"
-                variant="text"
-                class="arrows"
-                ?disabled=${isLastPage}
-                @click=${() => {
-            if (!isLastPage) {
-                this.page += 1;
-                this.dispatchPageEvent();
-            }
-        }}
-              >
-                <wc-icon slot="icon" name="arrow--right"></wc-icon>
-              </wc-button>
-            </div>
-          </div>
+
+        <div class="pagination-actions">
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            name="keyboard_arrow_left"
+            title="Previous page"
+            ?disabled=${isFirstPage}
+            @click=${this.handlePreviousPage}
+          ></wc-icon-button>
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            name="keyboard_arrow_right"
+            title="Next page"
+            ?disabled=${isLastPage}
+            @click=${this.handleNextPage}
+          ></wc-icon-button>
         </div>
       </div>
     `;
     }
 }
-Pagination.styles = [css_248z$4];
+Pagination.styles = [css_248z$5];
 __decorate([
     n({ type: Number })
 ], Pagination.prototype, "page", void 0);
@@ -10583,7 +11682,7 @@ __decorate([
     n({ type: Array, attribute: 'page-sizes' })
 ], Pagination.prototype, "pageSizes", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -10845,7 +11944,7 @@ class TreeNode extends i$1 {
     }
     _renderContent(hasChildren) {
         // 0.125rem offset aligns text visually with the expand/icon space
-        const indentStyle = o$3({
+        const indentStyle = o$2({
             paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
         });
         const contentClasses = e$3({
@@ -10898,7 +11997,7 @@ class TreeNode extends i$1 {
     </div>`;
     }
 }
-TreeNode.styles = [css_248z$3];
+TreeNode.styles = [css_248z$4];
 __decorate([
     n({ type: String, reflect: true })
 ], TreeNode.prototype, "value", void 0);
@@ -10930,7 +12029,7 @@ __decorate([
     e$4('.tree-node-content')
 ], TreeNode.prototype, "_nativeElement", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -11093,13 +12192,13 @@ class TreeView extends i$1 {
     </div>`;
     }
 }
-TreeView.styles = [css_248z$2];
+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$1 = i`* {
+var css_248z$2 = i`* {
   box-sizing: border-box;
 }
 
@@ -11107,10 +12206,34 @@ var css_248z$1 = i`* {
   display: none !important;
 }
 
+@keyframes snackbar-enter {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes snackbar-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
 :host {
-  display: inline-flex;
-  max-width: 42rem;
-  min-width: 21.5rem;
+  display: flex;
+  inset-block-end: calc(var(--snackbar-offset-bottom, 1rem) + env(safe-area-inset-bottom, 0px));
+  inset-inline: var(--snackbar-offset-inline, 1rem);
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: var(--snackbar-z-index, 1000);
   --snackbar-container-color: var(--color-inverse-surface);
   --snackbar-label-text-color: var(--color-inverse-on-surface);
   --snackbar-action-text-color: var(--color-inverse-primary);
@@ -11128,59 +12251,57 @@ var css_248z$1 = i`* {
   background-color: var(--snackbar-container-color);
   border-radius: var(--snackbar-border-radius);
   color: var(--snackbar-label-text-color);
-  display: inline-flex;
+  display: none;
   gap: var(--spacing-100);
+  max-width: min(42rem, 100%);
+  min-width: min(21.5rem, 100%);
   min-height: 3rem;
-  opacity: 0;
   padding: var(--spacing-100) var(--spacing-200);
   pointer-events: none;
-  transform: translateY(0.5rem);
-  transition: opacity var(--duration-short2) var(--easing-standard), transform var(--duration-short2) var(--easing-standard);
 }
 
 .snackbar.open {
-  opacity: 1;
+  animation: snackbar-enter var(--duration-medium1, 300ms) var(--easing-standard, cubic-bezier(0.2, 0, 0, 1)) both;
+  display: inline-flex;
   pointer-events: auto;
-  transform: translateY(0);
+}
+
+.snackbar.open.dismissing {
+  animation: snackbar-exit var(--duration-short2, 150ms) var(--easing-standard, cubic-bezier(0.2, 0, 0, 1)) forwards;
+  pointer-events: none;
 }
 
 .label {
   flex: 1 1 auto;
   color: inherit;
-}
-
-.action,
-.close {
-  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;
+  min-height: 32px;
   align-items: center;
-  background: transparent;
-  border: none;
-  color: var(--snackbar-action-text-color);
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  margin: 0;
-  min-height: 2rem;
-  min-width: 2rem;
-  padding: 0 var(--spacing-100);
+  display: flex;
 }
 
-.close {
-  color: var(--snackbar-close-icon-color);
-  padding: 0;
+.action {
+  --text-button-label-text-color: var(--snackbar-action-text-color);
 }
 
-.close wc-icon {
-  --icon-size: 1.125rem;
-  color: inherit;
+.close {
+  --text-button-label-text-color: var(--snackbar-close-icon-color);
 }
 
 .snackbar.multiline {
   align-items: flex-start;
+}
+.snackbar.multiline .label {
+  height: 100%;
+}
+
+:host([preview]) {
+  position: relative;
+  inset-inline: unset;
+  inset-block-end: unset;
+}
+:host([preview]) .snackbar {
+  display: inline-flex;
+  pointer-events: auto;
 }`;
 
 /**
@@ -11194,10 +12315,13 @@ var css_248z$1 = i`* {
  * @cssprop --snackbar-action-text-color - Action text color.
  * @cssprop --snackbar-close-icon-color - Close icon color.
  * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.
+ * @cssprop --snackbar-offset-inline - Inline offset from viewport edges.
+ * @cssprop --snackbar-offset-bottom - Bottom offset from viewport edge.
+ * @cssprop --snackbar-z-index - Stacking order for the snackbar.
  *
  * @example
  * ```html
- * <wc-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
+ * <wc-snackbar preview message="Message archived" action-label="Undo"></wc-snackbar>
  * ```
  * @tags display, feedback
  */
@@ -11210,25 +12334,54 @@ class Snackbar extends i$1 {
         this.showCloseIcon = false;
         this.duration = 4000;
         this.multiline = false;
+        this.preview = false;
+        this.dismissing = false;
         this.hideTimer = null;
+        this.exitTimer = null;
+        this.handleGlobalSnackbarOpen = (event) => {
+            const { source } = event.detail;
+            if (source && source !== this) {
+                this.hide();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(Snackbar.GLOBAL_OPEN_EVENT, this.handleGlobalSnackbarOpen);
     }
     show() {
-        this.open = true;
+        this.dismissing = false;
+        this.clearExitTimer();
+        if (!this.open) {
+            this.open = true;
+            return;
+        }
+        this.scheduleAutoHide();
     }
     hide() {
         this.close('programmatic');
     }
     close(reason) {
-        if (!this.open) {
+        if (!this.open || this.dismissing) {
             return;
         }
-        this.open = false;
+        this.clearTimer();
+        this.dismissing = true;
+        this.clearExitTimer();
+        this.exitTimer = setTimeout(() => {
+            this.completeDismiss();
+        }, Snackbar.EXIT_ANIMATION_MS);
         this.dispatchEvent(new CustomEvent('snackbar-close', {
             detail: { reason },
             bubbles: true,
             composed: true,
         }));
     }
+    completeDismiss() {
+        this.clearExitTimer();
+        this.dismissing = false;
+        this.open = false;
+    }
     dispatchActionEvent() {
         this.dispatchEvent(new CustomEvent('snackbar-action', {
             bubbles: true,
@@ -11248,6 +12401,17 @@ class Snackbar extends i$1 {
             this.hideTimer = null;
         }
     }
+    clearExitTimer() {
+        if (this.exitTimer !== null) {
+            clearTimeout(this.exitTimer);
+            this.exitTimer = null;
+        }
+    }
+    handleAnimationEnd(event) {
+        if (event.animationName === 'snackbar-exit' && this.dismissing) {
+            this.completeDismiss();
+        }
+    }
     scheduleAutoHide() {
         this.clearTimer();
         if (!this.open || this.duration <= 0) {
@@ -11259,10 +12423,17 @@ class Snackbar extends i$1 {
     }
     updated(changedProperties) {
         if (changedProperties.has('open')) {
+            if (this.open) {
+                document.dispatchEvent(new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {
+                    detail: { source: this },
+                }));
+            }
             this.scheduleAutoHide();
         }
     }
     disconnectedCallback() {
+        document.removeEventListener(Snackbar.GLOBAL_OPEN_EVENT, this.handleGlobalSnackbarOpen);
+        this.clearExitTimer();
         this.clearTimer();
         super.disconnectedCallback();
     }
@@ -11272,37 +12443,43 @@ class Snackbar extends i$1 {
       <div
         class=${e$3({
             snackbar: true,
-            open: this.open,
+            open: !this.preview && this.open,
+            preview: this.preview,
+            dismissing: this.dismissing,
             multiline: this.multiline,
         })}
         role=${liveRole}
         aria-live="polite"
+        @animationend=${this.handleAnimationEnd}
       >
         <div class="label">
           <slot>${this.message}</slot>
         </div>
 
         ${this.actionLabel
-            ? b `<button class="action" type="button" @click=${this.handleActionClick}>
+            ? b `<wc-button class="action" variant='text' size='small' @click=${this.handleActionClick}>
               ${this.actionLabel}
-            </button>`
+            </wc-button>`
             : A}
 
         ${this.showCloseIcon
-            ? b `<button
+            ? b `<wc-icon-button
               class="close"
-              type="button"
+              variant='text' 
+              size='small'
               aria-label="Dismiss notification"
               @click=${this.handleCloseClick}
+              name="close"
             >
-              <wc-icon name="close"></wc-icon>
-            </button>`
+            </wc-icon-button>`
             : A}
       </div>
     `;
     }
 }
-Snackbar.styles = [css_248z$1];
+Snackbar.styles = [css_248z$2];
+Snackbar.GLOBAL_OPEN_EVENT = 'wc-snackbar-will-open';
+Snackbar.EXIT_ANIMATION_MS = 180;
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Snackbar.prototype, "open", void 0);
@@ -11321,8 +12498,14 @@ __decorate([
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Snackbar.prototype, "multiline", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Snackbar.prototype, "preview", void 0);
+__decorate([
+    r()
+], Snackbar.prototype, "dismissing", void 0);
 
-var css_248z = i`* {
+var css_248z$1 = i`* {
   box-sizing: border-box;
 }
 
@@ -11731,7 +12914,7 @@ class Radio extends i$1 {
 }
 Radio.DIRECTION_NEXT = 1;
 Radio.DIRECTION_PREVIOUS = -1;
-Radio.styles = [css_248z];
+Radio.styles = [css_248z$1];
 __decorate([
     n({ type: String })
 ], Radio.prototype, "name", void 0);
@@ -11775,5 +12958,740 @@ __decorate([
     e$4('.input-native')
 ], Radio.prototype, "nativeElement", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tooltip as G, TreeNode as H, Icon as I, TreeView as J, LinearProgress as L, Menu as M, NumberField as N, Pagination as P, Radio 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, Ripple as n, Slider as o, Snackbar as p, Spinner as q, SubMenu as r, Switch as s, TabGroup as t, TabPanel as u, Table as v, Tabs as w, Tag as x, Textarea as y, TimePicker as z };
-//# sourceMappingURL=radio-b70_Ie9n.js.map
+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);
+}
+
+.select-empty-state {
+  display: block;
+  inline-size: min(22rem, 100%);
+}
+
+/* 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>${this.value === '' ? 'None' : ''}</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);
+        this._menuId = `wc-select-menu-${Math.random().toString(36).slice(2, 9)}`;
+        /**
+         * 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 = '';
+        /**
+         * 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 || (opt.value === '' ? 'None' : '');
+            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 += 1;
+            }
+            else {
+                opt.filtered = false;
+                visibleCount += 1;
+            }
+        }
+        this._noOptionsVisible = visibleCount === 0;
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────────
+    get _selectedValues() {
+        if (!this.value)
+            return [];
+        return this.value
+            .split(',')
+            .map(v => v.trim())
+            .filter(Boolean);
+    }
+    _isSelected(value) {
+        if (!this.multiple) {
+            return this.value === 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) {
+                const label = opt.textContent?.trim();
+                if (label)
+                    return label;
+                return val === '' ? 'None' : val;
+            }
+        }
+        // Fallback to options array (before wc-option children are created)
+        const programmaticLabel = this.options.find(o => o.value === val)?.label;
+        if (programmaticLabel)
+            return programmaticLabel;
+        return val === '' ? 'None' : 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;
+        this._triggerEl?.focus();
+        const menu = this._menu;
+        if (menu && this._triggerEl) {
+            menu.anchorElement = this._triggerEl;
+            const triggerWidth = this._triggerEl.getBoundingClientRect().width;
+            if (triggerWidth < 240) {
+                menu.style.setProperty('--menu-width', '240px');
+            }
+            else {
+                menu.style.setProperty('--menu-width', `${Math.ceil(triggerWidth)}px`);
+            }
+            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) {
+        event.stopPropagation();
+        // 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();
+        }
+    }
+    _handleFieldClick(event) {
+        const eventPath = event.composedPath();
+        if (eventPath.includes(this._triggerEl) ||
+            eventPath.some(target => target instanceof HTMLInputElement ||
+                (target instanceof HTMLElement &&
+                    (target.closest('.clear-btn') != null ||
+                        target.matches('wc-icon-button'))))) {
+            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 === undefined)
+            return;
+        if (this.multiple) {
+            if (val === '')
+                return;
+            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,
+            }));
+        }
+    }
+    _handleChipDismiss(event, chipValue) {
+        event.stopPropagation();
+        const values = this._selectedValues.filter(v => v !== chipValue);
+        this.value = values.join(',');
+        this._dispatchChange();
+    }
+    _renderEmptyState() {
+        const hasSearchQuery = this._searchQuery.trim().length > 0;
+        return b `
+      <wc-empty-state
+        class="select-empty-state content-center"
+        illustration="no-document"
+        headline=${hasSearchQuery ? 'No results found' : 'No options available'}
+        description=${hasSearchQuery
+            ? 'Try a different search term.'
+            : 'There is nothing to select right now.'}
+      ></wc-empty-state>
+    `;
+    }
+    // ── 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() {
+        return b `
+      <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"
+        @click=${this._handleFieldClick}
+      >
+        <div
+          class="select-trigger"
+          tabindex=${this.disabled ? -1 : 0}
+          role="combobox"
+          aria-label=${this.label || this.placeholder || 'Select option'}
+          aria-controls=${this._menuId}
+          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
+        id=${this._menuId}
+        placement="bottom-start"
+        aria-label=${this.label || 'Options'}
+        @closed=${this._handleMenuClosed}
+        @menu-item-activate=${(e) => this._handleMenuItemActivate(e)}
+      >
+        <slot></slot>
+        ${this._noOptionsVisible ? this._renderEmptyState() : 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: 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-4pl4XBj7.js.map