@redvars/peacock 3.6.1 → 3.6.3

package/dist/{navigation-rail-DTTkqohi.js → navigation-rail-DAUuJ_Yp.js}

@@ -5,13 +5,13 @@ import { r } from './state-DwbEjqVk.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.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 { o as o$1 } from './style-map-DVmWOuYy.js';
+import { B as BaseButton, o as o$1, s as spread, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
+import { o as o$2 } from './style-map-DVmWOuYy.js';
 import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { s as spread, o as o$2, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
 import { B as BaseInput } from './BaseInput-14YmcfK7.js';
-import { F as FloatingController } from './popover-NC7b1lTq.js';
+import { F as FloatingController } from './popover-DUPmMVWS.js';
 import { i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DOcaw4Yq.js';
-import { f as fetchSVG, s as sanitizeSvg, o as o$3 } from './flow-designer-DvTUrDp5.js';
+import { f as fetchSVG, s as sanitizeSvg, o as o$3 } from './icon-CueRR7wx.js';
 import { o as o$4 } from './unsafe-html-BsGUjx94.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;
 }
 
@@ -32,9 +32,9 @@ var css_248z$U = i`* {
   display: inline-block;
   pointer-events: none;
   --avatar-size: 2rem;
-  --avatar-background-color: var(--color-primary);
+  --avatar-container-color: var(--color-primary);
   --avatar-text-color: var(--color-on-primary);
-  --avatar-border-radius: var(--global-avatar-border-radius);
+  --avatar-container-shape: var(--global-avatar-container-shape);
 }
 
 .avatar-container {
@@ -45,7 +45,7 @@ var css_248z$U = i`* {
 }
 
 .avatar {
-  border-radius: var(--avatar-border-radius);
+  border-radius: var(--avatar-container-shape);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -57,7 +57,7 @@ var css_248z$U = i`* {
   font-weight: var(--typography-body-large-emphasized-font-weight) !important;
   line-height: var(--typography-body-large-emphasized-line-height) !important;
   letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
-  background-color: var(--avatar-background-color);
+  background-color: var(--avatar-container-color);
   font-size: calc(var(--avatar-size) * 0.5) !important;
 }
 .avatar .image {
@@ -74,7 +74,7 @@ var css_248z$U = i`* {
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
  * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
  * @cssprop --avatar-size - Controls the size of the avatar.
  * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
  *
@@ -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;
 }
 
@@ -649,7 +649,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 +669,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$P = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -781,7 +781,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 +790,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;
@@ -908,7 +908,7 @@ class FocusRing extends i$1 {
         }
     }
 }
-FocusRing.styles = [css_248z$O];
+FocusRing.styles = [css_248z$P];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1385,7 +1385,7 @@ __decorate([
     e$2('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$N = i`* {
+var css_248z$O = i`* {
   box-sizing: border-box;
 }
 
@@ -1681,7 +1681,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 +1704,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 +1832,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 +1844,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;
 }
 
@@ -1908,9 +1908,9 @@ class Link extends BaseHyperlinkMixin(i$1) {
     </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 +2047,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 +2113,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 +2212,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 +2226,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$H = i`* {
+var css_248z$I = i`* {
   box-sizing: border-box;
 }
 
@@ -2235,27 +2235,35 @@ var css_248z$H = i`* {
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
+  --chip-outline-color: var(--color-outline-variant);
   --chip-container-shape: var(--shape-corner-small);
+  --chip-container-padding: 1rem;
+  /* 8dp */
 }
 
-:host-context([data-theme=dark]) {
-  --chip-hover-color: var(--color-primary-30);
+/*
+  * Reset native button/link styles
+  */
+.button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  text-decoration: none;
 }
 
 .chip {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
   width: 100%;
-  border-radius: var(--chip-container-shape);
+  cursor: pointer;
 }
 .chip .tag-content {
   position: relative;
@@ -2264,41 +2272,74 @@ var css_248z$H = i`* {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--chip-label-text-color);
-  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;
-  gap: 0.5rem;
+  padding-inline: var(--chip-container-padding);
+  color: var(--_chip-text-color);
+  opacity: var(--_chip-text-opacity, 1);
+  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;
 }
-.chip .tag-content .tag-image {
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 100%;
-  background: var(--chip-hover-color);
+.chip .tag-content .label-container {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.chip .close-btn {
-  border-radius: 12px;
+.chip .tag-content .close-btn {
+  height: 100%;
   padding: 0;
+  padding-inline: calc(var(--chip-container-padding) / 2);
   margin: 0;
   border: none;
   background: transparent;
   line-height: 0;
   cursor: pointer;
-  --icon-size: 1rem;
 }
-.chip .close-btn .close-btn-icon {
+.chip .tag-content .close-btn .close-btn-icon {
   --icon-size: 1rem;
+  --icon-color: var(--_chip-text-color);
 }
-.chip .close-btn:hover {
+.chip .tag-content .close-btn:hover {
   background: var(--chip-hover-color);
 }
-.chip .close-btn:hover .close-btn-icon {
-  color: var(--background);
+.chip .tag-content .icon-slot-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  --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;
+}
+.chip.dismissible .tag-content {
+  padding-inline-end: 0;
+}
+.chip.dismissible.actionable .tag-content {
+  padding-inline-end: calc(var(--chip-container-padding) / 2);
+}
+.chip.icon-slot-has-content .tag-content, .chip.selected .tag-content {
+  padding-inline-start: 0;
+}
+.chip.icon-slot-has-content .icon-slot-container, .chip.selected .icon-slot-container {
+  padding-inline: calc(var(--chip-container-padding) / 2);
 }
 .chip {
   /**
@@ -2308,66 +2349,56 @@ var css_248z$H = i`* {
 .chip .background {
   display: block;
   position: absolute;
+  left: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
-  background: var(--chip-container-color);
+  border-radius: var(--chip-container-shape);
+  background: var(--_chip-container-color);
   pointer-events: none;
 }
 .chip .outline {
+  z-index: 0;
   display: block;
   position: absolute;
+  left: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
+  border-radius: var(--chip-container-shape);
   border: 1px solid var(--chip-outline-color);
 }
 .chip .elevation {
   --elevation-level: 0;
   transition-duration: 280ms;
-  border-radius: inherit;
-}
-.chip.dismissible .tag-content {
-  padding-inline-end: 0.25rem;
-}
-.chip.selected {
-  color: var(--background);
-  background: var(--chip-hover-color);
+  --elevation-container-shape: var(--chip-container-shape);
 }
-.chip.selected .close-btn-icon {
-  color: var(--background);
-}`;
 
-var css_248z$G = i`:host([color=red]) {
-  --chip-container-color: var(--color-red-container);
-  --chip-outline-color: var(--color-on-red-container);
+/** Color state management */
+.chip {
+  --_chip-container-color: var(--chip-container-color);
+  --_chip-text-color: var(--chip-label-text-color);
+  --_chip-state-color: var(--_chip-text-color);
 }
-
-:host([color=green]) {
-  --chip-container-color: var(--color-green-container);
-  --chip-label-text-color: var(--color-on-green-container);
-  --chip-outline-color: var(--color-on-green-container);
+.chip:hover {
+  --_chip-state-opacity: 0.08;
 }
-
-:host([color=blue]) {
-  --chip-container-color: var(--color-blue-container);
-  --chip-label-text-color: var(--color-on-blue-container);
-  --chip-outline-color: var(--color-on-blue-container);
+.chip.pressed {
+  --_chip-state-opacity: 0.12;
 }
-
-:host([color=yellow]) {
-  --chip-container-color: var(--color-yellow-container);
-  --chip-label-text-color: var(--color-on-yellow-container);
-  --chip-outline-color: var(--color-on-yellow-container);
+.chip.selected {
+  --_chip-container-color: var(--color-secondary-container);
+  --_chip-text-color: var(--color-on-secondary-container);
 }
-
-:host([color=purple]) {
-  --chip-container-color: var(--color-purple-container);
-  --chip-label-text-color: var(--color-on-purple-container);
-  --chip-outline-color: var(--color-on-purple-container);
+.chip.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 {
+  display: none;
 }`;
 
-var css_248z$F = i`.tag {
+var css_248z$H = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2437,17 +2468,25 @@ var css_248z$F = i`.tag {
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-class Chip extends i$1 {
+class Chip extends BaseButton {
     constructor() {
         super(...arguments);
         /** If true, the tag will have a close icon. */
         this.dismissible = false;
-        /** Tag color. */
-        this.color = 'default';
-        /** Tag value. */
-        this.value = '';
-        /** If true, the tag will be selected. */
-        this.selected = false;
+        this._hasIconSlotContent = false;
+        this._isPressed = false;
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="icon"]'), hasContent => {
+            this._hasIconSlotContent = hasContent;
+            this.requestUpdate();
+        });
     }
     _dismissClickHandler(e) {
         e.stopPropagation();
@@ -2461,7 +2500,7 @@ class Chip extends i$1 {
     }
     _renderCloseButton() {
         if (!this.dismissible)
-            return null;
+            return A;
         return b `
       <button
         class="close-btn"
@@ -2472,57 +2511,135 @@ class Chip extends i$1 {
       </button>
     `;
     }
-    _renderImage() {
-        if (this.imageSrc)
-            return b `<img
-        src=${this.imageSrc}
-        class="tag-image"
-        alt="Tag Logo"
-      />`;
-        return A;
-    }
     render() {
-        const classes = {
+        const cssClasses = {
             chip: true,
+            button: true,
             selected: this.selected,
             dismissible: this.dismissible,
-            [`color-${this.color}`]: true,
+            pressed: this._isPressed,
+            'icon-slot-has-content': this._hasIconSlotContent,
         };
+        if (!this.__isLink()) {
+            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>`;
+        }
+        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 `
-      <div class="${e$1(classes)}">
-        <wc-elevation class="elevation"></wc-elevation>
-        <div class="background"></div>
-        <div class="outline"></div>
+      <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="tag-content">
 
-        <div class="tag-content">
-          <slot name="icon"></slot>
-          <slot></slot>
-          ${this._renderCloseButton()}
+        <div class="icon-slot-container">
+          ${this.selected
+            ? b `<wc-icon class="selected-icon" name="check"></wc-icon>`
+            : b `<slot name="icon"></slot>`}
         </div>
+        <div class="label-container">
+          <slot></slot>
+        </div> 
+        
+        ${this._renderCloseButton()}
       </div>
     `;
     }
 }
 // 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, css_248z$F];
+Chip.styles = [css_248z$I, css_248z$H];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
 __decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "color", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "value", void 0);
+    n({ reflect: true })
+], Chip.prototype, "configAria", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
-], Chip.prototype, "selected", void 0);
+    r()
+], Chip.prototype, "_hasIconSlotContent", void 0);
 __decorate([
-    n({ type: String })
-], Chip.prototype, "imageSrc", void 0);
+    r()
+], Chip.prototype, "_isPressed", void 0);
 
-var css_248z$E = i`:host {
+var css_248z$G = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+slot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}`;
+
+/**
+ * @label Chip Set
+ * @tag wc-chip-set
+ * @rawTag chip-set
+ * @summary A layout container for wrapping chips.
+ * @tags layout
+ *
+ * @example
+ * ```html
+ * <wc-chip-set>
+ *   <wc-chip>One</wc-chip>
+ *   <wc-chip>Two</wc-chip>
+ * </wc-chip-set>
+ * ```
+ */
+class ChipSet extends i$1 {
+    render() {
+        return b `<slot></slot>`;
+    }
+}
+ChipSet.styles = [css_248z$G];
+
+var css_248z$F = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2712,7 +2829,7 @@ class LinearProgress extends BaseProgress {
             <div class="track track-start"></div>
             <div
               class="active-indicator"
-              style="${o$1({
+              style="${o$2({
             width: `${this.__getPercentageValue()}%`,
         })}"
             ></div>
@@ -2728,9 +2845,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;
@@ -2872,7 +2989,7 @@ class CircularProgress extends BaseProgress {
               cx="8"
               cy="8"
               r="6"
-              style="${o$1({
+              style="${o$2({
             strokeDasharray: `${circumference}`,
             strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
         })}"
@@ -2893,9 +3010,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;
 }
 
@@ -2999,12 +3116,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;
 }
 
@@ -3074,16 +3191,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;
@@ -3095,19 +3219,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);
     }
@@ -3140,7 +3251,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}
@@ -3153,7 +3263,7 @@ class Input extends BaseInput {
 
         ${this.type === 'password'
             ? b `
-              <pc-tooltip
+              <wc-tooltip
                 slot="field-end"
                 content=${this.passwordVisible
                 ? 'Hide password'
@@ -3167,10 +3277,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}
 
@@ -3179,7 +3291,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$B];
+Input.styles = [css_248z$C];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3238,7 +3350,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;
 }
 
@@ -3471,7 +3583,7 @@ class UrlField extends BaseInput {
     `;
     }
 }
-UrlField.styles = [css_248z$A];
+UrlField.styles = [css_248z$B];
 __decorate([
     n({ type: String })
 ], UrlField.prototype, "value", void 0);
@@ -3521,7 +3633,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;
 }
 
@@ -3610,7 +3722,7 @@ var css_248z$z = i`* {
   display: flex;
   align-items: center;
   flex: 1;
-  height: var(--field-height, 3.5rem);
+  min-height: var(--field-height, 3.5rem);
   padding-block: var(--field-padding-block);
   z-index: 1;
 }
@@ -3889,7 +4001,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);
@@ -3945,7 +4061,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$y = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -4144,7 +4260,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);
@@ -4206,7 +4322,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;
 }
 
@@ -4373,7 +4489,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$x];
+DatePicker.styles = [css_248z$y];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4429,7 +4545,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;
 }
 
@@ -4596,7 +4712,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$w];
+TimePicker.styles = [css_248z$x];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4652,7 +4768,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;
 }
 
@@ -4812,7 +4928,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$v];
+Textarea.styles = [css_248z$w];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4871,7 +4987,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;
 }
 
@@ -5212,7 +5328,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$u];
+Switch.styles = [css_248z$v];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -5256,7 +5372,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;
 }
 
@@ -5714,7 +5830,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);
@@ -5761,7 +5877,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;
 }
 
@@ -5848,9 +5964,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;
 }
 
@@ -5968,12 +6084,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;
 }
 
@@ -6035,6 +6151,7 @@ var css_248z$q = i`* {
 
 :host(.content-center) .content {
   align-items: center;
+  text-align: center;
 }
 
 @container emptystate (min-width: 672px) {
@@ -6136,7 +6253,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);
@@ -6150,7 +6267,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$p = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -6388,7 +6505,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$p];
+Tooltip.styles = [css_248z$q];
 __decorate([
     n()
 ], Tooltip.prototype, "content", void 0);
@@ -6408,7 +6525,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;
 }
 
@@ -6444,7 +6561,7 @@ ol {
   pointer-events: none;
 }`;
 
-var css_248z$n = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -6553,8 +6670,8 @@ class BreadcrumbItem extends i$1 {
               <a
                 class="breadcrumb-link"
                 itemprop="item"
-                href=${o$2(this.href)}
-                target=${o$2(this.target)}
+                href=${o$1(this.href)}
+                target=${o$1(this.target)}
                 ${this.target === '_blank'
                 ? b `rel="noopener noreferrer"`
                 : A}
@@ -6574,7 +6691,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);
@@ -6616,7 +6733,6 @@ class Breadcrumb extends i$1 {
         super(...arguments);
         /**
          * Accessible label for the breadcrumb navigation landmark.
-         * @default "Breadcrumb"
          */
         this.label = 'Breadcrumb';
     }
@@ -6628,13 +6744,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;
 }
 
@@ -6742,7 +6858,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;
 }
 
@@ -6751,113 +6867,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);
@@ -6891,144 +6936,106 @@ 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);
@@ -7048,11 +7055,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
@@ -7105,6 +7109,7 @@ class Menu extends i$1 {
                 return;
             }
             this._setActiveItem(item);
+            this._dispatchItemActivate(item);
             if (item.keepOpen) {
                 return;
             }
@@ -7292,8 +7297,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) {
@@ -7303,12 +7307,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;
                 }
             }
         }
@@ -7323,6 +7325,13 @@ class Menu extends i$1 {
         this.activeIndex = nextIndex;
         this._syncRovingTabIndex();
     }
+    _dispatchItemActivate(item) {
+        this.dispatchEvent(new CustomEvent('menu-item-activate', {
+            bubbles: true,
+            composed: true,
+            detail: { item },
+        }));
+    }
     _applyPositioning() {
         if (!this.open || !this.menuListElement) {
             return;
@@ -7404,7 +7413,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 })
@@ -7440,7 +7449,7 @@ __decorate([
     e$2('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$j = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -7503,7 +7512,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;
@@ -7574,6 +7583,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;
@@ -7602,7 +7614,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;
@@ -7635,7 +7647,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);
@@ -7655,7 +7667,7 @@ __decorate([
     o({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$i = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7684,7 +7696,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;
 }
 
@@ -7903,8 +7915,8 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         class=${e$1(cssClasses)}
         href=${this.href}
         target=${this.target}
-        rel=${o$2(this.rel)}
-        download=${o$2(this.download)}
+        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}
@@ -7936,7 +7948,7 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
     `;
     }
 }
-ListItem.styles = [css_248z$h];
+ListItem.styles = [css_248z$i];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], ListItem.prototype, "selected", void 0);
@@ -7987,12 +7999,498 @@ class List extends i$1 {
     `;
     }
 }
-List.styles = [css_248z$i];
+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 {
+  display: block;
+  padding-inline: var(--spacing-050);
+  --item-height: 3.5rem;
+}
+
+/**
+ * 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 {
+  position: relative;
+  min-height: var(--item-height);
+  width: 100%;
+  background: transparent;
+  text-align: initial;
+  cursor: pointer;
+  --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);
+  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 .background {
+  position: absolute;
+  inset: 0;
+  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 .focus-ring {
+  z-index: 2;
+  --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 .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 {
+  --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);
+}
+.item:hover:not(:where(.disabled, .selected)) {
+  --private-item-container-state-opacity: 0.08;
+}
+.item.pressed:not(:where(.disabled)) {
+  --private-item-container-state-opacity: 0.12;
+}
+.item.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.disabled {
+  cursor: not-allowed;
+  --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.disabled .ripple {
+  display: none;
+}
+
+:host {
+  --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);
+}`;
+
+/**
+ * @label Item
+ * @tag wc-item
+ * @rawTag item
+ *
+ * @summary A Material 3 item with start, text and end slots.
+ *
+ * @example
+ * ```html
+ * <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 Item extends BaseButtonMixin(BaseHyperlinkMixin(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();
+                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;
+            }
+        };
+    }
+    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();
+        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();
+    }
+    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 = {
+            item: true,
+            selected: this.selected,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+        };
+        if (!isLink) {
+            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}
+          @keyup=${this.__handlePress}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+        }
+        else {
+            cssClasses['native-link'] = true;
+            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)}
+        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}
+        @keyup=${this.__handlePress}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+        }
+    }
+    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="item-content">
+        ${hasStart
+            ? b `
+              <div class="start">
+                <slot name="start" @slotchange=${this.__handleSlotChange}></slot>
+              </div>
+            `
+            : A}
+        <div class="content">
+    
+          ${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>
+    `;
+    }
+}
+Item.styles = [css_248z$h];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Item.prototype, "selected", void 0);
+__decorate([
+    e$2('#item')
+], Item.prototype, "itemElement", void 0);
+__decorate([
+    r()
+], Item.prototype, "isPressed", void 0);
+
 var css_248z$g = i`@charset "UTF-8";
 :host {
   display: block;
@@ -8025,29 +8523,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;
 }`;
 
 /**
@@ -8075,7 +8576,6 @@ class Image extends i$1 {
         this.preview = false;
         this._isDarkMode = isDarkMode();
         this._loaded = false;
-        this._previewOpen = false;
         this._intersectionObserver = null;
         this._themeCleanup = null;
     }
@@ -8116,12 +8616,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 `
@@ -8136,17 +8638,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>
     `;
     }
 }
@@ -8170,8 +8669,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;
@@ -9797,7 +10296,7 @@ class Slider extends i$1 {
           @touchstart=${this.onMouseDown}
         >
           <div class="track">
-            <div class="track-active" style=${o$1({ width: `${percentage}%` })}></div>
+            <div class="track-active" style=${o$2({ width: `${percentage}%` })}></div>
           </div>
 
           <div 
@@ -9809,7 +10308,7 @@ class Slider extends i$1 {
             aria-valuemax=${this.max}
             aria-valuenow=${this.value}
             aria-disabled=${this.disabled}
-            style=${o$1({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            style=${o$2({ left: `calc(${percentage}% - var(--thumb-half))` })}
             @keydown=${this.handleKeyDown}
           >
             ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
@@ -11153,7 +11652,7 @@ class SidebarSubMenu extends i$1 {
             disabled: this.disabled,
             selected: this.selected,
         });
-        const inlineStyles = o$1({
+        const inlineStyles = o$2({
             paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
         });
         return b `
@@ -12267,17 +12766,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 */
@@ -12359,7 +12850,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
@@ -12753,6 +13244,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
@@ -12761,6 +13253,7 @@ class Select extends BaseInput {
             >${this._getLabelForValue(val)}</wc-chip
             >
           `)}
+      </wc-chip-set>
       </div>`;
         }
         // Single select: show selected label or placeholder
@@ -13371,17 +13864,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
@@ -13475,5 +13964,5 @@ __decorate([
     n({ type: Boolean, attribute: 'show-divider' })
 ], NavigationRail.prototype, "showDivider", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Spinner as G, SubMenu as H, Image as I, Svg as J, Switch as K, LinearProgress as L, Menu as M, NavigationRail as N, TabGroup as O, Pagination as P, TabPanel as Q, Radio as R, SegmentedButton as S, Tab as T, Table as U, Tabs as V, Tag as W, Textarea as X, TimePicker as Y, Tooltip as Z, UrlField as _, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Input as j, Link as k, List as l, ListItem as m, MenuItem as n, NavigationRailItem as o, NumberField as p, Ripple as q, SegmentedButtonGroup as r, Select as s, SelectOptionElement as t, SidebarMenu as u, SidebarMenuItem as v, SidebarSubMenu as w, Skeleton as x, Slider as y, Snackbar as z };
-//# sourceMappingURL=navigation-rail-DTTkqohi.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-DAUuJ_Yp.js.map