@redvars/peacock 3.6.0 → 3.6.2

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

@@ -5,13 +5,14 @@ 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 { o as o$3 } from './unsafe-html-BsGUjx94.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';
 
 /**
  * @license
@@ -19,7 +20,7 @@ import { o as o$3 } 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$R = i`* {
+var css_248z$U = i`* {
   box-sizing: border-box;
 }
 
@@ -31,9 +32,9 @@ var css_248z$R = 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 {
@@ -44,7 +45,7 @@ var css_248z$R = i`* {
 }
 
 .avatar {
-  border-radius: var(--avatar-border-radius);
+  border-radius: var(--avatar-container-shape);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -56,7 +57,7 @@ var css_248z$R = 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 {
@@ -73,7 +74,7 @@ var css_248z$R = 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.
  *
@@ -110,7 +111,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$R];
+Avatar.styles = [css_248z$U];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -118,7 +119,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$Q = i`* {
+var css_248z$T = i`* {
   box-sizing: border-box;
 }
 
@@ -190,12 +191,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$Q];
+Badge.styles = [css_248z$T];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$P = i`* {
+var css_248z$S = i`* {
   box-sizing: border-box;
 }
 
@@ -304,7 +305,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$P];
+Divider.styles = [css_248z$S];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -312,7 +313,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$O = i`* {
+var css_248z$R = i`* {
   box-sizing: border-box;
 }
 
@@ -393,9 +394,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$O];
+Elevation.styles = [css_248z$R];
 
-var css_248z$N = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -648,7 +649,7 @@ class SegmentedButton extends i$1 {
     `;
     }
 }
-SegmentedButton.styles = [css_248z$N];
+SegmentedButton.styles = [css_248z$Q];
 __decorate([
     n({ type: String, reflect: true })
 ], SegmentedButton.prototype, "value", void 0);
@@ -668,7 +669,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$M = i`* {
+var css_248z$P = i`* {
   box-sizing: border-box;
 }
 
@@ -780,7 +781,7 @@ class SegmentedButtonGroup extends i$1 {
     `;
     }
 }
-SegmentedButtonGroup.styles = [css_248z$M];
+SegmentedButtonGroup.styles = [css_248z$P];
 SegmentedButtonGroup.SegmentedButton = SegmentedButton;
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'multi-select' })
@@ -789,7 +790,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$L = i`:host {
+var css_248z$O = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -907,7 +908,7 @@ class FocusRing extends i$1 {
         }
     }
 }
-FocusRing.styles = [css_248z$L];
+FocusRing.styles = [css_248z$O];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1384,7 +1385,7 @@ __decorate([
     e$2('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$K = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -1680,7 +1681,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$K];
+AccordionItem.styles = [css_248z$N];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1703,7 +1704,7 @@ __decorate([
     e$2('.header-button')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$J = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -1831,7 +1832,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$J];
+Accordion.styles = [css_248z$M];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -1843,7 +1844,7 @@ __decorate([
     o({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$I = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -1907,9 +1908,9 @@ class Link extends BaseHyperlinkMixin(i$1) {
     </a>`;
     }
 }
-Link.styles = [css_248z$I];
+Link.styles = [css_248z$L];
 
-var css_248z$H = i`* {
+var css_248z$K = i`* {
   box-sizing: border-box;
 }
 
@@ -2046,7 +2047,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$G = i`:host([color=default]) {
+var css_248z$J = 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);
@@ -2112,7 +2113,7 @@ var css_248z$G = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$F = i`.tag {
+var css_248z$I = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2211,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$H, css_248z$G, css_248z$F];
+Tag.styles = [css_248z$K, css_248z$J, css_248z$I];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -2225,7 +2226,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$E = i`* {
+var css_248z$H = i`* {
   box-sizing: border-box;
 }
 
@@ -2237,24 +2238,32 @@ var css_248z$E = i`* {
   display: inline-block;
   --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;
@@ -2263,41 +2272,74 @@ var css_248z$E = 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 {
   /**
@@ -2307,66 +2349,56 @@ var css_248z$E = 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$D = 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$C = i`.tag {
+var css_248z$G = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2436,17 +2468,25 @@ var css_248z$C = 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();
@@ -2460,7 +2500,7 @@ class Chip extends i$1 {
     }
     _renderCloseButton() {
         if (!this.dismissible)
-            return null;
+            return A;
         return b `
       <button
         class="close-btn"
@@ -2471,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$E, css_248z$D, css_248z$C];
+Chip.styles = [css_248z$H, css_248z$G];
 __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$F = 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$F];
 
-var css_248z$B = i`:host {
+var css_248z$E = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2711,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>
@@ -2727,9 +2845,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$B];
+LinearProgress.styles = [css_248z$E];
 
-var css_248z$A = i`:host {
+var css_248z$D = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2871,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}`,
         })}"
@@ -2892,9 +3010,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$A];
+CircularProgress.styles = [css_248z$D];
 
-var css_248z$z = i`* {
+var css_248z$C = i`* {
   box-sizing: border-box;
 }
 
@@ -2998,12 +3116,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$z];
+Skeleton.styles = [css_248z$C];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$y = i`* {
+var css_248z$B = i`* {
   box-sizing: border-box;
 }
 
@@ -3178,7 +3296,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$y];
+Input.styles = [css_248z$B];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3237,7 +3355,7 @@ __decorate([
     e$2('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$x = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -3470,7 +3588,7 @@ class UrlField extends BaseInput {
     `;
     }
 }
-UrlField.styles = [css_248z$x];
+UrlField.styles = [css_248z$A];
 __decorate([
     n({ type: String })
 ], UrlField.prototype, "value", void 0);
@@ -3520,7 +3638,7 @@ __decorate([
     e$2('.url-input')
 ], UrlField.prototype, "inputElement", void 0);
 
-var css_248z$w = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -3609,7 +3727,7 @@ var css_248z$w = 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;
 }
@@ -3888,7 +4006,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$w];
+Field.styles = [css_248z$z];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3944,7 +4062,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$v = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -3992,8 +4110,8 @@ var css_248z$v = i`* {
 var _NumberField_id;
 /**
  * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @tag wc-number-field
+ * @rawTag number-field
  *
  * @summary The Number Field component is used to capture numeric user input.
  *
@@ -4143,7 +4261,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$v];
+NumberField.styles = [css_248z$y];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -4205,7 +4323,7 @@ __decorate([
     e$2('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$u = i`* {
+var css_248z$x = i`* {
   box-sizing: border-box;
 }
 
@@ -4372,7 +4490,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$u];
+DatePicker.styles = [css_248z$x];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4428,7 +4546,7 @@ __decorate([
     e$2('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$t = i`* {
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -4595,7 +4713,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$t];
+TimePicker.styles = [css_248z$w];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4651,7 +4769,7 @@ __decorate([
     e$2('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$s = i`* {
+var css_248z$v = i`* {
   box-sizing: border-box;
 }
 
@@ -4811,7 +4929,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$s];
+Textarea.styles = [css_248z$v];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4870,7 +4988,7 @@ __decorate([
     e$2('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$r = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -5211,7 +5329,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$r];
+Switch.styles = [css_248z$u];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -5255,7 +5373,7 @@ __decorate([
     e$2('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$q = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -5713,7 +5831,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$q];
+Checkbox.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5760,7 +5878,7 @@ __decorate([
     e$2('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -5847,9 +5965,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$p];
+Spinner.styles = [css_248z$s];
 
-var css_248z$o = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -5967,12 +6085,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$o];
+Container.styles = [css_248z$r];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$n = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -6135,7 +6253,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$n];
+EmptyState.styles = [css_248z$q];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -6149,7 +6267,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$m = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -6387,7 +6505,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$m];
+Tooltip.styles = [css_248z$p];
 __decorate([
     n()
 ], Tooltip.prototype, "content", void 0);
@@ -6407,7 +6525,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "preview", void 0);
 
-var css_248z$l = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -6443,7 +6561,7 @@ ol {
   pointer-events: none;
 }`;
 
-var css_248z$k = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -6552,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}
@@ -6573,7 +6691,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$k];
+BreadcrumbItem.styles = [css_248z$n];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -6615,7 +6733,6 @@ class Breadcrumb extends i$1 {
         super(...arguments);
         /**
          * Accessible label for the breadcrumb navigation landmark.
-         * @default "Breadcrumb"
          */
         this.label = 'Breadcrumb';
     }
@@ -6627,13 +6744,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$l];
+Breadcrumb.styles = [css_248z$o];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$j = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -6741,7 +6858,7 @@ var css_248z$j = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$i = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -6856,7 +6973,7 @@ var css_248z$i = i`* {
   display: none;
 }`;
 
-var css_248z$h = i`:host-context([variant=standard]) {
+var css_248z$k = 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);
@@ -7027,7 +7144,7 @@ class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
     `;
     }
 }
-MenuItem.styles = [css_248z$i, css_248z$h];
+MenuItem.styles = [css_248z$l, css_248z$k];
 __decorate([
     n({ type: String })
 ], MenuItem.prototype, "value", void 0);
@@ -7104,6 +7221,7 @@ class Menu extends i$1 {
                 return;
             }
             this._setActiveItem(item);
+            this._dispatchItemActivate(item);
             if (item.keepOpen) {
                 return;
             }
@@ -7322,6 +7440,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;
@@ -7403,7 +7528,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$j];
+Menu.styles = [css_248z$m];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -7439,7 +7564,7 @@ __decorate([
     e$2('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$g = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -7634,7 +7759,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$g];
+SubMenu.styles = [css_248z$j];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -7654,43 +7779,381 @@ __decorate([
     o({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$f = i`@charset "UTF-8";
+var css_248z$i = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
 :host {
   display: block;
-  height: 100%;
-  width: 100%;
 }
 
-.image-wrapper {
+.list {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  border-radius: var(--shape-corner-large);
+  background-color: var(--_container-color);
 }
 
-img {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.list.variant-standard {
+  --_container-color: var(--color-surface-container);
 }
 
-img.clickable {
-  cursor: zoom-in;
+.list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}`;
+
+var css_248z$h = i`* {
+  box-sizing: border-box;
 }
 
-.placeholder {
-  background: #e0e0e0;
-  min-width: 100px;
-  min-height: 100px;
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
   display: block;
+  padding-inline: var(--spacing-050);
 }
 
-/* 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;
+.item-element {
+  position: relative;
+  min-height: 3.5rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  text-align: initial;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+}
+.item-element .list-item-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-200);
+  min-height: 3.5rem;
+  padding-inline: var(--spacing-200);
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+}
+.item-element .leading,
+.item-element .trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  color: var(--_leading-trailing-color);
+}
+.item-element .trailing {
+  margin-inline-start: auto;
+}
+.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
+ * @parentRawTag list
+ *
+ * @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 BaseButtonMixin(BaseHyperlinkMixin(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' && !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;
+            }
+        };
+    }
+    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 isLink = this.__isLink();
+        const cssClasses = {
+            'list-item': true,
+            'item-element': true,
+            selected: this.selected,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+        };
+        if (!isLink) {
+            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$h];
+__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$i];
+List.Item = ListItem;
+__decorate([
+    n({ type: String, reflect: true })
+], List.prototype, "variant", void 0);
+
+var css_248z$g = i`@charset "UTF-8";
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+img {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+img.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  background: #e0e0e0;
+  min-width: 100px;
+  min-height: 100px;
+  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);
@@ -7811,7 +8274,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$f];
+Image.styles = [css_248z$g];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -7834,6 +8297,251 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
+var css_248z$f = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --svg-size: inherit;
+  --svg-color: inherit;
+}
+
+.svg-wrapper {
+  height: var(--svg-size, 1rem);
+  width: var(--svg-size, 1rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-content {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.svg-content svg {
+  fill: var(--svg-color);
+  height: 100%;
+  width: 100%;
+}
+
+.svg-content.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+}
+.preview-close:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.preview-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+.preview-content svg {
+  max-width: 90vw;
+  max-height: 90vh;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+}`;
+
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+class Svg extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** URL of the SVG asset to fetch and render inline. */
+        this.src = '';
+        /** Accessible title / alt text for the SVG. */
+        this.imageTitle = '';
+        /** Enable click-to-preview lightbox. */
+        this.preview = false;
+        this._loaded = false;
+        this._previewOpen = false;
+        this._svgContent = '';
+        // token to avoid stale fetch results
+        this._fetchId = 0;
+        this._intersectionObserver = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._intersectionObserver?.disconnect();
+    }
+    firstUpdated() {
+        this._setupIntersectionObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('src')) {
+            // Reset lazy-load state so the new src is fetched when visible
+            this._loaded = false;
+            this._svgContent = '';
+            this._setupIntersectionObserver();
+        }
+    }
+    _setupIntersectionObserver() {
+        this._intersectionObserver?.disconnect();
+        const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');
+        if (!wrapper)
+            return;
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                this._loaded = true;
+                this._intersectionObserver?.disconnect();
+                this._fetchSvg();
+            }
+        }, { rootMargin: '200px' });
+        this._intersectionObserver.observe(wrapper);
+    }
+    async _fetchSvg() {
+        if (!this.src)
+            return;
+        this._fetchId += 1;
+        const currentId = this._fetchId;
+        try {
+            const raw = await fetchSVG(this.src);
+            if (currentId !== this._fetchId)
+                return;
+            this._svgContent = raw ? sanitizeSvg(raw) : '';
+        }
+        catch {
+            if (currentId === this._fetchId) {
+                this._svgContent = '';
+            }
+        }
+    }
+    _handleClick() {
+        if (this.preview) {
+            this._previewOpen = true;
+            // Move focus into the dialog after render
+            this.updateComplete.then(() => {
+                const closeBtn = this.shadowRoot?.querySelector('.preview-close');
+                closeBtn?.focus();
+            });
+        }
+    }
+    _closePreview(e) {
+        e.stopPropagation();
+        const wasOpen = this._previewOpen;
+        this._previewOpen = false;
+        if (wasOpen) {
+            // Return focus to the trigger
+            const trigger = this.shadowRoot?.querySelector('.svg-content');
+            trigger?.focus();
+        }
+    }
+    render() {
+        return b `
+      <div class="svg-wrapper">
+        ${this._loaded && this._svgContent
+            ? b `<div
+              class="svg-content ${this.preview ? 'clickable' : ''}"
+              role=${this.imageTitle ? 'img' : 'presentation'}
+              aria-label=${this.imageTitle || ''}
+              @click=${this._handleClick}
+            >
+              ${o$3(this._svgContent)}
+            </div>`
+            : b `<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.imageTitle ? `Preview: ${this.imageTitle}` : 'SVG preview'}
+        @click=${this._closePreview}
+        @keydown=${(e) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <button
+          class="preview-close"
+          aria-label="Close preview"
+          @click=${this._closePreview}
+        >&#x2715;</button>
+        <div class="preview-content" @click=${(e) => e.stopPropagation()}>
+          ${o$3(this._svgContent)}
+        </div>
+      </div>
+    `;
+    }
+}
+Svg.styles = [css_248z$f];
+__decorate([
+    n({ type: String, reflect: true })
+], Svg.prototype, "src", void 0);
+__decorate([
+    n({ attribute: 'image-title' })
+], Svg.prototype, "imageTitle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Svg.prototype, "preview", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_loaded", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_previewOpen", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_svgContent", void 0);
+
 var css_248z$e = i`* {
   box-sizing: border-box;
 }
@@ -9213,7 +9921,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 
@@ -9225,7 +9933,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>` : ''}
@@ -9724,7 +10432,7 @@ class Table extends i$1 {
             <div class="col-content">
               ${column.template
                     ? b `<div class="col-template">
-                    ${o$3(column.template(row, column))}
+                    ${o$4(column.template(row, column))}
                   </div>`
                     : b `<div class="col-text" title=${row?.[column.name] ?? ''}>
                     ${row?.[column.name]}
@@ -10569,7 +11277,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 `
@@ -12337,13 +13045,25 @@ var css_248z$1 = i`* {
   align-items: center;
   width: 100%;
   flex-shrink: 0;
+  padding-block-end: 2.5rem;
 }
 .rail .header:empty {
   display: none;
 }
+.rail .footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+.rail .footer:empty {
+  display: none;
+}
 .rail wc-divider {
   width: calc(100% - 1rem);
-  margin-block: 0.5rem;
   flex-shrink: 0;
 }
 .rail .items {
@@ -12352,22 +13072,11 @@ var css_248z$1 = i`* {
   align-items: center;
   width: 100%;
   gap: 0.75rem; /* 12dp between items */
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 .rail .items ::slotted(wc-navigation-rail-item) {
   width: 100%;
-}
-.rail {
-  /* Alignment variants */
-}
-.rail.align-top .items {
-  justify-content: flex-start;
-}
-.rail.align-center .items {
-  justify-content: center;
-}
-.rail.align-bottom .items {
-  justify-content: flex-end;
 }`;
 
 var css_248z = i`* {
@@ -12440,6 +13149,12 @@ var css_248z = i`* {
   flex-shrink: 0;
   transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
 }
+.item .indicator .ripple {
+  inset: 0;
+  z-index: 0;
+  --ripple-pressed-color: var(--_state-color);
+  border-radius: inherit;
+}
 .item .indicator .icon-container {
   display: flex;
   align-items: center;
@@ -12454,29 +13169,6 @@ var css_248z = i`* {
   color: var(--_inactive-icon-color);
   display: flex;
 }
-.item {
-  /* State layer for hover/press */
-}
-.item .state-layer {
-  position: absolute;
-  top: 0.25rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--_indicator-width);
-  height: var(--_indicator-height);
-  pointer-events: none;
-  background-color: var(--_state-color);
-  opacity: 0;
-  z-index: 0;
-  border-radius: var(--_indicator-shape);
-  transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
-}
-.item .ripple {
-  z-index: 1;
-  --ripple-pressed-color: var(--_state-color);
-  --ripple-state-opacity: 0;
-  border-radius: var(--shape-corner-small, 4px);
-}
 .item {
   /* Label */
 }
@@ -12538,18 +13230,6 @@ var css_248z = i`* {
 .item.active.has-active-icon .icon-slot {
   display: none;
 }
-.item {
-  /* Hover state */
-}
-.item:hover:not(.disabled) .state-layer {
-  opacity: 0.08;
-}
-.item {
-  /* Pressed state */
-}
-.item.pressed:not(.disabled) .state-layer {
-  opacity: 0.12;
-}
 .item {
   /* Disabled state */
 }
@@ -12571,7 +13251,6 @@ var css_248z = i`* {
 
 @media (prefers-reduced-motion: reduce) {
   .item .indicator,
-  .item .state-layer,
   .item .label {
     transition: none;
   }
@@ -12688,11 +13367,10 @@ class NavigationRailItem extends i$1 {
     __renderItemContent() {
         return b `
       <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
-      <div class="state-layer"></div>
-      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="item-content">
         <div class="indicator">
+          <wc-ripple class="ripple"></wc-ripple>
           <div class="icon-container">
             <slot name="active-icon" class="active-icon-slot"></slot>
             <slot name="icon" class="icon-slot"></slot>
@@ -12799,6 +13477,9 @@ __decorate([
  * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
  * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
  *
+ * @slot header - Content displayed above the rail items.
+ * @slot footer - Content pinned to the bottom of the rail.
+ *
  * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
  * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
  * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
@@ -12832,13 +13513,6 @@ __decorate([
 class NavigationRail extends i$1 {
     constructor() {
         super(...arguments);
-        /**
-         * Vertical alignment of items within the rail.
-         * - `"top"`: Items align to the top.
-         * - `"center"`: Items are centered (default).
-         * - `"bottom"`: Items align to the bottom.
-         */
-        this.alignment = 'center';
         /**
          * Display mode of the navigation rail.
          * - `"expanded"`: shows labels.
@@ -12898,7 +13572,6 @@ class NavigationRail extends i$1 {
     render() {
         const cssClasses = {
             rail: true,
-            [`align-${this.alignment}`]: true,
             [`mode-${this.mode}`]: true,
         };
         return b `
@@ -12910,15 +13583,15 @@ class NavigationRail extends i$1 {
         <nav class="items" role="presentation">
           <slot @slotchange=${this._syncItemMode}></slot>
         </nav>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
     `;
     }
 }
 NavigationRail.styles = [css_248z$1];
 NavigationRail.Item = NavigationRailItem;
-__decorate([
-    n({ reflect: true })
-], NavigationRail.prototype, "alignment", void 0);
 __decorate([
     n({ reflect: true })
 ], NavigationRail.prototype, "mode", void 0);
@@ -12926,5 +13599,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, Switch as G, TabGroup as H, Image as I, TabPanel as J, Table as K, LinearProgress as L, Menu as M, NavigationRail as N, Tabs as O, Pagination as P, Tag as Q, Radio as R, SegmentedButton as S, Tab as T, Textarea as U, TimePicker as V, Tooltip as W, UrlField as X, 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, MenuItem as l, NavigationRailItem as m, NumberField as n, Ripple as o, SegmentedButtonGroup as p, Select as q, SelectOptionElement as r, SidebarMenu as s, SidebarMenuItem as t, SidebarSubMenu as u, Skeleton as v, Slider as w, Snackbar as x, Spinner as y, SubMenu as z };
-//# sourceMappingURL=navigation-rail-DyO0oAZU.js.map
+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