@redvars/peacock 3.5.0 → 3.5.1

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

@@ -6,13 +6,11 @@ import { e as e$2, o as o$4 } from './unsafe-html-BsGUjx94.js';
 import { e as e$3 } from './class-map-YU7g0o3B.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
 import { a as e, e as e$4 } from './query-QBcUV-L_.js';
-import { d as BaseHyperlink } from './button-DMN1dPAg.js';
+import { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 import { o as o$2 } from './style-map-DVmWOuYy.js';
 import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { s as spread } from './spread-B5cgadZl.js';
+import { s as spread, o as o$3 } from './BaseButton-DuASuVth.js';
 import { B as BaseInput, i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DicqGkCJ.js';
-import { o as o$3 } from './fab-C5Nzxk0E.js';
-import { t as throttle } from './throttle-C7ZAPqtu.js';
 
 /**
  * @license
@@ -123,7 +121,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$O = i`* {
+var css_248z$S = i`* {
   box-sizing: border-box;
 }
 
@@ -252,7 +250,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$O];
+Icon.styles = [css_248z$S];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -272,7 +270,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$N = i`* {
+var css_248z$R = i`* {
   box-sizing: border-box;
 }
 
@@ -363,7 +361,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$N];
+Avatar.styles = [css_248z$R];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -371,7 +369,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$M = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -443,12 +441,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$M];
+Badge.styles = [css_248z$Q];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$L = i`* {
+var css_248z$P = i`* {
   box-sizing: border-box;
 }
 
@@ -557,7 +555,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$L];
+Divider.styles = [css_248z$P];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -565,7 +563,15 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$K = i`/**
+var css_248z$O = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -638,9 +644,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$K];
+Elevation.styles = [css_248z$O];
 
-var css_248z$J = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -893,7 +899,7 @@ class SegmentedButton extends i$1 {
     `;
     }
 }
-SegmentedButton.styles = [css_248z$J];
+SegmentedButton.styles = [css_248z$N];
 __decorate([
     n({ type: String, reflect: true })
 ], SegmentedButton.prototype, "value", void 0);
@@ -913,7 +919,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$I = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -1025,7 +1031,7 @@ class SegmentedButtonGroup extends i$1 {
     `;
     }
 }
-SegmentedButtonGroup.styles = [css_248z$I];
+SegmentedButtonGroup.styles = [css_248z$M];
 SegmentedButtonGroup.SegmentedButton = SegmentedButton;
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'multi-select' })
@@ -1034,7 +1040,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$H = i`:host {
+var css_248z$L = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -1072,30 +1078,13 @@ class FocusRing extends i$1 {
         super(...arguments);
         this.visible = false;
         this.for = '';
+        this.__boundFocusin = this.__focusin.bind(this);
+        this.__boundFocusout = this.__focusout.bind(this);
+        this.__boundPointerdown = this.__pointerdown.bind(this);
     }
     render() {
         return A;
     }
-    get control() {
-        return this._control || null;
-    }
-    set control(control) {
-        if (control) {
-            this._control = control;
-        }
-        else {
-            this.detach();
-        }
-    }
-    set forElement(value) {
-        if (value) {
-            this._focusTarget = value;
-            this.attach();
-        }
-        else {
-            this.detach();
-        }
-    }
     connectedCallback() {
         super.connectedCallback();
         this.attach();
@@ -1104,6 +1093,21 @@ class FocusRing extends i$1 {
         this.detach();
         super.disconnectedCallback();
     }
+    updated(changed) {
+        if (changed.has('for')) {
+            const prevId = changed.get('for');
+            if (prevId) {
+                const root = this.parentElement?.getRootNode();
+                const prevEl = root?.getElementById(prevId) ?? document.getElementById(prevId);
+                if (prevEl) {
+                    prevEl.removeEventListener('focusin', this.__boundFocusin);
+                    prevEl.removeEventListener('focusout', this.__boundFocusout);
+                    prevEl.removeEventListener('pointerdown', this.__boundPointerdown);
+                }
+            }
+            this.attach();
+        }
+    }
     __focusin() {
         const focusTarget = this.__getFocusTarget();
         this.visible = focusTarget?.matches(':focus-visible') ?? false;
@@ -1114,35 +1118,47 @@ class FocusRing extends i$1 {
     __pointerdown() {
         this.visible = false;
     }
+    /**
+     * Resolves the element that should receive focus-ring event listeners by id.
+     * Prefers lookup from the current control's root node, then falls back to a
+     * document-level lookup.
+     *
+     * @returns The resolved focus target, if one can be found.
+     */
     __getFocusTarget() {
-        if (this._focusTarget) {
-            return this._focusTarget;
-        }
-        const focusTarget = document.getElementById(this.for);
-        if (focusTarget) {
-            return focusTarget;
+        if (this.for) {
+            const root = this.parentElement?.getRootNode();
+            if (root) {
+                const focusTarget = root.getElementById(this.for);
+                if (focusTarget) {
+                    return focusTarget;
+                }
+            }
+            const focusTarget = document.getElementById(this.for);
+            if (focusTarget) {
+                return focusTarget;
+            }
         }
         return undefined;
     }
     attach() {
         const focusTarget = this.__getFocusTarget();
         if (focusTarget) {
-            focusTarget.addEventListener('focusin', this.__focusin.bind(this));
-            focusTarget.addEventListener('focusout', this.__focusout.bind(this));
-            focusTarget.addEventListener('pointerdown', this.__pointerdown.bind(this));
+            focusTarget.addEventListener('focusin', this.__boundFocusin);
+            focusTarget.addEventListener('focusout', this.__boundFocusout);
+            focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
         }
     }
     detach() {
         const focusTarget = this.__getFocusTarget();
         if (focusTarget) {
-            focusTarget.removeEventListener('focusin', this.__focusin.bind(this));
-            focusTarget.removeEventListener('focusout', this.__focusout.bind(this));
-            focusTarget.removeEventListener('pointerdown', this.__pointerdown.bind(this));
+            focusTarget.removeEventListener('focusin', this.__boundFocusin);
+            focusTarget.removeEventListener('focusout', this.__boundFocusout);
+            focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
         }
-        this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$H];
+FocusRing.styles = [css_248z$L];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1619,7 +1635,7 @@ __decorate([
     e$4('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$G = i`* {
+var css_248z$K = i`* {
   box-sizing: border-box;
 }
 
@@ -1915,7 +1931,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$G];
+AccordionItem.styles = [css_248z$K];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1938,7 +1954,7 @@ __decorate([
     e$4('.header-button')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$F = i`* {
+var css_248z$J = i`* {
   box-sizing: border-box;
 }
 
@@ -2066,7 +2082,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$F];
+Accordion.styles = [css_248z$J];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -2078,7 +2094,7 @@ __decorate([
     o$1({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$E = i`* {
+var css_248z$I = i`* {
   box-sizing: border-box;
 }
 
@@ -2128,7 +2144,7 @@ var css_248z$E = i`* {
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-class Link extends BaseHyperlink(i$1) {
+class Link extends BaseHyperlinkMixin(i$1) {
     render() {
         return b `<a
       class=${e$3({
@@ -2142,9 +2158,9 @@ class Link extends BaseHyperlink(i$1) {
     </a>`;
     }
 }
-Link.styles = [css_248z$E];
+Link.styles = [css_248z$I];
 
-var css_248z$D = i`* {
+var css_248z$H = i`* {
   box-sizing: border-box;
 }
 
@@ -2281,7 +2297,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$C = i`:host([color=default]) {
+var css_248z$G = i`:host([color=default]) {
   --filled-tag-container-color: var(--color-surface);
   --filled-tag-label-text-color: var(--color-on-surface);
   --tonal-tag-container-color: var(--color-surface-container);
@@ -2347,7 +2363,7 @@ var css_248z$C = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$B = i`.tag {
+var css_248z$F = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2446,7 +2462,7 @@ class Tag extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Tag.styles = [css_248z$D, css_248z$C, css_248z$B];
+Tag.styles = [css_248z$H, css_248z$G, css_248z$F];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -2460,7 +2476,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$A = i`* {
+var css_248z$E = i`* {
   box-sizing: border-box;
 }
 
@@ -2572,7 +2588,7 @@ var css_248z$A = i`* {
   color: var(--background);
 }`;
 
-var css_248z$z = i`:host([color=red]) {
+var css_248z$D = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -2601,7 +2617,7 @@ var css_248z$z = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$y = i`.tag {
+var css_248z$C = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2739,7 +2755,7 @@ class Chip extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$A, css_248z$z, css_248z$y];
+Chip.styles = [css_248z$E, css_248z$D, css_248z$C];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2756,7 +2772,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$x = i`:host {
+var css_248z$B = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2962,9 +2978,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$x];
+LinearProgress.styles = [css_248z$B];
 
-var css_248z$w = i`:host {
+var css_248z$A = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -3127,47 +3143,47 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$w];
+CircularProgress.styles = [css_248z$A];
+
+var css_248z$z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
 
-var css_248z$v = i`:host {
+:host {
+  position: relative;
+  inset: 0;
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
-  display: inline-block;
-  height: 3rem;
-  width: 10rem;
+  display: flex;
+  pointer-events: none;
+}
+
+.skeleton,
+.skeleton::before {
+  inset: 0;
+  position: absolute;
+  border-start-start-radius: var(--skeleton-container-shape-start-start, var(--skeleton-container-shape));
+  border-start-end-radius: var(--skeleton-container-shape-start-end, var(--skeleton-container-shape));
+  border-end-start-radius: var(--skeleton-container-shape-end-start, var(--skeleton-container-shape));
+  border-end-end-radius: var(--skeleton-container-shape-end-end, var(--skeleton-container-shape));
+  corner-shape: var(--skeleton-container-shape-variant);
 }
 
 .skeleton {
-  position: relative;
-  padding: 0;
-  border: none;
   background: var(--skeleton-container-color);
-  box-shadow: none;
   overflow: hidden;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 }
 .skeleton::before {
-  position: absolute;
-  left: 0;
-  top: 0;
   animation: 3s ease-in-out skeleton infinite;
   background: var(--skeleton-element);
   block-size: 100%;
   content: "";
   inline-size: 100%;
   will-change: transform-origin, transform, opacity;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 }
 
 @keyframes skeleton {
@@ -3233,12 +3249,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$v];
+Skeleton.styles = [css_248z$z];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$u = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -3396,11 +3412,13 @@ class Input extends BaseInput {
                 <wc-icon-button
                   class="password-toggle"
                   variant="text"
-                  name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
                   @click=${() => {
                 this.passwordVisible = !this.passwordVisible;
             }}
                 >
+                  <wc-icon
+                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                  ></wc-icon>
                 </wc-icon-button>
               </pc-tooltip>
             `
@@ -3411,7 +3429,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$u];
+Input.styles = [css_248z$y];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3470,7 +3488,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$t = i`* {
+var css_248z$x = i`* {
   box-sizing: border-box;
 }
 
@@ -3479,422 +3497,281 @@ var css_248z$t = i`* {
 }
 
 :host {
-  --field-height: unset;
-  --field-padding-block: unset;
-}
-
-.field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  --_container-shape-start-start: var(--field-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--field-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--field-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--field-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-color: var(--field-container-color);
-  --_outline-width: var(--field-outline-width, 0.0675rem);
-  --_outline-color: var(--field-outline-color, var(--color-outline));
-  --_input-text-color: var(--field-label-text-color, var(--color-on-surface));
-  --_helper-text-color: var(--field-helper-text-color, var(--color-on-surface-variant));
-  --_helper-text-opacity: unset;
-  --_label-text-color: var(--field-label-text-color, var(--color-primary));
-}
-.field .field-header {
-  display: flex;
-  align-items: center;
-  margin-block-end: var(--spacing-100);
-  justify-content: space-between;
-  gap: var(--spacing-100);
-}
-.field .field-header .label {
-  position: relative;
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  color: var(--_label-text-color);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.field .field-header .label .required {
-  color: var(--color-error);
-  padding-inline-start: var(--spacing-025);
-}
-.field .field-body {
-  position: relative;
-  display: flex;
-  cursor: text;
-}
-.field .field-body .outline {
-  position: absolute;
-  z-index: 2;
-  left: 0;
+  display: block;
   width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--_outline-width) solid var(--_outline-color);
-  opacity: var(--_outline-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);
 }
-.field .field-body .background {
-  position: absolute;
-  z-index: 0;
-  left: 0;
+
+.url-input {
+  flex: 1;
   width: 100%;
-  height: 100%;
-  pointer-events: none;
-  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);
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: inherit;
+  font: inherit;
+  color: inherit;
 }
-.field .field-body .field-content {
+
+.url-display {
+  flex: 1;
   display: flex;
   align-items: center;
-  flex: 1;
-  height: var(--field-height, 3.5rem);
-  padding-block: var(--field-padding-block);
-  z-index: 1;
+  overflow: hidden;
 }
-.field .field-body .field-content .input-wrapper {
+
+.url-link {
   flex: 1;
-  padding-inline: var(--spacing-200);
-  position: relative;
-}
-.field .field-body .field-content .input-wrapper .outlined-label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  padding-inline: var(--spacing-200);
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-}
-.field .field-body .field-content .input-wrapper .outlined-slot-container {
-  opacity: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-primary);
+  text-decoration: none;
 }
-.field .field-body .field-content slot::slotted(*) {
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  --icon-size: 1.25rem;
-  --icon-color: var(--_input-text-color);
+.url-link:hover {
+  text-decoration: underline;
 }
-.field .field-body .field-content slot::slotted(input::placeholder) {
+
+.url-placeholder {
   color: var(--color-on-surface-variant);
-}
-.field .field-body .field-content .slot-start-wrapper.has-content {
-  margin-inline-start: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-body .field-content .slot-end-wrapper.has-content {
-  margin-inline-end: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-200);
-  margin-block-start: var(--spacing-050);
-  padding-inline: var(--spacing-200);
-}
-.field .field-footer .helper, .field .field-footer .text-count {
-  position: relative;
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_helper-text-color);
-  opacity: var(--_helper-text-opacity);
-}
-.field.focused {
-  --_outline-color: var(--color-primary);
-  --_outline-width: 0.125rem;
-}
-.field.has-error {
-  --_label-text-color: var(--color-error);
-  --_outline-color: var(--color-error);
-  --_helper-text-color: var(--color-error);
-  --_input-text-color: var(--color-error);
-}
-.field.has-warning {
-  --_label-text-color: var(--color-warning);
-  --_outline-color: var(--color-warning);
-  --_helper-text-color: var(--color-warning);
-  --_input-text-color: var(--color-warning);
-}
-.field.disabled .label {
-  opacity: 0.38;
-}
-.field.disabled {
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  cursor: not-allowed;
-}
-.field.readonly {
-  cursor: initial;
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.38;
-}
-.field.show-skeleton .skeleton {
-  display: block;
+  opacity: 0.6;
 }
 
-.skeleton {
-  display: none;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: 0;
-  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
-  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
-  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
-  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
+.edit-button {
+  --button-container-shape: var(--shape-corner-full);
 }`;
 
 /**
- * @label Field
- * @tag wc-field
- * @rawTag field
+ * @label URL Field
+ * @tag wc-url-field
+ * @rawTag url-field
  *
- * @summary Wrapper for form fields with label and help text.
+ * @summary A field for entering and displaying URLs with validation.
  * @overview
- * <p>Field provides consistent styling and behavior for form inputs.</p>
+ * <p>URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.</p>
  *
  * @example
  * ```html
- * <wc-field label="Name" required>
- *   some text
- * </wc-field>
+ * <wc-url-field label="Website" value="https://example.com"></wc-url-field>
  * ```
  * @tags form
  */
-class Field extends i$1 {
+class UrlField extends BaseInput {
     constructor() {
         super(...arguments);
+        this.value = '';
+        this.name = '';
+        this.placeholder = '';
         this.label = '';
-        this.help = '';
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.skeleton = false;
+        this.editing = false;
+        this.debounce = 300;
+        this.size = 'md';
+        this.variant = 'default';
         this.helperText = '';
         this.error = false;
         this.errorText = '';
         this.warning = false;
         this.warningText = '';
-        this.textCount = '';
         this.focused = false;
-        this.populated = false;
-        this.variant = 'default';
-        this.slotStartHasContent = false;
-        this.slotEndHasContent = false;
+        this.isValid = true;
     }
-    firstUpdated() {
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-start-wrapper slot'), hasContent => {
-            this.slotStartHasContent = hasContent;
-            this.requestUpdate();
-        });
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-end-wrapper slot'), hasContent => {
-            this.slotEndHasContent = hasContent;
-            this.requestUpdate();
-        });
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
     }
-    __handleClick() {
-        // @ts-ignore
-        this.host?.focus?.();
+    focus() {
+        if (!this.editing && !this.disabled && !this.readonly) {
+            this.startEditing();
+            return;
+        }
+        this.inputElement?.focus();
     }
-    __renderInputSlot() {
-        if (this.variant === 'outlined') {
-            if (this.populated || this.focused)
-                return b `<slot></slot>`;
-            return b `
-        <label class="outlined-label">${this.label}</label>
-        <div class="outlined-slot-container">
-          <slot></slot>
-        </div>
-      `;
+    blur() {
+        this.inputElement?.blur();
+    }
+    startEditing() {
+        if (this.disabled || this.readonly)
+            return;
+        this.editing = true;
+        setTimeout(() => this.inputElement?.focus(), 80);
+    }
+    closeEditing() {
+        this.isValid = this.validateUrl(this.value);
+        this.dispatchEvent(new CustomEvent('input-invalid', {
+            detail: !this.isValid,
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.isValid) {
+            this.editing = false;
         }
-        return b `<slot></slot>`;
     }
-    __renderFieldHeader() {
-        if (!this.label)
-            return A;
-        if (this.variant === 'outlined' && !this.populated && !this.focused) {
-            return A;
+    validateUrl(url) {
+        if (!url)
+            return true;
+        try {
+            new URL(url);
+            return true;
         }
-        return b `<div class="field-header">
-      <label class="label">
-        ${this.label}${this.required
-            ? b `<span class="required">*</span>`
-            : A}
-        <wc-skeleton class="skeleton"></wc-skeleton>
-      </label>
-    </div>`;
+        catch {
+            return false;
+        }
+    }
+    handleInput(event) {
+        this.value = event.target.value;
+        this.isValid = true;
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('value-change', {
+                detail: this.value,
+                bubbles: true,
+                composed: true,
+            }));
+        }, this.debounce);
+    }
+    handleFocusChange() {
+        this.focused = this.inputElement?.matches(':focus') ?? false;
+    }
+    handleBlur() {
+        this.focused = false;
+        this.closeEditing();
+    }
+    handleChange(event) {
+        redispatchEvent(this, event);
+    }
+    renderDisplayValue() {
+        if (!this.value) {
+            return b `<span class="url-placeholder">${this.placeholder}</span>`;
+        }
+        return b `
+      <a
+        class="url-link"
+        href=${this.value}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        ${this.value}
+      </a>
+    `;
     }
     render() {
-        const classes = {
-            field: true,
-            required: this.required,
-            disabled: this.disabled,
-            'show-skeleton': this.skeleton,
-            'has-error': this.error,
-            'has-warning': this.warning,
-            focused: this.focused,
-            readonly: this.readonly,
-            [`variant-${this.variant}`]: true,
-            populated: this.populated,
-        };
+        const hasValue = !!this.value;
+        const showInvalidState = this.error || !this.isValid;
+        const resolvedErrorText = !this.isValid
+            ? 'Please enter a valid URL'
+            : this.errorText;
         return b `
-      <div class=${e$3(classes)}>
-        ${this.__renderFieldHeader()}
-
-        <div class="field-body" @click=${this.__handleClick}>
-          <div class="outline"></div>
-          <div class="background"></div>
-          <wc-skeleton class="skeleton"></wc-skeleton>
-
-          <div class="field-content">
-            <div
-              class=${e$3({
-            'slot-start-wrapper': true,
-            'has-content': this.slotStartHasContent,
-        })}
-            >
-              <slot name="field-start"></slot>
-            </div>
-
-            <div class="input-wrapper">${this.__renderInputSlot()}</div>
-
-            <div
-              class=${e$3({
-            'slot-end-wrapper': true,
-            'has-content': this.slotEndHasContent,
-        })}
-            >
-              <slot name="field-end"></slot>
-            </div>
-          </div>
-        </div>
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${showInvalidState}
+        error-text=${resolvedErrorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${hasValue || this.editing}
+        ?focused=${this.focused}
+        .host=${this}
+        class="url-field-wrapper"
+      >
+        ${this.editing
+            ? b `
+              <input
+                class="url-input"
+                name=${this.name}
+                type="url"
+                placeholder=${this.placeholder}
+                .value=${this.value}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
+                @change=${this.handleChange}
+                @focus=${this.handleFocusChange}
+                @blur=${this.handleBlur}
+              />
+            `
+            : b `<div class="url-display">${this.renderDisplayValue()}</div>`}
 
-        ${this.__renderFieldFooter()}
-      </div>
+        ${!this.editing && !this.disabled && !this.readonly
+            ? b `
+              <wc-icon-button
+                class="edit-button"
+                slot="field-end"
+                variant="text"
+                @click=${(event) => {
+                event.stopPropagation();
+                this.startEditing();
+            }}
+              >
+                <wc-icon name="edit"></wc-icon>
+              </wc-icon-button>
+            `
+            : A}
+      </wc-field>
     `;
     }
-    __renderFieldFooter() {
-        if (!this.textCount &&
-            !this.helperText &&
-            !this.errorText &&
-            !this.warningText)
-            return A;
-        return b `<div class="field-footer">
-      ${this.__renderHelperText()} ${this.__renderWordCount()}
-    </div>`;
-    }
-    __renderHelperText() {
-        if (this.error)
-            return b `<div class="helper">${this.errorText}</div>`;
-        if (this.warning)
-            return b `<div class="helper">${this.warningText}</div>`;
-        if (this.helperText || this.helperText === '')
-            return b `<div class="helper">${this.helperText}</div>`;
-        return A;
-    }
-    __renderWordCount() {
-        if (!this.textCount)
-            return A;
-        return b `<div class="text-count">${this.textCount}</div>`;
-    }
 }
-Field.styles = [css_248z$t];
+UrlField.styles = [css_248z$x];
 __decorate([
     n({ type: String })
-], Field.prototype, "label", void 0);
+], UrlField.prototype, "value", void 0);
 __decorate([
     n({ type: String })
-], Field.prototype, "help", void 0);
+], UrlField.prototype, "name", void 0);
 __decorate([
-    n({ type: Boolean })
-], Field.prototype, "required", void 0);
+    n({ type: String })
+], UrlField.prototype, "placeholder", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
-], Field.prototype, "disabled", void 0);
+    n({ type: String })
+], UrlField.prototype, "label", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], Field.prototype, "readonly", void 0);
+], UrlField.prototype, "editing", void 0);
 __decorate([
-    n({ type: Boolean })
-], Field.prototype, "skeleton", void 0);
+    n({ type: Number })
+], UrlField.prototype, "debounce", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], UrlField.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], UrlField.prototype, "variant", void 0);
 __decorate([
     n({ type: String, attribute: 'helper-text' })
-], Field.prototype, "helperText", void 0);
+], UrlField.prototype, "helperText", void 0);
 __decorate([
     n({ type: Boolean })
-], Field.prototype, "error", void 0);
+], UrlField.prototype, "error", void 0);
 __decorate([
     n({ type: String, attribute: 'error-text' })
-], Field.prototype, "errorText", void 0);
+], UrlField.prototype, "errorText", void 0);
 __decorate([
     n({ type: Boolean })
-], Field.prototype, "warning", void 0);
+], UrlField.prototype, "warning", void 0);
 __decorate([
     n({ type: String, attribute: 'warning-text' })
-], Field.prototype, "warningText", void 0);
+], UrlField.prototype, "warningText", void 0);
 __decorate([
-    n({ type: String, attribute: 'text-count' })
-], Field.prototype, "textCount", void 0);
+    r()
+], UrlField.prototype, "focused", void 0);
 __decorate([
-    n({ type: Boolean })
-], Field.prototype, "focused", void 0);
+    r()
+], UrlField.prototype, "isValid", void 0);
 __decorate([
-    n({ type: Boolean })
-], Field.prototype, "populated", void 0);
-__decorate([
-    n({ type: String })
-], Field.prototype, "variant", void 0);
-__decorate([
-    n({ type: Object })
-], Field.prototype, "host", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotStartHasContent", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotEndHasContent", void 0);
+    e$4('.url-input')
+], UrlField.prototype, "inputElement", void 0);
 
-var css_248z$s = i`* {
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -3903,66 +3780,490 @@ var css_248z$s = i`* {
 }
 
 :host {
-  display: block;
-  width: 100%;
+  --field-height: unset;
+  --field-padding-block: unset;
 }
 
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
+.field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  --_container-shape-start-start: var(--field-container-shape-start-start, var(--shape-corner-extra-small));
+  --_container-shape-start-end: var(--field-container-shape-start-end, var(--shape-corner-extra-small));
+  --_container-shape-end-start: var(--field-container-shape-end-start, var(--shape-corner-extra-small));
+  --_container-shape-end-end: var(--field-container-shape-end-end, var(--shape-corner-extra-small));
+  --_container-color: var(--field-container-color);
+  --_outline-width: var(--field-outline-width, 0.0675rem);
+  --_outline-color: var(--field-outline-color, var(--color-outline));
+  --_input-text-color: var(--field-label-text-color, var(--color-on-surface));
+  --_helper-text-color: var(--field-helper-text-color, var(--color-on-surface-variant));
+  --_helper-text-opacity: unset;
+  --_label-text-color: var(--field-label-text-color, var(--color-primary));
 }
-
-.input-wrapper .input {
+.field .field-header {
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--spacing-100);
+  justify-content: space-between;
+  gap: var(--spacing-100);
+}
+.field .field-header .label {
+  position: relative;
+  font-family: var(--typography-body-small-font-family) !important;
+  font-size: var(--typography-body-small-font-size) !important;
+  font-weight: var(--typography-body-small-font-weight) !important;
+  line-height: var(--typography-body-small-line-height) !important;
+  letter-spacing: var(--typography-body-small-letter-spacing) !important;
+  color: var(--_label-text-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.field .field-header .label .required {
+  color: var(--color-error);
+  padding-inline-start: var(--spacing-025);
+}
+.field .field-body {
+  position: relative;
+  display: flex;
+  cursor: text;
+}
+.field .field-body .outline {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  opacity: var(--_outline-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);
+}
+.field .field-body .background {
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  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);
+}
+.field .field-body .field-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height: var(--field-height, 3.5rem);
+  padding-block: var(--field-padding-block);
+  z-index: 1;
+}
+.field .field-body .field-content .input-wrapper {
   flex: 1;
+  padding-inline: var(--spacing-200);
+  position: relative;
+}
+.field .field-body .field-content .input-wrapper .outlined-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  height: 100%;
   width: 100%;
-  background: none;
-  cursor: inherit;
+  padding-inline: var(--spacing-200);
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_input-text-color);
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
 }
-.input-wrapper .password-toggle {
-  --button-container-shape: var(--shape-corner-full);
+.field .field-body .field-content .input-wrapper .outlined-slot-container {
+  opacity: 0;
 }
-
-.stepper {
-  /* Chrome, Safari, Edge, Opera */
+.field .field-body .field-content slot::slotted(*) {
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_input-text-color);
+  --icon-size: 1.25rem;
+  --icon-color: var(--_input-text-color);
 }
-.stepper input::-webkit-outer-spin-button,
-.stepper input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.field .field-body .field-content slot::slotted(input::placeholder) {
+  color: var(--color-on-surface-variant);
 }
-.stepper {
-  /* Firefox */
+.field .field-body .field-content .slot-start-wrapper.has-content {
+  margin-inline-start: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
-.stepper input[type=number] {
-  -moz-appearance: textfield;
+.field .field-body .field-content .slot-end-wrapper.has-content {
+  margin-inline-end: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.field .field-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-200);
+  margin-block-start: var(--spacing-050);
+  padding-inline: var(--spacing-200);
+}
+.field .field-footer .helper, .field .field-footer .text-count {
+  position: relative;
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_helper-text-color);
+  opacity: var(--_helper-text-opacity);
+}
+.field.focused {
+  --_outline-color: var(--color-primary);
+  --_outline-width: 0.125rem;
+}
+.field.has-error {
+  --_label-text-color: var(--color-error);
+  --_outline-color: var(--color-error);
+  --_helper-text-color: var(--color-error);
+  --_input-text-color: var(--color-error);
+}
+.field.has-warning {
+  --_label-text-color: var(--color-warning);
+  --_outline-color: var(--color-warning);
+  --_helper-text-color: var(--color-warning);
+  --_input-text-color: var(--color-warning);
+}
+.field.disabled .label {
+  opacity: 0.38;
+}
+.field.disabled {
+  --_input-text-color: var(--color-on-surface-variant);
+  --_outline-opacity: 0.38;
+  --_helper-text-opacity: 0.38;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  cursor: not-allowed;
+}
+.field.readonly {
+  cursor: initial;
+  --_input-text-color: var(--color-on-surface-variant);
+  --_outline-opacity: 0.38;
+  --_helper-text-opacity: 0.38;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.38;
+}
+.field.show-skeleton .skeleton {
+  display: block;
+}
+
+.skeleton {
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
+  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
+  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
+  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
 }`;
 
-var _NumberField_id;
 /**
- * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @label Field
+ * @tag wc-field
+ * @rawTag field
  *
- * @summary The Number Field component is used to capture numeric user input.
+ * @summary Wrapper for form fields with label and help text.
+ * @overview
+ * <p>Field provides consistent styling and behavior for form inputs.</p>
  *
  * @example
  * ```html
- * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
+ * <wc-field label="Name" required>
+ *   some text
+ * </wc-field>
  * ```
+ * @tags form
  */
-class NumberField extends BaseInput {
+class Field extends i$1 {
     constructor() {
         super(...arguments);
-        _NumberField_id.set(this, crypto.randomUUID());
-        this.name = '';
-        this.placeholder = '';
         this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.autocomplete = 'off';
-        this.configAria = {};
+        this.help = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.skeleton = false;
+        this.helperText = '';
+        this.error = false;
+        this.errorText = '';
+        this.warning = false;
+        this.warningText = '';
+        this.textCount = '';
+        this.focused = false;
+        this.populated = false;
+        this.variant = 'default';
+        this.slotStartHasContent = false;
+        this.slotEndHasContent = false;
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-start-wrapper slot'), hasContent => {
+            this.slotStartHasContent = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-end-wrapper slot'), hasContent => {
+            this.slotEndHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __handleClick() {
+        // @ts-ignore
+        this.host?.focus?.();
+    }
+    __renderInputSlot() {
+        if (this.variant === 'outlined') {
+            if (this.populated || this.focused)
+                return b `<slot></slot>`;
+            return b `
+        <label class="outlined-label">${this.label}</label>
+        <div class="outlined-slot-container">
+          <slot></slot>
+        </div>
+      `;
+        }
+        return b `<slot></slot>`;
+    }
+    __renderFieldHeader() {
+        if (!this.label)
+            return A;
+        if (this.variant === 'outlined' && !this.populated && !this.focused) {
+            return A;
+        }
+        return b `<div class="field-header">
+      <label class="label">
+        ${this.label}${this.required
+            ? b `<span class="required">*</span>`
+            : A}
+        <wc-skeleton class="skeleton"></wc-skeleton>
+      </label>
+    </div>`;
+    }
+    render() {
+        const classes = {
+            field: true,
+            required: this.required,
+            disabled: this.disabled,
+            'show-skeleton': this.skeleton,
+            'has-error': this.error,
+            'has-warning': this.warning,
+            focused: this.focused,
+            readonly: this.readonly,
+            [`variant-${this.variant}`]: true,
+            populated: this.populated,
+        };
+        return b `
+      <div class=${e$3(classes)}>
+        ${this.__renderFieldHeader()}
+
+        <div class="field-body" @click=${this.__handleClick}>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <wc-skeleton class="skeleton"></wc-skeleton>
+
+          <div class="field-content">
+            <div
+              class=${e$3({
+            'slot-start-wrapper': true,
+            'has-content': this.slotStartHasContent,
+        })}
+            >
+              <slot name="field-start"></slot>
+            </div>
+
+            <div class="input-wrapper">${this.__renderInputSlot()}</div>
+
+            <div
+              class=${e$3({
+            'slot-end-wrapper': true,
+            'has-content': this.slotEndHasContent,
+        })}
+            >
+              <slot name="field-end"></slot>
+            </div>
+          </div>
+        </div>
+
+        ${this.__renderFieldFooter()}
+      </div>
+    `;
+    }
+    __renderFieldFooter() {
+        if (!this.textCount &&
+            !this.helperText &&
+            !this.errorText &&
+            !this.warningText)
+            return A;
+        return b `<div class="field-footer">
+      ${this.__renderHelperText()} ${this.__renderWordCount()}
+    </div>`;
+    }
+    __renderHelperText() {
+        if (this.error)
+            return b `<div class="helper">${this.errorText}</div>`;
+        if (this.warning)
+            return b `<div class="helper">${this.warningText}</div>`;
+        if (this.helperText || this.helperText === '')
+            return b `<div class="helper">${this.helperText}</div>`;
+        return A;
+    }
+    __renderWordCount() {
+        if (!this.textCount)
+            return A;
+        return b `<div class="text-count">${this.textCount}</div>`;
+    }
+}
+Field.styles = [css_248z$w];
+__decorate([
+    n({ type: String })
+], Field.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], Field.prototype, "help", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Field.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Field.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], Field.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], Field.prototype, "errorText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "warning", void 0);
+__decorate([
+    n({ type: String, attribute: 'warning-text' })
+], Field.prototype, "warningText", void 0);
+__decorate([
+    n({ type: String, attribute: 'text-count' })
+], Field.prototype, "textCount", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "focused", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "populated", void 0);
+__decorate([
+    n({ type: String })
+], Field.prototype, "variant", void 0);
+__decorate([
+    n({ type: Object })
+], Field.prototype, "host", void 0);
+__decorate([
+    r()
+], Field.prototype, "slotStartHasContent", void 0);
+__decorate([
+    r()
+], Field.prototype, "slotEndHasContent", void 0);
+
+var css_248z$v = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.input-element {
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
+
+.input-wrapper .input {
+  flex: 1;
+  width: 100%;
+  background: none;
+  cursor: inherit;
+}
+.input-wrapper .password-toggle {
+  --button-container-shape: var(--shape-corner-full);
+}
+
+.stepper {
+  /* Chrome, Safari, Edge, Opera */
+}
+.stepper input::-webkit-outer-spin-button,
+.stepper input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.stepper {
+  /* Firefox */
+}
+.stepper input[type=number] {
+  -moz-appearance: textfield;
+}`;
+
+var _NumberField_id;
+/**
+ * @label Number Field
+ * @tag number-field
+ * @rawTag number
+ *
+ * @summary The Number Field component is used to capture numeric user input.
+ *
+ * @example
+ * ```html
+ * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
+ * ```
+ */
+class NumberField extends BaseInput {
+    constructor() {
+        super(...arguments);
+        _NumberField_id.set(this, crypto.randomUUID());
+        this.name = '';
+        this.placeholder = '';
+        this.label = '';
+        this.inline = false;
+        this.size = 'md';
+        this.autocomplete = 'off';
+        this.configAria = {};
         /**
          * Helper text to display below the input.
          */
@@ -4045,11 +4346,12 @@ class NumberField extends BaseInput {
         ${this.stepper && !this.disabled
             ? b `<wc-icon-button
               class="stepper"
-              name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="remove"></wc-icon>
+            </wc-icon-button>`
             : A}
 
         <slot name="start" slot="field-start"></slot>
@@ -4081,17 +4383,18 @@ class NumberField extends BaseInput {
             ? b `<wc-icon-button
               class="stepper"
               variant="text"
-              name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="add"></wc-icon>
+            </wc-icon-button>`
             : A}
       </wc-field>
     `;
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$s];
+NumberField.styles = [css_248z$v];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -4153,7 +4456,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$r = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -4306,7 +4609,6 @@ class DatePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -4315,12 +4617,13 @@ class DatePicker extends BaseInput {
             });
         }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;
     }
 }
-DatePicker.styles = [css_248z$r];
+DatePicker.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4376,7 +4679,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$q = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -4529,7 +4832,6 @@ class TimePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -4538,12 +4840,13 @@ class TimePicker extends BaseInput {
             });
         }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;
     }
 }
-TimePicker.styles = [css_248z$q];
+TimePicker.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4599,7 +4902,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -4759,7 +5062,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$p];
+Textarea.styles = [css_248z$s];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4818,7 +5121,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$o = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -5159,7 +5462,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$o];
+Switch.styles = [css_248z$r];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -5203,7 +5506,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$n = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -5260,12 +5563,9 @@ var css_248z$n = i`* {
   outline: none;
   flex-shrink: 0;
 }
-.checkbox .state-layer {
-  position: absolute;
-  inset: 0;
+.checkbox .ripple {
   border-radius: 50%;
-  opacity: 0;
-  transition: opacity var(--duration-short2) var(--easing-standard);
+  --ripple-pressed-color: var(--color-on-surface);
 }
 .checkbox .outline {
   position: absolute;
@@ -5312,31 +5612,20 @@ var css_248z$n = i`* {
   color: var(--color-on-surface);
   cursor: inherit;
 }
-.checkbox:hover:not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.08;
-  background: var(--color-on-surface);
-}
-.checkbox:hover:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
-}
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.12;
-  background: var(--color-on-surface);
-}
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .container {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: 50%;
+.checkbox:hover:not(.disabled):not(.readonly).state-checked .ripple, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
-.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
+.checkbox .focus-ring {
+  --focus-ring-container-shape-start-start: 50%;
+  --focus-ring-container-shape-start-end: 50%;
+  --focus-ring-container-shape-end-start: 50%;
+  --focus-ring-container-shape-end-end: 50%;
 }
-.checkbox.active:not(.disabled):not(.readonly) .state-layer {
-  opacity: 0.12;
-  background: var(--color-on-surface);
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .ripple, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
-.checkbox.active:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .state-layer {
-  background: var(--checkbox-selected-color);
+.checkbox.active:not(.disabled):not(.readonly).state-checked .ripple, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
 }
 .checkbox.rounded {
   --checkbox-border-radius: 18px;
@@ -5614,6 +5903,7 @@ class Checkbox extends i$1 {
         return b `
       <label class=${e$3(cssClasses)}>
         <div
+          id="container"
           class="container"
           tabindex=${this.tabindex || 0}
           @keyup=${this.handleKeyUp}
@@ -5631,7 +5921,8 @@ class Checkbox extends i$1 {
                 : 'false'}
           ${spread(this.configAria)}
         >
-          <div class="state-layer"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <wc-focus-ring class="focus-ring" for='container'></wc-focus-ring>
           <div class="outline"></div>
           <div class="background"></div>
           <svg class="icon" viewBox="0 0 12 12">
@@ -5673,7 +5964,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$n];
+Checkbox.styles = [css_248z$q];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -5720,7 +6011,7 @@ __decorate([
     e$4('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$m = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -5807,9 +6098,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$m];
+Spinner.styles = [css_248z$p];
 
-var css_248z$l = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -5927,12 +6218,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$l];
+Container.styles = [css_248z$o];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$k = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -6095,7 +6386,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$k];
+EmptyState.styles = [css_248z$n];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -6109,7 +6400,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$j = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -7855,6 +8146,24 @@ class Tooltip extends i$1 {
         this._target.removeEventListener('click', this._onClick);
         this._target = null;
     }
+    set forElement(value) {
+        if (value) {
+            this._focusTarget = value;
+        }
+        else {
+            this._focusTarget = undefined;
+        }
+    }
+    __getFocusTarget() {
+        if (this._focusTarget) {
+            return this._focusTarget;
+        }
+        const focusTarget = document.getElementById(this.for);
+        if (focusTarget) {
+            return focusTarget;
+        }
+        return this.parentElement;
+    }
     attachListeners() {
         this.detachListeners(); // Cleanup old target if it exists
         // Resolve target: ID-based lookup or fallback to parent
@@ -7935,7 +8244,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$j];
+Tooltip.styles = [css_248z$m];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -7959,7 +8268,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$i = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -7995,7 +8304,7 @@ ol {
   pointer-events: none;
 }`;
 
-var css_248z$h = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -8125,7 +8434,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$h];
+BreadcrumbItem.styles = [css_248z$k];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -8179,13 +8488,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$i];
+Breadcrumb.styles = [css_248z$l];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$g = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -8293,7 +8602,7 @@ var css_248z$g = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$f = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -8405,7 +8714,7 @@ var css_248z$f = i`* {
   display: none;
 }`;
 
-var css_248z$e = i`:host-context([variant=standard]) {
+var css_248z$h = i`:host-context([variant=standard]) {
   --menu-item-label-color: var(--color-on-surface-variant);
   --menu-item-label-selected-color: var(--color-on-tertiary-container);
   --menu-item-container-selected-color: var(--color-tertiary-container);
@@ -8529,6 +8838,7 @@ class MenuItem extends i$1 {
         const controls = this.getAttribute('aria-controls');
         if (isLink) {
             return b `<a
+        id="item"
         class=${e$3(cssClasses)}
         href=${this.href}
         target=${this.target}
@@ -8541,6 +8851,7 @@ class MenuItem extends i$1 {
       </a> `;
         }
         return b `<div
+      id="item"
       class=${e$3(cssClasses)}
       aria-disabled=${String(this.disabled)}
       aria-haspopup=${this.hasSubmenu ? 'menu' : A}
@@ -8552,7 +8863,7 @@ class MenuItem extends i$1 {
     }
     renderContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
@@ -8566,7 +8877,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$f, css_248z$e];
+MenuItem.styles = [css_248z$i, css_248z$h];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "disabled", void 0);
@@ -8983,7 +9294,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$g];
+Menu.styles = [css_248z$j];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -9019,7 +9330,7 @@ __decorate([
     e$4('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$d = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -9214,7 +9525,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$d];
+SubMenu.styles = [css_248z$g];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -9234,7 +9545,7 @@ __decorate([
     o$1({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$c = i`@charset "UTF-8";
+var css_248z$f = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -9391,7 +9702,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$c];
+Image.styles = [css_248z$f];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -9414,7 +9725,7 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-var css_248z$b = i`* {
+var css_248z$e = i`* {
   box-sizing: border-box;
 }
 
@@ -9904,6 +10215,7 @@ class Tab extends i$1 {
         };
         if (!isLink) {
             return b `<button
+          id="button"
               class=${e$3(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
@@ -9949,7 +10261,7 @@ class Tab extends i$1 {
     }
     renderPrimaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -9974,7 +10286,7 @@ class Tab extends i$1 {
     }
     renderSecondaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -10004,7 +10316,7 @@ class Tab extends i$1 {
     }
     renderSegmentedTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -10043,7 +10355,7 @@ class Tab extends i$1 {
     }
 }
 _Tab_id = new WeakMap();
-Tab.styles = [css_248z$b];
+Tab.styles = [css_248z$e];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tab.prototype, "active", void 0);
@@ -10087,7 +10399,7 @@ __decorate([
     e$4('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
-var css_248z$a = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -10101,7 +10413,7 @@ var css_248z$a = i`* {
   height: 100%;
 }`;
 
-var css_248z$9 = i`* {
+var css_248z$c = i`* {
   box-sizing: border-box;
 }
 
@@ -10308,7 +10620,7 @@ class Tabs extends i$1 {
     `;
     }
 }
-Tabs.styles = [css_248z$9];
+Tabs.styles = [css_248z$c];
 Tabs.Tab = Tab;
 __decorate([
     n({ reflect: true })
@@ -10317,7 +10629,7 @@ __decorate([
     n({ type: Boolean })
 ], Tabs.prototype, "managed", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -10359,7 +10671,7 @@ class TabPanel extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabPanel.styles = [css_248z$8];
+TabPanel.styles = [css_248z$b];
 __decorate([
     n({ reflect: true })
 ], TabPanel.prototype, "value", void 0);
@@ -10512,11 +10824,11 @@ class TabGroup extends i$1 {
         return b `<slot></slot>`;
     }
 }
-TabGroup.styles = [css_248z$a];
+TabGroup.styles = [css_248z$d];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
 
-var css_248z$7 = i`:host {
+var css_248z$a = i`:host {
   --_track-height: 4px;
   --_thumb-size: 20px;
   --thumb-half: 10px;
@@ -10816,7 +11128,7 @@ class Slider extends i$1 {
     `;
     }
 }
-Slider.styles = [css_248z$7];
+Slider.styles = [css_248z$a];
 __decorate([
     n({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -10848,7 +11160,7 @@ __decorate([
     e$4('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
-var css_248z$6 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -11382,7 +11694,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$6];
+Table.styles = [css_248z$9];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -11441,7 +11753,7 @@ __decorate([
     r()
 ], Table.prototype, "isHorizontallyScrolled", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -11648,27 +11960,29 @@ class Pagination extends i$1 {
             color="secondary"
             variant="text"
             size="sm"
-            name="keyboard_arrow_left"
             title="Previous page"
             ?disabled=${isFirstPage}
             @click=${this.handlePreviousPage}
-          ></wc-icon-button>
+          >
+            <wc-icon name="keyboard_arrow_left"></wc-icon>
+          </wc-icon-button>
           <wc-icon-button
             class="nav-button"
             color="secondary"
             variant="text"
             size="sm"
-            name="keyboard_arrow_right"
             title="Next page"
             ?disabled=${isLastPage}
             @click=${this.handleNextPage}
-          ></wc-icon-button>
+          >
+            <wc-icon name="keyboard_arrow_right"></wc-icon>
+          </wc-icon-button>
         </div>
       </div>
     `;
     }
 }
-Pagination.styles = [css_248z$5];
+Pagination.styles = [css_248z$8];
 __decorate([
     n({ type: Number })
 ], Pagination.prototype, "page", void 0);
@@ -11682,7 +11996,7 @@ __decorate([
     n({ type: Array, attribute: 'page-sizes' })
 ], Pagination.prototype, "pageSizes", void 0);
 
-var css_248z$4 = i`* {
+var css_248z$7 = i`* {
   box-sizing: border-box;
 }
 
@@ -11692,120 +12006,121 @@ var css_248z$4 = i`* {
 
 :host {
   display: block;
-  --tree-node-height: 2.5rem;
-  --tree-node-icon-size: 1.25rem;
-  --tree-node-border-radius: var(--global-shape-corner-full, 9999px);
-  --tree-node-label-color: var(--color-on-surface);
-  --tree-node-icon-color: var(--color-on-surface-variant);
-  --tree-node-selected-background: var(--color-secondary-container);
-  --tree-node-selected-color: var(--color-on-secondary-container);
-  --tree-node-hover-background: var(--color-inverse-primary);
-  --tree-node-focus-ring-color: var(--color-primary);
-}
-
-.tree-node {
-  display: block;
-}
-
-.tree-node-content {
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-icon-size: 1.25rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+  --sidebar-menu-item-transition-duration: 200ms;
+  --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-menu-item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  height: var(--tree-node-height);
-  border-radius: var(--tree-node-border-radius);
-  color: var(--tree-node-label-color);
+  min-height: var(--sidebar-menu-item-height);
+  border-radius: var(--sidebar-menu-item-border-radius);
+  color: var(--_label-color);
   cursor: pointer;
   user-select: none;
   text-decoration: none;
   outline: none;
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
 }
-.tree-node-content:not(.disabled):hover {
-  background-color: var(--tree-node-hover-background);
+.sidebar-menu-item.selected {
+  --_container-color: var(--sidebar-menu-item-selected-background);
+  --_label-color: var(--sidebar-menu-item-selected-color);
 }
-.tree-node-content:focus-visible {
-  outline: 2px solid var(--tree-node-focus-ring-color);
+.sidebar-menu-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.tree-node-content.selected {
-  background-color: var(--tree-node-selected-background);
-  color: var(--tree-node-selected-color);
+.sidebar-menu-item.disabled .ripple {
+  display: none;
 }
-.tree-node-content.selected .node-icon {
-  --icon-color: var(--tree-node-selected-color);
+
+.sidebar-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  padding-inline: 0.75rem;
+  color: inherit;
+  z-index: 1;
 }
-.tree-node-content.disabled {
-  cursor: not-allowed;
-  opacity: 0.38;
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
   pointer-events: none;
 }
 
-.expand-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
-  transition: transform var(--duration-short2, 200ms) var(--easing-standard, ease);
-}
-.expand-icon.expanded {
-  transform: rotate(90deg);
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
 }
 
-.icon-space {
-  display: inline-block;
-  width: var(--tree-node-icon-size);
-  height: var(--tree-node-icon-size);
-  flex-shrink: 0;
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
 }
 
-.node-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
+.sidebar-menu-item.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
 }
 
-.tree-node-label {
+.sidebar-menu-item-label {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.node-children {
-  display: none;
-}
-.node-children.expanded {
-  display: block;
 }`;
 
 /**
- * @label Tree Node
- * @tag wc-tree-node
- * @rawTag tree-node
- * @parentRawTag tree-view
- * @summary A tree node represents a single item in a hierarchical tree structure. It supports nesting, icons, links, and keyboard navigation.
+ * @label Sidebar Menu Item
+ * @tag wc-sidebar-menu-item
+ * @rawTag sidebar-menu-item
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
  *
  * @example
  * ```html
- * <wc-tree-view>
- *   <wc-tree-node label="Parent">
- *     <wc-tree-node label="Child"></wc-tree-node>
- *   </wc-tree-node>
- * </wc-tree-view>
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
  * ```
  * @tags navigation
  */
-class TreeNode extends i$1 {
+class SidebarMenuItem extends i$1 {
     constructor() {
         super(...arguments);
         /**
-         * The value used to identify this node when selected.
+         * The value used to identify this item when selected.
          */
         this.value = '';
         /**
-         * The display label for this node.
+         * The display label for this item.
          */
         this.label = '';
         /**
@@ -11821,21 +12136,26 @@ class TreeNode extends i$1 {
          */
         this.target = '_self';
         /**
-         * If true, the user cannot interact with the node.
+         * If true, the user cannot interact with the item.
          */
         this.disabled = false;
         /**
-         * Whether the node is currently selected.
+         * Whether the item is currently selected.
          */
         this.selected = false;
         /**
-         * Whether child nodes are visible.
-         */
-        this.expanded = false;
-        /**
-         * The nesting depth level (set automatically by the parent tree-view).
+         * The nesting depth level (set automatically by the parent sidebar-menu).
          */
         this.level = 0;
+        this._onClick = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent('sidebar-menu-item:click', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, label: this.label },
+            }));
+        };
     }
     focus() {
         this._nativeElement?.focus();
@@ -11843,193 +12163,88 @@ class TreeNode extends i$1 {
     blur() {
         this._nativeElement?.blur();
     }
-    _getChildNodes() {
-        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._updateChildLevels();
-        this.setAttribute('role', 'treeitem');
-        this._syncHostAria();
-    }
-    _syncHostAria() {
-        const hasChildren = this._getChildNodes().length > 0;
-        if (hasChildren) {
-            this.setAttribute('aria-expanded', String(this.expanded));
-        }
-        else {
-            this.removeAttribute('aria-expanded');
-        }
-        this.setAttribute('aria-selected', String(this.selected));
-        this.setAttribute('aria-disabled', String(this.disabled));
-        this.setAttribute('aria-level', String(this.level + 1));
-    }
-    _updateChildLevels() {
-        const children = this._getChildNodes();
-        children.forEach(child => {
-            // eslint-disable-next-line no-param-reassign
-            child.level = this.level + 1;
-        });
-    }
-    _handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        const hasChildren = this._getChildNodes().length > 0;
-        if (hasChildren) {
-            this.expanded = !this.expanded;
-        }
-        this.dispatchEvent(new CustomEvent('tree-node:click', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: this.value || this.label,
-                label: this.label,
-                expanded: this.expanded,
-            },
-        }));
-    }
-    _handleKeyDown(event) {
-        if (this.disabled)
-            return;
-        const hasChildren = this._getChildNodes().length > 0;
-        switch (event.key) {
-            case ' ':
-            case 'Enter':
-                event.preventDefault();
-                if (hasChildren) {
-                    this.expanded = !this.expanded;
-                }
-                this.dispatchEvent(new CustomEvent('tree-node:click', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: this.value || this.label,
-                        label: this.label,
-                        expanded: this.expanded,
-                    },
-                }));
-                if (this.href) {
-                    window.open(this.href, this.target);
-                }
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (this.expanded && hasChildren) {
-                    this.expanded = false;
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (hasChildren) {
-                    if (!this.expanded) {
-                        this.expanded = true;
-                    }
-                    else {
-                        const firstChild = this._getChildNodes()[0];
-                        firstChild?.focus();
-                    }
-                }
-                break;
-        }
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has('level')) {
-            this._updateChildLevels();
-        }
-        this._syncHostAria();
-    }
-    _renderContent(hasChildren) {
-        // 0.125rem offset aligns text visually with the expand/icon space
-        const indentStyle = o$2({
-            paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
-        });
-        const contentClasses = e$3({
-            'tree-node-content': true,
-            selected: this.selected,
+    render() {
+        const classes = e$3({
+            'sidebar-menu-item': true,
             disabled: this.disabled,
+            selected: this.selected,
         });
-        const innerContent = b `
-      ${hasChildren
-            ? b `<wc-icon
-            class=${e$3({ 'expand-icon': true, expanded: this.expanded })}
-            name="arrow_right"
-          ></wc-icon>`
-            : b `<span class="icon-space"></span>`}
-      ${this.icon
-            ? b `<wc-icon class="node-icon" name=${this.icon}></wc-icon>`
-            : ''}
-      <span class="tree-node-label">${this.label}<slot name="label"></slot></span>
+        const content = b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <div class="sidebar-menu-item-content">
+        ${this.icon ? b `<wc-icon name="${this.icon}"></wc-icon>` : ''}
+        <span class="sidebar-menu-item-label">${this.label}</span>
+      </div>
     `;
         if (this.href) {
-            return b `<a
-        class=${contentClasses}
-        style=${indentStyle}
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this._handleClick}
-        @keydown=${this._handleKeyDown}
-      >${innerContent}</a>`;
+            return b `
+        <a
+          id="item"
+          href="${this.href}"
+          target="${this.target}"
+          class="${classes}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this._onClick}"
+        >
+          ${content}
+        </a>
+      `;
         }
-        return b `<div
-      class=${contentClasses}
-      style=${indentStyle}
-      tabindex=${this.disabled ? '-1' : '0'}
-      @click=${this._handleClick}
-      @keydown=${this._handleKeyDown}
-    >${innerContent}</div>`;
-    }
-    render() {
-        const hasChildren = this._getChildNodes().length > 0;
-        const nodeSlotClasses = e$3({
-            'node-children': true,
-            expanded: this.expanded,
-        });
-        return b `<div class="tree-node">
-      ${this._renderContent(hasChildren)}
-      <div class=${nodeSlotClasses}>
-        <slot></slot>
+        return b `
+      <div
+        id="item"
+        class="${classes}"
+        role="treeitem"
+        aria-label="${this.label}"
+        aria-selected="${String(this.selected)}"
+        aria-disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this._onClick}"
+        @keydown="${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._onClick();
+            }
+        }}"
+      >
+        ${content}
       </div>
-    </div>`;
+    `;
     }
 }
-TreeNode.styles = [css_248z$4];
+SidebarMenuItem.styles = [css_248z$7];
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "value", void 0);
+], SidebarMenuItem.prototype, "value", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "label", void 0);
+], SidebarMenuItem.prototype, "label", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "icon", void 0);
+], SidebarMenuItem.prototype, "icon", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "href", void 0);
+], SidebarMenuItem.prototype, "href", void 0);
 __decorate([
     n({ type: String, reflect: true })
-], TreeNode.prototype, "target", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "disabled", void 0);
+], SidebarMenuItem.prototype, "target", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "selected", void 0);
+], SidebarMenuItem.prototype, "disabled", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "expanded", void 0);
+], SidebarMenuItem.prototype, "selected", void 0);
 __decorate([
     n({ type: Number, reflect: true })
-], TreeNode.prototype, "level", void 0);
+], SidebarMenuItem.prototype, "level", void 0);
 __decorate([
-    e$4('.tree-node-content')
-], TreeNode.prototype, "_nativeElement", void 0);
+    e$4('.sidebar-menu-item-content')
+], SidebarMenuItem.prototype, "_nativeElement", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$6 = i`* {
   box-sizing: border-box;
 }
 
@@ -12039,166 +12254,454 @@ var css_248z$3 = i`* {
 
 :host {
   display: block;
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
 }
 
-.tree-view {
+.sidebar-sub-menu {
   display: block;
-  padding: var(--spacing-100, 0.5rem) 0;
-}`;
+}
 
-/**
- * @label Tree View
- * @tag wc-tree-view
- * @rawTag tree-view
- * @summary A tree view is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable nodes.
- *
- * @example
- * ```html
- * <wc-tree-view>
- *   <wc-tree-node label="Parent" expanded>
- *     <wc-tree-node label="Child 1"></wc-tree-node>
- *     <wc-tree-node label="Child 2"></wc-tree-node>
- *   </wc-tree-node>
- * </wc-tree-view>
- * ```
- * @tags navigation
- */
-class TreeView extends i$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * The value of the currently selected node.
-         */
-        this.selectedNode = '';
-        this._onNodeClick = (event) => {
-            const target = event.target;
-            if (target.disabled)
-                return;
-            const value = event.detail?.value ?? target.value ?? target.label;
-            this.selectedNode = value;
-            // Update selected state on all nodes
-            this._updateSelectedState(value);
-            this.dispatchEvent(new CustomEvent('tree-view:change', {
-                bubbles: true,
-                composed: true,
-                detail: { value, node: target },
-            }));
-        };
-        this._onSlotChange = () => {
-            this._syncSelectedStateFromProperty();
-        };
-        this._onKeyDown = (event) => {
-            const visibleNodes = this._getAllVisibleNodes().filter(n => !n.disabled);
-            if (visibleNodes.length === 0)
-                return;
-            const focusedIndex = visibleNodes.findIndex(node => {
-                const root = node.shadowRoot;
-                return root?.activeElement !== null && root?.activeElement !== undefined;
-            });
-            if (focusedIndex === -1 && event.key !== 'Tab')
-                return;
-            switch (event.key) {
-                case 'ArrowDown': {
-                    event.preventDefault();
-                    const nextIndex = (focusedIndex + 1) % visibleNodes.length;
-                    visibleNodes[nextIndex]?.focus();
-                    break;
-                }
-                case 'ArrowUp': {
-                    event.preventDefault();
-                    const prevIndex = (focusedIndex - 1 + visibleNodes.length) % visibleNodes.length;
-                    visibleNodes[prevIndex]?.focus();
-                    break;
-                }
-                case 'Home':
-                    event.preventDefault();
-                    visibleNodes[0]?.focus();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    visibleNodes[visibleNodes.length - 1]?.focus();
-                    break;
+.sidebar-sub-menu-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: var(--sidebar-menu-item-height);
+  cursor: pointer;
+  border-radius: var(--sidebar-menu-item-border-radius);
+  outline: none;
+  padding-inline-end: 0.75rem;
+  color: var(--_label-color);
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+}
+.sidebar-sub-menu-inner.selected {
+  --_container-color: var(--sidebar-menu-item-selected-background);
+  --_label-color: var(--sidebar-menu-item-selected-color);
+}
+.sidebar-sub-menu-inner.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.sidebar-sub-menu-inner.disabled .ripple {
+  display: none;
+}
+
+.sidebar-sub-menu-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  color: inherit;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  padding-inline: 0.75rem;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-sub-menu-inner.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-sub-menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-menu-item-icon-color);
+  flex-shrink: 0;
+  width: var(--sidebar-menu-item-height);
+  height: var(--sidebar-menu-item-height);
+  transition: transform var(--duration-medium1) var(--easing-standard);
+}
+
+:host([expanded]) .expand-icon {
+  transform: rotate(180deg);
+}
+
+.sidebar-sub-menu-children {
+  display: block;
+  overflow: hidden;
+  margin-left: var(--spacing-200);
+  max-height: 9999px;
+  opacity: 1;
+  transition: max-height var(--duration-medium1) var(--easing-standard), opacity var(--duration-medium1) var(--easing-standard);
+}
+
+.sidebar-sub-menu-children.hidden {
+  max-height: 0;
+  opacity: 0;
+}`;
+
+/**
+ * @label Sidebar Sub Menu
+ * @tag wc-sidebar-sub-menu
+ * @rawTag sidebar-sub-menu
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-sub-menu label="Parent" expanded>
+ *   <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ * </wc-sidebar-sub-menu>
+ * ```
+ * @tags navigation
+ */
+class SidebarSubMenu extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.label = '';
+        this.icon = '';
+        this.disabled = false;
+        this.selected = false;
+        this.expanded = false;
+        this.level = 0;
+        this._updateChildLevels = () => {
+            this._getChildNodes().forEach(child => {
+                if ('level' in child) {
+                    // eslint-disable-next-line no-param-reassign
+                    child.level = this.level + 1;
+                }
+            });
+        };
+        this._onClick = () => {
+            if (this.disabled)
+                return;
+            if (this._getChildNodes().length > 0) {
+                this.expanded = !this.expanded;
+            }
+            this.dispatchEvent(new CustomEvent('sidebar-menu-item:click', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, label: this.label },
+            }));
+        };
+    }
+    focus() {
+        this._nativeElement?.focus();
+    }
+    blur() {
+        this._nativeElement?.blur();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateChildLevels();
+    }
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('expanded')) {
+            this.setAttribute('aria-expanded', String(this.expanded));
+            if (this.expanded) {
+                this.setAttribute('data-expanded', '');
+            }
+            else {
+                this.removeAttribute('data-expanded');
+            }
+        }
+    }
+    _getChildNodes() {
+        return Array.from(this.children).filter(el => {
+            const tag = el.tagName.toLowerCase();
+            return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+        });
+    }
+    render() {
+        const hasChildren = this._getChildNodes().length > 0;
+        const wrapperClasses = e$3({
+            'sidebar-sub-menu': true,
+        });
+        const innerClasses = e$3({
+            'sidebar-sub-menu-inner': true,
+            disabled: this.disabled,
+            selected: this.selected,
+        });
+        const inlineStyles = o$2({
+            paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
+        });
+        return b `
+      <div class="${wrapperClasses}" style="${inlineStyles}">
+        <div
+          id="item"
+          class="${innerClasses}"
+          role="treeitem"
+          aria-label="${this.label}"
+          aria-selected="${String(this.selected)}"
+          aria-disabled="${this.disabled}"
+          aria-expanded="${this.expanded}"
+          @click="${this._onClick}"
+          @keydown="${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._onClick();
+            }
+        }}"
+          tabindex="${this.disabled ? -1 : 0}"
+        >
+          <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+          <div class="background"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <div class="sidebar-sub-menu-content">
+            ${this.icon ? b `<wc-icon name="${this.icon}"></wc-icon>` : ''}
+            <span class="sidebar-sub-menu-label">${this.label}</span>
+          </div>
+          ${hasChildren
+            ? b `
+                <wc-icon class="expand-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+              `
+            : ''}
+        </div>
+        <div class="sidebar-sub-menu-children ${(!hasChildren || !this.expanded) ? 'hidden' : ''}">
+          <slot @slotchange="${this._updateChildLevels}"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SidebarSubMenu.styles = [css_248z$6];
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarSubMenu.prototype, "value", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarSubMenu.prototype, "label", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SidebarSubMenu.prototype, "icon", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SidebarSubMenu.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SidebarSubMenu.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SidebarSubMenu.prototype, "expanded", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], SidebarSubMenu.prototype, "level", void 0);
+__decorate([
+    e$4('.sidebar-sub-menu-inner')
+], SidebarSubMenu.prototype, "_nativeElement", void 0);
+
+var css_248z$5 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.sidebar-menu {
+  display: block;
+  padding: var(--spacing-100, 0.5rem) 0;
+}`;
+
+/**
+ * @label Sidebar Menu
+ * @tag wc-sidebar-menu
+ * @rawTag sidebar-menu
+ * @summary A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+ *     <wc-sidebar-menu-item label="Child 2"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+class SidebarMenu extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value of the currently selected item.
+         */
+        this.selectedItem = '';
+        this._onItemClick = (event) => {
+            const item = event.target;
+            if (item.disabled)
+                return;
+            const value = event.detail?.value ?? item.value ?? item.label;
+            this.selectedItem = value;
+            // Update selected state on all items
+            this._updateSelectedState(value);
+            this.dispatchEvent(new CustomEvent('sidebar-menu:change', {
+                bubbles: true,
+                composed: true,
+                detail: { value, item },
+            }));
+        };
+        this._onKeyDown = (event) => {
+            const allVisible = this._getAllVisibleItems();
+            const currentElement = event.composedPath().find(target => target instanceof SidebarMenuItem || target instanceof SidebarSubMenu);
+            if (!currentElement) {
+                return;
+            }
+            if (!allVisible.includes(currentElement)) {
+                return;
+            }
+            const currentIndex = allVisible.indexOf(currentElement);
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                const nextIndex = (currentIndex + 1) % allVisible.length;
+                allVisible[nextIndex].focus();
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                const prevIndex = currentIndex === 0 ? allVisible.length - 1 : currentIndex - 1;
+                allVisible[prevIndex].focus();
+            }
+            else if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                currentElement.click();
+            }
+            else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                if (currentElement instanceof SidebarSubMenu && !currentElement.expanded) {
+                    currentElement.expanded = true;
+                }
+                else if (currentElement instanceof SidebarSubMenu) {
+                    const children = this._getChildNodes(currentElement);
+                    if (children.length > 0) {
+                        children[0].focus();
+                    }
+                }
+            }
+            else if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                if (currentElement instanceof SidebarSubMenu && currentElement.expanded) {
+                    currentElement.expanded = false;
+                }
             }
         };
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('tree-node:click', this._onNodeClick);
+        this.addEventListener('sidebar-menu-item:click', this._onItemClick);
         this.addEventListener('keydown', this._onKeyDown);
         this.setAttribute('role', 'tree');
     }
     updated(changedProps) {
         super.updated(changedProps);
-        if (changedProps.has('selectedNode')) {
+        if (changedProps.has('selectedItem')) {
             this._syncSelectedStateFromProperty();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('tree-node:click', this._onNodeClick);
+        this.removeEventListener('sidebar-menu-item:click', this._onItemClick);
         this.removeEventListener('keydown', this._onKeyDown);
     }
-    _getTopLevelNodes() {
-        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
+    _isSidebarNode(element) {
+        const tag = element.tagName.toLowerCase();
+        return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+    }
+    _getTopLevelItems() {
+        return Array.from(this.children).filter(el => this._isSidebarNode(el));
     }
-    _getAllVisibleNodes() {
+    _getChildNodes(item) {
+        return Array.from(item.children).filter(child => this._isSidebarNode(child));
+    }
+    _getAllVisibleItems() {
         const result = [];
-        const collect = (nodes) => {
-            nodes.forEach(node => {
-                result.push(node);
-                if (node.expanded) {
-                    const children = Array.from(node.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-                    collect(children);
+        const collect = (items) => {
+            items.forEach(item => {
+                result.push(item);
+                if (item instanceof SidebarSubMenu && item.expanded) {
+                    collect(this._getChildNodes(item));
                 }
             });
         };
-        collect(this._getTopLevelNodes());
+        collect(this._getTopLevelItems());
         return result;
     }
     _updateSelectedState(selectedValue) {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            const nodeValue = node.value || node.label;
+        const allItems = this._collectAllItems(this._getTopLevelItems());
+        allItems.forEach(item => {
+            const itemValue = item.value || item.label;
             // eslint-disable-next-line no-param-reassign
-            node.selected = nodeValue === selectedValue;
+            item.selected = itemValue === selectedValue;
         });
     }
-    _clearSelectedState() {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            // eslint-disable-next-line no-param-reassign
-            node.selected = false;
+    _collectAllItems(items) {
+        const result = [];
+        items.forEach(item => {
+            result.push(item);
+            if (item instanceof SidebarSubMenu) {
+                result.push(...this._collectAllItems(this._getChildNodes(item)));
+            }
         });
+        return result;
     }
     _syncSelectedStateFromProperty() {
-        if (this.selectedNode) {
-            this._updateSelectedState(this.selectedNode);
-            return;
-        }
-        this._clearSelectedState();
-    }
-    _collectAllNodes(nodes) {
-        const result = [];
-        nodes.forEach(node => {
-            result.push(node);
-            const children = Array.from(node.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
-            result.push(...this._collectAllNodes(children));
+        const allItems = this._collectAllItems(this._getTopLevelItems());
+        allItems.forEach(item => {
+            const itemValue = item.value || item.label;
+            item.selected = itemValue === this.selectedItem;
         });
-        return result;
     }
     render() {
-        return b `<div class="tree-view">
-      <slot @slotchange=${this._onSlotChange}></slot>
-    </div>`;
+        return b ` <div class="sidebar-menu"><slot></slot></div> `;
     }
 }
-TreeView.styles = [css_248z$3];
-TreeView.Node = TreeNode;
+SidebarMenu.styles = [css_248z$5];
 __decorate([
-    n({ type: String, attribute: 'selected-node', reflect: true })
-], TreeView.prototype, "selectedNode", void 0);
+    n({ type: String, attribute: 'selected-item', reflect: true })
+], SidebarMenu.prototype, "selectedItem", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -12469,15 +12972,15 @@ class Snackbar extends i$1 {
               size='small'
               aria-label="Dismiss notification"
               @click=${this.handleCloseClick}
-              name="close"
             >
+              <wc-icon name="close"></wc-icon>
             </wc-icon-button>`
             : A}
       </div>
     `;
     }
 }
-Snackbar.styles = [css_248z$2];
+Snackbar.styles = [css_248z$4];
 Snackbar.GLOBAL_OPEN_EVENT = 'wc-snackbar-will-open';
 Snackbar.EXIT_ANIMATION_MS = 180;
 __decorate([
@@ -12505,7 +13008,7 @@ __decorate([
     r()
 ], Snackbar.prototype, "dismissing", void 0);
 
-var css_248z$1 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -12914,7 +13417,7 @@ class Radio extends i$1 {
 }
 Radio.DIRECTION_NEXT = 1;
 Radio.DIRECTION_PREVIOUS = -1;
-Radio.styles = [css_248z$1];
+Radio.styles = [css_248z$3];
 __decorate([
     n({ type: String })
 ], Radio.prototype, "name", void 0);
@@ -12958,7 +13461,7 @@ __decorate([
     e$4('.input-native')
 ], Radio.prototype, "nativeElement", void 0);
 
-var css_248z = i`@charset "UTF-8";
+var css_248z$2 = i`@charset "UTF-8";
 * {
   box-sizing: border-box;
 }
@@ -13514,184 +14017,805 @@ class Select extends BaseInput {
             composed: true,
         }));
     }
-    _handleSearchInput(event) {
-        this._searchQuery = event.target.value;
-        if (this.search === 'managed') {
-            this.dispatchEvent(new CustomEvent('select-search', {
-                detail: { value: this._searchQuery },
-                bubbles: true,
-                composed: true,
-            }));
-        }
+    _handleSearchInput(event) {
+        this._searchQuery = event.target.value;
+        if (this.search === 'managed') {
+            this.dispatchEvent(new CustomEvent('select-search', {
+                detail: { value: this._searchQuery },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _handleChipDismiss(event, chipValue) {
+        event.stopPropagation();
+        const values = this._selectedValues.filter(v => v !== chipValue);
+        this.value = values.join(',');
+        this._dispatchChange();
+    }
+    _renderEmptyState() {
+        const hasSearchQuery = this._searchQuery.trim().length > 0;
+        return b `
+      <wc-empty-state
+        class="select-empty-state content-center"
+        illustration="no-document"
+        headline=${hasSearchQuery ? 'No results found' : 'No options available'}
+        description=${hasSearchQuery
+            ? 'Try a different search term.'
+            : 'There is nothing to select right now.'}
+      ></wc-empty-state>
+    `;
+    }
+    // ── Render helpers ─────────────────────────────────────────────────────────
+    _renderTriggerContent() {
+        // Typeahead: when open, show a text input for filtering
+        if (this.search && this._open) {
+            return b `<input
+        class="search-input"
+        .value=${this._searchQuery}
+        placeholder=${this._displayLabel || this.placeholder}
+        @input=${this._handleSearchInput}
+      />`;
+        }
+        // Multi-select: show chips for selected items
+        if (this.multiple && this._selectedValues.length > 0) {
+            return b `<div class="chips-container">
+        ${this._selectedValues.map(val => b `
+            <wc-chip
+              dismissible
+              value=${val}
+              @tag--dismiss=${(e) => this._handleChipDismiss(e, val)}
+            >${this._getLabelForValue(val)}</wc-chip
+            >
+          `)}
+      </div>`;
+        }
+        // Single select: show selected label or placeholder
+        const label = this._displayLabel;
+        if (!label) {
+            return b `<span class="placeholder">${this.placeholder}</span>`;
+        }
+        return b `<span class="display-value">${label}</span>`;
+    }
+    _renderFieldEnd() {
+        return b `
+      <wc-icon
+        class=${e$3({
+            'dropdown-icon': true,
+            'dropdown-icon--open': this._open,
+        })}
+        name="arrow_drop_down"
+      ></wc-icon>
+    `;
+    }
+    render() {
+        return b `
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${this._isPopulated || this._open}
+        ?focused=${this._focused}
+        .host=${this}
+        class="select-field"
+        @click=${this._handleFieldClick}
+      >
+        <div
+          class="select-trigger"
+          tabindex=${this.disabled ? -1 : 0}
+          role="combobox"
+          aria-label=${this.label || this.placeholder || 'Select option'}
+          aria-controls=${this._menuId}
+          aria-expanded=${String(this._open)}
+          aria-haspopup="listbox"
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+        >
+          ${this._renderTriggerContent()}
+        </div>
+
+        <div slot="field-end" class="field-end-wrapper">
+          ${this._renderFieldEnd()}
+        </div>
+      </wc-field>
+
+      <wc-menu
+        id=${this._menuId}
+        placement="bottom-start"
+        aria-label=${this.label || 'Options'}
+        @closed=${this._handleMenuClosed}
+        @menu-item-activate=${(e) => this._handleMenuItemActivate(e)}
+      >
+        <slot></slot>
+        ${this._noOptionsVisible ? this._renderEmptyState() : A}
+      </wc-menu>
+    `;
+    }
+}
+Select.styles = [css_248z$2];
+__decorate([
+    n({ type: Array })
+], Select.prototype, "options", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Select.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Select.prototype, "multiple", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "search", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "placeholder", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], Select.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], Select.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Select.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], Select.prototype, "errorText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Select.prototype, "warning", void 0);
+__decorate([
+    n({ type: String, attribute: 'warning-text' })
+], Select.prototype, "warningText", void 0);
+__decorate([
+    r()
+], Select.prototype, "_open", void 0);
+__decorate([
+    r()
+], Select.prototype, "_focused", void 0);
+__decorate([
+    r()
+], Select.prototype, "_searchQuery", void 0);
+__decorate([
+    r()
+], Select.prototype, "_noOptionsVisible", void 0);
+__decorate([
+    e$4('.select-trigger')
+], Select.prototype, "_triggerEl", void 0);
+__decorate([
+    e$4('.search-input')
+], Select.prototype, "_searchInputEl", void 0);
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  width: var(--nav-rail-width, 5rem); /* 80dp */
+  overflow: hidden;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-color: var(--nav-rail-container-color, var(--color-surface));
+  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  box-sizing: border-box;
+}
+.rail .header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+}
+.rail .header:empty {
+  display: none;
+}
+.rail wc-divider {
+  width: calc(100% - 1rem);
+  margin-block: 0.5rem;
+  flex-shrink: 0;
+}
+.rail .items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem; /* 12dp between items */
+  flex: 1;
+}
+.rail .items ::slotted(wc-navigation-rail-item) {
+  width: 100%;
+}
+.rail {
+  /* Alignment variants */
+}
+.rail.align-top .items {
+  justify-content: flex-start;
+}
+.rail.align-center .items {
+  justify-content: center;
+}
+.rail.align-bottom .items {
+  justify-content: flex-end;
+}`;
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+/* Reset native button/link styles */
+.item-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
+  color: inherit;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 3.5rem; /* 56dp */
+  padding-block: 0.25rem; /* 4dp vertical padding */
+  cursor: pointer;
+  gap: 0.25rem; /* 4dp gap between indicator and label */
+  box-sizing: border-box;
+  /* Color tokens */
+  --_inactive-icon-color: var(--nav-rail-inactive-icon-color, var(--color-on-surface-variant));
+  --_active-icon-color: var(--nav-rail-active-icon-color, var(--color-on-secondary-container));
+  --_inactive-label-color: var(--nav-rail-inactive-label-color, var(--color-on-surface-variant));
+  --_active-label-color: var(--nav-rail-active-label-color, var(--color-on-surface));
+  --_indicator-color: var(--nav-rail-indicator-color, var(--color-secondary-container));
+  --_indicator-shape: var(--nav-rail-indicator-shape, var(--shape-corner-full));
+  --_indicator-width: var(--nav-rail-indicator-width, 3.5rem); /* 56dp */
+  --_indicator-height: var(--nav-rail-indicator-height, 2rem); /* 32dp */
+  --_state-color: var(--_inactive-icon-color);
+  /* Focus ring */
+}
+.item .focus-ring {
+  z-index: 3;
+  --focus-ring-container-shape-start-start: var(--shape-corner-small);
+  --focus-ring-container-shape-start-end: var(--shape-corner-small);
+  --focus-ring-container-shape-end-start: var(--shape-corner-small);
+  --focus-ring-container-shape-end-end: var(--shape-corner-small);
+}
+.item {
+  /* Active indicator (pill behind icon) */
+}
+.item .indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  border-radius: var(--_indicator-shape);
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item .indicator .icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  position: relative;
+  pointer-events: none;
+}
+.item .indicator .icon-container ::slotted(*) {
+  --icon-size: 1.5rem; /* 24dp */
+  --icon-color: var(--_inactive-icon-color);
+  color: var(--_inactive-icon-color);
+  display: flex;
+}
+.item {
+  /* State layer for hover/press */
+}
+.item .state-layer {
+  position: absolute;
+  top: 0.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  pointer-events: none;
+  background-color: var(--_state-color);
+  opacity: 0;
+  z-index: 0;
+  border-radius: var(--_indicator-shape);
+  transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item .ripple {
+  z-index: 1;
+  --ripple-pressed-color: var(--_state-color);
+  --ripple-state-opacity: 0;
+  border-radius: var(--shape-corner-small, 4px);
+}
+.item {
+  /* Label */
+}
+.item .label {
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+  color: var(--_inactive-label-color);
+  text-align: center;
+  pointer-events: none;
+  z-index: 1;
+  transition: color var(--duration-short4, 200ms) var(--easing-standard, ease), font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
+}
+.item {
+  /* Active icon slot: hidden by default */
+}
+.item .active-icon-slot {
+  display: none;
+}
+.item .hidden-slot {
+  display: none;
+}
+.item {
+  /* Item content layout */
+}
+.item .item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  z-index: 1;
+}
+.item {
+  /* Active state */
+}
+.item.active {
+  --_state-color: var(--_active-icon-color);
+}
+.item.active .indicator {
+  background-color: var(--_indicator-color);
+}
+.item.active .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--_active-icon-color);
+  color: var(--_active-icon-color);
+}
+.item.active .label {
+  color: var(--_active-label-color);
+  font-weight: var(--typography-label-medium-font-weight-bold, 700);
+}
+.item {
+  /* Active icon slot: show when active and slot has content */
+}
+.item.active.has-active-icon .active-icon-slot {
+  display: flex;
+}
+.item.active.has-active-icon .icon-slot {
+  display: none;
+}
+.item {
+  /* Hover state */
+}
+.item:hover:not(.disabled) .state-layer {
+  opacity: 0.08;
+}
+.item {
+  /* Pressed state */
+}
+.item.pressed:not(.disabled) .state-layer {
+  opacity: 0.12;
+}
+.item {
+  /* Disabled state */
+}
+.item.disabled {
+  cursor: not-allowed;
+}
+.item.disabled .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--color-on-surface);
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .label {
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .ripple {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item .indicator,
+  .item .state-layer,
+  .item .label {
+    transition: none;
+  }
+}`;
+
+var _NavigationRailItem_id;
+/**
+ * @label Navigation Rail Item
+ * @tag wc-navigation-rail-item
+ * @rawTag navigation-rail-item
+ * @parentRawTag navigation-rail
+ *
+ * @summary An individual item within a navigation rail.
+ * @overview
+ * <p>Navigation rail items display a destination with an icon and optional label.</p>
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail-item>
+ *   <wc-icon slot="icon">home</wc-icon>
+ *   Home
+ * </wc-navigation-rail-item>
+ * ```
+ * @tags navigation
+ */
+class NavigationRailItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        _NavigationRailItem_id.set(this, crypto.randomUUID());
+        /** Whether this item is currently active/selected. */
+        this.active = false;
+        /** Whether this item is disabled. */
+        this.disabled = false;
+        /** Whether the parent rail is in collapsed mode (labels hidden). */
+        this.collapsed = false;
+        /** Link target. */
+        this.target = '_self';
+        /** Reason the item is disabled (shown to screen readers). */
+        this.disabledReason = '';
+        /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
+        this.throttleDelay = 200;
+        this._isPressed = false;
+        this._hasLabel = false;
+        this._hasActiveIcon = false;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            if (this.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this._isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this._isPressed = true;
+            }
+            else {
+                this._isPressed = false;
+            }
+        };
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
+            this._hasLabel = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="active-icon"]'), hasContent => {
+            this._hasActiveIcon = hasContent;
+            this.requestUpdate();
+        });
     }
-    _handleChipDismiss(event, chipValue) {
-        event.stopPropagation();
-        const values = this._selectedValues.filter(v => v !== chipValue);
-        this.value = values.join(',');
-        this._dispatchChange();
+    __isLink() {
+        return !!this.href;
     }
-    _renderEmptyState() {
-        const hasSearchQuery = this._searchQuery.trim().length > 0;
-        return b `
-      <wc-empty-state
-        class="select-empty-state content-center"
-        illustration="no-document"
-        headline=${hasSearchQuery ? 'No results found' : 'No options available'}
-        description=${hasSearchQuery
-            ? 'Try a different search term.'
-            : 'There is nothing to select right now.'}
-      ></wc-empty-state>
-    `;
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}`
+            : A;
     }
-    // ── Render helpers ─────────────────────────────────────────────────────────
-    _renderTriggerContent() {
-        // Typeahead: when open, show a text input for filtering
-        if (this.search && this._open) {
-            return b `<input
-        class="search-input"
-        .value=${this._searchQuery}
-        placeholder=${this._displayLabel || this.placeholder}
-        @input=${this._handleSearchInput}
-      />`;
-        }
-        // Multi-select: show chips for selected items
-        if (this.multiple && this._selectedValues.length > 0) {
-            return b `<div class="chips-container">
-        ${this._selectedValues.map(val => b `
-            <wc-chip
-              dismissible
-              value=${val}
-              @tag--dismiss=${(e) => this._handleChipDismiss(e, val)}
-            >${this._getLabelForValue(val)}</wc-chip
-            >
-          `)}
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
       </div>`;
-        }
-        // Single select: show selected label or placeholder
-        const label = this._displayLabel;
-        if (!label) {
-            return b `<span class="placeholder">${this.placeholder}</span>`;
-        }
-        return b `<span class="display-value">${label}</span>`;
+        return A;
     }
-    _renderFieldEnd() {
+    __renderItemContent() {
         return b `
-      <wc-icon
-        class=${e$3({
-            'dropdown-icon': true,
-            'dropdown-icon--open': this._open,
-        })}
-        name="arrow_drop_down"
-      ></wc-icon>
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <div class="state-layer"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="item-content">
+        <div class="indicator">
+          <div class="icon-container">
+            <slot name="active-icon" class="active-icon-slot"></slot>
+            <slot name="icon" class="icon-slot"></slot>
+          </div>
+        </div>
+        ${this._hasLabel && !this.collapsed
+            ? b `<div class="label"><slot></slot></div>`
+            : b `<slot class="hidden-slot"></slot>`}
+      </div>
+
+      ${this.__renderDisabledReason()}
     `;
     }
     render() {
-        return b `
-      <wc-field
-        label=${this.label}
-        ?required=${this.required}
+        const isLink = this.__isLink();
+        const cssClasses = {
+            item: true,
+            'item-element': true,
+            active: this.active,
+            disabled: this.disabled,
+            pressed: this._isPressed,
+            'has-label': this._hasLabel,
+            'has-active-icon': this._hasActiveIcon,
+        };
+        if (!isLink) {
+            return b `<button
+        id="item"
+        class=${e$3(cssClasses)}
         ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        warning-text=${this.warningText}
-        variant=${this.variant}
-        ?populated=${this._isPopulated || this._open}
-        ?focused=${this._focused}
-        .host=${this}
-        class="select-field"
-        @click=${this._handleFieldClick}
-      >
-        <div
-          class="select-trigger"
-          tabindex=${this.disabled ? -1 : 0}
-          role="combobox"
-          aria-label=${this.label || this.placeholder || 'Select option'}
-          aria-controls=${this._menuId}
-          aria-expanded=${String(this._open)}
-          aria-haspopup="listbox"
-          @click=${this._handleTriggerClick}
-          @keydown=${this._handleTriggerKeyDown}
-        >
-          ${this._renderTriggerContent()}
-        </div>
-
-        <div slot="field-end" class="field-end-wrapper">
-          ${this._renderFieldEnd()}
-        </div>
-      </wc-field>
-
-      <wc-menu
-        id=${this._menuId}
-        placement="bottom-start"
-        aria-label=${this.label || 'Options'}
-        @closed=${this._handleMenuClosed}
-        @menu-item-activate=${(e) => this._handleMenuItemActivate(e)}
+        aria-disabled=${`${this.disabled}`}
+        aria-current=${this.active ? 'page' : A}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
       >
-        <slot></slot>
-        ${this._noOptionsVisible ? this._renderEmptyState() : A}
-      </wc-menu>
-    `;
+        ${this.__renderItemContent()}
+      </button>`;
+        }
+        return b `<a
+      id="item"
+      class=${e$3(cssClasses)}
+      href=${this.href}
+      target=${this.target}
+      aria-current=${this.active ? 'page' : A}
+      aria-disabled=${`${this.disabled}`}
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+    >
+      ${this.__renderItemContent()}
+    </a>`;
     }
 }
-Select.styles = [css_248z];
-__decorate([
-    n({ type: Array })
-], Select.prototype, "options", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Select.prototype, "value", void 0);
+_NavigationRailItem_id = new WeakMap();
+NavigationRailItem.styles = [css_248z];
 __decorate([
     n({ type: Boolean, reflect: true })
-], Select.prototype, "multiple", void 0);
-__decorate([
-    n({ type: String })
-], Select.prototype, "search", void 0);
-__decorate([
-    n({ type: String })
-], Select.prototype, "placeholder", void 0);
+], NavigationRailItem.prototype, "active", void 0);
 __decorate([
-    n({ type: String })
-], Select.prototype, "label", void 0);
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "disabled", void 0);
 __decorate([
-    n({ type: String })
-], Select.prototype, "variant", void 0);
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "collapsed", void 0);
 __decorate([
-    n({ type: String, attribute: 'helper-text' })
-], Select.prototype, "helperText", void 0);
+    n({ reflect: true })
+], NavigationRailItem.prototype, "href", void 0);
 __decorate([
-    n({ type: Boolean })
-], Select.prototype, "error", void 0);
+    n()
+], NavigationRailItem.prototype, "target", void 0);
 __decorate([
-    n({ type: String, attribute: 'error-text' })
-], Select.prototype, "errorText", void 0);
+    n({ reflect: true })
+], NavigationRailItem.prototype, "value", void 0);
 __decorate([
-    n({ type: Boolean })
-], Select.prototype, "warning", void 0);
+    n({ attribute: 'disabled-reason' })
+], NavigationRailItem.prototype, "disabledReason", void 0);
 __decorate([
-    n({ type: String, attribute: 'warning-text' })
-], Select.prototype, "warningText", void 0);
+    n({ type: Number })
+], NavigationRailItem.prototype, "throttleDelay", void 0);
 __decorate([
     r()
-], Select.prototype, "_open", void 0);
+], NavigationRailItem.prototype, "_isPressed", void 0);
 __decorate([
     r()
-], Select.prototype, "_focused", void 0);
+], NavigationRailItem.prototype, "_hasLabel", void 0);
 __decorate([
     r()
-], Select.prototype, "_searchQuery", void 0);
+], NavigationRailItem.prototype, "_hasActiveIcon", void 0);
 __decorate([
-    r()
-], Select.prototype, "_noOptionsVisible", void 0);
+    e$4('.item-element')
+], NavigationRailItem.prototype, "itemElement", void 0);
+
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @overview
+ * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
+ * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
+ *
+ * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
+ * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
+ * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon">home</wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">search</wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">settings</wc-icon>
+ *     Settings
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+class NavigationRail extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Vertical alignment of items within the rail.
+         * - `"top"`: Items align to the top.
+         * - `"center"`: Items are centered (default).
+         * - `"bottom"`: Items align to the bottom.
+         */
+        this.alignment = 'center';
+        /**
+         * Display mode of the navigation rail.
+         * - `"expanded"`: shows labels.
+         * - `"collapsed"`: hides labels.
+         */
+        this.mode = 'expanded';
+        /**
+         * Whether to show a divider between the header and items sections.
+         */
+        this.showDivider = false;
+        this._handleItemClick = (event) => {
+            const target = event.target;
+            const item = target.closest('wc-navigation-rail-item');
+            if (!item || item.disabled)
+                return;
+            // Deactivate all items and activate the clicked one
+            for (const railItem of this._getItems()) {
+                railItem.active = railItem === item;
+            }
+            this.dispatchEvent(new CustomEvent('nav-change', {
+                detail: {
+                    value: item.value,
+                    item,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._syncItemMode = () => {
+            const isCollapsed = this.mode === 'collapsed';
+            for (const railItem of this._getItems()) {
+                railItem.collapsed = isCollapsed;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleItemClick);
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._handleItemClick);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this._syncItemMode();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('mode')) {
+            this._syncItemMode();
+        }
+    }
+    _getItems() {
+        return Array.from(this.querySelectorAll('wc-navigation-rail-item'));
+    }
+    render() {
+        const cssClasses = {
+            rail: true,
+            [`align-${this.alignment}`]: true,
+            [`mode-${this.mode}`]: true,
+        };
+        return b `
+      <div class=${e$3(cssClasses)}>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        ${this.showDivider ? b `<wc-divider></wc-divider>` : ''}
+        <nav class="items" role="presentation">
+          <slot @slotchange=${this._syncItemMode}></slot>
+        </nav>
+      </div>
+    `;
+    }
+}
+NavigationRail.styles = [css_248z$1];
+NavigationRail.Item = NavigationRailItem;
 __decorate([
-    e$4('.select-trigger')
-], Select.prototype, "_triggerEl", void 0);
+    n({ reflect: true })
+], NavigationRail.prototype, "alignment", void 0);
 __decorate([
-    e$4('.search-input')
-], Select.prototype, "_searchInputEl", void 0);
+    n({ reflect: true })
+], NavigationRail.prototype, "mode", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-divider' })
+], NavigationRail.prototype, "showDivider", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tabs as G, Tag as H, Icon as I, Textarea as J, TimePicker as K, LinearProgress as L, Menu as M, NumberField as N, Tooltip as O, Pagination as P, TreeNode as Q, Radio as R, SegmentedButton as S, Tab as T, TreeView as U, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, Ripple as n, SegmentedButtonGroup as o, Select as p, SelectOptionElement as q, Skeleton as r, Slider as s, Snackbar as t, Spinner as u, SubMenu as v, Switch as w, TabGroup as x, TabPanel as y, Table as z };
-//# sourceMappingURL=select-4pl4XBj7.js.map
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, SubMenu as G, Switch as H, Icon as I, TabGroup as J, TabPanel as K, LinearProgress as L, Menu as M, NavigationRail as N, Table as O, Pagination as P, Tabs as Q, Radio as R, SegmentedButton as S, Tab as T, Tag as U, Textarea as V, TimePicker as W, Tooltip as X, UrlField as Y, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, NavigationRailItem as n, NumberField as o, Ripple as p, SegmentedButtonGroup as q, Select as r, SelectOptionElement as s, SidebarMenu as t, SidebarMenuItem as u, SidebarSubMenu as v, Skeleton as w, Slider as x, Snackbar as y, Spinner as z };
+//# sourceMappingURL=navigation-rail-Lxetd5-Z.js.map