@redvars/peacock 3.6.2 → 3.7.0

package/dist/{navigation-rail-CD7IrqbN.js → navigation-rail-CM_svs5_.js}

@@ -2,12 +2,12 @@ import { a as i, _ as __decorate, i as i$1, b, A, c as __classPrivateFieldGet, w
 import { n } from './property-1psGvXOq.js';
 import { e as e$1 } from './class-map-YU7g0o3B.js';
 import { r } from './state-DwbEjqVk.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.js';
 import { a as e, e as e$2 } from './query-QBcUV-L_.js';
-import { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
-import { B as BaseButton, o as o$1, s as spread, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
+import { N as NativeHyperlinkMixin, i as isLink, t as throttle } from './NativeHyperlinkMixin-DrYXyfMQ.js';
+import { N as NativeButtonMixin, D as DISABLED_REASON_ID, o as o$1, s as spread } from './ButtonConstants-D06bY4uy.js';
+import { i as isActivationClick, d as dispatchActivationClick, r as redispatchEvent } from './dispatch-event-utils-CuEqjlPT.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 { B as BaseInput } from './BaseInput-14YmcfK7.js';
 import { F as FloatingController } from './popover-DUPmMVWS.js';
 import { i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DOcaw4Yq.js';
@@ -20,7 +20,7 @@ import { o as o$4 } from './unsafe-html-BsGUjx94.js';
  * SPDX-License-Identifier: BSD-3-Clause
  */function o(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))}})}}
 
-var css_248z$U = i`* {
+var css_248z$V = i`* {
   box-sizing: border-box;
 }
 
@@ -111,7 +111,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$U];
+Avatar.styles = [css_248z$V];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -119,7 +119,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$T = i`* {
+var css_248z$U = i`* {
   box-sizing: border-box;
 }
 
@@ -191,12 +191,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$T];
+Badge.styles = [css_248z$U];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$S = i`* {
+var css_248z$T = i`* {
   box-sizing: border-box;
 }
 
@@ -305,7 +305,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$S];
+Divider.styles = [css_248z$T];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -313,7 +313,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$R = i`* {
+var css_248z$S = i`* {
   box-sizing: border-box;
 }
 
@@ -394,9 +394,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$R];
+Elevation.styles = [css_248z$S];
 
-var css_248z$Q = i`* {
+var css_248z$R = i`* {
   box-sizing: border-box;
 }
 
@@ -516,7 +516,6 @@ var css_248z$Q = i`* {
  * @tag wc-segmented-button
  * @rawTag segmented-button
  * @summary An individual segment within a segmented button group.
- * @parentRawTag segmented-button-group
  * @overview
  * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
  *
@@ -649,7 +648,7 @@ class SegmentedButton extends i$1 {
     `;
     }
 }
-SegmentedButton.styles = [css_248z$Q];
+SegmentedButton.styles = [css_248z$R];
 __decorate([
     n({ type: String, reflect: true })
 ], SegmentedButton.prototype, "value", void 0);
@@ -669,7 +668,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$P = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -781,7 +780,7 @@ class SegmentedButtonGroup extends i$1 {
     `;
     }
 }
-SegmentedButtonGroup.styles = [css_248z$P];
+SegmentedButtonGroup.styles = [css_248z$Q];
 SegmentedButtonGroup.SegmentedButton = SegmentedButton;
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'multi-select' })
@@ -790,7 +789,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$O = i`:host {
+var css_248z$P = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -812,6 +811,126 @@ var css_248z$O = i`:host {
   outline: 3px solid var(--focus-ring-color);
 }`;
 
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController');
+let FOR_ATTRIBUTE_OBSERVER;
+{
+    /**
+     * A global `MutationObserver` that reacts to `for` attribute changes on
+     * `Attachable` elements. If the `for` attribute changes, the controller will
+     * re-attach to the new referenced element.
+     */
+    FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+        for (const record of records) {
+            // When a control's `for` attribute changes, inform its
+            // `AttachableController` to update to a new control.
+            record.target[ATTACHABLE_CONTROLLER]?.hostConnected();
+        }
+    });
+}
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+    get htmlFor() {
+        return this.host.getAttribute('for');
+    }
+    set htmlFor(htmlFor) {
+        if (htmlFor === null) {
+            this.host.removeAttribute('for');
+        }
+        else {
+            this.host.setAttribute('for', htmlFor);
+        }
+    }
+    get control() {
+        if (this.host.hasAttribute('for')) {
+            if (!this.htmlFor || !this.host.isConnected) {
+                return null;
+            }
+            return this.host.getRootNode().querySelector(`#${this.htmlFor}`);
+        }
+        return this.currentControl || this.host.parentElement;
+    }
+    set control(control) {
+        if (control) {
+            this.attach(control);
+        }
+        else {
+            this.detach();
+        }
+    }
+    /**
+     * Creates a new controller for an `Attachable` element.
+     *
+     * @param host The `Attachable` element.
+     * @param onControlChange A callback with two parameters for the previous and
+     *     next control. An `Attachable` element may perform setup or teardown
+     *     logic whenever the control changes.
+     */
+    constructor(host, onControlChange) {
+        this.host = host;
+        this.onControlChange = onControlChange;
+        this.currentControl = null;
+        host.addController(this);
+        host[ATTACHABLE_CONTROLLER] = this;
+        FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] });
+    }
+    attach(control) {
+        if (control === this.currentControl) {
+            return;
+        }
+        this.setCurrentControl(control);
+        // When imperatively attaching, remove the `for` attribute so
+        // that the attached control is used instead of a referenced one.
+        this.host.removeAttribute('for');
+    }
+    detach() {
+        this.setCurrentControl(null);
+        // When imperatively detaching, add an empty `for=""` attribute. This will
+        // ensure the control is `null` rather than the `parentElement`.
+        this.host.setAttribute('for', '');
+    }
+    /** @private */
+    hostConnected() {
+        this.setCurrentControl(this.control);
+    }
+    /** @private */
+    hostDisconnected() {
+        this.setCurrentControl(null);
+    }
+    setCurrentControl(control) {
+        this.onControlChange(this.currentControl, control);
+        this.currentControl = control;
+    }
+}
+
+/**
+ * Events that the focus ring listens to.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown'];
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
 /**
  * @label Focus Ring
  *
@@ -822,99 +941,89 @@ var css_248z$O = i`:host {
  *
  *
  * @tags display
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
  */
 class FocusRing extends i$1 {
     constructor() {
         super(...arguments);
+        /**
+         * Makes the focus ring visible.
+         */
         this.visible = false;
-        this.for = '';
-        this.__boundFocusin = this.__focusin.bind(this);
-        this.__boundFocusout = this.__focusout.bind(this);
-        this.__boundPointerdown = this.__pointerdown.bind(this);
+        /**
+         * Makes the focus ring animate inwards instead of outwards.
+         */
+        this.inward = false;
+        this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
     }
-    render() {
-        return A;
+    get htmlFor() {
+        return this.attachableController.htmlFor;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.attach();
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
     }
-    disconnectedCallback() {
-        this.detach();
-        super.disconnectedCallback();
+    get control() {
+        return this.attachableController.control;
     }
-    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();
-        }
+    set control(control) {
+        this.attachableController.control = control;
     }
-    __focusin() {
-        const focusTarget = this.__getFocusTarget();
-        this.visible = focusTarget?.matches(':focus-visible') ?? false;
+    attach(control) {
+        this.attachableController.attach(control);
     }
-    __focusout() {
-        this.visible = false;
+    detach() {
+        this.attachableController.detach();
     }
-    __pointerdown() {
-        this.visible = false;
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
     }
-    /**
-     * 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.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;
-            }
+    /** @private */
+    handleEvent(event) {
+        if (event[HANDLED_BY_FOCUS_RING]) {
+            // This ensures the focus ring does not activate when multiple focus rings
+            // are used within a single component.
+            return;
+        }
+        switch (event.type) {
+            case 'focusin':
+                this.visible = this.control?.matches(':focus-visible') ?? false;
+                break;
+            case 'focusout':
+            case 'pointerdown':
+                this.visible = false;
+                break;
+            default:
+                return;
         }
-        return undefined;
+        // eslint-disable-next-line no-param-reassign
+        event[HANDLED_BY_FOCUS_RING] = true;
     }
-    attach() {
-        const focusTarget = this.__getFocusTarget();
-        if (focusTarget) {
-            focusTarget.addEventListener('focusin', this.__boundFocusin);
-            focusTarget.addEventListener('focusout', this.__boundFocusout);
-            focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
+    onControlChange(prev, next) {
+        for (const event of EVENTS$1) {
+            prev?.removeEventListener(event, this);
+            next?.addEventListener(event, this);
         }
     }
-    detach() {
-        const focusTarget = this.__getFocusTarget();
-        if (focusTarget) {
-            focusTarget.removeEventListener('focusin', this.__boundFocusin);
-            focusTarget.removeEventListener('focusout', this.__boundFocusout);
-            focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
+    update(changed) {
+        if (changed.has('visible')) {
+            // This logic can be removed once the `:has` selector has been introduced
+            // to Firefox. This is necessary to allow correct submenu styles.
+            this.dispatchEvent(new Event('visibility-changed'));
         }
+        super.update(changed);
     }
 }
-FocusRing.styles = [css_248z$O];
+FocusRing.styles = [css_248z$P];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
 __decorate([
-    n({ type: String })
-], FocusRing.prototype, "for", void 0);
+    n({ type: Boolean, reflect: true })
+], FocusRing.prototype, "inward", void 0);
 
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
@@ -1037,38 +1146,50 @@ class Ripple extends i$1 {
         this.rippleScale = '';
         this.initialSize = 0;
         this.state = State.INACTIVE;
+        this._boundHandleEvent = this.handleEvent.bind(this);
+        this.attachableController = new AttachableController(
+        // `LitElement` satisfies the ReactiveControllerHost & HTMLElement shape
+        // required by the controller.
+        this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
+    }
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
+    }
+    get control() {
+        return this.attachableController.control;
+    }
+    set control(control) {
+        this.attachableController.control = control;
     }
     connectedCallback() {
         super.connectedCallback();
         // Needed for VoiceOver, which will create a "group" if the element is a
         // sibling to other content.
         this.setAttribute('aria-hidden', 'true');
-        // Attach to parent
-        this.attach(this.parentElement);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.detach();
     }
     attach(control) {
-        if (!control)
-            return;
-        EVENTS.forEach(event => {
-            control.addEventListener(event, this.handleEvent.bind(this));
-        });
+        this.attachableController.attach(control);
     }
     detach() {
-        const control = this.parentElement;
-        if (!control)
-            return;
-        EVENTS.forEach(event => {
-            control.removeEventListener(event, this.handleEvent.bind(this));
-        });
+        this.attachableController.detach();
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS) {
+            prev?.removeEventListener(event, this._boundHandleEvent);
+            next?.addEventListener(event, this._boundHandleEvent);
+        }
     }
     render() {
         const classes = {
-            'hovered': this.hovered,
-            'pressed': this.pressed,
+            hovered: this.hovered,
+            pressed: this.pressed,
         };
         return b `<div class="surface ${e$1(classes)}"></div>`;
     }
@@ -1121,7 +1242,7 @@ class Ripple extends i$1 {
         }
         // Wait for a hold after touch delay
         this.state = State.TOUCH_DELAY;
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             setTimeout(resolve, TOUCH_DELAY_MS);
         });
         if (this.state !== State.TOUCH_DELAY) {
@@ -1233,7 +1354,7 @@ class Ripple extends i$1 {
             this.pressed = false;
             return;
         }
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
         });
         if (this.growAnimation !== animation) {
@@ -1349,13 +1470,16 @@ Ripple.styles = i `
       &::before {
         background-color: var(--ripple-pressed-color, var(--color-on-surface));
         inset: 0;
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
       }
 
       &::after {
         background: radial-gradient(
           closest-side,
-          var(--ripple-pressed-color, var(--color-on-surface)) max(calc(100% - 70px), 65%),
+          var(--ripple-pressed-color, var(--color-on-surface))
+            max(calc(100% - 70px), 65%),
           transparent 100%
         );
         transform-origin: center center;
@@ -1385,7 +1509,7 @@ __decorate([
     e$2('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$N = i`* {
+var css_248z$O = i`* {
   box-sizing: border-box;
 }
 
@@ -1518,7 +1642,7 @@ var css_248z$N = i`* {
   border-block-start: 1px solid var(--color-outline-variant);
 }
 .expansion-panel.open .content-inner {
-  padding: 0 var(--spacing-300) var(--spacing-200);
+  padding: var(--spacing-200) var(--spacing-300);
 }
 .expansion-panel.open .toggle-icon {
   transform: rotate(180deg);
@@ -1542,7 +1666,6 @@ var _AccordionItem_id;
  * @tag wc-accordion-item
  * @rawTag accordion-item
  * @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.
@@ -1681,7 +1804,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$N];
+AccordionItem.styles = [css_248z$O];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1704,7 +1827,7 @@ __decorate([
     e$2('.header-button')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$M = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -1832,7 +1955,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$M];
+Accordion.styles = [css_248z$N];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -1844,7 +1967,7 @@ __decorate([
     o({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$L = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -1853,9 +1976,7 @@ var css_248z$L = i`* {
 }
 
 :host {
-  display: inline-block;
-  border-radius: inherit;
-  corner-shape: inherit;
+  display: inline;
   color: var(--color-primary);
 }
 
@@ -1873,12 +1994,6 @@ var css_248z$L = i`* {
 :host(.inherit) .link {
   color: inherit;
   text-decoration: none !important;
-}
-
-:host(.with-icon) .link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
 }`;
 
 /**
@@ -1894,23 +2009,25 @@ var css_248z$L = i`* {
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-class Link extends BaseHyperlinkMixin(i$1) {
+class Link extends NativeHyperlinkMixin(i$1) {
     render() {
         return b `<a
       class=${e$1({
             link: true,
         })}
       href=${this.href}
+      ?download=${this.download}
       target=${this.target}
+      ?rel=${this.rel}
       ?tabindex=${this.parentElement?.tabIndex}
     >
       <slot></slot>
     </a>`;
     }
 }
-Link.styles = [css_248z$L];
+Link.styles = [css_248z$M];
 
-var css_248z$K = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -2047,7 +2164,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$J = i`:host([color=default]) {
+var css_248z$K = 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);
@@ -2113,7 +2230,7 @@ var css_248z$J = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$I = i`.tag {
+var css_248z$J = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2212,7 +2329,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$K, css_248z$J, css_248z$I];
+Tag.styles = [css_248z$L, css_248z$K, css_248z$J];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -2226,7 +2343,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$H = i`* {
+var css_248z$I = i`* {
   box-sizing: border-box;
 }
 
@@ -2235,7 +2352,8 @@ var css_248z$H = i`* {
 }
 
 :host {
-  display: inline-block;
+  position: relative;
+  display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
   --chip-outline-color: var(--color-outline-variant);
@@ -2258,12 +2376,12 @@ var css_248z$H = i`* {
 }
 
 .chip {
-  position: relative;
   display: inline-flex;
   align-items: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
   width: 100%;
   cursor: pointer;
+  z-index: 0;
 }
 .chip .tag-content {
   position: relative;
@@ -2315,17 +2433,6 @@ var css_248z$H = i`* {
   --icon-size: 1rem;
   --icon-color: var(--color-primary);
 }
-.chip .focus-ring {
-  z-index: 2;
-  display: block;
-  --focus-ring-container-shape: var(--chip-container-shape);
-}
-.chip .ripple {
-  display: block;
-  border-radius: var(--chip-container-shape);
-  --ripple-state-opacity: var(--_chip-state-opacity, 0);
-  --ripple-pressed-color: var(--_chip-state-color);
-}
 .chip.disabled {
   cursor: not-allowed;
 }
@@ -2341,14 +2448,27 @@ var css_248z$H = i`* {
 .chip.icon-slot-has-content .icon-slot-container, .chip.selected .icon-slot-container {
   padding-inline: calc(var(--chip-container-padding) / 2);
 }
-.chip {
-  /**
-   * Tag background layers
-   */
+
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  display: block;
+  --focus-ring-container-shape: var(--chip-container-shape);
+}
+
+.ripple {
+  display: block;
+  border-radius: var(--chip-container-shape);
+  --ripple-state-opacity: var(--_chip-state-opacity, 0);
+  --ripple-pressed-color: var(--_chip-state-color);
 }
-.chip .background {
+
+.background {
   display: block;
   position: absolute;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
@@ -2356,49 +2476,56 @@ var css_248z$H = i`* {
   background: var(--_chip-container-color);
   pointer-events: none;
 }
-.chip .outline {
+
+.outline {
   z-index: 0;
   display: block;
   position: absolute;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--chip-container-shape);
   border: 1px solid var(--chip-outline-color);
 }
-.chip .elevation {
+
+.elevation {
   --elevation-level: 0;
   transition-duration: 280ms;
   --elevation-container-shape: var(--chip-container-shape);
 }
 
-/** Color state management */
-.chip {
+/* Color/state management */
+:host {
   --_chip-container-color: var(--chip-container-color);
   --_chip-text-color: var(--chip-label-text-color);
   --_chip-state-color: var(--_chip-text-color);
 }
-.chip:hover {
+
+:host:hover {
   --_chip-state-opacity: 0.08;
 }
-.chip.pressed {
+
+:host([pressed]) {
   --_chip-state-opacity: 0.12;
 }
-.chip.selected {
+
+:host([selected]) {
   --_chip-container-color: var(--color-secondary-container);
   --_chip-text-color: var(--color-on-secondary-container);
 }
-.chip.disabled {
+
+:host([disabled]) {
   --_chip-container-color: var(--color-on-surface);
   --_chip-container-opacity: 0.1;
   --_chip-text-color: var(--color-on-surface);
   --_chip-text-opacity: 0.38;
 }
-.chip.disabled .ripple {
+:host([disabled]) .ripple {
   display: none;
 }`;
 
-var css_248z$G = i`.tag {
+var css_248z$H = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2468,13 +2595,86 @@ var css_248z$G = i`.tag {
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-class Chip extends BaseButton {
+class Chip extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         /** If true, the tag will have a close icon. */
         this.dismissible = false;
         this._hasIconSlotContent = false;
-        this._isPressed = false;
+        this.skeleton = false;
+        this.toggle = false;
+        this.selected = false;
+        /**
+         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+         */
+        this.throttleDelay = 200;
+        this.pressed = false;
+        this.__handlePress = (event) => {
+            if (this.disabled || this.skeleton || this.softDisabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.pressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.pressed = true;
+            }
+            else {
+                this.pressed = false;
+            }
+        };
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.buttonElement) {
+                return;
+            }
+            if (this.toggle) {
+                this.selected = !this.selected;
+            }
+            this.focus();
+            dispatchActivationClick(this.buttonElement);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+        window.addEventListener('mouseup', this.__handlePress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.__handlePress);
+        this.removeEventListener('click', this.__dispatchClickWithThrottle);
+        super.disconnectedCallback();
+    }
+    __renderDisabledReason(softDisabled) {
+        if (softDisabled)
+            return b `<div
+        id=${DISABLED_REASON_ID}
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderTooltip() {
+        if (this.tooltip) {
+            return b `<wc-tooltip class="tooltip"  for="button"
+        >${this.tooltip}</wc-tooltip
+      >`;
+        }
+        return A;
     }
     focus() {
         this.buttonElement?.focus();
@@ -2512,63 +2712,63 @@ class Chip extends BaseButton {
     `;
     }
     render() {
+        return b `
+      <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>
+      <wc-ripple class="ripple" for="button"></wc-ripple>
+
+      ${this.renderChipElement()} ${this.__renderTooltip()}
+    `;
+    }
+    renderChipElement() {
         const cssClasses = {
             chip: true,
             button: true,
             selected: this.selected,
             dismissible: this.dismissible,
-            pressed: this._isPressed,
+            pressed: this.pressed,
             'icon-slot-has-content': this._hasIconSlotContent,
         };
-        if (!this.__isLink()) {
+        if (!isLink(this)) {
             return b `<button
-            class=${e$1(cssClasses)}
-            id="button"
-            type=${this.htmlType}
-            @click=${this.__dispatchClickWithThrottle}
-            @mousedown=${this.__handlePress}
-            @keydown=${this.__handlePress}
-            @keyup=${this.__handlePress}
-  
-            aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-            ?aria-disabled=${this.softDisabled}
-  
-            ?disabled=${this.disabled}
-            ${spread(this.configAria)}
-          >
-            ${this.renderChipContent()}
-          </button>`;
+        class=${e$1(cssClasses)}
+        id="button"
+        type=${this.htmlType}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        aria-describedby=${o$1(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+        ?disabled=${this.disabled}
+        ${spread(this.configAria)}
+      >
+        ${this.renderChipContent()}
+      </button>`;
         }
         return b `<a
-          class=${e$1(cssClasses)}
-          id="button"
-          href=${this.href}
-          target=${this.target}
-          tabindex=${this.disabled ? '-1' : '0'}
-          
-          @click=${this.__dispatchClick}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          role="button"
-  
-          aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-  
-          ${spread(this.configAria)}
-        >
-          ${this.renderChipContent()}
-        </a>`;
-    }
-    renderChipContent() {
-        return b `
-      <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>
-      <wc-ripple class="ripple"></wc-ripple>
+      class=${e$1(cssClasses)}
+      id="button"
+      href=${this.href}
+      target=${this.target}
+      tabindex=${this.disabled ? '-1' : '0'}
+      @click=${this.__dispatchClick}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      aria-describedby=${o$1(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+      ?aria-disabled=${this.softDisabled}
+      ${spread(this.configAria)}
+    >
+      ${this.renderChipContent()}
+    </a>`;
+    }
+    renderChipContent() {
+        return b `
       <div class="tag-content">
-
         <div class="icon-slot-container">
           ${this.selected
             ? b `<wc-icon class="selected-icon" name="check"></wc-icon>`
@@ -2576,8 +2776,7 @@ class Chip extends BaseButton {
         </div>
         <div class="label-container">
           <slot></slot>
-        </div> 
-        
+        </div>
         ${this._renderCloseButton()}
       </div>
     `;
@@ -2585,7 +2784,7 @@ class Chip extends BaseButton {
 }
 // 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$H, css_248z$G];
+Chip.styles = [css_248z$I, css_248z$H];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2596,10 +2795,28 @@ __decorate([
     r()
 ], Chip.prototype, "_hasIconSlotContent", void 0);
 __decorate([
-    r()
-], Chip.prototype, "_isPressed", void 0);
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "toggle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "selected", void 0);
+__decorate([
+    n()
+], Chip.prototype, "throttleDelay", void 0);
+__decorate([
+    n()
+], Chip.prototype, "tooltip", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "pressed", void 0);
+__decorate([
+    e$2('.button')
+], Chip.prototype, "buttonElement", void 0);
 
-var css_248z$F = i`* {
+var css_248z$G = i`* {
   box-sizing: border-box;
 }
 
@@ -2637,9 +2854,9 @@ class ChipSet extends i$1 {
         return b `<slot></slot>`;
     }
 }
-ChipSet.styles = [css_248z$F];
+ChipSet.styles = [css_248z$G];
 
-var css_248z$E = i`:host {
+var css_248z$F = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2845,9 +3062,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$E];
+LinearProgress.styles = [css_248z$F];
 
-var css_248z$D = i`:host {
+var css_248z$E = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -3010,9 +3227,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$D];
+CircularProgress.styles = [css_248z$E];
 
-var css_248z$C = i`* {
+var css_248z$D = i`* {
   box-sizing: border-box;
 }
 
@@ -3116,12 +3333,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$C];
+Skeleton.styles = [css_248z$D];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$B = i`* {
+var css_248z$C = i`* {
   box-sizing: border-box;
 }
 
@@ -3191,16 +3408,23 @@ class Input extends BaseInput {
          * validation errors only display in response to user interactions.
          */
         this.dirty = false;
+        this.__handleFocusChange = (event) => {
+            this.focused = event.type === 'focus';
+        };
+    }
+    async focus() {
+        await Promise.all([
+            customElements.whenDefined('wc-input'),
+            customElements.whenDefined('wc-field'),
+        ]);
+        await this.updateComplete;
+        this.inputElement?.focus();
     }
     connectedCallback() {
         super.connectedCallback();
         this.handleInitialAttributes();
     }
     handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
         Array.from(this.attributes).forEach(attr => {
             if (attr.name.startsWith('aria-')) {
                 this.configAria[attr.name] = attr.value;
@@ -3212,19 +3436,6 @@ class Input extends BaseInput {
         this.dirty = true;
         this.value = event.target.value;
     }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
     __redispatchEvent(event) {
         redispatchEvent(this, event);
     }
@@ -3257,7 +3468,6 @@ class Input extends BaseInput {
           placeholder=${this.placeholder}
           autocomplete=${this.autocomplete}
           .value=${this.value}
-          ?tabindex=${this.tabindex}
           ?readonly=${this.readonly}
           ?required=${this.required}
           ?disabled=${this.disabled}
@@ -3270,7 +3480,7 @@ class Input extends BaseInput {
 
         ${this.type === 'password'
             ? b `
-              <pc-tooltip
+              <wc-tooltip
                 slot="field-end"
                 content=${this.passwordVisible
                 ? 'Hide password'
@@ -3284,10 +3494,12 @@ class Input extends BaseInput {
             }}
                 >
                   <wc-icon
-                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                    name=${this.passwordVisible
+                ? 'visibility_off'
+                : 'visibility'}
                   ></wc-icon>
                 </wc-icon-button>
-              </pc-tooltip>
+              </wc-tooltip>
             `
             : A}
 
@@ -3296,7 +3508,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$B];
+Input.styles = [css_248z$C];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3355,7 +3567,7 @@ __decorate([
     e$2('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$A = i`* {
+var css_248z$B = i`* {
   box-sizing: border-box;
 }
 
@@ -3588,7 +3800,7 @@ class UrlField extends BaseInput {
     `;
     }
 }
-UrlField.styles = [css_248z$A];
+UrlField.styles = [css_248z$B];
 __decorate([
     n({ type: String })
 ], UrlField.prototype, "value", void 0);
@@ -3638,7 +3850,7 @@ __decorate([
     e$2('.url-input')
 ], UrlField.prototype, "inputElement", void 0);
 
-var css_248z$z = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -4006,7 +4218,11 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$z];
+Field.shadowRootOptions = {
+    ...i$1.shadowRootOptions,
+    delegatesFocus: true,
+};
+Field.styles = [css_248z$A];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -4062,7 +4278,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$y = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -4261,7 +4477,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$y];
+NumberField.styles = [css_248z$z];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -4323,7 +4539,7 @@ __decorate([
     e$2('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$x = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -4490,7 +4706,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$x];
+DatePicker.styles = [css_248z$y];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4546,7 +4762,7 @@ __decorate([
     e$2('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$w = i`* {
+var css_248z$x = i`* {
   box-sizing: border-box;
 }
 
@@ -4713,7 +4929,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$w];
+TimePicker.styles = [css_248z$x];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4769,7 +4985,7 @@ __decorate([
     e$2('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$v = i`* {
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -4929,7 +5145,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$v];
+Textarea.styles = [css_248z$w];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4988,7 +5204,7 @@ __decorate([
     e$2('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$u = i`* {
+var css_248z$v = i`* {
   box-sizing: border-box;
 }
 
@@ -5329,7 +5545,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$u];
+Switch.styles = [css_248z$v];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -5373,7 +5589,7 @@ __decorate([
     e$2('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$t = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -5831,7 +6047,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$t];
+Checkbox.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5878,7 +6094,7 @@ __decorate([
     e$2('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$s = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -5965,9 +6181,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$s];
+Spinner.styles = [css_248z$t];
 
-var css_248z$r = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -6085,12 +6301,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$r];
+Container.styles = [css_248z$s];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$q = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -6152,6 +6368,7 @@ var css_248z$q = i`* {
 
 :host(.content-center) .content {
   align-items: center;
+  text-align: center;
 }
 
 @container emptystate (min-width: 672px) {
@@ -6253,7 +6470,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$q];
+EmptyState.styles = [css_248z$r];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -6267,7 +6484,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$p = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -6279,14 +6496,12 @@ var css_248z$p = i`* {
   position: absolute;
   top: 0;
   left: 0;
-}
-:host(:not([preview])) .tooltip {
   pointer-events: none;
   transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
   transform: scale(0);
   opacity: 0;
 }
-:host(:not([preview])) .tooltip.open {
+:host(:not([preview])):host([open]) {
   pointer-events: auto;
   transform: scale(1);
   opacity: 1;
@@ -6467,7 +6682,6 @@ class Tooltip extends i$1 {
         return b ` <div
       class=${e$1({
             tooltip: true,
-            open: this.open,
             [`variant-${this.variant}`]: true,
         })}
       id="tooltip"
@@ -6505,7 +6719,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$p];
+Tooltip.styles = [css_248z$q];
 __decorate([
     n()
 ], Tooltip.prototype, "content", void 0);
@@ -6525,7 +6739,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "preview", void 0);
 
-var css_248z$o = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -6561,7 +6775,7 @@ ol {
   pointer-events: none;
 }`;
 
-var css_248z$n = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -6623,7 +6837,6 @@ var css_248z$n = i`* {
  * @label Breadcrumb Item
  * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
- * @parentRawTag breadcrumb
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
  * @tags navigation
  *
@@ -6691,7 +6904,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$n];
+BreadcrumbItem.styles = [css_248z$o];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -6744,13 +6957,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$o];
+Breadcrumb.styles = [css_248z$p];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$m = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -6858,7 +7071,7 @@ var css_248z$m = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$l = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -6867,113 +7080,42 @@ var css_248z$l = i`* {
 }
 
 :host {
-  padding-inline: var(--spacing-050);
   outline: none;
+  --menu-item-container-shape-start-start: var(--shape-corner-extra-small);
+  --menu-item-container-shape-start-end: var(--shape-corner-extra-small);
+  --menu-item-container-shape-end-start: var(--shape-corner-extra-small);
+  --menu-item-container-shape-end-end: var(--shape-corner-extra-small);
 }
 
 .menu-item {
-  position: relative;
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  padding-inline: 0.75rem;
-  outline: 0;
-  text-decoration: none;
-  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;
-}
-.menu-item .menu-item-content {
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  width: 100%;
-  gap: var(--spacing-100);
-  color: var(--_label-text-color);
-  opacity: var(--_label-text-opacity, 1);
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
-}
-.menu-item .menu-item-content .slot-container {
-  flex: 1;
-}
-.menu-item .background {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
   width: 100%;
-  height: 100%;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  pointer-events: none;
-}
-.menu-item {
-  /*
-   Background layers
-  */
-}
-.menu-item .focus-ring {
-  z-index: 2;
-  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
-}
-.menu-item .ripple {
-  --ripple-state-opacity: var(--_container-state-opacity, 0);
-  --ripple-pressed-color: var(--_container-state-color);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-}
-
-.menu-item {
-  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-corner-shape-variant: none;
-  --_label-text-color: var(--menu-item-label-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.menu-item:hover:not(:where(.disabled, .selected)) {
-  --_container-state-opacity: 0.08;
-}
-.menu-item.pressed:not(:where(.disabled)) {
-  --_container-state-opacity: 0.12;
-}
-.menu-item.selected {
-  --_container-color: var(--menu-item-container-selected-color);
-  --_label-text-color: var(--menu-item-label-selected-color);
-  --_container-shape-start-start: var(--shape-corner-large);
-  --_container-shape-start-end: var(--shape-corner-large);
-  --_container-shape-end-start: var(--shape-corner-large);
-  --_container-shape-end-end: var(--shape-corner-large);
-  --_container-corner-shape-variant: none;
-}
-.menu-item.disabled {
-  cursor: not-allowed;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.menu-item.disabled .ripple {
-  display: none;
+  --item-height: 3rem;
+  --item-container-shape-start-start: var(--menu-item-container-shape-start-start);
+  --item-container-shape-start-end: var(--menu-item-container-shape-start-end);
+  --item-container-shape-end-start: var(--menu-item-container-shape-end-start);
+  --item-container-shape-end-end: var(--menu-item-container-shape-end-end);
+  --item-container-shape-variant: none;
+  --item-label-font-family: var(--typography-label-large-font-family);
+  --item-label-font-size: var(--typography-label-large-font-size);
+  --item-label-font-weight: var(--typography-label-large-font-weight);
+  --item-label-line-height: var(--typography-label-large-line-height);
+  --item-label-letter-spacing: var(--typography-label-large-letter-spacing);
+  --item-label-text-color: var(--menu-item-label-color);
+  --item-leading-trailing-color: var(--menu-item-label-color);
+  --item-supporting-text-color: var(--menu-item-label-color);
+  --item-container-selected-color: var(--menu-item-container-selected-color);
+  --item-label-text-selected-color: var(--menu-item-label-selected-color);
+  --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+}
+
+:host([selected]) {
+  --menu-item-container-shape-start-start: var(--shape-corner-large);
+  --menu-item-container-shape-start-end: var(--shape-corner-large);
+  --menu-item-container-shape-end-start: var(--shape-corner-large);
+  --menu-item-container-shape-end-end: var(--shape-corner-large);
 }`;
 
-var css_248z$k = i`:host-context([variant=standard]) {
+var css_248z$l = 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);
@@ -6989,7 +7131,6 @@ var css_248z$k = i`:host-context([variant=standard]) {
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -6998,7 +7139,7 @@ var css_248z$k = i`:host-context([variant=standard]) {
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+class MenuItem extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         this.value = '';
@@ -7007,144 +7148,108 @@ class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         this.hasSubmenu = false;
         this.submenuOpen = false;
         this.variant = 'standard';
-        /**
-           * States
-           */
-        this.isPressed = false;
-        this.__dispatchClickWithThrottle = event => {
-            this.__dispatchClick(event);
-        };
-        this.__dispatchClick = (event) => {
-            // If the button is soft-disabled or a disabled link, we need to explicitly
-            // prevent the click from propagating to other event listeners as well as
-            // prevent the default action.
-            if (this.softDisabled || (this.disabled && this.href)) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                return;
-            }
-            if (!isActivationClick(event) || !this.itemElement) {
-                return;
-            }
-            this.focus();
-            dispatchActivationClick(this.itemElement);
-        };
-        this.__handleKeyDown = (event) => {
-            this.__handlePress(event);
-            if (this.disabled || this.softDisabled || !this.itemElement) {
-                return;
-            }
-            if (event.key === ' ') {
-                event.preventDefault();
-                this.itemElement.click();
-                return;
-            }
-            if (event.key === 'Enter' && !this.__isLink()) {
-                event.preventDefault();
-                this.itemElement.click();
-            }
-        };
-        this.__handlePress = (event) => {
-            if (this.disabled || this.softDisabled)
-                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;
-            }
-        };
+        this._contentObserver = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+        this._rovingTabIndex = -1;
     }
     connectedCallback() {
         // eslint-disable-next-line wc/guard-super-call
         super.connectedCallback();
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'menuitem');
-        }
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
+        this._contentObserver.observe(this, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
     }
     disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
+        this._contentObserver.disconnect();
         super.disconnectedCallback();
     }
+    get tabIndex() {
+        return this._rovingTabIndex;
+    }
+    set tabIndex(value) {
+        this._rovingTabIndex = value;
+        this.requestUpdate();
+    }
     focus() {
         this.itemElement?.focus();
     }
     blur() {
         this.itemElement?.blur();
     }
+    _hasNamedSlot(...names) {
+        return names.some(name => Array.from(this.children).some(child => child.getAttribute('slot') === name));
+    }
+    _hasDefaultSlot() {
+        return Array.from(this.childNodes).some(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return Boolean(node.textContent?.trim());
+            }
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
     render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            'menu-item': true,
-            disabled: this.disabled,
-            selected: this.selected,
-            pressed: this.isPressed,
-        };
         const controls = this.getAttribute('aria-controls');
-        if (isLink) {
-            return b `<a
+        return b `
+      <wc-item
         id="item"
-        class=${e$1(cssClasses)}
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handleKeyDown}
-        @keyup=${this.__handlePress}
-
-        aria-disabled=${String(this.disabled)}
+        class="menu-item"
+        role="menuitem"
+        tabindex=${String(this.tabIndex)}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        .softDisabled=${this.softDisabled}
+        .htmlType=${this.htmlType}
+        .href=${this.href}
+        .target=${this.target}
+        .rel=${this.rel}
+        .download=${this.download}
         aria-haspopup=${this.hasSubmenu ? 'menu' : A}
-        aria-controls=${this.hasSubmenu && controls ? controls : A}
-        aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : A}
+        aria-controls=${o$1(this.hasSubmenu && controls ? controls : undefined)}
+        aria-expanded=${o$1(this.hasSubmenu ? String(this.submenuOpen) : undefined)}
       >
         ${this.renderContent()}
-      </a> `;
-        }
-        return b `<div
-      id="item"
-      class=${e$1(cssClasses)}
-      tabindex=${this.disabled ? '-1' : '0'}
-
-      @click=${this.__dispatchClick}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handleKeyDown}
-      @keyup=${this.__handlePress}
-
-      aria-disabled=${String(this.disabled)}
-      aria-haspopup=${this.hasSubmenu ? 'menu' : A}
-      aria-controls=${this.hasSubmenu && controls ? controls : A}
-      aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : A}
-    >
-      ${this.renderContent()}
-    </div>`;
+      </wc-item>
+    `;
     }
     renderContent() {
+        const hasStart = this._hasNamedSlot('start');
+        const hasOverline = this._hasNamedSlot('overline');
+        const hasHeadline = this._hasNamedSlot('headline');
+        const hasDefault = this._hasDefaultSlot();
+        const hasSupportingText = this._hasNamedSlot('supporting-text');
+        const hasTrailingSupportingText = this._hasNamedSlot('trailing-supporting-text');
+        const hasEnd = this._hasNamedSlot('end');
         return b `
-      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
-      <div class="background"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-
-      <div class="menu-item-content" data-variant=${this.variant}>
-        <slot name="leading-icon"></slot>
-        <div class="slot-container">
-          <slot></slot>
-        </div>
-        <slot name="trailing-supporting-text"></slot>
-      </div>
+      ${hasStart ? b `<slot name="start" slot="start"></slot>` : A}
+      ${hasOverline
+            ? b `<slot name="overline" slot="overline"></slot>`
+            : A}
+      ${hasHeadline
+            ? b `<slot name="headline" slot="headline"></slot>`
+            : A}
+      ${hasDefault ? b `<slot></slot>` : A}
+      ${hasSupportingText
+            ? b `<slot name="supporting-text" slot="supporting-text"></slot>`
+            : A}
+      ${hasTrailingSupportingText
+            ? b `
+            <slot
+              name="trailing-supporting-text"
+              slot="trailing-supporting-text"
+            ></slot>
+          `
+            : A}
+      ${hasEnd ? b `<slot name="end" slot="end"></slot>` : A}
     `;
     }
 }
-MenuItem.styles = [css_248z$l, css_248z$k];
+MenuItem.styles = [css_248z$m, css_248z$l];
 __decorate([
     n({ type: String })
 ], MenuItem.prototype, "value", void 0);
@@ -7164,11 +7269,8 @@ __decorate([
     n({ type: String, reflect: true })
 ], MenuItem.prototype, "variant", void 0);
 __decorate([
-    e$2('#item')
+    e$2('wc-item')
 ], MenuItem.prototype, "itemElement", void 0);
-__decorate([
-    r()
-], MenuItem.prototype, "isPressed", void 0);
 
 /**
  * @label Menu
@@ -7409,8 +7511,7 @@ class Menu extends i$1 {
     }
     _isEventFromThisMenu(event) {
         const path = event.composedPath();
-        const sourceMenu = path.find(target => target instanceof HTMLElement &&
-            target.tagName.toLowerCase() === 'wc-menu');
+        const sourceMenu = path.find(target => target instanceof Menu);
         return sourceMenu === this;
     }
     _ownedItemFromEvent(event) {
@@ -7420,12 +7521,10 @@ class Menu extends i$1 {
         const path = event.composedPath();
         const ownedItems = this.items;
         for (const target of path) {
-            if (target instanceof HTMLElement) {
-                if (target.tagName.toLowerCase() === 'wc-menu-item') {
-                    const ownedItem = ownedItems.find(item => item === target);
-                    if (ownedItem) {
-                        return ownedItem;
-                    }
+            if (target instanceof MenuItem) {
+                const ownedItem = ownedItems.find(item => item === target);
+                if (ownedItem) {
+                    return ownedItem;
                 }
             }
         }
@@ -7528,7 +7627,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$m];
+Menu.styles = [css_248z$n];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -7564,7 +7663,7 @@ __decorate([
     e$2('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$j = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -7581,7 +7680,6 @@ 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 {
@@ -7627,7 +7725,7 @@ class SubMenu extends i$1 {
             menu.addEventListener('opened', this._onChildMenuOpened);
             menu.addEventListener('closed', this._onChildMenuClosed);
             menu.isSubmenu = true;
-            menu.anchorElement = item;
+            menu.anchorElement = this._resolveAnchorElement(item);
             menu.placement =
                 getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';
             menu.offset = 4;
@@ -7698,6 +7796,9 @@ class SubMenu extends i$1 {
             }, this.hoverCloseDelay);
         };
     }
+    _resolveAnchorElement(item) {
+        return item.itemElement?.itemElement ?? item.itemElement ?? item;
+    }
     get item() {
         const [candidate] = this._items ?? [];
         return candidate instanceof MenuItem ? candidate : null;
@@ -7726,7 +7827,7 @@ class SubMenu extends i$1 {
         if (!item || !menu) {
             return;
         }
-        menu.anchorElement = item;
+        menu.anchorElement = this._resolveAnchorElement(item);
         menu.isSubmenu = true;
         menu.show();
         item.hasSubmenu = true;
@@ -7759,7 +7860,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$j];
+SubMenu.styles = [css_248z$k];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -7779,7 +7880,7 @@ __decorate([
     o({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$i = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7808,7 +7909,7 @@ var css_248z$i = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$h = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -7861,84 +7962,493 @@ var css_248z$h = i`* {
 .item-element .trailing {
   margin-inline-start: auto;
 }
-.item-element .content {
-  display: block;
-  flex: 1;
-  min-inline-size: 0;
+.item-element .content {
+  display: block;
+  flex: 1;
+  min-inline-size: 0;
+}
+.item-element .background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-radius: var(--shape-corner-medium);
+  pointer-events: none;
+}
+.item-element .focus-ring {
+  --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+  z-index: 2;
+}
+.item-element .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+  border-radius: var(--shape-corner-medium);
+}
+
+.item-element {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+}
+.item-element:hover:not(:where(.disabled, .selected)) {
+  --_container-state-opacity: 0.08;
+}
+.item-element.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+.item-element.selected {
+  --_container-color: var(--color-secondary-container);
+  --_label-text-color: var(--color-on-secondary-container);
+  --_leading-trailing-color: var(--color-on-secondary-container);
+  --_container-state-color: var(--color-on-secondary-container);
+}
+.item-element.disabled {
+  cursor: not-allowed;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_leading-trailing-color: var(--color-on-surface);
+  --_container-opacity: 0.12;
+}
+.item-element.disabled .ripple {
+  display: none;
+}`;
+
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ *
+ * @summary A Material 3 list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+class ListItem extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.isPressed = false;
+        this.__dispatchClick = (event) => {
+            if (this.softDisabled || (this.disabled && this.href)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.__handleKeyDown = (event) => {
+            this.__handlePress(event);
+            if (this.disabled || this.softDisabled || !this.itemElement) {
+                return;
+            }
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.itemElement.click();
+                return;
+            }
+            if (event.key === 'Enter' && !isLink(this)) {
+                event.preventDefault();
+                this.itemElement.click();
+            }
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled || this.softDisabled)
+                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;
+            }
+        };
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            'list-item': true,
+            'item-element': true,
+            selected: this.selected,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+        };
+        if (!isLink(this)) {
+            return b `
+        <button
+          id="item"
+          class=${e$1(cssClasses)}
+          type=${this.htmlType}
+          ?disabled=${this.disabled}
+          ?aria-disabled=${this.softDisabled}
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handleKeyDown}
+          @keyup=${this.__handlePress}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+        }
+        return b `
+      <a
+        id="item"
+        class=${e$1(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+        rel=${o$1(this.rel)}
+        download=${o$1(this.download)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${String(this.disabled || this.softDisabled)}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+    }
+    renderContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="list-item-content">
+        <div class="leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="trailing">
+          <slot name="trailing"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+ListItem.styles = [css_248z$i];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItem.prototype, "selected", void 0);
+__decorate([
+    e$2('#item')
+], ListItem.prototype, "itemElement", void 0);
+__decorate([
+    r()
+], ListItem.prototype, "isPressed", void 0);
+
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A Material 3 list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+class List extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'list');
+    }
+    render() {
+        const cssClasses = {
+            list: true,
+            [`variant-${this.variant}`]: true,
+        };
+        return b `
+      <div class=${e$1(cssClasses)}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+List.styles = [css_248z$j];
+List.Item = ListItem;
+__decorate([
+    n({ type: String, reflect: true })
+], List.prototype, "variant", void 0);
+
+var css_248z$h = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  position: relative;
+  display: block;
+  padding-inline: var(--spacing-050);
+  --item-height: 3.5rem;
+  --item-container-color: transparent;
+  --item-label-text-color: var(--color-on-surface);
+  --item-leading-trailing-color: var(--color-on-surface-variant);
+  --item-supporting-text-color: var(--color-on-surface-variant);
+  --item-container-selected-color: var(--color-tertiary-container);
+  --item-label-text-selected-color: var(--color-on-tertiary-container);
+  --private-item-container-color: var(--item-container-color);
+  --private-item-label-text-color: var(--item-label-text-color);
+  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
+  --private-item-supporting-text-color: var(--item-supporting-text-color);
+  --private-item-container-state-color: var(--private-item-label-text-color);
+  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
+}
+
+/**
+ * Reset native button/link styles
+ */
+.native-button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+.native-link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+.native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
+  text-decoration: none;
+  color: inherit;
+}
+
+.item {
+  min-height: var(--item-height);
+  width: 100%;
+  background: transparent;
+  text-align: initial;
+  cursor: pointer;
+  z-index: 0;
+  font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
+  font-size: var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
+  font-weight: var(--item-label-font-weight, var(--typography-body-large-font-weight)) !important;
+  line-height: var(--item-label-line-height, var(--typography-body-large-line-height)) !important;
+  letter-spacing: var(--item-label-letter-spacing, var(--typography-body-large-letter-spacing)) !important;
+}
+.item .item-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-200);
+  min-height: var(--item-height);
+  padding-inline: var(--spacing-200);
+  color: var(--private-item-label-text-color);
+  opacity: var(--private-item-label-text-opacity, 1);
+  --icon-size: var(--item-icon-size, 1.5rem);
+  --icon-color: var(--private-item-leading-trailing-color);
+}
+.item .start,
+.item .end {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--private-item-leading-trailing-color);
+}
+.item .end {
+  margin-inline-start: auto;
+}
+.item .content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.125rem;
+  min-inline-size: 0;
+}
+.item .headline-row {
+  display: flex;
+  min-inline-size: 0;
+}
+.item .headline,
+.item .overline,
+.item .supporting-text,
+.item .trailing-supporting-text {
+  min-inline-size: 0;
+}
+.item .headline {
+  flex: 1;
+  color: var(--private-item-label-text-color);
+}
+.item .overline,
+.item .supporting-text,
+.item .trailing-supporting-text {
+  color: var(--private-item-supporting-text-color);
+}
+.item .overline {
+  font-family: var(--typography-label-small-font-family) !important;
+  font-size: var(--typography-label-small-font-size) !important;
+  font-weight: var(--typography-label-small-font-weight) !important;
+  line-height: var(--typography-label-small-line-height) !important;
+  letter-spacing: var(--typography-label-small-letter-spacing) !important;
+}
+.item .supporting-text,
+.item .trailing-supporting-text {
+  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;
+}
+.item .trailing-supporting-text {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--private-item-supporting-text-color);
 }
-.item-element .background {
+
+/*
+  Background layers
+ */
+.background {
   position: absolute;
   inset: 0;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-radius: var(--shape-corner-medium);
+  background-color: var(--private-item-container-color);
+  opacity: var(--private-item-container-opacity, 1);
   pointer-events: none;
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
 }
-.item-element .focus-ring {
-  --focus-ring-container-shape-start-start: var(--shape-corner-medium);
-  --focus-ring-container-shape-start-end: var(--shape-corner-medium);
-  --focus-ring-container-shape-end-start: var(--shape-corner-medium);
-  --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+
+.focus-ring {
   z-index: 2;
-}
-.item-element .ripple {
-  --ripple-state-opacity: var(--_container-state-opacity, 0);
-  --ripple-pressed-color: var(--_container-state-color);
-  border-radius: var(--shape-corner-medium);
+  --focus-ring-container-shape-start-start: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-start-end: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-start: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-end: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-variant: var(--private-item-container-shape-variant);
 }
 
-.item-element {
-  --_container-color: transparent;
-  --_label-text-color: var(--color-on-surface);
-  --_leading-trailing-color: var(--color-on-surface-variant);
-  --_container-state-color: var(--color-on-surface);
+.ripple {
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
+  --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
+  --ripple-pressed-color: var(--private-item-container-state-color);
 }
-.item-element:hover:not(:where(.disabled, .selected)) {
-  --_container-state-opacity: 0.08;
+
+/* State management */
+:host:hover:not([disabled], [selected]) {
+  --private-item-container-state-opacity: 0.08;
 }
-.item-element.pressed:not(:where(.disabled)) {
-  --_container-state-opacity: 0.12;
+
+:host:has(.item.pressed):not([disabled]) {
+  --private-item-container-state-opacity: 0.12;
 }
-.item-element.selected {
-  --_container-color: var(--color-secondary-container);
-  --_label-text-color: var(--color-on-secondary-container);
-  --_leading-trailing-color: var(--color-on-secondary-container);
-  --_container-state-color: var(--color-on-secondary-container);
+
+:host([selected]) {
+  --private-item-container-color: var(--item-container-selected-color);
+  --private-item-label-text-color: var(--item-label-text-selected-color);
+  --private-item-leading-trailing-color: var(--item-label-text-selected-color);
+  --private-item-supporting-text-color: var(--item-label-text-selected-color);
 }
-.item-element.disabled {
+
+:host([disabled]) {
   cursor: not-allowed;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-  --_leading-trailing-color: var(--color-on-surface);
-  --_container-opacity: 0.12;
+  --private-item-label-text-color: var(--color-on-surface);
+  --private-item-label-text-opacity: 0.38;
+  --private-item-leading-trailing-color: var(--color-on-surface);
+  --private-item-supporting-text-color: var(--color-on-surface);
+  --private-item-container-opacity: 0.12;
 }
-.item-element.disabled .ripple {
+:host([disabled]) .ripple {
   display: none;
 }`;
 
 /**
- * @label List Item
- * @tag wc-list-item
- * @rawTag list-item
- * @parentRawTag list
+ * @label Item
+ * @tag wc-item
+ * @rawTag item
  *
- * @summary A Material 3 list item with leading, trailing and content slots.
+ * @summary A Material 3 item with start, text and end slots.
  *
  * @example
  * ```html
- * <wc-list-item selected>
- *   <wc-icon slot="leading" name="person"></wc-icon>
- *   Profile
- *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
- * </wc-list-item>
+ * <wc-item selected>
+ *   <wc-icon slot="start" name="home"></wc-icon>
+ *   <div slot="overline">Overline</div>
+ *   <div slot="headline">Headline</div>
+ *   <div slot="supporting-text">Supporting text</div>
+ *   <div slot="trailing-supporting-text">Trailing</div>
+ *   <wc-icon slot="end" name="chevron_right"></wc-icon>
+ * </wc-item>
  * ```
  * @tags display
  */
-class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+class Item extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
+        this.__contentObserver = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+        this.__isCapturingTabIndex = false;
         this.selected = false;
         this.isPressed = false;
+        this.__handleSlotChange = () => {
+            this.requestUpdate();
+        };
         this.__dispatchClick = (event) => {
             if (this.softDisabled || (this.disabled && this.href)) {
                 event.stopImmediatePropagation();
@@ -7961,7 +8471,7 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
                 this.itemElement.click();
                 return;
             }
-            if (event.key === 'Enter' && !this.__isLink()) {
+            if (event.key === 'Enter' && !isLink(this)) {
                 event.preventDefault();
                 this.itemElement.click();
             }
@@ -7982,12 +8492,49 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
             }
         };
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'tabindex'];
+    }
+    __hasNamedSlot(...names) {
+        return names.some(name => Array.from(this.children).some(child => child.getAttribute('slot') === name));
+    }
+    __hasDefaultSlot() {
+        return Array.from(this.childNodes).some(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return Boolean(node.textContent?.trim());
+            }
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
     connectedCallback() {
         // eslint-disable-next-line wc/guard-super-call
         super.connectedCallback();
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'listitem');
+        this.__captureHostTabIndex();
+        this.__contentObserver.observe(this, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectedCallback() {
+        this.__contentObserver.disconnect();
+        super.disconnectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'tabindex') {
+            if (!this.__isCapturingTabIndex && newValue != null) {
+                this.__capturedTabIndex = newValue;
+                this.__isCapturingTabIndex = true;
+                this.removeAttribute('tabindex');
+                this.__isCapturingTabIndex = false;
+                this.requestUpdate();
+            }
+            return;
         }
+        super.attributeChangedCallback(name, oldValue, newValue);
     }
     focus() {
         this.itemElement?.focus();
@@ -7995,23 +8542,54 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
     blur() {
         this.itemElement?.blur();
     }
+    __getForwardedAttribute(name) {
+        return this.getAttribute(name) ?? undefined;
+    }
+    __captureHostTabIndex() {
+        const tabIndex = this.getAttribute('tabindex');
+        if (tabIndex == null) {
+            return;
+        }
+        this.__capturedTabIndex = tabIndex;
+        this.__isCapturingTabIndex = true;
+        this.removeAttribute('tabindex');
+        this.__isCapturingTabIndex = false;
+    }
     render() {
-        const isLink = this.__isLink();
+        const role = this.__getForwardedAttribute('role');
+        const tabIndex = this.__capturedTabIndex;
+        const ariaHasPopup = this.__getForwardedAttribute('aria-haspopup');
+        const ariaControls = this.__getForwardedAttribute('aria-controls');
+        const ariaExpanded = this.__getForwardedAttribute('aria-expanded');
         const cssClasses = {
-            'list-item': true,
-            'item-element': true,
+            item: true,
             selected: this.selected,
             disabled: this.disabled || this.softDisabled,
             pressed: this.isPressed,
         };
-        if (!isLink) {
+        return b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple" for="item"></wc-ripple>
+
+      ${this.renderItemElement(cssClasses, role, tabIndex, ariaHasPopup, ariaControls, ariaExpanded)}
+    `;
+    }
+    renderItemElement(cssClasses, role, tabIndex, ariaHasPopup, ariaControls, ariaExpanded) {
+        if (!isLink(this)) {
+            cssClasses['native-button'] = true;
             return b `
         <button
           id="item"
           class=${e$1(cssClasses)}
           type=${this.htmlType}
+          role=${o$1(role)}
+          tabindex=${o$1(tabIndex)}
           ?disabled=${this.disabled}
           ?aria-disabled=${this.softDisabled}
+          aria-haspopup=${o$1(ariaHasPopup)}
+          aria-controls=${o$1(ariaControls)}
+          aria-expanded=${o$1(ariaExpanded)}
           @click=${this.__dispatchClick}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handleKeyDown}
@@ -8021,6 +8599,7 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         </button>
       `;
         }
+        cssClasses['native-link'] = true;
         return b `
       <a
         id="item"
@@ -8029,8 +8608,12 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         target=${this.target}
         rel=${o$1(this.rel)}
         download=${o$1(this.download)}
-        tabindex=${this.disabled ? '-1' : '0'}
+        role=${o$1(role)}
+        tabindex=${o$1(tabIndex ?? (this.disabled ? '-1' : '0'))}
         aria-disabled=${String(this.disabled || this.softDisabled)}
+        aria-haspopup=${o$1(ariaHasPopup)}
+        aria-controls=${o$1(ariaControls)}
+        aria-expanded=${o$1(ariaExpanded)}
         @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handleKeyDown}
@@ -8041,81 +8624,101 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
     `;
     }
     renderContent() {
+        const hasStart = this.__hasNamedSlot('start');
+        const hasEnd = this.__hasNamedSlot('end');
+        const hasOverline = this.__hasNamedSlot('overline');
+        const hasHeadline = this.__hasNamedSlot('headline');
+        const hasDefault = this.__hasDefaultSlot();
+        const hasSupportingText = this.__hasNamedSlot('supporting-text');
+        const hasTrailingSupportingText = this.__hasNamedSlot('trailing-supporting-text');
         return b `
-      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
-      <div class="background"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-
-      <div class="list-item-content">
-        <div class="leading">
-          <slot name="leading"></slot>
-        </div>
+      <div class="item-content">
+        ${hasStart
+            ? b `
+              <div class="start">
+                <slot
+                  name="start"
+                  @slotchange=${this.__handleSlotChange}
+                ></slot>
+              </div>
+            `
+            : A}
         <div class="content">
-          <slot></slot>
-        </div>
-        <div class="trailing">
-          <slot name="trailing"></slot>
+          ${hasOverline
+            ? b `
+                <div class="overline">
+                  <slot
+                    name="overline"
+                    @slotchange=${this.__handleSlotChange}
+                  ></slot>
+                </div>
+              `
+            : A}
+          ${hasHeadline || hasDefault
+            ? b `
+                <div class="headline-row">
+                  ${hasHeadline || hasDefault
+                ? b `
+                        <div class="headline">
+                          ${hasHeadline
+                    ? b `<slot
+                                name="headline"
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
+                    : A}
+                          ${hasDefault
+                    ? b `<slot
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
+                    : A}
+                        </div>
+                      `
+                : A}
+                </div>
+              `
+            : A}
+          ${hasSupportingText
+            ? b `
+                <div class="supporting-text">
+                  <slot
+                    name="supporting-text"
+                    @slotchange=${this.__handleSlotChange}
+                  ></slot>
+                </div>
+              `
+            : A}
         </div>
+        ${hasTrailingSupportingText
+            ? b `
+              <div class="trailing-supporting-text">
+                <slot
+                  name="trailing-supporting-text"
+                  @slotchange=${this.__handleSlotChange}
+                ></slot>
+              </div>
+            `
+            : A}
+        ${hasEnd
+            ? b `
+              <div class="end">
+                <slot name="end" @slotchange=${this.__handleSlotChange}></slot>
+              </div>
+            `
+            : A}
       </div>
     `;
     }
 }
-ListItem.styles = [css_248z$h];
+Item.styles = [css_248z$h];
 __decorate([
     n({ type: Boolean, reflect: true })
-], ListItem.prototype, "selected", void 0);
+], Item.prototype, "selected", void 0);
 __decorate([
     e$2('#item')
-], ListItem.prototype, "itemElement", void 0);
+], Item.prototype, "itemElement", void 0);
 __decorate([
     r()
-], ListItem.prototype, "isPressed", void 0);
-
-/**
- * @label List
- * @tag wc-list
- * @rawTag list
- *
- * @summary A Material 3 list container for one or more list items.
- *
- * @example
- * ```html
- * <wc-list>
- *   <wc-list-item>
- *     <wc-icon slot="leading" name="inbox"></wc-icon>
- *     Inbox
- *     <span slot="trailing">24</span>
- *   </wc-list-item>
- * </wc-list>
- * ```
- * @tags display
- */
-class List extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.variant = 'standard';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'list');
-    }
-    render() {
-        const cssClasses = {
-            list: true,
-            [`variant-${this.variant}`]: true,
-        };
-        return b `
-      <div class=${e$1(cssClasses)}>
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-List.styles = [css_248z$i];
-List.Item = ListItem;
-__decorate([
-    n({ type: String, reflect: true })
-], List.prototype, "variant", void 0);
+], Item.prototype, "isPressed", void 0);
 
 var css_248z$g = i`@charset "UTF-8";
 :host {
@@ -8149,29 +8752,32 @@ img.clickable {
   display: block;
 }
 
-/* Preview overlay — rendered in light DOM via portal, but we keep
-    a host-level overlay as a fallback when shadow DOM is used.       */
-.preview-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
-  align-items: center;
-  justify-content: center;
+/* Lightbox preview — native <dialog> renders in the top layer,
+   bypassing any stacking context on the host page.                  */
+.preview-dialog {
+  background: transparent;
+  border: none;
   cursor: zoom-out;
+  max-height: 90dvh;
+  max-width: 90dvw;
+  padding: 0;
 }
-
-.preview-overlay.open {
+.preview-dialog[open] {
   display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.preview-dialog::backdrop {
+  background: color-mix(in srgb, var(--color-scrim), transparent 15%);
 }
 
-.preview-overlay img {
+.preview-dialog img {
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-shadow), transparent 40%);
   border-radius: 4px;
+  cursor: auto;
 }`;
 
 /**
@@ -8199,7 +8805,6 @@ class Image extends i$1 {
         this.preview = false;
         this._isDarkMode = isDarkMode();
         this._loaded = false;
-        this._previewOpen = false;
         this._intersectionObserver = null;
         this._themeCleanup = null;
     }
@@ -8240,12 +8845,14 @@ class Image extends i$1 {
     }
     _handleClick() {
         if (this.preview) {
-            this._previewOpen = true;
+            this._dialog?.showModal();
         }
     }
-    _closePreview(e) {
-        e.stopPropagation();
-        this._previewOpen = false;
+    _handleDialogClick(e) {
+        // Close when clicking the backdrop (target is the dialog itself, not the image)
+        if (e.target === e.currentTarget) {
+            e.currentTarget.close();
+        }
     }
     render() {
         return b `
@@ -8260,17 +8867,14 @@ class Image extends i$1 {
             : b `<span class="placeholder" aria-hidden="true"></span>`}
       </div>
 
-      <!-- Lightbox preview overlay (inside shadow root) -->
-      <div
-        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
-        role="dialog"
-        aria-modal="true"
+      <!-- Lightbox preview dialog — uses native top-layer to avoid stacking context issues -->
+      <dialog
+        class="preview-dialog"
         aria-label="Image preview"
-        @click=${this._closePreview}
-        @keydown=${(e) => e.key === 'Escape' && this._closePreview(e)}
+        @click=${this._handleDialogClick}
       >
         <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e) => e.stopPropagation()} />
-      </div>
+      </dialog>
     `;
     }
 }
@@ -8294,8 +8898,8 @@ __decorate([
     r()
 ], Image.prototype, "_loaded", void 0);
 __decorate([
-    r()
-], Image.prototype, "_previewOpen", void 0);
+    e$2('.preview-dialog')
+], Image.prototype, "_dialog", void 0);
 
 var css_248z$f = i`* {
   box-sizing: border-box;
@@ -8910,7 +9514,6 @@ var _Tab_id;
  * @label Tab
  * @tag wc-tab
  * @rawTag tab
- * @parentRawTag tabs
  *
  * @summary A tab component for use within tabs.
  * @overview
@@ -8936,8 +9539,8 @@ class Tab extends i$1 {
         this.disabled = false;
         this.disabledReason = '';
         /**
-        * Sets or retrieves the window or frame at which to target content.
-        */
+         * Sets or retrieves the window or frame at which to target content.
+         */
         this.target = '_self';
         /**
          * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -8948,8 +9551,8 @@ class Tab extends i$1 {
         this.slotHasIcon = false;
         this.slotHasBadge = false;
         /**
-          * States
-          */
+         * States
+         */
         this.isPressed = false;
         this._tabindex = 0;
         this.__dispatchClickWithThrottle = event => {
@@ -9002,9 +9605,6 @@ class Tab extends i$1 {
             this.requestUpdate();
         });
     }
-    __isLink() {
-        return !!this.href;
-    }
     __getParentTabsVariant() {
         return this.closest('wc-tabs')?.variant ?? 'primary';
     }
@@ -9017,7 +9617,6 @@ class Tab extends i$1 {
     //   }
     // }
     render() {
-        const isLink = this.__isLink();
         const variant = this.__getParentTabsVariant();
         const cssClasses = {
             tab: true,
@@ -9030,38 +9629,38 @@ class Tab extends i$1 {
             'has-icon': this.slotHasIcon,
             'has-badge': this.slotHasBadge,
         };
-        if (!isLink) {
+        if (!isLink(this)) {
             return b `<button
-          id="button"
-              class=${e$1(cssClasses)}
-              tabindex="0"
-              @mousedown=${this.__handlePress}
-              @keydown=${this.__handlePress}
-              @keyup=${this.__handlePress}
-              ?aria-describedby=${this.__getDisabledReasonID()}
-              aria-disabled=${`${this.disabled}`}
-              ?disabled=${this.disabled}
-              ${spread(this.configAria)}
-            >
-              ${this.renderTabContent(variant)}
-            </button>`;
-        }
-        return b `<a
-        class=${e$1(cssClasses)}
         id="button"
+        class=${e$1(cssClasses)}
         tabindex="0"
-        href=${this.href}
-        target=${this.target}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
-        role="button"
         ?aria-describedby=${this.__getDisabledReasonID()}
         aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
         ${spread(this.configAria)}
       >
         ${this.renderTabContent(variant)}
-      </a>`;
+      </button>`;
+        }
+        return b `<a
+      class=${e$1(cssClasses)}
+      id="button"
+      tabindex="0"
+      href=${this.href}
+      target=${this.target}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+      ${spread(this.configAria)}
+    >
+      ${this.renderTabContent(variant)}
+    </a>`;
     }
     renderTabContent(variant) {
         switch (variant) {
@@ -9078,14 +9677,13 @@ class Tab extends i$1 {
     }
     renderPrimaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></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>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <div class="icon-section">
           <slot name="badge"></slot>
           <slot name="icon"></slot>
@@ -9095,7 +9693,6 @@ class Tab extends i$1 {
         </div>
 
         <div class="indicator"></div>
-        
       </div>
 
       ${this.__renderDisabledReason()}
@@ -9103,14 +9700,13 @@ class Tab extends i$1 {
     }
     renderSecondaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></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>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <slot name="icon"></slot>
 
         <div class="slot-container">
@@ -9133,7 +9729,7 @@ class Tab extends i$1 {
     }
     renderSegmentedTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></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>
@@ -9467,7 +10063,6 @@ var css_248z$b = i`* {
  * @label Tab Panel
  * @tag wc-tab-panel
  * @rawTag tab-panel
- * @parentRawTag tab-group
  *
  * @summary Content panel for tabs.
  * @overview
@@ -10916,7 +11511,6 @@ var css_248z$7 = i`* {
  * @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
@@ -11197,7 +11791,6 @@ var css_248z$6 = i`* {
  * @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
@@ -12391,17 +12984,9 @@ var css_248z$2 = i`@charset "UTF-8";
 /* Multi-select chips area — single scrollable row, no vertical growth */
 .chips-container {
   display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: none;
-  gap: var(--spacing-050);
-  padding-block: var(--spacing-050);
   align-items: center;
   flex: 1;
-  min-width: 0;
-}
-.chips-container::-webkit-scrollbar {
-  display: none;
+  padding-block: 0.5rem;
 }
 
 /* Disabled state */
@@ -12420,7 +13005,6 @@ var css_248z$2 = i`@charset "UTF-8";
  * @label Select Option
  * @tag wc-option
  * @rawTag option
- * @parentRawTag select
  *
  * @summary A declarative option element for use inside wc-select.
  *
@@ -12483,7 +13067,7 @@ class SelectOptionElement extends i$1 {
         ?keep-open=${this.keepOpen}
       >
         ${this.icon
-            ? b `<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
+            ? b `<wc-icon name=${this.icon} slot="start"></wc-icon>`
             : A}
         <slot>${this.value === '' ? 'None' : ''}</slot>
         ${this.selected && this.keepOpen
@@ -12877,6 +13461,7 @@ class Select extends BaseInput {
         // Multi-select: show chips for selected items
         if (this.multiple && this._selectedValues.length > 0) {
             return b `<div class="chips-container">
+      <wc-chip-set>
         ${this._selectedValues.map(val => b `
             <wc-chip
               dismissible
@@ -12885,6 +13470,7 @@ class Select extends BaseInput {
             >${this._getLabelForValue(val)}</wc-chip
             >
           `)}
+      </wc-chip-set>
       </div>`;
         }
         // Single select: show selected label or placeholder
@@ -13184,6 +13770,12 @@ var css_248z = i`* {
   z-index: 1;
   transition: color var(--duration-short4, 200ms) var(--easing-standard, ease), font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
 }
+.item {
+  /* Hide label when collapsed via class */
+}
+.item .label.hidden {
+  display: none;
+}
 .item {
   /* Active icon slot: hidden by default */
 }
@@ -13261,7 +13853,6 @@ 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
@@ -13334,18 +13925,15 @@ class NavigationRailItem extends i$1 {
     }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.label'), hasContent => {
             this._hasLabel = hasContent;
             this.requestUpdate();
         });
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="active-icon"]'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.active-icon-slot'), hasContent => {
             this._hasActiveIcon = hasContent;
             this.requestUpdate();
         });
     }
-    __isLink() {
-        return !!this.href;
-    }
     __getDisabledReasonID() {
         return this.disabled && this.disabledReason
             ? `disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}`
@@ -13366,7 +13954,7 @@ class NavigationRailItem extends i$1 {
     }
     __renderItemContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
 
       <div class="item-content">
         <div class="indicator">
@@ -13376,16 +13964,13 @@ class NavigationRailItem extends i$1 {
             <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 class="label ${this.collapsed ? 'hidden' : ''}"><slot></slot></div>
       </div>
 
       ${this.__renderDisabledReason()}
     `;
     }
     render() {
-        const isLink = this.__isLink();
         const cssClasses = {
             item: true,
             'item-element': true,
@@ -13395,7 +13980,7 @@ class NavigationRailItem extends i$1 {
             'has-label': this._hasLabel,
             'has-active-icon': this._hasActiveIcon,
         };
-        if (!isLink) {
+        if (!isLink(this)) {
             return b `<button
         id="item"
         class=${e$1(cssClasses)}
@@ -13495,17 +14080,13 @@ __decorate([
  * ```html
  * <wc-navigation-rail>
  *   <wc-navigation-rail-item active>
- *     <wc-icon slot="icon">home</wc-icon>
+ *     <wc-icon slot="icon" name="home"></wc-icon>
  *     Home
  *   </wc-navigation-rail-item>
  *   <wc-navigation-rail-item>
- *     <wc-icon slot="icon">search</wc-icon>
+ *     <wc-icon slot="icon" name="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
@@ -13599,5 +14180,5 @@ __decorate([
     n({ type: Boolean, attribute: 'show-divider' })
 ], NavigationRail.prototype, "showDivider", void 0);
 
-export { UrlField as $, Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Snackbar as G, Spinner as H, Image as I, SubMenu as J, Svg as K, LinearProgress as L, Menu as M, NavigationRail as N, Switch as O, Pagination as P, TabGroup as Q, Radio as R, SegmentedButton as S, Tab as T, TabPanel as U, Table as V, Tabs as W, Tag as X, Textarea as Y, TimePicker as Z, Tooltip as _, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, ChipSet as e, CircularProgress as f, Container as g, Divider as h, EmptyState as i, FocusRing as j, Input as k, Link as l, List as m, ListItem as n, MenuItem as o, NavigationRailItem as p, NumberField as q, Ripple as r, SegmentedButtonGroup as s, Select as t, SelectOptionElement as u, SidebarMenu as v, SidebarMenuItem as w, SidebarSubMenu as x, Skeleton as y, Slider as z };
-//# sourceMappingURL=navigation-rail-CD7IrqbN.js.map
+export { Tooltip as $, Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Slider as G, Snackbar as H, Image as I, Spinner as J, SubMenu as K, LinearProgress as L, Menu as M, NavigationRail as N, Svg as O, Pagination as P, Switch as Q, Radio as R, SegmentedButton as S, Tab as T, TabGroup as U, TabPanel as V, Table as W, Tabs as X, Tag as Y, Textarea as Z, TimePicker as _, Avatar as a, UrlField as a0, Breadcrumb as b, BreadcrumbItem as c, Chip as d, ChipSet as e, CircularProgress as f, Container as g, Divider as h, EmptyState as i, FocusRing as j, Input as k, Item as l, Link as m, List as n, ListItem as o, MenuItem as p, NavigationRailItem as q, NumberField as r, Ripple as s, SegmentedButtonGroup as t, Select as u, SelectOptionElement as v, SidebarMenu as w, SidebarMenuItem as x, SidebarSubMenu as y, Skeleton as z };
+//# sourceMappingURL=navigation-rail-CM_svs5_.js.map