@redvars/peacock 3.4.0 → 3.5.0

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

@@ -1,26 +1,108 @@
 import { a as i, _ as __decorate, i as i$1, b, A, c as __classPrivateFieldGet, w } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
 import { r } from './state-DwbEjqVk.js';
-import { e as e$1 } from './directive-Cuw6h7YA.js';
-import { e as e$2, o as o$4 } from './unsafe-html-D3GHRaGQ.js';
-import { c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, r as redispatchEvent, a as isDarkMode, i as isActivationClick, d as dispatchActivationClick, t as throttle } from './dispatch-event-utils-B4odODQf.js';
-import { e as e$3 } from './class-map-3TAnCMAX.js';
+import { 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-CRFEoCEg.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-DKAIv5BB.js';
-import { s as spread } from './button-COYCtuA8.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`,
@@ -110,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>`;
     }
@@ -1547,81 +1629,145 @@ var css_248z$G = 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;
@@ -1629,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
@@ -1645,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();
@@ -1663,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$G];
-__decorate([
-    n({ type: String, reflect: true })
-], AccordionItem.prototype, "heading", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1718,7 +1923,19 @@ __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$F = i`* {
@@ -1733,27 +1950,38 @@ var css_248z$F = 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
@@ -1761,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();
@@ -1773,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
@@ -1793,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;
@@ -1810,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;
@@ -1828,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();
         }
     }
@@ -1843,10 +2069,13 @@ class Accordion extends i$1 {
 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$E = i`* {
@@ -1899,14 +2128,7 @@ var css_248z$E = 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({
@@ -1921,15 +2143,6 @@ class Link extends i$1 {
     }
 }
 Link.styles = [css_248z$E];
-__decorate([
-    n({ reflect: true })
-], Link.prototype, "href", void 0);
-__decorate([
-    n()
-], Link.prototype, "target", void 0);
-__decorate([
-    r()
-], Link.prototype, "tabIndexValue", void 0);
 
 var css_248z$D = i`* {
   box-sizing: border-box;
@@ -2733,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>
@@ -2893,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}`,
         })}"
@@ -5760,12 +5973,12 @@ var css_248z$k = 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);
 }
@@ -5790,30 +6003,23 @@ var css_248z$k = i`* {
   .empty-state .content {
     width: 50%;
   }
-  .empty-state .headline {
-    font-family: var(--typography-title-medium-font-family) !important;
-    font-size: var(--typography-title-medium-font-size) !important;
-    font-weight: var(--typography-title-medium-font-weight) !important;
-    line-height: var(--typography-title-medium-line-height) !important;
-    letter-spacing: var(--typography-title-medium-letter-spacing) !important;
-  }
 }
 @container emptystate (max-width: 671px) {
   .empty-state .empty-state-container {
     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 .headline {
-    font-family: var(--typography-title-small-font-family) !important;
-    font-size: var(--typography-title-small-font-size) !important;
-    font-weight: var(--typography-title-small-font-weight) !important;
-    line-height: var(--typography-title-small-line-height) !important;
-    letter-spacing: var(--typography-title-small-letter-spacing) !important;
+  .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;
   }
 }`;
 
@@ -5826,7 +6032,7 @@ var css_248z$k = i`* {
  *
  * @example
  * ```html
- * <wc-empty-state width="80%" 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 {
@@ -7789,12 +7995,6 @@ ol {
   pointer-events: none;
 }`;
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??A;
-
 var css_248z$h = i`* {
   box-sizing: border-box;
 }
@@ -7904,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}
@@ -7997,6 +8197,8 @@ var css_248z$g = i`* {
   display: flex;
   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;
@@ -8024,6 +8226,10 @@ var css_248z$g = i`* {
   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;
   flex-direction: column;
@@ -8432,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>
  * ```
  */
@@ -8444,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;
@@ -8760,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)}
@@ -8786,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);
@@ -8825,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 {
@@ -9016,10 +9228,10 @@ __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$c = i`@charset "UTF-8";
@@ -10320,6 +10532,17 @@ var css_248z$7 = 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;
@@ -10333,6 +10556,14 @@ var css_248z$7 = 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%;
@@ -10468,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) {
@@ -10550,28 +10785,33 @@ 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>
     `;
     }
@@ -10595,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);
@@ -11211,48 +11454,52 @@ var css_248z$5 = 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);
 }
-.pagination .page-sizes-select {
-  margin-inline-start: var(--spacing-100, 0.5rem);
+@media (max-width: 48rem) {
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: var(--spacing-100, 0.5rem);
+  }
 }
-.pagination .page-size-label {
-  display: flex;
+.pagination .page-size {
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-100, 0.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);
+  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 {
-  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);
+  inline-size: 5.5rem;
+  min-inline-size: 5.5rem;
+  --field-container-height: 2.5rem;
 }
 .pagination .pagination-item-count {
-  margin-inline-start: var(--spacing-150, 0.75rem);
-  flex: 1;
+  margin-inline-start: auto;
   display: flex;
   align-items: center;
 }
+@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);
@@ -11261,9 +11508,13 @@ var css_248z$5 = i`* {
   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 .pagination-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-025, 0.125rem);
+}
+.pagination .nav-button {
+  --button-container-shape: 999px;
 }`;
 
 const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
@@ -11279,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
  */
@@ -11302,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', {
@@ -11311,70 +11618,51 @@ 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>
     `;
@@ -11656,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({
@@ -11918,10 +12206,34 @@ var css_248z$2 = 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);
@@ -11939,59 +12251,57 @@ var css_248z$2 = 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;
 }`;
 
 /**
@@ -12005,10 +12315,13 @@ var css_248z$2 = 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
  */
@@ -12021,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,
@@ -12059,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) {
@@ -12070,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();
     }
@@ -12083,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$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);
@@ -12132,6 +12498,12 @@ __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$1 = i`* {
   box-sizing: border-box;
@@ -12675,6 +13047,11 @@ var css_248z = i`@charset "UTF-8";
   gap: var(--spacing-050);
 }
 
+.select-empty-state {
+  display: block;
+  inline-size: min(22rem, 100%);
+}
+
 /* Dropdown chevron icon */
 .dropdown-icon {
   --icon-size: 1.5rem;
@@ -12788,7 +13165,7 @@ class SelectOptionElement extends i$1 {
         ${this.icon
             ? b `<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
             : A}
-        <slot></slot>
+        <slot>${this.value === '' ? 'None' : ''}</slot>
         ${this.selected && this.keepOpen
             ? b `<wc-icon
               name="check"
@@ -12857,6 +13234,7 @@ __decorate([
 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.
@@ -12884,10 +13262,6 @@ class Select extends BaseInput {
          * Label displayed above the field.
          */
         this.label = '';
-        /**
-          * Show a clear button in single-select mode when a value is selected.
-         */
-        this.clearable = false;
         /**
          * Visual variant of the field.
          */
@@ -12935,7 +13309,7 @@ class Select extends BaseInput {
             el.value = opt.value;
             if (opt.icon)
                 el.icon = opt.icon;
-            el.textContent = opt.label;
+            el.textContent = opt.label || (opt.value === '' ? 'None' : '');
             el.dataset.generated = '';
             this.appendChild(el);
         }
@@ -12956,14 +13330,14 @@ class Select extends BaseInput {
                 const label = opt.textContent?.trim() ?? '';
                 opt.filtered = !label.toLowerCase().includes(q);
                 if (!opt.filtered)
-                    visibleCount++;
+                    visibleCount += 1;
             }
             else {
                 opt.filtered = false;
-                visibleCount++;
+                visibleCount += 1;
             }
         }
-        this._noOptionsVisible = optEls.length > 0 && visibleCount === 0;
+        this._noOptionsVisible = visibleCount === 0;
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
     get _selectedValues() {
@@ -12975,16 +13349,26 @@ class Select extends BaseInput {
             .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)
-                return opt.textContent?.trim() ?? val;
+            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)
-        return this.options.find(o => o.value === val)?.label ?? val;
+        const programmaticLabel = this.options.find(o => o.value === val)?.label;
+        if (programmaticLabel)
+            return programmaticLabel;
+        return val === '' ? 'None' : val;
     }
     get _displayLabel() {
         if (!this.value)
@@ -13003,9 +13387,17 @@ class Select extends BaseInput {
             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) {
@@ -13029,6 +13421,7 @@ class Select extends BaseInput {
     }
     // ── 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) {
@@ -13041,6 +13434,22 @@ class Select extends BaseInput {
             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.
@@ -13077,9 +13486,11 @@ class Select extends BaseInput {
         if (!item)
             return;
         const val = item.value;
-        if (!val)
+        if (val === undefined)
             return;
         if (this.multiple) {
+            if (val === '')
+                return;
             const values = this._selectedValues;
             const idx = values.indexOf(val);
             if (idx >= 0) {
@@ -13113,17 +13524,25 @@ class Select extends BaseInput {
             }));
         }
     }
-    _handleClear(event) {
-        event.stopPropagation();
-        this.value = '';
-        this._dispatchChange();
-    }
     _handleChipDismiss(event, chipValue) {
         event.stopPropagation();
         const values = this._selectedValues.filter(v => v !== chipValue);
         this.value = values.join(',');
         this._dispatchChange();
     }
+    _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
@@ -13156,21 +13575,7 @@ class Select extends BaseInput {
         return b `<span class="display-value">${label}</span>`;
     }
     _renderFieldEnd() {
-        const showClear = this.clearable &&
-            !this.multiple &&
-            !!this.value &&
-            !this.disabled &&
-            !this.readonly;
         return b `
-      ${showClear
-            ? b `<wc-icon-button
-            class="clear-btn"
-            variant="text"
-            size="sm"
-            name="close"
-            @click=${this._handleClear}
-          ></wc-icon-button>`
-            : A}
       <wc-icon
         class=${e$3({
             'dropdown-icon': true,
@@ -13198,11 +13603,14 @@ class Select extends BaseInput {
         ?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}
@@ -13217,15 +13625,14 @@ class Select extends BaseInput {
       </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
-            ? b `<wc-menu-item disabled>No options</wc-menu-item>`
-            : A}
+        ${this._noOptionsVisible ? this._renderEmptyState() : A}
       </wc-menu>
     `;
     }
@@ -13249,9 +13656,6 @@ __decorate([
 __decorate([
     n({ type: String })
 ], Select.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean })
-], Select.prototype, "clearable", void 0);
 __decorate([
     n({ type: String })
 ], Select.prototype, "variant", void 0);
@@ -13290,4 +13694,4 @@ __decorate([
 ], Select.prototype, "_searchInputEl", void 0);
 
 export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tabs as G, Tag as H, Icon as I, Textarea as J, TimePicker as K, LinearProgress as L, Menu as M, NumberField as N, Tooltip as O, Pagination as P, TreeNode as Q, Radio as R, SegmentedButton as S, Tab as T, TreeView as U, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, Ripple as n, SegmentedButtonGroup as o, Select as p, SelectOptionElement as q, Skeleton as r, Slider as s, Snackbar as t, Spinner as u, SubMenu as v, Switch as w, TabGroup as x, TabPanel as y, Table as z };
-//# sourceMappingURL=select-C3XAzenC.js.map
+//# sourceMappingURL=select-4pl4XBj7.js.map