@redvars/peacock 3.4.0 → 3.5.1

package/dist/{select-C3XAzenC.js → navigation-rail-Lxetd5-Z.js}

@@ -1,26 +1,106 @@
 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 { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.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, o as o$3 } from './BaseButton-DuASuVth.js';
+import { B as BaseInput, i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DicqGkCJ.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`,
@@ -41,7 +121,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$O = i`* {
+var css_248z$S = i`* {
   box-sizing: border-box;
 }
 
@@ -110,7 +190,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>`;
     }
@@ -170,7 +250,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$O];
+Icon.styles = [css_248z$S];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -190,7 +270,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$N = i`* {
+var css_248z$R = i`* {
   box-sizing: border-box;
 }
 
@@ -281,7 +361,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$N];
+Avatar.styles = [css_248z$R];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -289,7 +369,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$M = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -361,12 +441,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$M];
+Badge.styles = [css_248z$Q];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$L = i`* {
+var css_248z$P = i`* {
   box-sizing: border-box;
 }
 
@@ -475,7 +555,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$L];
+Divider.styles = [css_248z$P];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -483,7 +563,15 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$K = i`/**
+var css_248z$O = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -556,9 +644,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$K];
+Elevation.styles = [css_248z$O];
 
-var css_248z$J = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -811,7 +899,7 @@ class SegmentedButton extends i$1 {
     `;
     }
 }
-SegmentedButton.styles = [css_248z$J];
+SegmentedButton.styles = [css_248z$N];
 __decorate([
     n({ type: String, reflect: true })
 ], SegmentedButton.prototype, "value", void 0);
@@ -831,7 +919,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$I = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -943,7 +1031,7 @@ class SegmentedButtonGroup extends i$1 {
     `;
     }
 }
-SegmentedButtonGroup.styles = [css_248z$I];
+SegmentedButtonGroup.styles = [css_248z$M];
 SegmentedButtonGroup.SegmentedButton = SegmentedButton;
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'multi-select' })
@@ -952,7 +1040,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$H = i`:host {
+var css_248z$L = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -990,30 +1078,13 @@ class FocusRing extends i$1 {
         super(...arguments);
         this.visible = false;
         this.for = '';
+        this.__boundFocusin = this.__focusin.bind(this);
+        this.__boundFocusout = this.__focusout.bind(this);
+        this.__boundPointerdown = this.__pointerdown.bind(this);
     }
     render() {
         return A;
     }
-    get control() {
-        return this._control || null;
-    }
-    set control(control) {
-        if (control) {
-            this._control = control;
-        }
-        else {
-            this.detach();
-        }
-    }
-    set forElement(value) {
-        if (value) {
-            this._focusTarget = value;
-            this.attach();
-        }
-        else {
-            this.detach();
-        }
-    }
     connectedCallback() {
         super.connectedCallback();
         this.attach();
@@ -1022,6 +1093,21 @@ class FocusRing extends i$1 {
         this.detach();
         super.disconnectedCallback();
     }
+    updated(changed) {
+        if (changed.has('for')) {
+            const prevId = changed.get('for');
+            if (prevId) {
+                const root = this.parentElement?.getRootNode();
+                const prevEl = root?.getElementById(prevId) ?? document.getElementById(prevId);
+                if (prevEl) {
+                    prevEl.removeEventListener('focusin', this.__boundFocusin);
+                    prevEl.removeEventListener('focusout', this.__boundFocusout);
+                    prevEl.removeEventListener('pointerdown', this.__boundPointerdown);
+                }
+            }
+            this.attach();
+        }
+    }
     __focusin() {
         const focusTarget = this.__getFocusTarget();
         this.visible = focusTarget?.matches(':focus-visible') ?? false;
@@ -1032,35 +1118,47 @@ class FocusRing extends i$1 {
     __pointerdown() {
         this.visible = false;
     }
+    /**
+     * Resolves the element that should receive focus-ring event listeners by id.
+     * Prefers lookup from the current control's root node, then falls back to a
+     * document-level lookup.
+     *
+     * @returns The resolved focus target, if one can be found.
+     */
     __getFocusTarget() {
-        if (this._focusTarget) {
-            return this._focusTarget;
-        }
-        const focusTarget = document.getElementById(this.for);
-        if (focusTarget) {
-            return focusTarget;
+        if (this.for) {
+            const root = this.parentElement?.getRootNode();
+            if (root) {
+                const focusTarget = root.getElementById(this.for);
+                if (focusTarget) {
+                    return focusTarget;
+                }
+            }
+            const focusTarget = document.getElementById(this.for);
+            if (focusTarget) {
+                return focusTarget;
+            }
         }
         return undefined;
     }
     attach() {
         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));
+            focusTarget.addEventListener('focusin', this.__boundFocusin);
+            focusTarget.addEventListener('focusout', this.__boundFocusout);
+            focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
         }
     }
     detach() {
         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));
+            focusTarget.removeEventListener('focusin', this.__boundFocusin);
+            focusTarget.removeEventListener('focusout', this.__boundFocusout);
+            focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
         }
-        this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$H];
+FocusRing.styles = [css_248z$L];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1537,7 +1635,7 @@ __decorate([
     e$4('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$G = i`* {
+var css_248z$K = i`* {
   box-sizing: border-box;
 }
 
@@ -1547,81 +1645,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);
+}
+.expansion-panel .header-button:not(:disabled):hover::before {
+  opacity: 0.08;
 }
-.accordion-item .accordion-heading:focus-visible {
+.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 +1791,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 +1821,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 +1847,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);
+AccordionItem.styles = [css_248z$K];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1718,10 +1939,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$F = i`* {
+var css_248z$J = i`* {
   box-sizing: border-box;
 }
 
@@ -1733,27 +1966,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 +2005,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 +2027,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 +2045,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 +2056,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 +2072,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();
         }
     }
@@ -1840,16 +2082,19 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$F];
+Accordion.styles = [css_248z$J];
 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`* {
+var css_248z$I = i`* {
   box-sizing: border-box;
 }
 
@@ -1899,14 +2144,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 BaseHyperlinkMixin(i$1) {
     render() {
         return b `<a
       class=${e$3({
@@ -1920,18 +2158,9 @@ class Link extends i$1 {
     </a>`;
     }
 }
-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);
+Link.styles = [css_248z$I];
 
-var css_248z$D = i`* {
+var css_248z$H = i`* {
   box-sizing: border-box;
 }
 
@@ -2068,7 +2297,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$C = i`:host([color=default]) {
+var css_248z$G = 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);
@@ -2134,7 +2363,7 @@ var css_248z$C = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$B = i`.tag {
+var css_248z$F = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2233,7 +2462,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$D, css_248z$C, css_248z$B];
+Tag.styles = [css_248z$H, css_248z$G, css_248z$F];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -2247,7 +2476,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$A = i`* {
+var css_248z$E = i`* {
   box-sizing: border-box;
 }
 
@@ -2359,7 +2588,7 @@ var css_248z$A = i`* {
   color: var(--background);
 }`;
 
-var css_248z$z = i`:host([color=red]) {
+var css_248z$D = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -2388,7 +2617,7 @@ var css_248z$z = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$y = i`.tag {
+var css_248z$C = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2526,7 +2755,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$A, css_248z$z, css_248z$y];
+Chip.styles = [css_248z$E, css_248z$D, css_248z$C];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2543,7 +2772,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$x = i`:host {
+var css_248z$B = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2733,7 +2962,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>
@@ -2749,9 +2978,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$x];
+LinearProgress.styles = [css_248z$B];
 
-var css_248z$w = i`:host {
+var css_248z$A = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2893,7 +3122,7 @@ class CircularProgress extends BaseProgress {
               cx="8"
               cy="8"
               r="6"
-              style="${o$3({
+              style="${o$2({
             strokeDasharray: `${circumference}`,
             strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
         })}"
@@ -2914,47 +3143,47 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$w];
+CircularProgress.styles = [css_248z$A];
+
+var css_248z$z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
 
-var css_248z$v = i`:host {
+:host {
+  position: relative;
+  inset: 0;
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
-  display: inline-block;
-  height: 3rem;
-  width: 10rem;
+  display: flex;
+  pointer-events: none;
 }
 
-.skeleton {
-  position: relative;
-  padding: 0;
-  border: none;
+.skeleton,
+.skeleton::before {
+  inset: 0;
+  position: absolute;
+  border-start-start-radius: var(--skeleton-container-shape-start-start, var(--skeleton-container-shape));
+  border-start-end-radius: var(--skeleton-container-shape-start-end, var(--skeleton-container-shape));
+  border-end-start-radius: var(--skeleton-container-shape-end-start, var(--skeleton-container-shape));
+  border-end-end-radius: var(--skeleton-container-shape-end-end, var(--skeleton-container-shape));
+  corner-shape: var(--skeleton-container-shape-variant);
+}
+
+.skeleton {
   background: var(--skeleton-container-color);
-  box-shadow: none;
   overflow: hidden;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 }
 .skeleton::before {
-  position: absolute;
-  left: 0;
-  top: 0;
   animation: 3s ease-in-out skeleton infinite;
   background: var(--skeleton-element);
   block-size: 100%;
   content: "";
   inline-size: 100%;
   will-change: transform-origin, transform, opacity;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 }
 
 @keyframes skeleton {
@@ -3020,12 +3249,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$v];
+Skeleton.styles = [css_248z$z];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$u = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -3183,11 +3412,13 @@ class Input extends BaseInput {
                 <wc-icon-button
                   class="password-toggle"
                   variant="text"
-                  name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
                   @click=${() => {
                 this.passwordVisible = !this.passwordVisible;
             }}
                 >
+                  <wc-icon
+                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                  ></wc-icon>
                 </wc-icon-button>
               </pc-tooltip>
             `
@@ -3198,7 +3429,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$u];
+Input.styles = [css_248z$y];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3257,7 +3488,290 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$t = i`* {
+var css_248z$x = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.url-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: inherit;
+  font: inherit;
+  color: inherit;
+}
+
+.url-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.url-link {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-primary);
+  text-decoration: none;
+}
+.url-link:hover {
+  text-decoration: underline;
+}
+
+.url-placeholder {
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+}
+
+.edit-button {
+  --button-container-shape: var(--shape-corner-full);
+}`;
+
+/**
+ * @label URL Field
+ * @tag wc-url-field
+ * @rawTag url-field
+ *
+ * @summary A field for entering and displaying URLs with validation.
+ * @overview
+ * <p>URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.</p>
+ *
+ * @example
+ * ```html
+ * <wc-url-field label="Website" value="https://example.com"></wc-url-field>
+ * ```
+ * @tags form
+ */
+class UrlField extends BaseInput {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.name = '';
+        this.placeholder = '';
+        this.label = '';
+        this.editing = false;
+        this.debounce = 300;
+        this.size = 'md';
+        this.variant = 'default';
+        this.helperText = '';
+        this.error = false;
+        this.errorText = '';
+        this.warning = false;
+        this.warningText = '';
+        this.focused = false;
+        this.isValid = true;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    focus() {
+        if (!this.editing && !this.disabled && !this.readonly) {
+            this.startEditing();
+            return;
+        }
+        this.inputElement?.focus();
+    }
+    blur() {
+        this.inputElement?.blur();
+    }
+    startEditing() {
+        if (this.disabled || this.readonly)
+            return;
+        this.editing = true;
+        setTimeout(() => this.inputElement?.focus(), 80);
+    }
+    closeEditing() {
+        this.isValid = this.validateUrl(this.value);
+        this.dispatchEvent(new CustomEvent('input-invalid', {
+            detail: !this.isValid,
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.isValid) {
+            this.editing = false;
+        }
+    }
+    validateUrl(url) {
+        if (!url)
+            return true;
+        try {
+            new URL(url);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    handleInput(event) {
+        this.value = event.target.value;
+        this.isValid = true;
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('value-change', {
+                detail: this.value,
+                bubbles: true,
+                composed: true,
+            }));
+        }, this.debounce);
+    }
+    handleFocusChange() {
+        this.focused = this.inputElement?.matches(':focus') ?? false;
+    }
+    handleBlur() {
+        this.focused = false;
+        this.closeEditing();
+    }
+    handleChange(event) {
+        redispatchEvent(this, event);
+    }
+    renderDisplayValue() {
+        if (!this.value) {
+            return b `<span class="url-placeholder">${this.placeholder}</span>`;
+        }
+        return b `
+      <a
+        class="url-link"
+        href=${this.value}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        ${this.value}
+      </a>
+    `;
+    }
+    render() {
+        const hasValue = !!this.value;
+        const showInvalidState = this.error || !this.isValid;
+        const resolvedErrorText = !this.isValid
+            ? 'Please enter a valid URL'
+            : this.errorText;
+        return b `
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${showInvalidState}
+        error-text=${resolvedErrorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${hasValue || this.editing}
+        ?focused=${this.focused}
+        .host=${this}
+        class="url-field-wrapper"
+      >
+        ${this.editing
+            ? b `
+              <input
+                class="url-input"
+                name=${this.name}
+                type="url"
+                placeholder=${this.placeholder}
+                .value=${this.value}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
+                @change=${this.handleChange}
+                @focus=${this.handleFocusChange}
+                @blur=${this.handleBlur}
+              />
+            `
+            : b `<div class="url-display">${this.renderDisplayValue()}</div>`}
+
+        ${!this.editing && !this.disabled && !this.readonly
+            ? b `
+              <wc-icon-button
+                class="edit-button"
+                slot="field-end"
+                variant="text"
+                @click=${(event) => {
+                event.stopPropagation();
+                this.startEditing();
+            }}
+              >
+                <wc-icon name="edit"></wc-icon>
+              </wc-icon-button>
+            `
+            : A}
+      </wc-field>
+    `;
+    }
+}
+UrlField.styles = [css_248z$x];
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "value", void 0);
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "placeholder", void 0);
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], UrlField.prototype, "editing", void 0);
+__decorate([
+    n({ type: Number })
+], UrlField.prototype, "debounce", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], UrlField.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], UrlField.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], UrlField.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], UrlField.prototype, "errorText", void 0);
+__decorate([
+    n({ type: Boolean })
+], UrlField.prototype, "warning", void 0);
+__decorate([
+    n({ type: String, attribute: 'warning-text' })
+], UrlField.prototype, "warningText", void 0);
+__decorate([
+    r()
+], UrlField.prototype, "focused", void 0);
+__decorate([
+    r()
+], UrlField.prototype, "isValid", void 0);
+__decorate([
+    e$4('.url-input')
+], UrlField.prototype, "inputElement", void 0);
+
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -3625,7 +4139,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$t];
+Field.styles = [css_248z$w];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3681,7 +4195,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$s = i`* {
+var css_248z$v = i`* {
   box-sizing: border-box;
 }
 
@@ -3832,11 +4346,12 @@ class NumberField extends BaseInput {
         ${this.stepper && !this.disabled
             ? b `<wc-icon-button
               class="stepper"
-              name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="remove"></wc-icon>
+            </wc-icon-button>`
             : A}
 
         <slot name="start" slot="field-start"></slot>
@@ -3868,17 +4383,18 @@ class NumberField extends BaseInput {
             ? b `<wc-icon-button
               class="stepper"
               variant="text"
-              name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="add"></wc-icon>
+            </wc-icon-button>`
             : A}
       </wc-field>
     `;
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$s];
+NumberField.styles = [css_248z$v];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3940,7 +4456,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$r = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -4093,7 +4609,6 @@ class DatePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -4102,12 +4617,13 @@ class DatePicker extends BaseInput {
             });
         }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;
     }
 }
-DatePicker.styles = [css_248z$r];
+DatePicker.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4163,7 +4679,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$q = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -4316,7 +4832,6 @@ class TimePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -4325,12 +4840,13 @@ class TimePicker extends BaseInput {
             });
         }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;
     }
 }
-TimePicker.styles = [css_248z$q];
+TimePicker.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4386,7 +4902,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -4546,7 +5062,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$p];
+Textarea.styles = [css_248z$s];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4605,7 +5121,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$o = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -4946,7 +5462,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$o];
+Switch.styles = [css_248z$r];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4990,7 +5506,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$n = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -5047,12 +5563,9 @@ var css_248z$n = i`* {
   outline: none;
   flex-shrink: 0;
 }
-.checkbox .state-layer {
-  position: absolute;
-  inset: 0;
+.checkbox .ripple {
   border-radius: 50%;
-  opacity: 0;
-  transition: opacity var(--duration-short2) var(--easing-standard);
+  --ripple-pressed-color: var(--color-on-surface);
 }
 .checkbox .outline {
   position: absolute;
@@ -5099,31 +5612,20 @@ var css_248z$n = i`* {
   color: var(--color-on-surface);
   cursor: inherit;
 }
-.checkbox:hover:not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.08;
-  background: var(--color-on-surface);
-}
-.checkbox:hover:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
-}
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.12;
-  background: var(--color-on-surface);
-}
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .container {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: 50%;
+.checkbox:hover:not(.disabled):not(.readonly).state-checked .ripple, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
+.checkbox .focus-ring {
+  --focus-ring-container-shape-start-start: 50%;
+  --focus-ring-container-shape-start-end: 50%;
+  --focus-ring-container-shape-end-start: 50%;
+  --focus-ring-container-shape-end-end: 50%;
 }
-.checkbox.active:not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.12;
-  background: var(--color-on-surface);
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .ripple, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
-.checkbox.active:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
+.checkbox.active:not(.disabled):not(.readonly).state-checked .ripple, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
 .checkbox.rounded {
   --checkbox-border-radius: 18px;
@@ -5401,6 +5903,7 @@ class Checkbox extends i$1 {
         return b `
       <label class=${e$3(cssClasses)}>
         <div
+          id="container"
           class="container"
           tabindex=${this.tabindex || 0}
           @keyup=${this.handleKeyUp}
@@ -5418,7 +5921,8 @@ class Checkbox extends i$1 {
                 : 'false'}
           ${spread(this.configAria)}
         >
-          <div class="state-layer"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <wc-focus-ring class="focus-ring" for='container'></wc-focus-ring>
           <div class="outline"></div>
           <div class="background"></div>
           <svg class="icon" viewBox="0 0 12 12">
@@ -5460,7 +5964,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$n];
+Checkbox.styles = [css_248z$q];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5507,7 +6011,7 @@ __decorate([
     e$4('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$m = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -5594,9 +6098,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$m];
+Spinner.styles = [css_248z$p];
 
-var css_248z$l = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -5714,12 +6218,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$l];
+Container.styles = [css_248z$o];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$k = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -5760,12 +6264,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 +6294,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 +6323,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 {
@@ -5889,7 +6386,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$k];
+EmptyState.styles = [css_248z$n];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -5903,7 +6400,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$j = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -7649,6 +8146,24 @@ class Tooltip extends i$1 {
         this._target.removeEventListener('click', this._onClick);
         this._target = null;
     }
+    set forElement(value) {
+        if (value) {
+            this._focusTarget = value;
+        }
+        else {
+            this._focusTarget = undefined;
+        }
+    }
+    __getFocusTarget() {
+        if (this._focusTarget) {
+            return this._focusTarget;
+        }
+        const focusTarget = document.getElementById(this.for);
+        if (focusTarget) {
+            return focusTarget;
+        }
+        return this.parentElement;
+    }
     attachListeners() {
         this.detachListeners(); // Cleanup old target if it exists
         // Resolve target: ID-based lookup or fallback to parent
@@ -7729,7 +8244,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$j];
+Tooltip.styles = [css_248z$m];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -7753,7 +8268,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$i = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -7789,13 +8304,7 @@ 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`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -7904,8 +8413,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}
@@ -7925,7 +8434,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$h];
+BreadcrumbItem.styles = [css_248z$k];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -7979,13 +8488,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$i];
+Breadcrumb.styles = [css_248z$l];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$g = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7997,6 +8506,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 +8535,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;
@@ -8087,7 +8602,7 @@ var css_248z$g = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$f = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -8199,7 +8714,7 @@ var css_248z$f = i`* {
   display: none;
 }`;
 
-var css_248z$e = i`:host-context([variant=standard]) {
+var css_248z$h = 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);
@@ -8323,6 +8838,7 @@ class MenuItem extends i$1 {
         const controls = this.getAttribute('aria-controls');
         if (isLink) {
             return b `<a
+        id="item"
         class=${e$3(cssClasses)}
         href=${this.href}
         target=${this.target}
@@ -8335,6 +8851,7 @@ class MenuItem extends i$1 {
       </a> `;
         }
         return b `<div
+      id="item"
       class=${e$3(cssClasses)}
       aria-disabled=${String(this.disabled)}
       aria-haspopup=${this.hasSubmenu ? 'menu' : A}
@@ -8346,7 +8863,7 @@ class MenuItem extends i$1 {
     }
     renderContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
@@ -8360,7 +8877,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$f, css_248z$e];
+MenuItem.styles = [css_248z$i, css_248z$h];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "disabled", void 0);
@@ -8432,9 +8949,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 +8961,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 +9278,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)}
@@ -8775,7 +9294,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$g];
+Menu.styles = [css_248z$j];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -8786,6 +9305,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);
@@ -8808,7 +9330,7 @@ __decorate([
     e$4('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$d = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -8825,6 +9347,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 {
@@ -9002,7 +9525,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$d];
+SubMenu.styles = [css_248z$g];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -9016,13 +9539,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$c = i`@charset "UTF-8";
+var css_248z$f = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -9179,7 +9702,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$c];
+Image.styles = [css_248z$f];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -9202,7 +9725,7 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-var css_248z$b = i`* {
+var css_248z$e = i`* {
   box-sizing: border-box;
 }
 
@@ -9692,6 +10215,7 @@ class Tab extends i$1 {
         };
         if (!isLink) {
             return b `<button
+          id="button"
               class=${e$3(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
@@ -9737,7 +10261,7 @@ class Tab extends i$1 {
     }
     renderPrimaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -9762,7 +10286,7 @@ class Tab extends i$1 {
     }
     renderSecondaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -9792,7 +10316,7 @@ class Tab extends i$1 {
     }
     renderSegmentedTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -9831,7 +10355,7 @@ class Tab extends i$1 {
     }
 }
 _Tab_id = new WeakMap();
-Tab.styles = [css_248z$b];
+Tab.styles = [css_248z$e];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tab.prototype, "active", void 0);
@@ -9875,7 +10399,7 @@ __decorate([
     e$4('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
-var css_248z$a = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -9889,7 +10413,7 @@ var css_248z$a = i`* {
   height: 100%;
 }`;
 
-var css_248z$9 = i`* {
+var css_248z$c = i`* {
   box-sizing: border-box;
 }
 
@@ -10096,7 +10620,7 @@ class Tabs extends i$1 {
     `;
     }
 }
-Tabs.styles = [css_248z$9];
+Tabs.styles = [css_248z$c];
 Tabs.Tab = Tab;
 __decorate([
     n({ reflect: true })
@@ -10105,7 +10629,7 @@ __decorate([
     n({ type: Boolean })
 ], Tabs.prototype, "managed", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -10147,7 +10671,7 @@ class TabPanel extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabPanel.styles = [css_248z$8];
+TabPanel.styles = [css_248z$b];
 __decorate([
     n({ reflect: true })
 ], TabPanel.prototype, "value", void 0);
@@ -10300,11 +10824,11 @@ class TabGroup extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabGroup.styles = [css_248z$a];
+TabGroup.styles = [css_248z$d];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
 
-var css_248z$7 = i`:host {
+var css_248z$a = i`:host {
   --_track-height: 4px;
   --_thumb-size: 20px;
   --thumb-half: 10px;
@@ -10320,6 +10844,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 +10868,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 +11011,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,33 +11097,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$7];
+Slider.styles = [css_248z$a];
 __decorate([
     n({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -10595,6 +11147,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);
@@ -10605,7 +11160,7 @@ __decorate([
     e$4('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
-var css_248z$6 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -11139,7 +11694,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$6];
+Table.styles = [css_248z$9];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -11198,7 +11753,7 @@ __decorate([
     r()
 ], Table.prototype, "isHorizontallyScrolled", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -11211,48 +11766,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 +11820,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 +11842,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 +11865,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,76 +11930,59 @@ 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"
+            title="Previous page"
+            ?disabled=${isFirstPage}
+            @click=${this.handlePreviousPage}
+          >
+            <wc-icon name="keyboard_arrow_left"></wc-icon>
+          </wc-icon-button>
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            title="Next page"
+            ?disabled=${isLastPage}
+            @click=${this.handleNextPage}
+          >
+            <wc-icon name="keyboard_arrow_right"></wc-icon>
+          </wc-icon-button>
         </div>
       </div>
     `;
     }
 }
-Pagination.styles = [css_248z$5];
+Pagination.styles = [css_248z$8];
 __decorate([
     n({ type: Number })
 ], Pagination.prototype, "page", void 0);
@@ -11394,7 +11996,7 @@ __decorate([
     n({ type: Array, attribute: 'page-sizes' })
 ], Pagination.prototype, "pageSizes", void 0);
 
-var css_248z$4 = i`* {
+var css_248z$7 = i`* {
   box-sizing: border-box;
 }
 
@@ -11404,120 +12006,121 @@ var css_248z$4 = i`* {
 
 :host {
   display: block;
-  --tree-node-height: 2.5rem;
-  --tree-node-icon-size: 1.25rem;
-  --tree-node-border-radius: var(--global-shape-corner-full, 9999px);
-  --tree-node-label-color: var(--color-on-surface);
-  --tree-node-icon-color: var(--color-on-surface-variant);
-  --tree-node-selected-background: var(--color-secondary-container);
-  --tree-node-selected-color: var(--color-on-secondary-container);
-  --tree-node-hover-background: var(--color-inverse-primary);
-  --tree-node-focus-ring-color: var(--color-primary);
-}
-
-.tree-node {
-  display: block;
-}
-
-.tree-node-content {
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-icon-size: 1.25rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+  --sidebar-menu-item-transition-duration: 200ms;
+  --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-menu-item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  height: var(--tree-node-height);
-  border-radius: var(--tree-node-border-radius);
-  color: var(--tree-node-label-color);
+  min-height: var(--sidebar-menu-item-height);
+  border-radius: var(--sidebar-menu-item-border-radius);
+  color: var(--_label-color);
   cursor: pointer;
   user-select: none;
   text-decoration: none;
   outline: none;
-  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;
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+  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;
 }
-.tree-node-content:not(.disabled):hover {
-  background-color: var(--tree-node-hover-background);
+.sidebar-menu-item.selected {
+  --_container-color: var(--sidebar-menu-item-selected-background);
+  --_label-color: var(--sidebar-menu-item-selected-color);
 }
-.tree-node-content:focus-visible {
-  outline: 2px solid var(--tree-node-focus-ring-color);
+.sidebar-menu-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.tree-node-content.selected {
-  background-color: var(--tree-node-selected-background);
-  color: var(--tree-node-selected-color);
+.sidebar-menu-item.disabled .ripple {
+  display: none;
 }
-.tree-node-content.selected .node-icon {
-  --icon-color: var(--tree-node-selected-color);
+
+.sidebar-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  padding-inline: 0.75rem;
+  color: inherit;
+  z-index: 1;
 }
-.tree-node-content.disabled {
-  cursor: not-allowed;
-  opacity: 0.38;
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
   pointer-events: none;
 }
 
-.expand-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
-  transition: transform var(--duration-short2, 200ms) var(--easing-standard, ease);
-}
-.expand-icon.expanded {
-  transform: rotate(90deg);
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
 }
 
-.icon-space {
-  display: inline-block;
-  width: var(--tree-node-icon-size);
-  height: var(--tree-node-icon-size);
-  flex-shrink: 0;
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
 }
 
-.node-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
+.sidebar-menu-item.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
 }
 
-.tree-node-label {
+.sidebar-menu-item-label {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.node-children {
-  display: none;
-}
-.node-children.expanded {
-  display: block;
 }`;
 
 /**
- * @label Tree Node
- * @tag wc-tree-node
- * @rawTag tree-node
- * @parentRawTag tree-view
- * @summary A tree node represents a single item in a hierarchical tree structure. It supports nesting, icons, links, and keyboard navigation.
+ * @label Sidebar Menu Item
+ * @tag wc-sidebar-menu-item
+ * @rawTag sidebar-menu-item
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
  *
  * @example
  * ```html
- * <wc-tree-view>
- *   <wc-tree-node label="Parent">
- *     <wc-tree-node label="Child"></wc-tree-node>
- *   </wc-tree-node>
- * </wc-tree-view>
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
  * ```
  * @tags navigation
  */
-class TreeNode extends i$1 {
+class SidebarMenuItem extends i$1 {
     constructor() {
         super(...arguments);
         /**
-         * The value used to identify this node when selected.
+         * The value used to identify this item when selected.
          */
         this.value = '';
         /**
-         * The display label for this node.
+         * The display label for this item.
          */
         this.label = '';
         /**
@@ -11533,21 +12136,26 @@ class TreeNode extends i$1 {
          */
         this.target = '_self';
         /**
-         * If true, the user cannot interact with the node.
+         * If true, the user cannot interact with the item.
          */
         this.disabled = false;
         /**
-         * Whether the node is currently selected.
+         * Whether the item is currently selected.
          */
         this.selected = false;
         /**
-         * Whether child nodes are visible.
-         */
-        this.expanded = false;
-        /**
-         * The nesting depth level (set automatically by the parent tree-view).
+         * The nesting depth level (set automatically by the parent sidebar-menu).
          */
         this.level = 0;
+        this._onClick = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent('sidebar-menu-item:click', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, label: this.label },
+            }));
+        };
     }
     focus() {
         this._nativeElement?.focus();
@@ -11555,193 +12163,372 @@ class TreeNode extends i$1 {
     blur() {
         this._nativeElement?.blur();
     }
-    _getChildNodes() {
-        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._updateChildLevels();
-        this.setAttribute('role', 'treeitem');
-        this._syncHostAria();
-    }
-    _syncHostAria() {
-        const hasChildren = this._getChildNodes().length > 0;
-        if (hasChildren) {
-            this.setAttribute('aria-expanded', String(this.expanded));
-        }
-        else {
-            this.removeAttribute('aria-expanded');
-        }
-        this.setAttribute('aria-selected', String(this.selected));
-        this.setAttribute('aria-disabled', String(this.disabled));
-        this.setAttribute('aria-level', String(this.level + 1));
-    }
-    _updateChildLevels() {
-        const children = this._getChildNodes();
-        children.forEach(child => {
-            // eslint-disable-next-line no-param-reassign
-            child.level = this.level + 1;
-        });
-    }
-    _handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        const hasChildren = this._getChildNodes().length > 0;
-        if (hasChildren) {
-            this.expanded = !this.expanded;
-        }
-        this.dispatchEvent(new CustomEvent('tree-node:click', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: this.value || this.label,
-                label: this.label,
-                expanded: this.expanded,
-            },
-        }));
-    }
-    _handleKeyDown(event) {
-        if (this.disabled)
-            return;
-        const hasChildren = this._getChildNodes().length > 0;
-        switch (event.key) {
-            case ' ':
-            case 'Enter':
-                event.preventDefault();
-                if (hasChildren) {
-                    this.expanded = !this.expanded;
-                }
-                this.dispatchEvent(new CustomEvent('tree-node:click', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: this.value || this.label,
-                        label: this.label,
-                        expanded: this.expanded,
-                    },
-                }));
-                if (this.href) {
-                    window.open(this.href, this.target);
-                }
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (this.expanded && hasChildren) {
-                    this.expanded = false;
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (hasChildren) {
-                    if (!this.expanded) {
-                        this.expanded = true;
-                    }
-                    else {
-                        const firstChild = this._getChildNodes()[0];
-                        firstChild?.focus();
-                    }
-                }
-                break;
-        }
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has('level')) {
-            this._updateChildLevels();
-        }
-        this._syncHostAria();
-    }
-    _renderContent(hasChildren) {
-        // 0.125rem offset aligns text visually with the expand/icon space
-        const indentStyle = o$3({
-            paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
-        });
-        const contentClasses = e$3({
-            'tree-node-content': true,
-            selected: this.selected,
+    render() {
+        const classes = e$3({
+            'sidebar-menu-item': true,
             disabled: this.disabled,
+            selected: this.selected,
         });
-        const innerContent = b `
-      ${hasChildren
-            ? b `<wc-icon
-            class=${e$3({ 'expand-icon': true, expanded: this.expanded })}
-            name="arrow_right"
-          ></wc-icon>`
-            : b `<span class="icon-space"></span>`}
-      ${this.icon
-            ? b `<wc-icon class="node-icon" name=${this.icon}></wc-icon>`
-            : ''}
-      <span class="tree-node-label">${this.label}<slot name="label"></slot></span>
+        const content = b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <div class="sidebar-menu-item-content">
+        ${this.icon ? b `<wc-icon name="${this.icon}"></wc-icon>` : ''}
+        <span class="sidebar-menu-item-label">${this.label}</span>
+      </div>
     `;
         if (this.href) {
-            return b `<a
-        class=${contentClasses}
-        style=${indentStyle}
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this._handleClick}
-        @keydown=${this._handleKeyDown}
-      >${innerContent}</a>`;
+            return b `
+        <a
+          id="item"
+          href="${this.href}"
+          target="${this.target}"
+          class="${classes}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this._onClick}"
+        >
+          ${content}
+        </a>
+      `;
         }
-        return b `<div
-      class=${contentClasses}
-      style=${indentStyle}
-      tabindex=${this.disabled ? '-1' : '0'}
-      @click=${this._handleClick}
-      @keydown=${this._handleKeyDown}
-    >${innerContent}</div>`;
-    }
-    render() {
-        const hasChildren = this._getChildNodes().length > 0;
-        const nodeSlotClasses = e$3({
-            'node-children': true,
-            expanded: this.expanded,
-        });
-        return b `<div class="tree-node">
-      ${this._renderContent(hasChildren)}
-      <div class=${nodeSlotClasses}>
-        <slot></slot>
-      </div>
-    </div>`;
+        return b `
+      <div
+        id="item"
+        class="${classes}"
+        role="treeitem"
+        aria-label="${this.label}"
+        aria-selected="${String(this.selected)}"
+        aria-disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this._onClick}"
+        @keydown="${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._onClick();
+            }
+        }}"
+      >
+        ${content}
+      </div>
+    `;
     }
 }
-TreeNode.styles = [css_248z$4];
+SidebarMenuItem.styles = [css_248z$7];
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarMenuItem.prototype, "value", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "value", void 0);
+], SidebarMenuItem.prototype, "label", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "label", void 0);
+], SidebarMenuItem.prototype, "icon", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarMenuItem.prototype, "href", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarMenuItem.prototype, "target", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SidebarMenuItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SidebarMenuItem.prototype, "selected", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], SidebarMenuItem.prototype, "level", void 0);
+__decorate([
+    e$4('.sidebar-menu-item-content')
+], SidebarMenuItem.prototype, "_nativeElement", void 0);
+
+var css_248z$6 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+}
+
+.sidebar-sub-menu {
+  display: block;
+}
+
+.sidebar-sub-menu-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: var(--sidebar-menu-item-height);
+  cursor: pointer;
+  border-radius: var(--sidebar-menu-item-border-radius);
+  outline: none;
+  padding-inline-end: 0.75rem;
+  color: var(--_label-color);
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+  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;
+}
+.sidebar-sub-menu-inner.selected {
+  --_container-color: var(--sidebar-menu-item-selected-background);
+  --_label-color: var(--sidebar-menu-item-selected-color);
+}
+.sidebar-sub-menu-inner.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.sidebar-sub-menu-inner.disabled .ripple {
+  display: none;
+}
+
+.sidebar-sub-menu-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  color: inherit;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  padding-inline: 0.75rem;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-sub-menu-inner.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-sub-menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-menu-item-icon-color);
+  flex-shrink: 0;
+  width: var(--sidebar-menu-item-height);
+  height: var(--sidebar-menu-item-height);
+  transition: transform var(--duration-medium1) var(--easing-standard);
+}
+
+:host([expanded]) .expand-icon {
+  transform: rotate(180deg);
+}
+
+.sidebar-sub-menu-children {
+  display: block;
+  overflow: hidden;
+  margin-left: var(--spacing-200);
+  max-height: 9999px;
+  opacity: 1;
+  transition: max-height var(--duration-medium1) var(--easing-standard), opacity var(--duration-medium1) var(--easing-standard);
+}
+
+.sidebar-sub-menu-children.hidden {
+  max-height: 0;
+  opacity: 0;
+}`;
+
+/**
+ * @label Sidebar Sub Menu
+ * @tag wc-sidebar-sub-menu
+ * @rawTag sidebar-sub-menu
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-sub-menu label="Parent" expanded>
+ *   <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ * </wc-sidebar-sub-menu>
+ * ```
+ * @tags navigation
+ */
+class SidebarSubMenu extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.label = '';
+        this.icon = '';
+        this.disabled = false;
+        this.selected = false;
+        this.expanded = false;
+        this.level = 0;
+        this._updateChildLevels = () => {
+            this._getChildNodes().forEach(child => {
+                if ('level' in child) {
+                    // eslint-disable-next-line no-param-reassign
+                    child.level = this.level + 1;
+                }
+            });
+        };
+        this._onClick = () => {
+            if (this.disabled)
+                return;
+            if (this._getChildNodes().length > 0) {
+                this.expanded = !this.expanded;
+            }
+            this.dispatchEvent(new CustomEvent('sidebar-menu-item:click', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, label: this.label },
+            }));
+        };
+    }
+    focus() {
+        this._nativeElement?.focus();
+    }
+    blur() {
+        this._nativeElement?.blur();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateChildLevels();
+    }
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('expanded')) {
+            this.setAttribute('aria-expanded', String(this.expanded));
+            if (this.expanded) {
+                this.setAttribute('data-expanded', '');
+            }
+            else {
+                this.removeAttribute('data-expanded');
+            }
+        }
+    }
+    _getChildNodes() {
+        return Array.from(this.children).filter(el => {
+            const tag = el.tagName.toLowerCase();
+            return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+        });
+    }
+    render() {
+        const hasChildren = this._getChildNodes().length > 0;
+        const wrapperClasses = e$3({
+            'sidebar-sub-menu': true,
+        });
+        const innerClasses = e$3({
+            'sidebar-sub-menu-inner': true,
+            disabled: this.disabled,
+            selected: this.selected,
+        });
+        const inlineStyles = o$2({
+            paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
+        });
+        return b `
+      <div class="${wrapperClasses}" style="${inlineStyles}">
+        <div
+          id="item"
+          class="${innerClasses}"
+          role="treeitem"
+          aria-label="${this.label}"
+          aria-selected="${String(this.selected)}"
+          aria-disabled="${this.disabled}"
+          aria-expanded="${this.expanded}"
+          @click="${this._onClick}"
+          @keydown="${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._onClick();
+            }
+        }}"
+          tabindex="${this.disabled ? -1 : 0}"
+        >
+          <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+          <div class="background"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <div class="sidebar-sub-menu-content">
+            ${this.icon ? b `<wc-icon name="${this.icon}"></wc-icon>` : ''}
+            <span class="sidebar-sub-menu-label">${this.label}</span>
+          </div>
+          ${hasChildren
+            ? b `
+                <wc-icon class="expand-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+              `
+            : ''}
+        </div>
+        <div class="sidebar-sub-menu-children ${(!hasChildren || !this.expanded) ? 'hidden' : ''}">
+          <slot @slotchange="${this._updateChildLevels}"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SidebarSubMenu.styles = [css_248z$6];
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "icon", void 0);
+], SidebarSubMenu.prototype, "value", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "href", void 0);
+], SidebarSubMenu.prototype, "label", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "target", void 0);
+], SidebarSubMenu.prototype, "icon", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "disabled", void 0);
+], SidebarSubMenu.prototype, "disabled", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "selected", void 0);
+], SidebarSubMenu.prototype, "selected", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "expanded", void 0);
+], SidebarSubMenu.prototype, "expanded", void 0);
 __decorate([
     n({ type: Number, reflect: true })
-], TreeNode.prototype, "level", void 0);
+], SidebarSubMenu.prototype, "level", void 0);
 __decorate([
-    e$4('.tree-node-content')
-], TreeNode.prototype, "_nativeElement", void 0);
+    e$4('.sidebar-sub-menu-inner')
+], SidebarSubMenu.prototype, "_nativeElement", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$5 = i`* {
   box-sizing: border-box;
 }
 
@@ -11753,164 +12540,168 @@ var css_248z$3 = i`* {
   display: block;
 }
 
-.tree-view {
+.sidebar-menu {
   display: block;
   padding: var(--spacing-100, 0.5rem) 0;
 }`;
 
 /**
- * @label Tree View
- * @tag wc-tree-view
- * @rawTag tree-view
- * @summary A tree view is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable nodes.
+ * @label Sidebar Menu
+ * @tag wc-sidebar-menu
+ * @rawTag sidebar-menu
+ * @summary A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.
  *
  * @example
  * ```html
- * <wc-tree-view>
- *   <wc-tree-node label="Parent" expanded>
- *     <wc-tree-node label="Child 1"></wc-tree-node>
- *     <wc-tree-node label="Child 2"></wc-tree-node>
- *   </wc-tree-node>
- * </wc-tree-view>
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+ *     <wc-sidebar-menu-item label="Child 2"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
  * ```
  * @tags navigation
  */
-class TreeView extends i$1 {
+class SidebarMenu extends i$1 {
     constructor() {
         super(...arguments);
         /**
-         * The value of the currently selected node.
+         * The value of the currently selected item.
          */
-        this.selectedNode = '';
-        this._onNodeClick = (event) => {
-            const target = event.target;
-            if (target.disabled)
+        this.selectedItem = '';
+        this._onItemClick = (event) => {
+            const item = event.target;
+            if (item.disabled)
                 return;
-            const value = event.detail?.value ?? target.value ?? target.label;
-            this.selectedNode = value;
-            // Update selected state on all nodes
+            const value = event.detail?.value ?? item.value ?? item.label;
+            this.selectedItem = value;
+            // Update selected state on all items
             this._updateSelectedState(value);
-            this.dispatchEvent(new CustomEvent('tree-view:change', {
+            this.dispatchEvent(new CustomEvent('sidebar-menu:change', {
                 bubbles: true,
                 composed: true,
-                detail: { value, node: target },
+                detail: { value, item },
             }));
         };
-        this._onSlotChange = () => {
-            this._syncSelectedStateFromProperty();
-        };
         this._onKeyDown = (event) => {
-            const visibleNodes = this._getAllVisibleNodes().filter(n => !n.disabled);
-            if (visibleNodes.length === 0)
+            const allVisible = this._getAllVisibleItems();
+            const currentElement = event.composedPath().find(target => target instanceof SidebarMenuItem || target instanceof SidebarSubMenu);
+            if (!currentElement) {
                 return;
-            const focusedIndex = visibleNodes.findIndex(node => {
-                const root = node.shadowRoot;
-                return root?.activeElement !== null && root?.activeElement !== undefined;
-            });
-            if (focusedIndex === -1 && event.key !== 'Tab')
+            }
+            if (!allVisible.includes(currentElement)) {
                 return;
-            switch (event.key) {
-                case 'ArrowDown': {
-                    event.preventDefault();
-                    const nextIndex = (focusedIndex + 1) % visibleNodes.length;
-                    visibleNodes[nextIndex]?.focus();
-                    break;
+            }
+            const currentIndex = allVisible.indexOf(currentElement);
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                const nextIndex = (currentIndex + 1) % allVisible.length;
+                allVisible[nextIndex].focus();
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                const prevIndex = currentIndex === 0 ? allVisible.length - 1 : currentIndex - 1;
+                allVisible[prevIndex].focus();
+            }
+            else if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                currentElement.click();
+            }
+            else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                if (currentElement instanceof SidebarSubMenu && !currentElement.expanded) {
+                    currentElement.expanded = true;
                 }
-                case 'ArrowUp': {
-                    event.preventDefault();
-                    const prevIndex = (focusedIndex - 1 + visibleNodes.length) % visibleNodes.length;
-                    visibleNodes[prevIndex]?.focus();
-                    break;
+                else if (currentElement instanceof SidebarSubMenu) {
+                    const children = this._getChildNodes(currentElement);
+                    if (children.length > 0) {
+                        children[0].focus();
+                    }
+                }
+            }
+            else if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                if (currentElement instanceof SidebarSubMenu && currentElement.expanded) {
+                    currentElement.expanded = false;
                 }
-                case 'Home':
-                    event.preventDefault();
-                    visibleNodes[0]?.focus();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    visibleNodes[visibleNodes.length - 1]?.focus();
-                    break;
             }
         };
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('tree-node:click', this._onNodeClick);
+        this.addEventListener('sidebar-menu-item:click', this._onItemClick);
         this.addEventListener('keydown', this._onKeyDown);
         this.setAttribute('role', 'tree');
     }
     updated(changedProps) {
         super.updated(changedProps);
-        if (changedProps.has('selectedNode')) {
+        if (changedProps.has('selectedItem')) {
             this._syncSelectedStateFromProperty();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('tree-node:click', this._onNodeClick);
+        this.removeEventListener('sidebar-menu-item:click', this._onItemClick);
         this.removeEventListener('keydown', this._onKeyDown);
     }
-    _getTopLevelNodes() {
-        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
+    _isSidebarNode(element) {
+        const tag = element.tagName.toLowerCase();
+        return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+    }
+    _getTopLevelItems() {
+        return Array.from(this.children).filter(el => this._isSidebarNode(el));
+    }
+    _getChildNodes(item) {
+        return Array.from(item.children).filter(child => this._isSidebarNode(child));
     }
-    _getAllVisibleNodes() {
+    _getAllVisibleItems() {
         const result = [];
-        const collect = (nodes) => {
-            nodes.forEach(node => {
-                result.push(node);
-                if (node.expanded) {
-                    const children = Array.from(node.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-                    collect(children);
+        const collect = (items) => {
+            items.forEach(item => {
+                result.push(item);
+                if (item instanceof SidebarSubMenu && item.expanded) {
+                    collect(this._getChildNodes(item));
                 }
             });
         };
-        collect(this._getTopLevelNodes());
+        collect(this._getTopLevelItems());
         return result;
     }
     _updateSelectedState(selectedValue) {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            const nodeValue = node.value || node.label;
+        const allItems = this._collectAllItems(this._getTopLevelItems());
+        allItems.forEach(item => {
+            const itemValue = item.value || item.label;
             // eslint-disable-next-line no-param-reassign
-            node.selected = nodeValue === selectedValue;
+            item.selected = itemValue === selectedValue;
         });
     }
-    _clearSelectedState() {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            // eslint-disable-next-line no-param-reassign
-            node.selected = false;
+    _collectAllItems(items) {
+        const result = [];
+        items.forEach(item => {
+            result.push(item);
+            if (item instanceof SidebarSubMenu) {
+                result.push(...this._collectAllItems(this._getChildNodes(item)));
+            }
         });
+        return result;
     }
     _syncSelectedStateFromProperty() {
-        if (this.selectedNode) {
-            this._updateSelectedState(this.selectedNode);
-            return;
-        }
-        this._clearSelectedState();
-    }
-    _collectAllNodes(nodes) {
-        const result = [];
-        nodes.forEach(node => {
-            result.push(node);
-            const children = Array.from(node.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-            result.push(...this._collectAllNodes(children));
+        const allItems = this._collectAllItems(this._getTopLevelItems());
+        allItems.forEach(item => {
+            const itemValue = item.value || item.label;
+            item.selected = itemValue === this.selectedItem;
         });
-        return result;
     }
     render() {
-        return b `<div class="tree-view">
-      <slot @slotchange=${this._onSlotChange}></slot>
-    </div>`;
+        return b ` <div class="sidebar-menu"><slot></slot></div> `;
     }
 }
-TreeView.styles = [css_248z$3];
-TreeView.Node = TreeNode;
+SidebarMenu.styles = [css_248z$5];
 __decorate([
-    n({ type: String, attribute: 'selected-node', reflect: true })
-], TreeView.prototype, "selectedNode", void 0);
+    n({ type: String, attribute: 'selected-item', reflect: true })
+], SidebarMenu.prototype, "selectedItem", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -11918,10 +12709,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 +12754,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;
+  min-height: 32px;
+  align-items: center;
+  display: flex;
 }
 
-.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;
-  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);
+.action {
+  --text-button-label-text-color: var(--snackbar-action-text-color);
 }
 
 .close {
-  color: var(--snackbar-close-icon-color);
-  padding: 0;
-}
-
-.close wc-icon {
-  --icon-size: 1.125rem;
-  color: inherit;
+  --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 +12818,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 +12837,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 +12904,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 +12926,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 +12946,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}
             >
               <wc-icon name="close"></wc-icon>
-            </button>`
+            </wc-icon-button>`
             : A}
       </div>
     `;
     }
 }
-Snackbar.styles = [css_248z$2];
+Snackbar.styles = [css_248z$4];
+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,8 +13001,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$1 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -12542,7 +13417,7 @@ class Radio extends i$1 {
 }
 Radio.DIRECTION_NEXT = 1;
 Radio.DIRECTION_PREVIOUS = -1;
-Radio.styles = [css_248z$1];
+Radio.styles = [css_248z$3];
 __decorate([
     n({ type: String })
 ], Radio.prototype, "name", void 0);
@@ -12586,7 +13461,7 @@ __decorate([
     e$4('.input-native')
 ], Radio.prototype, "nativeElement", void 0);
 
-var css_248z = i`@charset "UTF-8";
+var css_248z$2 = i`@charset "UTF-8";
 * {
   box-sizing: border-box;
 }
@@ -12675,6 +13550,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 +13668,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 +13737,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 +13765,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 +13812,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 +13833,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 +13852,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 +13890,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 +13924,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 +13937,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 +13989,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 +14027,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 +14078,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 +14106,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,20 +14128,19 @@ 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>
     `;
     }
 }
-Select.styles = [css_248z];
+Select.styles = [css_248z$2];
 __decorate([
     n({ type: Array })
 ], Select.prototype, "options", void 0);
@@ -13249,9 +14159,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);
@@ -13289,5 +14196,626 @@ __decorate([
     e$4('.search-input')
 ], Select.prototype, "_searchInputEl", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tabs as G, Tag as H, Icon as I, Textarea as J, TimePicker as K, LinearProgress as L, Menu as M, NumberField as N, Tooltip as O, Pagination as P, TreeNode as Q, Radio as R, SegmentedButton as S, Tab as T, TreeView as U, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, Ripple as n, SegmentedButtonGroup as o, Select as p, SelectOptionElement as q, Skeleton as r, Slider as s, Snackbar as t, Spinner as u, SubMenu as v, Switch as w, TabGroup as x, TabPanel as y, Table as z };
-//# sourceMappingURL=select-C3XAzenC.js.map
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  width: var(--nav-rail-width, 5rem); /* 80dp */
+  overflow: hidden;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-color: var(--nav-rail-container-color, var(--color-surface));
+  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  box-sizing: border-box;
+}
+.rail .header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+}
+.rail .header:empty {
+  display: none;
+}
+.rail wc-divider {
+  width: calc(100% - 1rem);
+  margin-block: 0.5rem;
+  flex-shrink: 0;
+}
+.rail .items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem; /* 12dp between items */
+  flex: 1;
+}
+.rail .items ::slotted(wc-navigation-rail-item) {
+  width: 100%;
+}
+.rail {
+  /* Alignment variants */
+}
+.rail.align-top .items {
+  justify-content: flex-start;
+}
+.rail.align-center .items {
+  justify-content: center;
+}
+.rail.align-bottom .items {
+  justify-content: flex-end;
+}`;
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+/* Reset native button/link styles */
+.item-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
+  color: inherit;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 3.5rem; /* 56dp */
+  padding-block: 0.25rem; /* 4dp vertical padding */
+  cursor: pointer;
+  gap: 0.25rem; /* 4dp gap between indicator and label */
+  box-sizing: border-box;
+  /* Color tokens */
+  --_inactive-icon-color: var(--nav-rail-inactive-icon-color, var(--color-on-surface-variant));
+  --_active-icon-color: var(--nav-rail-active-icon-color, var(--color-on-secondary-container));
+  --_inactive-label-color: var(--nav-rail-inactive-label-color, var(--color-on-surface-variant));
+  --_active-label-color: var(--nav-rail-active-label-color, var(--color-on-surface));
+  --_indicator-color: var(--nav-rail-indicator-color, var(--color-secondary-container));
+  --_indicator-shape: var(--nav-rail-indicator-shape, var(--shape-corner-full));
+  --_indicator-width: var(--nav-rail-indicator-width, 3.5rem); /* 56dp */
+  --_indicator-height: var(--nav-rail-indicator-height, 2rem); /* 32dp */
+  --_state-color: var(--_inactive-icon-color);
+  /* Focus ring */
+}
+.item .focus-ring {
+  z-index: 3;
+  --focus-ring-container-shape-start-start: var(--shape-corner-small);
+  --focus-ring-container-shape-start-end: var(--shape-corner-small);
+  --focus-ring-container-shape-end-start: var(--shape-corner-small);
+  --focus-ring-container-shape-end-end: var(--shape-corner-small);
+}
+.item {
+  /* Active indicator (pill behind icon) */
+}
+.item .indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  border-radius: var(--_indicator-shape);
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item .indicator .icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  position: relative;
+  pointer-events: none;
+}
+.item .indicator .icon-container ::slotted(*) {
+  --icon-size: 1.5rem; /* 24dp */
+  --icon-color: var(--_inactive-icon-color);
+  color: var(--_inactive-icon-color);
+  display: flex;
+}
+.item {
+  /* State layer for hover/press */
+}
+.item .state-layer {
+  position: absolute;
+  top: 0.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  pointer-events: none;
+  background-color: var(--_state-color);
+  opacity: 0;
+  z-index: 0;
+  border-radius: var(--_indicator-shape);
+  transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item .ripple {
+  z-index: 1;
+  --ripple-pressed-color: var(--_state-color);
+  --ripple-state-opacity: 0;
+  border-radius: var(--shape-corner-small, 4px);
+}
+.item {
+  /* Label */
+}
+.item .label {
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+  color: var(--_inactive-label-color);
+  text-align: center;
+  pointer-events: none;
+  z-index: 1;
+  transition: color var(--duration-short4, 200ms) var(--easing-standard, ease), font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item {
+  /* Active icon slot: hidden by default */
+}
+.item .active-icon-slot {
+  display: none;
+}
+.item .hidden-slot {
+  display: none;
+}
+.item {
+  /* Item content layout */
+}
+.item .item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  z-index: 1;
+}
+.item {
+  /* Active state */
+}
+.item.active {
+  --_state-color: var(--_active-icon-color);
+}
+.item.active .indicator {
+  background-color: var(--_indicator-color);
+}
+.item.active .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--_active-icon-color);
+  color: var(--_active-icon-color);
+}
+.item.active .label {
+  color: var(--_active-label-color);
+  font-weight: var(--typography-label-medium-font-weight-bold, 700);
+}
+.item {
+  /* Active icon slot: show when active and slot has content */
+}
+.item.active.has-active-icon .active-icon-slot {
+  display: flex;
+}
+.item.active.has-active-icon .icon-slot {
+  display: none;
+}
+.item {
+  /* Hover state */
+}
+.item:hover:not(.disabled) .state-layer {
+  opacity: 0.08;
+}
+.item {
+  /* Pressed state */
+}
+.item.pressed:not(.disabled) .state-layer {
+  opacity: 0.12;
+}
+.item {
+  /* Disabled state */
+}
+.item.disabled {
+  cursor: not-allowed;
+}
+.item.disabled .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--color-on-surface);
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .label {
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .ripple {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item .indicator,
+  .item .state-layer,
+  .item .label {
+    transition: none;
+  }
+}`;
+
+var _NavigationRailItem_id;
+/**
+ * @label Navigation Rail Item
+ * @tag wc-navigation-rail-item
+ * @rawTag navigation-rail-item
+ * @parentRawTag navigation-rail
+ *
+ * @summary An individual item within a navigation rail.
+ * @overview
+ * <p>Navigation rail items display a destination with an icon and optional label.</p>
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail-item>
+ *   <wc-icon slot="icon">home</wc-icon>
+ *   Home
+ * </wc-navigation-rail-item>
+ * ```
+ * @tags navigation
+ */
+class NavigationRailItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        _NavigationRailItem_id.set(this, crypto.randomUUID());
+        /** Whether this item is currently active/selected. */
+        this.active = false;
+        /** Whether this item is disabled. */
+        this.disabled = false;
+        /** Whether the parent rail is in collapsed mode (labels hidden). */
+        this.collapsed = false;
+        /** Link target. */
+        this.target = '_self';
+        /** Reason the item is disabled (shown to screen readers). */
+        this.disabledReason = '';
+        /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
+        this.throttleDelay = 200;
+        this._isPressed = false;
+        this._hasLabel = false;
+        this._hasActiveIcon = false;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            if (this.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this._isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this._isPressed = true;
+            }
+            else {
+                this._isPressed = false;
+            }
+        };
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
+            this._hasLabel = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="active-icon"]'), hasContent => {
+            this._hasActiveIcon = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderItemContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <div class="state-layer"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="item-content">
+        <div class="indicator">
+          <div class="icon-container">
+            <slot name="active-icon" class="active-icon-slot"></slot>
+            <slot name="icon" class="icon-slot"></slot>
+          </div>
+        </div>
+        ${this._hasLabel && !this.collapsed
+            ? b `<div class="label"><slot></slot></div>`
+            : b `<slot class="hidden-slot"></slot>`}
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            item: true,
+            'item-element': true,
+            active: this.active,
+            disabled: this.disabled,
+            pressed: this._isPressed,
+            'has-label': this._hasLabel,
+            'has-active-icon': this._hasActiveIcon,
+        };
+        if (!isLink) {
+            return b `<button
+        id="item"
+        class=${e$3(cssClasses)}
+        ?disabled=${this.disabled}
+        aria-disabled=${`${this.disabled}`}
+        aria-current=${this.active ? 'page' : A}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+      >
+        ${this.__renderItemContent()}
+      </button>`;
+        }
+        return b `<a
+      id="item"
+      class=${e$3(cssClasses)}
+      href=${this.href}
+      target=${this.target}
+      aria-current=${this.active ? 'page' : A}
+      aria-disabled=${`${this.disabled}`}
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+    >
+      ${this.__renderItemContent()}
+    </a>`;
+    }
+}
+_NavigationRailItem_id = new WeakMap();
+NavigationRailItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "collapsed", void 0);
+__decorate([
+    n({ reflect: true })
+], NavigationRailItem.prototype, "href", void 0);
+__decorate([
+    n()
+], NavigationRailItem.prototype, "target", void 0);
+__decorate([
+    n({ reflect: true })
+], NavigationRailItem.prototype, "value", void 0);
+__decorate([
+    n({ attribute: 'disabled-reason' })
+], NavigationRailItem.prototype, "disabledReason", void 0);
+__decorate([
+    n({ type: Number })
+], NavigationRailItem.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], NavigationRailItem.prototype, "_isPressed", void 0);
+__decorate([
+    r()
+], NavigationRailItem.prototype, "_hasLabel", void 0);
+__decorate([
+    r()
+], NavigationRailItem.prototype, "_hasActiveIcon", void 0);
+__decorate([
+    e$4('.item-element')
+], NavigationRailItem.prototype, "itemElement", void 0);
+
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @overview
+ * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
+ * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
+ *
+ * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
+ * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
+ * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon">home</wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">search</wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">settings</wc-icon>
+ *     Settings
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+class NavigationRail extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Vertical alignment of items within the rail.
+         * - `"top"`: Items align to the top.
+         * - `"center"`: Items are centered (default).
+         * - `"bottom"`: Items align to the bottom.
+         */
+        this.alignment = 'center';
+        /**
+         * Display mode of the navigation rail.
+         * - `"expanded"`: shows labels.
+         * - `"collapsed"`: hides labels.
+         */
+        this.mode = 'expanded';
+        /**
+         * Whether to show a divider between the header and items sections.
+         */
+        this.showDivider = false;
+        this._handleItemClick = (event) => {
+            const target = event.target;
+            const item = target.closest('wc-navigation-rail-item');
+            if (!item || item.disabled)
+                return;
+            // Deactivate all items and activate the clicked one
+            for (const railItem of this._getItems()) {
+                railItem.active = railItem === item;
+            }
+            this.dispatchEvent(new CustomEvent('nav-change', {
+                detail: {
+                    value: item.value,
+                    item,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._syncItemMode = () => {
+            const isCollapsed = this.mode === 'collapsed';
+            for (const railItem of this._getItems()) {
+                railItem.collapsed = isCollapsed;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleItemClick);
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._handleItemClick);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this._syncItemMode();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('mode')) {
+            this._syncItemMode();
+        }
+    }
+    _getItems() {
+        return Array.from(this.querySelectorAll('wc-navigation-rail-item'));
+    }
+    render() {
+        const cssClasses = {
+            rail: true,
+            [`align-${this.alignment}`]: true,
+            [`mode-${this.mode}`]: true,
+        };
+        return b `
+      <div class=${e$3(cssClasses)}>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        ${this.showDivider ? b `<wc-divider></wc-divider>` : ''}
+        <nav class="items" role="presentation">
+          <slot @slotchange=${this._syncItemMode}></slot>
+        </nav>
+      </div>
+    `;
+    }
+}
+NavigationRail.styles = [css_248z$1];
+NavigationRail.Item = NavigationRailItem;
+__decorate([
+    n({ reflect: true })
+], NavigationRail.prototype, "alignment", void 0);
+__decorate([
+    n({ reflect: true })
+], NavigationRail.prototype, "mode", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-divider' })
+], NavigationRail.prototype, "showDivider", void 0);
+
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, SubMenu as G, Switch as H, Icon as I, TabGroup as J, TabPanel as K, LinearProgress as L, Menu as M, NavigationRail as N, Table as O, Pagination as P, Tabs as Q, Radio as R, SegmentedButton as S, Tab as T, Tag as U, Textarea as V, TimePicker as W, Tooltip as X, UrlField as Y, 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, NavigationRailItem as n, NumberField as o, Ripple as p, SegmentedButtonGroup as q, Select as r, SelectOptionElement as s, SidebarMenu as t, SidebarMenuItem as u, SidebarSubMenu as v, Skeleton as w, Slider as x, Snackbar as y, Spinner as z };
+//# sourceMappingURL=navigation-rail-Lxetd5-Z.js.map