@redvars/peacock 3.3.1 → 3.3.3

package/dist/{tree-view-CLolVlU0.js → radio-b70_Ie9n.js}

@@ -1,12 +1,12 @@
-import { i, _ as __decorate, n, a as i$1, b, A, c as __classPrivateFieldGet } from './IndividualComponent-tDnXrOLV.js';
-import { r, e as e$3 } from './class-map-hJdvjl-W.js';
+import { a as i, _ as __decorate, n, i as i$1, b, A, c as __classPrivateFieldGet, w } from './IndividualComponent-Dt5xirYG.js';
+import { r, e as e$3 } from './class-map-59YGWLnx.js';
 import { e as e$1 } from './directive-Cuw6h7YA.js';
-import { e as e$2, o as o$4 } from './unsafe-html-CV6Je6HL.js';
+import { e as e$2, o as o$4 } from './unsafe-html-C2r3PyzF.js';
 import { c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, r as redispatchEvent, a as isDarkMode, i as isActivationClick, d as dispatchActivationClick, t as throttle } from './dispatch-event-utils-B4odODQf.js';
 import { a as e, e as e$4 } from './query-QBcUV-L_.js';
-import { o as o$3 } from './style-map-CfNHEkQp.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-BISF-Gl5.js';
-import { s as spread } from './button-trIfcqC7.js';
+import { o as o$3 } from './style-map-DcB52w-l.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-pALI5fmV.js';
+import { s as spread } from './button-ClzS8JLq.js';
 
 /**
  * @license
@@ -39,7 +39,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$I = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -168,7 +168,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$I];
+Icon.styles = [css_248z$L];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -188,7 +188,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$H = i`* {
+var css_248z$K = i`* {
   box-sizing: border-box;
 }
 
@@ -279,7 +279,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$H];
+Avatar.styles = [css_248z$K];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -287,7 +287,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$G = i`* {
+var css_248z$J = i`* {
   box-sizing: border-box;
 }
 
@@ -359,12 +359,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$G];
+Badge.styles = [css_248z$J];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$F = i`* {
+var css_248z$I = i`* {
   box-sizing: border-box;
 }
 
@@ -473,7 +473,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$F];
+Divider.styles = [css_248z$I];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -481,7 +481,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$E = i`/**
+var css_248z$H = i`/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -554,9 +554,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$E];
+Elevation.styles = [css_248z$H];
 
-var css_248z$D = i`:host {
+var css_248z$G = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -651,7 +651,7 @@ class FocusRing extends i$1 {
         this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$D];
+FocusRing.styles = [css_248z$G];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1112,7 +1112,7 @@ __decorate([
     e$4('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$C = i`* {
+var css_248z$F = i`* {
   box-sizing: border-box;
 }
 
@@ -1282,7 +1282,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$C];
+AccordionItem.styles = [css_248z$F];
 __decorate([
     n({ type: String, reflect: true })
 ], AccordionItem.prototype, "heading", void 0);
@@ -1296,7 +1296,7 @@ __decorate([
     e$4('.accordion-heading')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$B = i`* {
+var css_248z$E = i`* {
   box-sizing: border-box;
 }
 
@@ -1415,7 +1415,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$B];
+Accordion.styles = [css_248z$E];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, attribute: 'allow-multiple' })
@@ -1424,7 +1424,7 @@ __decorate([
     o$2({ selector: 'p-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$A = i`* {
+var css_248z$D = i`* {
   box-sizing: border-box;
 }
 
@@ -1495,7 +1495,7 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$A];
+Link.styles = [css_248z$D];
 __decorate([
     n({ reflect: true })
 ], Link.prototype, "href", void 0);
@@ -1506,7 +1506,7 @@ __decorate([
     r()
 ], Link.prototype, "tabIndexValue", void 0);
 
-var css_248z$z = i`* {
+var css_248z$C = i`* {
   box-sizing: border-box;
 }
 
@@ -1643,7 +1643,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$y = i`:host([color=default]) {
+var css_248z$B = 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);
@@ -1709,7 +1709,7 @@ var css_248z$y = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$x = i`.tag {
+var css_248z$A = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1808,7 +1808,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$z, css_248z$y, css_248z$x];
+Tag.styles = [css_248z$C, css_248z$B, css_248z$A];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -1822,7 +1822,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$w = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -1934,7 +1934,7 @@ var css_248z$w = i`* {
   color: var(--background);
 }`;
 
-var css_248z$v = i`:host([color=red]) {
+var css_248z$y = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -1963,7 +1963,7 @@ var css_248z$v = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$u = i`.tag {
+var css_248z$x = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2101,7 +2101,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$w, css_248z$v, css_248z$u];
+Chip.styles = [css_248z$z, css_248z$y, css_248z$x];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2118,7 +2118,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$t = i`:host {
+var css_248z$w = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2324,9 +2324,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$t];
+LinearProgress.styles = [css_248z$w];
 
-var css_248z$s = i`:host {
+var css_248z$v = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2489,9 +2489,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$s];
+CircularProgress.styles = [css_248z$v];
 
-var css_248z$r = i`:host {
+var css_248z$u = i`:host {
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
   display: inline-block;
@@ -2595,12 +2595,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$r];
+Skeleton.styles = [css_248z$u];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$q = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -2773,7 +2773,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$q];
+Input.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -2832,7 +2832,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -3200,7 +3200,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$p];
+Field.styles = [css_248z$s];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3256,7 +3256,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$o = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -3453,7 +3453,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$o];
+NumberField.styles = [css_248z$r];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3515,7 +3515,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$n = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -3682,7 +3682,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$n];
+DatePicker.styles = [css_248z$q];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -3738,7 +3738,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$m = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -3905,7 +3905,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$m];
+TimePicker.styles = [css_248z$p];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -3961,7 +3961,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$l = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -4121,7 +4121,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$l];
+Textarea.styles = [css_248z$o];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4180,7 +4180,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$k = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -4521,7 +4521,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$k];
+Switch.styles = [css_248z$n];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4565,7 +4565,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$j = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -4574,210 +4574,515 @@ var css_248z$j = i`* {
 }
 
 :host {
-  display: inline-flex;
-  --spinner-track-color: var(--color-primary-container);
-  --spinner-shape-color: var(--color-primary);
-  --spinner-size: 4rem;
+  display: inline-block;
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-selected-color: var(--color-primary);
+  --checkbox-unselected-color: var(--color-on-surface-variant);
+  --checkbox-checkmark-color: var(--color-on-primary);
+  --checkbox-state-layer-size: 40px;
+  --checkbox-disabled-opacity: 0.38;
+  --checkbox-border-radius: 2px;
 }
 
-.track {
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  background-color: var(--spinner-track-color);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
+.checkbox {
+  position: relative;
+  display: inline-flex;
   align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  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;
+}
+.checkbox.has-content {
+  gap: 8px;
+}
+.checkbox .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
-
-.shape {
-  width: 100%;
-  height: 100%;
-  background-color: var(--spinner-shape-color);
-  animation: spinner-aniation 3s var(--easing-standard) infinite;
+.checkbox .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-state-layer-size);
+  height: var(--checkbox-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
 }
-
-@keyframes spinner-aniation {
-  0%, 100% {
-    clip-path: inset(0% round 50%);
-    transform: rotate(0deg) scale(0.5);
-  }
-  10% {
-    transform: scale(0.7);
-  }
-  20% {
-    clip-path: inset(0% round 50%);
-    transform: rotate(72deg) scale(0.6, 0.3);
-  }
-  30% {
-    transform: scale(0.5);
-  }
-  40% {
-    clip-path: inset(0% round 12px);
-    transform: rotate(108deg) scale(0.3, 0.6);
-  }
-  60% {
-    transform: scale(0.5);
-  }
-  80% {
-    clip-path: inset(0% round 50%);
-    transform: rotate(72deg) scale(0.6, 0.3);
-  }
-  90% {
-    transform: rotate(324deg) scale(0.4, 0.6);
-  }
-}`;
-
-/**
- * @label Spinner
- * @tag wc-spinner
- * @rawTag spinner
- * @summary A spinner component that animates a circular shape.
- * @cssprop --spinner-track-color - The color of the track.
- * @cssprop --spinner-shape-color - The color of the shape.
- * @tags display
- *
- * @example
- * ```html
- * <wc-spinner></wc-spinner>
- * ```
- */
-class Spinner extends i$1 {
-    render() {
-        return b `
-      <div class="spinner track">
-        <div class="shape"></div>
-      </div>
-    `;
-    }
+.checkbox .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
 }
-Spinner.styles = [css_248z$j];
-
-var css_248z$i = i`* {
+.checkbox .outline {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 2px solid var(--checkbox-unselected-color);
+  border-radius: var(--checkbox-border-radius);
   box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
 }
-
-.screen-reader-only {
-  display: none !important;
+.checkbox .background {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  background: var(--checkbox-selected-color);
+  border-radius: var(--checkbox-border-radius);
+  opacity: 0;
+  transform: scale(0);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
 }
-
-:host {
-  display: block;
+.checkbox .icon {
+  position: absolute;
+  width: var(--checkbox-icon-size);
+  height: var(--checkbox-icon-size);
+  fill: none;
+  stroke: var(--checkbox-checkmark-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .icon .checkmark {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  transition: stroke-dashoffset var(--duration-short4) var(--easing-emphasized);
+}
+.checkbox .icon .indeterminate {
+  transform-origin: center;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .label {
+  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.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.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.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.rounded {
+  --checkbox-border-radius: 18px;
 }
 
-.container-wrapper {
-  container: containerwrapper/inline-size;
+.checkbox.state-checked .outline {
+  border-color: transparent;
 }
-.container-wrapper.size-max .container {
-  max-width: var(--container-max);
+.checkbox.state-checked .background {
+  opacity: 1;
+  transform: scale(1);
 }
-.container-wrapper.size-xl .container {
-  max-width: var(--container-xl);
+.checkbox.state-checked .icon {
+  opacity: 1;
 }
-.container-wrapper.size-sm .container {
-  max-width: var(--container-sm);
+.checkbox.state-checked .icon .checkmark {
+  stroke-dashoffset: 0;
 }
-.container-wrapper.size-md .container {
-  max-width: var(--container-md);
+
+.checkbox.state-indeterminate .outline {
+  border-color: transparent;
 }
-.container-wrapper.size-lg .container {
-  max-width: var(--container-lg);
+.checkbox.state-indeterminate .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-indeterminate .icon {
+  opacity: 1;
+  fill: var(--checkbox-checkmark-color);
+}
+.checkbox.state-indeterminate .icon .indeterminate {
+  opacity: 1;
 }
 
-.container {
-  margin: auto;
-  width: 100%;
+.checkbox.size-sm {
+  --checkbox-size: 16px;
+  --checkbox-icon-size: 10px;
+  --checkbox-state-layer-size: 36px;
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
 }
-.container .content {
-  padding: var(--spacing-200);
+.checkbox.size-sm .icon {
+  stroke-width: 1.5;
 }
 
-:host(.debug) {
-  border-width: 0 1px;
-  border-color: var(--color-red);
-  border-style: solid;
-  background: var(--color-red-50);
+.checkbox.size-md {
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-state-layer-size: 40px;
 }
-:host(.debug) .container {
-  border-width: 0 1px;
-  border-color: var(--color-blue);
-  border-style: solid;
-  background: var(--color-blue-100);
+.checkbox.size-md .icon {
+  stroke-width: 2;
 }
-:host(.debug) .container .content {
-  border-width: 0 1px;
-  border-color: var(--color-green);
-  border-style: solid;
-  background: var(--color-green-100);
+
+.checkbox.size-lg {
+  --checkbox-size: 24px;
+  --checkbox-icon-size: 16px;
+  --checkbox-state-layer-size: 48px;
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+}
+.checkbox.size-lg .icon {
+  stroke-width: 2.5;
 }
 
-.content {
-  margin-inline: 0;
+.checkbox.readonly {
+  cursor: default;
+}
+.checkbox.readonly .label {
+  color: var(--color-on-surface);
+}
+.checkbox.readonly .outline {
+  border-color: var(--color-on-surface-variant);
+}
+.checkbox.readonly.state-checked .background, .checkbox.readonly.state-indeterminate .background {
+  background: var(--color-on-surface-variant);
+}
+.checkbox.readonly .state-layer {
+  display: none;
 }
 
-@container containerwrapper (min-width: 672px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity);
 }
-@container containerwrapper (min-width: 1056px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
+.checkbox.disabled .label {
+  color: var(--color-on-surface);
 }
-@container containerwrapper (min-width: 1312px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
+.checkbox.disabled .outline {
+  border-color: var(--color-on-surface);
 }
-@container containerwrapper (min-width: 1584px) {
-  .content {
-    margin-inline: var(--spacing-300);
-  }
+.checkbox.disabled.state-checked .background, .checkbox.disabled.state-indeterminate .background {
+  background: var(--color-on-surface);
+}
+.checkbox.disabled .state-layer {
+  display: none;
 }`;
 
 /**
- * @label Container
- * @tag wc-container
- * @rawTag container
- * @summary A responsive container component for layout.
- * @cssprop --container-max-width - Controls the maximum width of the container.
- * @cssprop --container-padding - Controls the padding of the container.
- * @tags layout
+ * @label Checkbox
+ * @tag wc-checkbox
+ * @rawTag checkbox
+ * @summary Captures boolean input with an optional indeterminate mode.
+ * @overview
+ * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
+ * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ * @cssprop --checkbox-size: Size of the checkbox container.
+ * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
+ * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
+ * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
+ * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
+ * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
+ * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ * @tags input, form
  *
  * @example
  * ```html
- * <wc-container size="lg">Content</wc-container>
+ * <wc-checkbox label="Accept terms"></wc-checkbox>
  * ```
  */
-class Container extends i$1 {
+class Checkbox extends i$1 {
     constructor() {
         super(...arguments);
-        this.size = 'full';
-    }
-    render() {
-        const wrapperClasses = {
-            'container-wrapper': true,
-            [`size-${this.size}`]: true,
-        };
-        return b `
-      <div class=${e$3(wrapperClasses)}>
-        <div class="container">
-          <div class="content">
-            <slot></slot>
-          </div>
+        /**
+         * The input field name.
+         */
+        this.name = '';
+        /**
+         * The checkbox label.
+         */
+        this.label = '';
+        /**
+         * The input field value (checked state).
+         */
+        this.value = false;
+        /**
+         * If true, displays the checkbox in an indeterminate state.
+         */
+        this.indeterminate = false;
+        /**
+         * If true, the checkbox has rounded corners. Defaults to `false`.
+         */
+        this.rounded = false;
+        /**
+         * The checkbox size.
+         * Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'md';
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the checkbox is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the checkbox. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        this.hasFocus = false;
+        this.isActive = false;
+        this.slotHasContent = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.clickHandler(evt);
+            }
+        };
+        this.clickHandler = (ev) => {
+            if (!this.disabled && !this.readonly) {
+                this.value = !this.value;
+                this.indeterminate = false;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { value: this.value, originalEvent: ev },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.containerElement?.focus();
+            }
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleKeyUp = (evt) => {
+            if (evt.key === 'Enter') {
+                this.clickHandler(evt);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes();
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            this.tabindex = this.getAttribute('tabindex') || undefined;
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    /**
+     * Sets focus on the checkbox.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the checkbox.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            checkbox: true,
+            'state-checked': this.value,
+            'state-indeterminate': !this.value && this.indeterminate,
+            [`size-${this.size}`]: true,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            rounded: this.rounded,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$3(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.tabindex || 0}
+          @keyup=${this.handleKeyUp}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          role="checkbox"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.value
+            ? 'true'
+            : this.indeterminate
+                ? 'mixed'
+                : 'false'}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <svg class="icon" viewBox="0 0 12 12">
+            ${this.value
+            ? w `
+                  <path
+                    class="checkmark"
+                    d="M2 6L5 9L10 2"
+                  />
+                `
+            : this.indeterminate
+                ? w `<rect
+                    class="indeterminate"
+                    x="2"
+                    y="5"
+                    width="8"
+                    height="2"
+                  />`
+                : ''}
+          </svg>
         </div>
-      </div>
+
+        <input
+          type="checkbox"
+          class="input-native"
+          name=${this.name}
+          .checked=${this.value}
+          .indeterminate=${this.indeterminate}
+          aria-hidden="true"
+          ?required=${this.required}
+          tabindex="-1"
+          @click=${this.clickHandler}
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
     `;
     }
 }
-Container.styles = [css_248z$i];
+Checkbox.styles = [css_248z$m];
 __decorate([
-    n({ type: String, reflect: true })
-], Container.prototype, "size", void 0);
+    n({ type: String })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "rounded", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Checkbox.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "slotHasContent", void 0);
+__decorate([
+    e$4('.container')
+], Checkbox.prototype, "containerElement", void 0);
+__decorate([
+    e$4('.input-native')
+], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$h = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -4786,55 +5091,267 @@ var css_248z$h = i`* {
 }
 
 :host {
-  display: block;
-}
-
-.empty-state {
-  container: emptystate/inline-size;
-  padding: var(--spacing-100);
-  height: 100%;
-  max-width: var(--container-lg);
-  margin: auto;
+  display: inline-flex;
+  --spinner-track-color: var(--color-primary-container);
+  --spinner-shape-color: var(--color-primary);
+  --spinner-size: 4rem;
 }
 
-.empty-state-container {
+.track {
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  background-color: var(--spinner-track-color);
+  border-radius: 50%;
   display: flex;
-  height: 100%;
   justify-content: center;
-  gap: var(--spacing-500);
   align-items: center;
+  overflow: hidden;
 }
 
-.illustration {
+.shape {
+  width: 100%;
   height: 100%;
-  display: flex;
-}
-.illustration .illustration-svg {
-  --icon-size: 100%;
+  background-color: var(--spinner-shape-color);
+  animation: spinner-aniation 3s var(--easing-standard) infinite;
 }
 
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.content .title {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
-  margin-bottom: var(--spacing-200);
-  color: var(--color-on-surface);
-}
-.content .description {
-  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;
-  margin-bottom: var(--spacing-400);
-  color: var(--color-on-surface-variant);
+@keyframes spinner-aniation {
+  0%, 100% {
+    clip-path: inset(0% round 50%);
+    transform: rotate(0deg) scale(0.5);
+  }
+  10% {
+    transform: scale(0.7);
+  }
+  20% {
+    clip-path: inset(0% round 50%);
+    transform: rotate(72deg) scale(0.6, 0.3);
+  }
+  30% {
+    transform: scale(0.5);
+  }
+  40% {
+    clip-path: inset(0% round 12px);
+    transform: rotate(108deg) scale(0.3, 0.6);
+  }
+  60% {
+    transform: scale(0.5);
+  }
+  80% {
+    clip-path: inset(0% round 50%);
+    transform: rotate(72deg) scale(0.6, 0.3);
+  }
+  90% {
+    transform: rotate(324deg) scale(0.4, 0.6);
+  }
+}`;
+
+/**
+ * @label Spinner
+ * @tag wc-spinner
+ * @rawTag spinner
+ * @summary A spinner component that animates a circular shape.
+ * @cssprop --spinner-track-color - The color of the track.
+ * @cssprop --spinner-shape-color - The color of the shape.
+ * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-spinner></wc-spinner>
+ * ```
+ */
+class Spinner extends i$1 {
+    render() {
+        return b `
+      <div class="spinner track">
+        <div class="shape"></div>
+      </div>
+    `;
+    }
+}
+Spinner.styles = [css_248z$l];
+
+var css_248z$k = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.container-wrapper {
+  container: containerwrapper/inline-size;
+}
+.container-wrapper.size-max .container {
+  max-width: var(--container-max);
+}
+.container-wrapper.size-xl .container {
+  max-width: var(--container-xl);
+}
+.container-wrapper.size-sm .container {
+  max-width: var(--container-sm);
+}
+.container-wrapper.size-md .container {
+  max-width: var(--container-md);
+}
+.container-wrapper.size-lg .container {
+  max-width: var(--container-lg);
+}
+
+.container {
+  margin: auto;
+  width: 100%;
+}
+.container .content {
+  padding: var(--spacing-200);
+}
+
+:host(.debug) {
+  border-width: 0 1px;
+  border-color: var(--color-red);
+  border-style: solid;
+  background: var(--color-red-50);
+}
+:host(.debug) .container {
+  border-width: 0 1px;
+  border-color: var(--color-blue);
+  border-style: solid;
+  background: var(--color-blue-100);
+}
+:host(.debug) .container .content {
+  border-width: 0 1px;
+  border-color: var(--color-green);
+  border-style: solid;
+  background: var(--color-green-100);
+}
+
+.content {
+  margin-inline: 0;
+}
+
+@container containerwrapper (min-width: 672px) {
+  .content {
+    margin-inline: var(--spacing-200);
+  }
+}
+@container containerwrapper (min-width: 1056px) {
+  .content {
+    margin-inline: var(--spacing-200);
+  }
+}
+@container containerwrapper (min-width: 1312px) {
+  .content {
+    margin-inline: var(--spacing-200);
+  }
+}
+@container containerwrapper (min-width: 1584px) {
+  .content {
+    margin-inline: var(--spacing-300);
+  }
+}`;
+
+/**
+ * @label Container
+ * @tag wc-container
+ * @rawTag container
+ * @summary A responsive container component for layout.
+ * @cssprop --container-max-width - Controls the maximum width of the container.
+ * @cssprop --container-padding - Controls the padding of the container.
+ * @tags layout
+ *
+ * @example
+ * ```html
+ * <wc-container size="lg">Content</wc-container>
+ * ```
+ */
+class Container extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.size = 'full';
+    }
+    render() {
+        const wrapperClasses = {
+            'container-wrapper': true,
+            [`size-${this.size}`]: true,
+        };
+        return b `
+      <div class=${e$3(wrapperClasses)}>
+        <div class="container">
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+Container.styles = [css_248z$k];
+__decorate([
+    n({ type: String, reflect: true })
+], Container.prototype, "size", void 0);
+
+var css_248z$j = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.empty-state {
+  container: emptystate/inline-size;
+  padding: var(--spacing-100);
+  height: 100%;
+  max-width: var(--container-lg);
+  margin: auto;
+}
+
+.empty-state-container {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  gap: var(--spacing-500);
+  align-items: center;
+}
+
+.illustration {
+  height: 100%;
+  display: flex;
+}
+.illustration .illustration-svg {
+  --icon-size: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.content .title {
+  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
+  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
+  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
+  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
+  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
+  margin-bottom: var(--spacing-200);
+  color: var(--color-on-surface);
+}
+.content .description {
+  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;
+  margin-bottom: var(--spacing-400);
+  color: var(--color-on-surface-variant);
 }
 
 :host(.content-center) .content {
@@ -4933,7 +5450,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$h];
+EmptyState.styles = [css_248z$j];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -4947,7 +5464,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$g = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -6773,7 +7290,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$g];
+Tooltip.styles = [css_248z$i];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -6797,7 +7314,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$f = i`* {
+var css_248z$h = i`* {
   box-sizing: border-box;
 }
 
@@ -6839,7 +7356,7 @@ ol {
  * SPDX-License-Identifier: BSD-3-Clause
  */const o=o=>o??A;
 
-var css_248z$e = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -6969,7 +7486,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$e];
+BreadcrumbItem.styles = [css_248z$g];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -7023,13 +7540,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$f];
+Breadcrumb.styles = [css_248z$h];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$d = i`* {
+var css_248z$f = i`* {
   box-sizing: border-box;
 }
 
@@ -7113,7 +7630,7 @@ var css_248z$d = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$c = i`* {
+var css_248z$e = i`* {
   box-sizing: border-box;
 }
 
@@ -7224,7 +7741,7 @@ var css_248z$c = i`* {
   display: none;
 }`;
 
-var css_248z$b = i`:host-context([variant=standard]) {
+var css_248z$d = 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);
@@ -7240,7 +7757,7 @@ var css_248z$b = i`:host-context([variant=standard]) {
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu-list
+ * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -7392,7 +7909,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$c, css_248z$b];
+MenuItem.styles = [css_248z$e, css_248z$d];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "disabled", void 0);
@@ -7792,7 +8309,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$d];
+Menu.styles = [css_248z$f];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -7825,7 +8342,7 @@ __decorate([
     e$4('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$a = i`* {
+var css_248z$c = i`* {
   box-sizing: border-box;
 }
 
@@ -8019,7 +8536,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$a];
+SubMenu.styles = [css_248z$c];
 __decorate([
     n({ type: Number, attribute: 'hover-open-delay' })
 ], SubMenu.prototype, "hoverOpenDelay", void 0);
@@ -8039,7 +8556,7 @@ __decorate([
     o$2({ slot: 'menu' })
 ], SubMenu.prototype, "_menus", void 0);
 
-var css_248z$9 = i`@charset "UTF-8";
+var css_248z$b = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -8196,7 +8713,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$9];
+Image.styles = [css_248z$b];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -8219,7 +8736,7 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$a = i`* {
   box-sizing: border-box;
 }
 
@@ -8263,7 +8780,7 @@ var css_248z$8 = i`* {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--_tab-icon-label-spacing);
+  gap: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
@@ -8275,13 +8792,27 @@ var css_248z$8 = i`* {
 .tab .tab-content .slot-container {
   display: none;
 }
-.tab .indicator {
-  position: absolute;
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  background: var(--_active-indicator-color);
-  border-radius: var(--_active-indicator-shape);
+.tab .tab-content ::slotted([slot=icon]) {
+  flex: none;
+  color: var(--_label-text-color);
+  --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.tab .tab-content ::slotted([slot=badge]) {
+  flex: none;
+  margin-inline-start: var(--_tab-badge-label-spacing, 0);
+  --badge-color: var(--_tab-badge-color, var(--color-error));
+}
+.tab.has-icon .tab-content {
+  gap: var(--_tab-icon-label-spacing);
+}
+.tab .indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  background: var(--_active-indicator-color);
+  border-radius: var(--_active-indicator-shape);
   transform-origin: left bottom;
   height: var(--_active-indicator-height);
   inset: auto 0px 0px;
@@ -8330,6 +8861,10 @@ var css_248z$8 = i`* {
 :host-context([variant=line]) .tab {
   --_tab-height: 100%;
   --_container-padding: 1rem;
+  --_tab-icon-size: 1.5rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
   --_label-text-color: var(--color-on-surface);
   --_container-state-color: var(--_label-text-color);
   --_container-shape-start-start: var(--shape-corner-small);
@@ -8338,7 +8873,7 @@ var css_248z$8 = i`* {
   --_container-shape-end-end: var(--shape-corner-small);
   --_active-indicator-color: var(--color-primary);
   --_active-indicator-shape: 3px 3px 0 0;
-  --_active-indicator-height: 2px;
+  --_active-indicator-height: 3px;
 }
 :host-context([variant=line]) .tab .focus-ring {
   inset: 3px 3px 4px 3px;
@@ -8361,6 +8896,46 @@ var css_248z$8 = i`* {
 }
 :host-context([variant=line]) .tab.disabled .ripple {
   display: none;
+}
+
+:host-context([variant=line-secondary]) .tab {
+  --_tab-height: 100%;
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 0;
+  --_active-indicator-height: 2px;
+}
+:host-context([variant=line-secondary]) .tab .focus-ring {
+  inset: 3px 3px 4px 3px;
+}
+:host-context([variant=line-secondary]) .tab.active .indicator.secondary {
+  opacity: 1;
+}
+:host-context([variant=line-secondary]) .tab.active .focus-ring {
+  inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+}
+:host-context([variant=line-secondary]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=line-secondary]) .tab.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=line-secondary]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=line-secondary]) .tab.disabled .ripple {
+  display: none;
 }`;
 
 var _Tab_id;
@@ -8403,6 +8978,8 @@ class Tab extends i$1 {
         this.throttleDelay = 200;
         this.hasFocus = false;
         this.slotHasContent = false;
+        this.slotHasIcon = false;
+        this.slotHasBadge = false;
         /**
           * States
           */
@@ -8445,10 +9022,18 @@ class Tab extends i$1 {
     }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
             this.slotHasContent = hasContent;
             this.requestUpdate();
         });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="icon"]'), hasContent => {
+            this.slotHasIcon = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="badge"]'), hasContent => {
+            this.slotHasBadge = hasContent;
+            this.requestUpdate();
+        });
     }
     __isLink() {
         return !!this.href;
@@ -8469,7 +9054,9 @@ class Tab extends i$1 {
             disabled: this.disabled,
             pressed: this.isPressed,
             active: this.active,
-            'has-content': this.slotHasContent
+            'has-content': this.slotHasContent || !!this.label,
+            'has-icon': this.slotHasIcon,
+            'has-badge': this.slotHasBadge,
         };
         if (!isLink) {
             return b `<button
@@ -8512,16 +9099,18 @@ class Tab extends i$1 {
       <wc-ripple class="ripple"></wc-ripple>
       
       <div class="tab-content">
+        <slot name="icon"></slot>
+
         <div class="slot-container">
-          <slot></slot>
+          <slot>${this.label || A}</slot>
         </div>
 
-        <slot name="icon"></slot>
+        <slot name="badge"></slot>
 
         <div class="indicator"></div>
       </div>
 
-      <div class="indicator"></div>
+      <div class="secondary indicator"></div>
 
       ${this.__renderDisabledReason()}
     `;
@@ -8546,7 +9135,7 @@ class Tab extends i$1 {
     }
 }
 _Tab_id = new WeakMap();
-Tab.styles = [css_248z$8];
+Tab.styles = [css_248z$a];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tab.prototype, "active", void 0);
@@ -8556,9 +9145,6 @@ __decorate([
 __decorate([
     n({ type: String })
 ], Tab.prototype, "disabledReason", void 0);
-__decorate([
-    n({ type: String })
-], Tab.prototype, "icon", void 0);
 __decorate([
     n({ type: String })
 ], Tab.prototype, "label", void 0);
@@ -8583,6 +9169,12 @@ __decorate([
 __decorate([
     r()
 ], Tab.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasIcon", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasBadge", void 0);
 __decorate([
     r()
 ], Tab.prototype, "isPressed", void 0);
@@ -8590,7 +9182,7 @@ __decorate([
     e$4('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
-var css_248z$7 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -8604,7 +9196,7 @@ var css_248z$7 = i`* {
   height: 100%;
 }`;
 
-var css_248z$6 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -8656,11 +9248,23 @@ class Tabs extends i$1 {
             const clickedTab = path.find(node => node instanceof Element && node.tagName.toLowerCase() === 'wc-tab');
             if (!clickedTab)
                 return;
-            const tabs = this.querySelectorAll('wc-tab');
-            tabs.forEach(tab => {
+            const tabs = Array.from(this.querySelectorAll('wc-tab'));
+            let clickedIndex = -1;
+            for (let index = 0; index < tabs.length; index += 1) {
+                const tab = tabs[index];
                 tab.active = false;
-            });
+                if (tab === clickedTab)
+                    clickedIndex = index;
+            }
             clickedTab.active = true;
+            this.dispatchEvent(new CustomEvent('tab-click', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    index: clickedIndex,
+                    value: clickedTab.value,
+                },
+            }));
         };
     }
     connectedCallback() {
@@ -8679,13 +9283,13 @@ class Tabs extends i$1 {
     `;
     }
 }
-Tabs.styles = [css_248z$6];
+Tabs.styles = [css_248z$8];
 Tabs.Tab = Tab;
 __decorate([
     n({ type: Boolean })
 ], Tabs.prototype, "managed", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$7 = i`* {
   box-sizing: border-box;
 }
 
@@ -8694,12 +9298,12 @@ var css_248z$5 = i`* {
 }
 
 :host {
-  display: block;
+  display: none;
   flex: 1;
 }
 
-:host([hidden]) {
-  display: none;
+:host([active]) {
+  display: block;
 }`;
 
 /**
@@ -8719,14 +9323,21 @@ var css_248z$5 = i`* {
  * @tags navigation
  */
 class TabPanel extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
     render() {
         return b `<slot></slot>`;
     }
 }
-TabPanel.styles = [css_248z$5];
+TabPanel.styles = [css_248z$7];
 __decorate([
     n({ reflect: true })
 ], TabPanel.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TabPanel.prototype, "active", void 0);
 
 /**
  * @label Tab Group
@@ -8756,7 +9367,6 @@ class TabGroup extends i$1 {
     constructor() {
         super(...arguments);
         this.variant = 'line';
-        this.uid = crypto.randomUUID();
         this.onTabClick = (event) => {
             const custom = event;
             event.stopPropagation();
@@ -8764,6 +9374,9 @@ class TabGroup extends i$1 {
             if (targetValue) {
                 this.selectTab(targetValue);
             }
+            else if (typeof custom.detail?.index === 'number') {
+                this.selectTabByIndex(custom.detail.index);
+            }
         };
     }
     connectedCallback() {
@@ -8779,10 +9392,11 @@ class TabGroup extends i$1 {
     }
     selectTab(target) {
         const tabs = this.getTabs();
-        tabs.forEach((tab) => {
+        for (const tab of tabs) {
+            tab.active = false;
             tab.selected = false;
             tab.classList.remove('previous-tab', 'next-tab');
-        });
+        }
         let selectedIndex = -1;
         tabs.forEach((tab, index) => {
             const t = tab.getAttribute('target') || tab.getAttribute('value');
@@ -8792,6 +9406,7 @@ class TabGroup extends i$1 {
         });
         if (selectedIndex >= 0) {
             const selectedTab = tabs[selectedIndex];
+            selectedTab.active = true;
             selectedTab.selected = true;
             if (tabs[selectedIndex - 1]) {
                 tabs[selectedIndex - 1].classList.add('previous-tab');
@@ -8801,59 +9416,83 @@ class TabGroup extends i$1 {
             }
         }
         const panels = this.getTabPanels();
-        panels.forEach(panel => {
+        for (const panel of panels) {
             const panelValue = panel.getAttribute('value');
             panel.active = panelValue === target;
-        });
+        }
+    }
+    selectTabByIndex(index) {
+        const tabs = this.getTabs();
+        for (const tab of tabs) {
+            tab.active = false;
+            tab.selected = false;
+            tab.classList.remove('previous-tab', 'next-tab');
+        }
+        if (index >= 0 && index < tabs.length) {
+            tabs[index].active = true;
+            tabs[index].selected = true;
+            if (tabs[index - 1])
+                tabs[index - 1].classList.add('previous-tab');
+            if (tabs[index + 1])
+                tabs[index + 1].classList.add('next-tab');
+        }
+        const panels = this.getTabPanels();
+        for (let i = 0; i < panels.length; i += 1) {
+            const panel = panels[i];
+            panel.active = i === index;
+        }
     }
     getTabs() {
-        return this.querySelectorAll(':scope > tabs-list wc-tab');
+        return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));
     }
     getTabPanels() {
-        return this.querySelectorAll(':scope > wc-tab-panel');
+        return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));
     }
     getTabList() {
-        return this.querySelector(':scope > tabs-list');
+        return this.querySelector(':scope > wc-tabs');
     }
     tabsHaveTarget() {
-        return !!this.querySelector(':scope > tabs-list wc-tab[target]');
+        return !!this.querySelector(':scope > wc-tabs wc-tab[target]');
     }
     initializeTabs() {
         const tabs = Array.from(this.getTabs());
         if (!this.tabsHaveTarget()) {
-            this.getTabPanels().forEach((panel, index) => {
-                if (!panel.getAttribute('value')) {
-                    panel.setAttribute('value', `tab-${this.uid}-${index}`);
-                }
-            });
-            if (tabs.length > 0) {
-                const firstTarget = tabs[0].getAttribute('target');
-                if (firstTarget) {
-                    this.selectTab(firstTarget);
-                }
-            }
+            // No target/value attributes — use index-based activation
+            const selectedIndex = tabs.findIndex(tab => tab.hasAttribute('active') ||
+                tab.active ||
+                tab.hasAttribute('selected') ||
+                tab.selected);
+            this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);
         }
         else {
-            const selectedTab = this.querySelector(':scope > tabs-list wc-tab[selected]');
+            const selectedTab = tabs.find(tab => tab.hasAttribute('active') ||
+                tab.active ||
+                tab.hasAttribute('selected') ||
+                tab.selected);
             if (selectedTab) {
                 const selectedTarget = selectedTab.getAttribute('target');
                 if (selectedTarget)
                     this.selectTab(selectedTarget);
             }
+            else if (tabs.length > 0) {
+                const firstTarget = tabs[0].getAttribute('target');
+                if (firstTarget)
+                    this.selectTab(firstTarget);
+            }
         }
     }
     render() {
         return b `<slot></slot>`;
     }
 }
-TabGroup.styles = [css_248z$7];
+TabGroup.styles = [css_248z$9];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
 __decorate([
     n({ reflect: true })
 ], TabGroup.prototype, "variant", void 0);
 
-var css_248z$4 = i`:host {
+var css_248z$6 = i`:host {
   --_track-height: 4px;
   --_thumb-size: 20px;
   --thumb-half: 10px;
@@ -9126,7 +9765,7 @@ class Slider extends i$1 {
     `;
     }
 }
-Slider.styles = [css_248z$4];
+Slider.styles = [css_248z$6];
 __decorate([
     n({ type: Number })
 ], Slider.prototype, "min", void 0);
@@ -9155,7 +9794,7 @@ __decorate([
     e$4('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$5 = i`* {
   box-sizing: border-box;
 }
 
@@ -9689,7 +10328,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$3];
+Table.styles = [css_248z$5];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -9742,11 +10381,554 @@ __decorate([
     r()
 ], Table.prototype, "isSelectAll", void 0);
 __decorate([
-    r()
-], Table.prototype, "isSelectAllIntermediate", void 0);
+    r()
+], Table.prototype, "isSelectAllIntermediate", void 0);
+__decorate([
+    r()
+], Table.prototype, "isHorizontallyScrolled", void 0);
+
+var css_248z$4 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.pagination {
+  background: var(--color-surface, #fff);
+  display: flex;
+  align-items: center;
+}
+.pagination .page-sizes-select {
+  margin-inline-start: var(--spacing-100, 0.5rem);
+}
+.pagination .page-size-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  font-family: var(--typography-body-medium-font-family);
+  font-size: var(--typography-body-medium-font-size);
+  font-weight: var(--typography-body-medium-font-weight);
+  line-height: var(--typography-body-medium-line-height);
+  letter-spacing: var(--typography-body-medium-letter-spacing);
+  color: var(--color-on-surface-variant);
+  white-space: nowrap;
+}
+.pagination .page-size-select {
+  border: 1px solid var(--color-outline-variant);
+  background: var(--color-surface, #fff);
+  color: var(--color-on-surface);
+  padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
+  cursor: pointer;
+  outline: none;
+  height: 2.5rem;
+  font-family: var(--typography-body-medium-font-family);
+  font-size: var(--typography-body-medium-font-size);
+  font-weight: var(--typography-body-medium-font-weight);
+  line-height: var(--typography-body-medium-line-height);
+  letter-spacing: var(--typography-body-medium-letter-spacing);
+}
+.pagination .page-size-select:focus {
+  outline: 2px solid var(--color-primary);
+}
+.pagination .pagination-item-count {
+  margin-inline-start: var(--spacing-150, 0.75rem);
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.pagination .pagination-text {
+  font-family: var(--typography-body-medium-font-family);
+  font-size: var(--typography-body-medium-font-size);
+  font-weight: var(--typography-body-medium-font-weight);
+  line-height: var(--typography-body-medium-line-height);
+  letter-spacing: var(--typography-body-medium-letter-spacing);
+  color: var(--color-on-surface-variant);
+}
+.pagination .arrows {
+  --border-radius: 0;
+  --button-height: calc(2.5rem - 2px);
+}`;
+
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+/**
+ * @label Pagination
+ * @tag wc-pagination
+ * @rawTag pagination
+ * @summary A pagination control with page size selector, item count display, and previous/next navigation.
+ * @overview
+ * <p>The pagination component provides controls for navigating through paged data sets.</p>
+ *
+ * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.
+ *
+ * @example
+ * ```html
+ * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * ```
+ * @tags navigation, data
+ */
+class Pagination extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current page number (1-based). Defaults to `1`.
+         */
+        this.page = 1;
+        /**
+         * The number of rows per page. Defaults to `10`.
+         */
+        this.pageSize = 10;
+        /**
+         * Total number of items.
+         */
+        this.totalItems = 0;
+        /**
+         * Supported page size options.
+         */
+        this.pageSizes = DEFAULT_PAGE_SIZES;
+    }
+    dispatchPageEvent() {
+        this.dispatchEvent(new CustomEvent('page', {
+            detail: { page: this.page, pageSize: this.pageSize },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const startItem = this.pageSize * (this.page - 1);
+        const endItem = Math.min(this.pageSize * this.page, this.totalItems);
+        const isFirstPage = this.page === 1;
+        const isLastPage = this.pageSize * this.page >= this.totalItems;
+        return b `
+      <div class="pagination">
+        <div class="page-sizes-select">
+          <label class="page-size-label">
+            Items per page:
+            <select
+              class="page-size-select"
+              .value=${String(this.pageSize)}
+              @change=${(e) => {
+            this.pageSize = parseInt(e.target.value, 10);
+            this.page = 1;
+            this.dispatchPageEvent();
+        }}
+            >
+              ${this.pageSizes.map(size => b `
+                  <option value=${size} ?selected=${this.pageSize === size}>
+                    ${size}
+                  </option>
+                `)}
+            </select>
+          </label>
+        </div>
+        <div class="pagination-item-count">
+          <span class="pagination-text">
+            ${startItem} - ${endItem} of ${this.totalItems} items
+          </span>
+        </div>
+        <div class="pagination-right">
+          <div class="table-footer-right-content">
+            <div class="table-footer-right-content-pagination">
+              <wc-button
+                class="arrows"
+                color="secondary"
+                variant="text"
+                ?disabled=${isFirstPage}
+                @click=${() => {
+            if (!isFirstPage) {
+                this.page -= 1;
+                this.dispatchPageEvent();
+            }
+        }}
+              >
+                <wc-icon slot="icon" name="arrow--left"></wc-icon>
+              </wc-button>
+              <wc-button
+                color="secondary"
+                variant="text"
+                class="arrows"
+                ?disabled=${isLastPage}
+                @click=${() => {
+            if (!isLastPage) {
+                this.page += 1;
+                this.dispatchPageEvent();
+            }
+        }}
+              >
+                <wc-icon slot="icon" name="arrow--right"></wc-icon>
+              </wc-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+Pagination.styles = [css_248z$4];
+__decorate([
+    n({ type: Number })
+], Pagination.prototype, "page", void 0);
+__decorate([
+    n({ type: Number, attribute: 'page-size' })
+], Pagination.prototype, "pageSize", void 0);
+__decorate([
+    n({ type: Number, attribute: 'total-items' })
+], Pagination.prototype, "totalItems", void 0);
+__decorate([
+    n({ type: Array, attribute: 'page-sizes' })
+], Pagination.prototype, "pageSizes", void 0);
+
+var css_248z$3 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+: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 {
+  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);
+  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;
+}
+.tree-node-content:not(.disabled):hover {
+  background-color: var(--tree-node-hover-background);
+}
+.tree-node-content:focus-visible {
+  outline: 2px solid var(--tree-node-focus-ring-color);
+}
+.tree-node-content.selected {
+  background-color: var(--tree-node-selected-background);
+  color: var(--tree-node-selected-color);
+}
+.tree-node-content.selected .node-icon {
+  --icon-color: var(--tree-node-selected-color);
+}
+.tree-node-content.disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+  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);
+}
+
+.icon-space {
+  display: inline-block;
+  width: var(--tree-node-icon-size);
+  height: var(--tree-node-icon-size);
+  flex-shrink: 0;
+}
+
+.node-icon {
+  --icon-size: var(--tree-node-icon-size);
+  --icon-color: var(--tree-node-icon-color);
+  flex-shrink: 0;
+}
+
+.tree-node-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.
+ *
+ * @example
+ * ```html
+ * <wc-tree-view>
+ *   <wc-tree-node label="Parent">
+ *     <wc-tree-node label="Child"></wc-tree-node>
+ *   </wc-tree-node>
+ * </wc-tree-view>
+ * ```
+ * @tags navigation
+ */
+class TreeNode extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value used to identify this node when selected.
+         */
+        this.value = '';
+        /**
+         * The display label for this node.
+         */
+        this.label = '';
+        /**
+         * Optional icon name to display before the label.
+         */
+        this.icon = '';
+        /**
+         * Optional hyperlink to navigate to on click.
+         */
+        this.href = '';
+        /**
+         * Sets or retrieves the window or frame at which to target content.
+         */
+        this.target = '_self';
+        /**
+         * If true, the user cannot interact with the node.
+         */
+        this.disabled = false;
+        /**
+         * Whether the node 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).
+         */
+        this.level = 0;
+    }
+    focus() {
+        this._nativeElement?.focus();
+    }
+    blur() {
+        this._nativeElement?.blur();
+    }
+    _getChildNodes() {
+        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateChildLevels();
+        this.setAttribute('role', 'treeitem');
+        this._syncHostAria();
+    }
+    _syncHostAria() {
+        const hasChildren = this._getChildNodes().length > 0;
+        if (hasChildren) {
+            this.setAttribute('aria-expanded', String(this.expanded));
+        }
+        else {
+            this.removeAttribute('aria-expanded');
+        }
+        this.setAttribute('aria-selected', String(this.selected));
+        this.setAttribute('aria-disabled', String(this.disabled));
+        this.setAttribute('aria-level', String(this.level + 1));
+    }
+    _updateChildLevels() {
+        const children = this._getChildNodes();
+        children.forEach(child => {
+            // eslint-disable-next-line no-param-reassign
+            child.level = this.level + 1;
+        });
+    }
+    _handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const hasChildren = this._getChildNodes().length > 0;
+        if (hasChildren) {
+            this.expanded = !this.expanded;
+        }
+        this.dispatchEvent(new CustomEvent('tree-node:click', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value || this.label,
+                label: this.label,
+                expanded: this.expanded,
+            },
+        }));
+    }
+    _handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        const hasChildren = this._getChildNodes().length > 0;
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                if (hasChildren) {
+                    this.expanded = !this.expanded;
+                }
+                this.dispatchEvent(new CustomEvent('tree-node:click', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: this.value || this.label,
+                        label: this.label,
+                        expanded: this.expanded,
+                    },
+                }));
+                if (this.href) {
+                    window.open(this.href, this.target);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this.expanded && hasChildren) {
+                    this.expanded = false;
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (hasChildren) {
+                    if (!this.expanded) {
+                        this.expanded = true;
+                    }
+                    else {
+                        const firstChild = this._getChildNodes()[0];
+                        firstChild?.focus();
+                    }
+                }
+                break;
+        }
+    }
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('level')) {
+            this._updateChildLevels();
+        }
+        this._syncHostAria();
+    }
+    _renderContent(hasChildren) {
+        // 0.125rem offset aligns text visually with the expand/icon space
+        const indentStyle = o$3({
+            paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
+        });
+        const contentClasses = e$3({
+            'tree-node-content': true,
+            selected: this.selected,
+            disabled: this.disabled,
+        });
+        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>
+    `;
+        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 `<div
+      class=${contentClasses}
+      style=${indentStyle}
+      tabindex=${this.disabled ? '-1' : '0'}
+      @click=${this._handleClick}
+      @keydown=${this._handleKeyDown}
+    >${innerContent}</div>`;
+    }
+    render() {
+        const hasChildren = this._getChildNodes().length > 0;
+        const nodeSlotClasses = e$3({
+            'node-children': true,
+            expanded: this.expanded,
+        });
+        return b `<div class="tree-node">
+      ${this._renderContent(hasChildren)}
+      <div class=${nodeSlotClasses}>
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+}
+TreeNode.styles = [css_248z$3];
+__decorate([
+    n({ type: String, reflect: true })
+], TreeNode.prototype, "value", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], TreeNode.prototype, "label", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], TreeNode.prototype, "icon", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], TreeNode.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);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TreeNode.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TreeNode.prototype, "expanded", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], TreeNode.prototype, "level", void 0);
 __decorate([
-    r()
-], Table.prototype, "isHorizontallyScrolled", void 0);
+    e$4('.tree-node-content')
+], TreeNode.prototype, "_nativeElement", void 0);
 
 var css_248z$2 = i`* {
   box-sizing: border-box;
@@ -9760,189 +10942,162 @@ var css_248z$2 = i`* {
   display: block;
 }
 
-.pagination {
-  background: var(--color-surface, #fff);
-  display: flex;
-  align-items: center;
-}
-.pagination .page-sizes-select {
-  margin-inline-start: var(--spacing-100, 0.5rem);
-}
-.pagination .page-size-label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-100, 0.5rem);
-  font-family: var(--typography-body-medium-font-family);
-  font-size: var(--typography-body-medium-font-size);
-  font-weight: var(--typography-body-medium-font-weight);
-  line-height: var(--typography-body-medium-line-height);
-  letter-spacing: var(--typography-body-medium-letter-spacing);
-  color: var(--color-on-surface-variant);
-  white-space: nowrap;
-}
-.pagination .page-size-select {
-  border: 1px solid var(--color-outline-variant);
-  background: var(--color-surface, #fff);
-  color: var(--color-on-surface);
-  padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
-  cursor: pointer;
-  outline: none;
-  height: 2.5rem;
-  font-family: var(--typography-body-medium-font-family);
-  font-size: var(--typography-body-medium-font-size);
-  font-weight: var(--typography-body-medium-font-weight);
-  line-height: var(--typography-body-medium-line-height);
-  letter-spacing: var(--typography-body-medium-letter-spacing);
-}
-.pagination .page-size-select:focus {
-  outline: 2px solid var(--color-primary);
-}
-.pagination .pagination-item-count {
-  margin-inline-start: var(--spacing-150, 0.75rem);
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-.pagination .pagination-text {
-  font-family: var(--typography-body-medium-font-family);
-  font-size: var(--typography-body-medium-font-size);
-  font-weight: var(--typography-body-medium-font-weight);
-  line-height: var(--typography-body-medium-line-height);
-  letter-spacing: var(--typography-body-medium-letter-spacing);
-  color: var(--color-on-surface-variant);
-}
-.pagination .arrows {
-  --border-radius: 0;
-  --button-height: calc(2.5rem - 2px);
+.tree-view {
+  display: block;
+  padding: var(--spacing-100, 0.5rem) 0;
 }`;
 
-const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
 /**
- * @label Pagination
- * @tag wc-pagination
- * @rawTag pagination
- * @summary A pagination control with page size selector, item count display, and previous/next navigation.
- * @overview
- * <p>The pagination component provides controls for navigating through paged data sets.</p>
- *
- * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.
+ * @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-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * <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, data
+ * @tags navigation
  */
-class Pagination extends i$1 {
+class TreeView extends i$1 {
     constructor() {
         super(...arguments);
         /**
-         * The current page number (1-based). Defaults to `1`.
-         */
-        this.page = 1;
-        /**
-         * The number of rows per page. Defaults to `10`.
-         */
-        this.pageSize = 10;
-        /**
-         * Total number of items.
-         */
-        this.totalItems = 0;
-        /**
-         * Supported page size options.
+         * The value of the currently selected node.
          */
-        this.pageSizes = DEFAULT_PAGE_SIZES;
+        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;
+            }
+        };
     }
-    dispatchPageEvent() {
-        this.dispatchEvent(new CustomEvent('page', {
-            detail: { page: this.page, pageSize: this.pageSize },
-            bubbles: true,
-            composed: true,
-        }));
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('tree-node:click', this._onNodeClick);
+        this.addEventListener('keydown', this._onKeyDown);
+        this.setAttribute('role', 'tree');
     }
-    render() {
-        const startItem = this.pageSize * (this.page - 1);
-        const endItem = Math.min(this.pageSize * this.page, this.totalItems);
-        const isFirstPage = this.page === 1;
-        const isLastPage = this.pageSize * this.page >= this.totalItems;
-        return b `
-      <div class="pagination">
-        <div class="page-sizes-select">
-          <label class="page-size-label">
-            Items per page:
-            <select
-              class="page-size-select"
-              .value=${String(this.pageSize)}
-              @change=${(e) => {
-            this.pageSize = parseInt(e.target.value, 10);
-            this.page = 1;
-            this.dispatchPageEvent();
-        }}
-            >
-              ${this.pageSizes.map(size => b `
-                  <option value=${size} ?selected=${this.pageSize === size}>
-                    ${size}
-                  </option>
-                `)}
-            </select>
-          </label>
-        </div>
-        <div class="pagination-item-count">
-          <span class="pagination-text">
-            ${startItem} - ${endItem} of ${this.totalItems} items
-          </span>
-        </div>
-        <div class="pagination-right">
-          <div class="table-footer-right-content">
-            <div class="table-footer-right-content-pagination">
-              <wc-button
-                class="arrows"
-                color="secondary"
-                variant="text"
-                ?disabled=${isFirstPage}
-                @click=${() => {
-            if (!isFirstPage) {
-                this.page -= 1;
-                this.dispatchPageEvent();
-            }
-        }}
-              >
-                <wc-icon slot="icon" name="arrow--left"></wc-icon>
-              </wc-button>
-              <wc-button
-                color="secondary"
-                variant="text"
-                class="arrows"
-                ?disabled=${isLastPage}
-                @click=${() => {
-            if (!isLastPage) {
-                this.page += 1;
-                this.dispatchPageEvent();
-            }
-        }}
-              >
-                <wc-icon slot="icon" name="arrow--right"></wc-icon>
-              </wc-button>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('selectedNode')) {
+            this._syncSelectedStateFromProperty();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('tree-node:click', this._onNodeClick);
+        this.removeEventListener('keydown', this._onKeyDown);
+    }
+    _getTopLevelNodes() {
+        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
+    }
+    _getAllVisibleNodes() {
+        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);
+                }
+            });
+        };
+        collect(this._getTopLevelNodes());
+        return result;
+    }
+    _updateSelectedState(selectedValue) {
+        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
+        allNodes.forEach(node => {
+            const nodeValue = node.value || node.label;
+            // eslint-disable-next-line no-param-reassign
+            node.selected = nodeValue === selectedValue;
+        });
+    }
+    _clearSelectedState() {
+        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
+        allNodes.forEach(node => {
+            // eslint-disable-next-line no-param-reassign
+            node.selected = false;
+        });
+    }
+    _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));
+        });
+        return result;
+    }
+    render() {
+        return b `<div class="tree-view">
+      <slot @slotchange=${this._onSlotChange}></slot>
+    </div>`;
     }
 }
-Pagination.styles = [css_248z$2];
-__decorate([
-    n({ type: Number })
-], Pagination.prototype, "page", void 0);
-__decorate([
-    n({ type: Number, attribute: 'page-size' })
-], Pagination.prototype, "pageSize", void 0);
-__decorate([
-    n({ type: Number, attribute: 'total-items' })
-], Pagination.prototype, "totalItems", void 0);
+TreeView.styles = [css_248z$2];
+TreeView.Node = TreeNode;
 __decorate([
-    n({ type: Array, attribute: 'page-sizes' })
-], Pagination.prototype, "pageSizes", void 0);
+    n({ type: String, attribute: 'selected-node', reflect: true })
+], TreeView.prototype, "selectedNode", void 0);
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
@@ -9953,343 +11108,219 @@ var css_248z$1 = 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;
+  display: inline-flex;
+  max-width: 42rem;
+  min-width: 21.5rem;
+  --snackbar-container-color: var(--color-inverse-surface);
+  --snackbar-label-text-color: var(--color-inverse-on-surface);
+  --snackbar-action-text-color: var(--color-inverse-primary);
+  --snackbar-close-icon-color: var(--color-inverse-on-surface);
+  --snackbar-border-radius: var(--shape-corner-extra-small);
 }
 
-.tree-node-content {
-  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);
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
+.snackbar {
   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;
-}
-.tree-node-content:not(.disabled):hover {
-  background-color: var(--tree-node-hover-background);
-}
-.tree-node-content:focus-visible {
-  outline: 2px solid var(--tree-node-focus-ring-color);
-}
-.tree-node-content.selected {
-  background-color: var(--tree-node-selected-background);
-  color: var(--tree-node-selected-color);
-}
-.tree-node-content.selected .node-icon {
-  --icon-color: var(--tree-node-selected-color);
-}
-.tree-node-content.disabled {
-  cursor: not-allowed;
-  opacity: 0.38;
+  align-items: center;
+  background-color: var(--snackbar-container-color);
+  border-radius: var(--snackbar-border-radius);
+  color: var(--snackbar-label-text-color);
+  display: inline-flex;
+  gap: var(--spacing-100);
+  min-height: 3rem;
+  opacity: 0;
+  padding: var(--spacing-100) var(--spacing-200);
   pointer-events: none;
+  transform: translateY(0.5rem);
+  transition: opacity var(--duration-short2) var(--easing-standard), transform var(--duration-short2) var(--easing-standard);
 }
 
-.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);
+.snackbar.open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
 }
 
-.icon-space {
-  display: inline-block;
-  width: var(--tree-node-icon-size);
-  height: var(--tree-node-icon-size);
-  flex-shrink: 0;
+.label {
+  flex: 1 1 auto;
+  color: inherit;
 }
 
-.node-icon {
-  --icon-size: var(--tree-node-icon-size);
-  --icon-color: var(--tree-node-icon-color);
-  flex-shrink: 0;
+.action,
+.close {
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--snackbar-action-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0;
+  min-height: 2rem;
+  min-width: 2rem;
+  padding: 0 var(--spacing-100);
 }
 
-.tree-node-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.close {
+  color: var(--snackbar-close-icon-color);
+  padding: 0;
 }
 
-.node-children {
-  display: none;
+.close wc-icon {
+  --icon-size: 1.125rem;
+  color: inherit;
 }
-.node-children.expanded {
-  display: block;
+
+.snackbar.multiline {
+  align-items: flex-start;
 }`;
 
 /**
- * @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 Snackbar
+ * @tag wc-snackbar
+ * @rawTag snackbar
+ * @summary Snackbars provide brief messages about app processes at the bottom of the screen.
+ *
+ * @cssprop --snackbar-container-color - Container color for the snackbar.
+ * @cssprop --snackbar-label-text-color - Label text color for the snackbar.
+ * @cssprop --snackbar-action-text-color - Action text color.
+ * @cssprop --snackbar-close-icon-color - Close icon color.
+ * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.
  *
  * @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-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
  * ```
- * @tags navigation
+ * @tags display, feedback
  */
-class TreeNode extends i$1 {
+class Snackbar extends i$1 {
     constructor() {
         super(...arguments);
-        /**
-         * The value used to identify this node when selected.
-         */
-        this.value = '';
-        /**
-         * The display label for this node.
-         */
-        this.label = '';
-        /**
-         * Optional icon name to display before the label.
-         */
-        this.icon = '';
-        /**
-         * Optional hyperlink to navigate to on click.
-         */
-        this.href = '';
-        /**
-         * Sets or retrieves the window or frame at which to target content.
-         */
-        this.target = '_self';
-        /**
-         * If true, the user cannot interact with the node.
-         */
-        this.disabled = false;
-        /**
-         * Whether the node 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).
-         */
-        this.level = 0;
-    }
-    focus() {
-        this._nativeElement?.focus();
-    }
-    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();
+        this.open = false;
+        this.message = '';
+        this.actionLabel = '';
+        this.showCloseIcon = false;
+        this.duration = 4000;
+        this.multiline = false;
+        this.hideTimer = null;
     }
-    _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));
+    show() {
+        this.open = true;
     }
-    _updateChildLevels() {
-        const children = this._getChildNodes();
-        children.forEach(child => {
-            // eslint-disable-next-line no-param-reassign
-            child.level = this.level + 1;
-        });
+    hide() {
+        this.close('programmatic');
     }
-    _handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
+    close(reason) {
+        if (!this.open) {
             return;
         }
-        const hasChildren = this._getChildNodes().length > 0;
-        if (hasChildren) {
-            this.expanded = !this.expanded;
-        }
-        this.dispatchEvent(new CustomEvent('tree-node:click', {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('snackbar-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchActionEvent() {
+        this.dispatchEvent(new CustomEvent('snackbar-action', {
             bubbles: true,
             composed: true,
-            detail: {
-                value: this.value || this.label,
-                label: this.label,
-                expanded: this.expanded,
-            },
         }));
     }
-    _handleKeyDown(event) {
-        if (this.disabled)
+    handleActionClick() {
+        this.dispatchActionEvent();
+        this.close('action');
+    }
+    handleCloseClick() {
+        this.close('dismiss');
+    }
+    clearTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    scheduleAutoHide() {
+        this.clearTimer();
+        if (!this.open || this.duration <= 0) {
             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;
         }
+        this.hideTimer = setTimeout(() => {
+            this.close('timeout');
+        }, this.duration);
     }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has('level')) {
-            this._updateChildLevels();
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            this.scheduleAutoHide();
         }
-        this._syncHostAria();
     }
-    _renderContent(hasChildren) {
-        // 0.125rem offset aligns text visually with the expand/icon space
-        const indentStyle = o$3({
-            paddingInlineStart: `calc(${this.level + 1}rem - 0.125rem)`,
-        });
-        const contentClasses = e$3({
-            'tree-node-content': true,
-            selected: this.selected,
-            disabled: this.disabled,
-        });
-        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>
-    `;
-        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 `<div
-      class=${contentClasses}
-      style=${indentStyle}
-      tabindex=${this.disabled ? '-1' : '0'}
-      @click=${this._handleClick}
-      @keydown=${this._handleKeyDown}
-    >${innerContent}</div>`;
+    disconnectedCallback() {
+        this.clearTimer();
+        super.disconnectedCallback();
     }
     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>
+        const liveRole = this.actionLabel || this.showCloseIcon ? 'alert' : 'status';
+        return b `
+      <div
+        class=${e$3({
+            snackbar: true,
+            open: this.open,
+            multiline: this.multiline,
+        })}
+        role=${liveRole}
+        aria-live="polite"
+      >
+        <div class="label">
+          <slot>${this.message}</slot>
+        </div>
+
+        ${this.actionLabel
+            ? b `<button class="action" type="button" @click=${this.handleActionClick}>
+              ${this.actionLabel}
+            </button>`
+            : A}
+
+        ${this.showCloseIcon
+            ? b `<button
+              class="close"
+              type="button"
+              aria-label="Dismiss notification"
+              @click=${this.handleCloseClick}
+            >
+              <wc-icon name="close"></wc-icon>
+            </button>`
+            : A}
       </div>
-    </div>`;
+    `;
     }
 }
-TreeNode.styles = [css_248z$1];
-__decorate([
-    n({ type: String, reflect: true })
-], TreeNode.prototype, "value", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], TreeNode.prototype, "label", void 0);
+Snackbar.styles = [css_248z$1];
 __decorate([
-    n({ type: String, reflect: true })
-], TreeNode.prototype, "icon", void 0);
+    n({ type: Boolean, reflect: true })
+], Snackbar.prototype, "open", void 0);
 __decorate([
-    n({ type: String, reflect: true })
-], TreeNode.prototype, "href", void 0);
+    n({ type: String })
+], Snackbar.prototype, "message", void 0);
 __decorate([
-    n({ type: String, reflect: true })
-], TreeNode.prototype, "target", void 0);
+    n({ type: String, attribute: 'action-label' })
+], Snackbar.prototype, "actionLabel", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "disabled", void 0);
+    n({ type: Boolean, attribute: 'show-close-icon' })
+], Snackbar.prototype, "showCloseIcon", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "selected", void 0);
+    n({ type: Number })
+], Snackbar.prototype, "duration", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], TreeNode.prototype, "expanded", void 0);
-__decorate([
-    n({ type: Number, reflect: true })
-], TreeNode.prototype, "level", void 0);
-__decorate([
-    e$4('.tree-node-content')
-], TreeNode.prototype, "_nativeElement", void 0);
+], Snackbar.prototype, "multiline", void 0);
 
 var css_248z = i`* {
   box-sizing: border-box;
@@ -10300,165 +11331,449 @@ var css_248z = i`* {
 }
 
 :host {
-  display: block;
+  display: inline-block;
+  --radio-size: 20px;
+  --radio-dot-size: 12px;
+  --radio-selected-color: var(--color-primary);
+  --radio-unselected-color: var(--color-on-surface-variant);
+  --radio-state-layer-size: 40px;
+  --radio-disabled-opacity: 0.38;
 }
 
-.tree-view {
-  display: block;
-  padding: var(--spacing-100, 0.5rem) 0;
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: 8px;
+  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;
+}
+.radio .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.radio .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--radio-state-layer-size);
+  height: var(--radio-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.radio .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .outer-circle {
+  position: absolute;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border: 2px solid var(--radio-unselected-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.radio .inner-circle {
+  position: absolute;
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  background: var(--radio-selected-color);
+  border-radius: 50%;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.radio .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.radio:hover:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.08;
+  background: var(--color-on-surface);
+}
+.radio:hover:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly) .container {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+.radio.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+.radio.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.radio.active:not(.disabled):not(.readonly).state-checked .state-layer {
+  background: var(--radio-selected-color);
+}
+
+.radio.state-checked .outer-circle {
+  border-color: var(--radio-selected-color);
+}
+.radio.state-checked .inner-circle {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.radio.readonly {
+  cursor: default;
+}
+.radio.readonly .state-layer {
+  display: none;
+}
+.radio.readonly .outer-circle {
+  border-color: var(--color-on-surface-variant);
+}
+.radio.readonly.state-checked .inner-circle {
+  background: var(--color-on-surface-variant);
+}
+
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: var(--radio-disabled-opacity);
+}
+.radio.disabled .state-layer {
+  display: none;
+}
+.radio.disabled .label {
+  color: var(--color-on-surface);
+}
+.radio.disabled .outer-circle {
+  border-color: var(--color-on-surface);
+}
+.radio.disabled.state-checked .inner-circle {
+  background: var(--color-on-surface);
 }`;
 
-/**
- * @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 {
+class Radio extends i$1 {
     constructor() {
         super(...arguments);
         /**
-         * The value of the currently selected node.
+         * The input field name for grouping radios.
+         */
+        this.name = '';
+        /**
+         * The submitted value when this radio is selected.
+         */
+        this.value = '';
+        /**
+         * The radio label.
+         */
+        this.label = '';
+        /**
+         * Whether the radio is selected.
+         */
+        this.checked = false;
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the radio is readonly. Defaults to `false`.
          */
-        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', {
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the radio. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        this.hasFocus = false;
+        this.isActive = false;
+        this.slotHasContent = false;
+        this.isGroupFocusTarget = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.selectRadio(evt);
+            }
+            else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
+                evt.preventDefault();
+                this.navigateGroup(Radio.DIRECTION_NEXT);
+            }
+            else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
+                evt.preventDefault();
+                this.navigateGroup(Radio.DIRECTION_PREVIOUS);
+            }
+        };
+        this.clickHandler = (ev) => {
+            this.selectRadio(ev);
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
                 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;
-            }
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
         };
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('tree-node:click', this._onNodeClick);
-        this.addEventListener('keydown', this._onKeyDown);
-        this.setAttribute('role', 'tree');
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has('selectedNode')) {
-            this._syncSelectedStateFromProperty();
-        }
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('tree-node:click', this._onNodeClick);
-        this.removeEventListener('keydown', this._onKeyDown);
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
     }
-    _getTopLevelNodes() {
-        return Array.from(this.children).filter(el => el.tagName.toLowerCase() === 'wc-tree-node');
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes() || !!this.label;
+        this.updateGroupFocusTarget();
     }
-    _getAllVisibleNodes() {
-        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);
-                }
-            });
-        };
-        collect(this._getTopLevelNodes());
-        return result;
+    updated(changedProps) {
+        if (changedProps.has('label')) {
+            this.slotHasContent = this.hasChildNodes() || !!this.label;
+        }
+        if (changedProps.has('checked') && this.checked) {
+            this.uncheckSiblings();
+        }
+        if (changedProps.has('checked') || changedProps.has('name')) {
+            this.updateGroupFocusTarget();
+        }
     }
-    _updateSelectedState(selectedValue) {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            const nodeValue = node.value || node.label;
-            // eslint-disable-next-line no-param-reassign
-            node.selected = nodeValue === selectedValue;
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            const attrValue = this.getAttribute('tabindex');
+            if (attrValue !== null) {
+                this.tabindex = parseInt(attrValue, 10);
+            }
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
         });
     }
-    _clearSelectedState() {
-        const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-        allNodes.forEach(node => {
-            // eslint-disable-next-line no-param-reassign
-            node.selected = false;
+    selectRadio(ev) {
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.checked) {
+            this.checked = true;
+            this.uncheckSiblings();
+            this.dispatchChange(ev);
+        }
+        this.containerElement?.focus();
+    }
+    dispatchChange(ev) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value, checked: this.checked, originalEvent: ev },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    uncheckSiblings() {
+        if (!this.name || !this.checked)
+            return;
+        const radios = this.getGroupRadios();
+        radios.forEach(radio => {
+            if (radio === this)
+                return;
+            radio.checked = false;
         });
     }
-    _syncSelectedStateFromProperty() {
-        if (this.selectedNode) {
-            this._updateSelectedState(this.selectedNode);
+    getGroupRadios() {
+        if (!this.name)
+            return [this];
+        const scopeRoot = this.closest('form') ?? document;
+        return Array.from(scopeRoot.querySelectorAll(`wc-radio[name="${this.name}"]`));
+    }
+    isRadioEnabled(radio) {
+        return !radio.disabled && !radio.readonly;
+    }
+    updateGroupFocusTarget() {
+        const group = this.getGroupRadios();
+        if (!group.length)
+            return;
+        const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));
+        if (!enabledGroup.length) {
+            group.forEach(radio => {
+                radio.isGroupFocusTarget = false;
+            });
             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 target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+        group.forEach(radio => {
+            radio.isGroupFocusTarget = radio === target;
         });
-        return result;
+    }
+    navigateGroup(direction) {
+        const group = this.getGroupRadios().filter(radio => this.isRadioEnabled(radio));
+        if (!group.length)
+            return;
+        const currentIndex = group.indexOf(this);
+        const startIndex = currentIndex >= 0 ? currentIndex : 0;
+        const nextIndex = (startIndex + direction + group.length) % group.length;
+        const target = group[nextIndex];
+        target.selectRadio();
+        target.containerElement?.focus();
+    }
+    /**
+     * Sets focus on the radio.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the radio.
+     */
+    blur() {
+        this.containerElement?.blur();
     }
     render() {
-        return b `<div class="tree-view">
-      <slot @slotchange=${this._onSlotChange}></slot>
-    </div>`;
+        const cssClasses = {
+            radio: true,
+            'state-checked': this.checked,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$3(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.isGroupFocusTarget
+            ? this.tabindex !== undefined
+                ? this.tabindex
+                : 0
+            : -1}
+          role="radio"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.checked}
+          @click=${this.clickHandler}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outer-circle"></div>
+          <div class="inner-circle"></div>
+        </div>
+
+        <input
+          type="radio"
+          class="input-native"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          aria-hidden="true"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
     }
 }
-TreeView.styles = [css_248z];
-TreeView.Node = TreeNode;
+Radio.DIRECTION_NEXT = 1;
+Radio.DIRECTION_PREVIOUS = -1;
+Radio.styles = [css_248z];
 __decorate([
-    n({ type: String, attribute: 'selected-node', reflect: true })
-], TreeView.prototype, "selectedNode", void 0);
+    n({ type: String })
+], Radio.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "value", void 0);
+__decorate([
+    n({ type: String })
+], Radio.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Radio.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Radio.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Radio.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Radio.prototype, "isGroupFocusTarget", void 0);
+__decorate([
+    e$4('.container')
+], Radio.prototype, "containerElement", void 0);
+__decorate([
+    e$4('.input-native')
+], Radio.prototype, "nativeElement", void 0);
 
-export { Accordion as A, Badge as B, Chip as C, DatePicker as D, Elevation as E, Field as F, Icon as I, LinearProgress as L, Menu as M, NumberField as N, Pagination as P, Ripple as R, Skeleton as S, Tab as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, CircularProgress as d, Container as e, Divider as f, EmptyState as g, FocusRing as h, Image as i, Input as j, Link as k, MenuItem as l, Slider as m, Spinner as n, SubMenu as o, Switch as p, TabGroup as q, TabPanel as r, Table as s, Tabs as t, Tag as u, Textarea as v, TimePicker as w, Tooltip as x, TreeNode as y, TreeView as z };
-//# sourceMappingURL=tree-view-CLolVlU0.js.map
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Tooltip as G, TreeNode as H, Icon as I, TreeView as J, LinearProgress as L, Menu as M, NumberField as N, Pagination as P, Radio as R, Skeleton as S, Tab as T, 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, Slider as o, Snackbar as p, Spinner as q, SubMenu as r, Switch as s, TabGroup as t, TabPanel as u, Table as v, Tabs as w, Tag as x, Textarea as y, TimePicker as z };
+//# sourceMappingURL=radio-b70_Ie9n.js.map