@redvars/peacock 3.3.1 → 3.3.2

package/dist/{tree-view-CLolVlU0.js → snackbar-74YCdMPL.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$K = i`* {
   box-sizing: border-box;
 }
 
@@ -168,7 +168,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$I];
+Icon.styles = [css_248z$K];
 __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$J = 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$J];
 __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$I = i`* {
   box-sizing: border-box;
 }
 
@@ -359,12 +359,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$G];
+Badge.styles = [css_248z$I];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$F = i`* {
+var css_248z$H = i`* {
   box-sizing: border-box;
 }
 
@@ -473,7 +473,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$F];
+Divider.styles = [css_248z$H];
 __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$G = 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$G];
 
-var css_248z$D = i`:host {
+var css_248z$F = 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$F];
 __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$E = 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$E];
 __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$D = 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$D];
 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$C = i`* {
   box-sizing: border-box;
 }
 
@@ -1495,7 +1495,7 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$A];
+Link.styles = [css_248z$C];
 __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$B = 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$A = 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$z = 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$B, css_248z$A, css_248z$z];
 __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$y = 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$x = 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$w = 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$y, css_248z$x, css_248z$w];
 __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$v = 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$v];
 
-var css_248z$s = i`:host {
+var css_248z$u = 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$u];
 
-var css_248z$r = i`:host {
+var css_248z$t = 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$t];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$q = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -2773,7 +2773,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$q];
+Input.styles = [css_248z$s];
 __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$r = 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$r];
 __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$q = 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$q];
 __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$p = i`* {
   box-sizing: border-box;
 }
 
@@ -3682,7 +3682,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$n];
+DatePicker.styles = [css_248z$p];
 __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$o = i`* {
   box-sizing: border-box;
 }
 
@@ -3905,7 +3905,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$m];
+TimePicker.styles = [css_248z$o];
 __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$n = i`* {
   box-sizing: border-box;
 }
 
@@ -4121,7 +4121,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$l];
+Textarea.styles = [css_248z$n];
 __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$m = i`* {
   box-sizing: border-box;
 }
 
@@ -4521,7 +4521,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$k];
+Switch.styles = [css_248z$m];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4536,36 +4536,553 @@ __decorate([
 ], Switch.prototype, "rounded", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], Switch.prototype, "required", void 0);
+], Switch.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Switch.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'with-icon' })
+], Switch.prototype, "withIcon", void 0);
+__decorate([
+    n({ type: Object })
+], Switch.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Switch.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Switch.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Switch.prototype, "slotHasContent", void 0);
+__decorate([
+    e$4('.track')
+], Switch.prototype, "trackElement", void 0);
+__decorate([
+    e$4('.input-native')
+], Switch.prototype, "nativeElement", void 0);
+
+var css_248z$l = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  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;
+}
+
+.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;
+}
+.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;
+}
+.checkbox .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.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);
+}
+.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);
+}
+.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;
+}
+
+.checkbox.state-checked .outline {
+  border-color: transparent;
+}
+.checkbox.state-checked .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-checked .icon {
+  opacity: 1;
+}
+.checkbox.state-checked .icon .checkmark {
+  stroke-dashoffset: 0;
+}
+
+.checkbox.state-indeterminate .outline {
+  border-color: transparent;
+}
+.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;
+}
+
+.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);
+}
+.checkbox.size-sm .icon {
+  stroke-width: 1.5;
+}
+
+.checkbox.size-md {
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-state-layer-size: 40px;
+}
+.checkbox.size-md .icon {
+  stroke-width: 2;
+}
+
+.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;
+}
+
+.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;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity);
+}
+.checkbox.disabled .label {
+  color: var(--color-on-surface);
+}
+.checkbox.disabled .outline {
+  border-color: var(--color-on-surface);
+}
+.checkbox.disabled.state-checked .background, .checkbox.disabled.state-indeterminate .background {
+  background: var(--color-on-surface);
+}
+.checkbox.disabled .state-layer {
+  display: none;
+}`;
+
+/**
+ * @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-checkbox label="Accept terms"></wc-checkbox>
+ * ```
+ */
+class Checkbox extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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>
+
+        <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>
+    `;
+    }
+}
+Checkbox.styles = [css_248z$l];
+__decorate([
+    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 })
-], Switch.prototype, "readonly", void 0);
+], Checkbox.prototype, "readonly", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
-], Switch.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true, attribute: 'with-icon' })
-], Switch.prototype, "withIcon", void 0);
+], Checkbox.prototype, "disabled", void 0);
 __decorate([
     n({ type: Object })
-], Switch.prototype, "configAria", void 0);
+], Checkbox.prototype, "configAria", void 0);
 __decorate([
     r()
-], Switch.prototype, "hasFocus", void 0);
+], Checkbox.prototype, "hasFocus", void 0);
 __decorate([
     r()
-], Switch.prototype, "isActive", void 0);
+], Checkbox.prototype, "isActive", void 0);
 __decorate([
     r()
-], Switch.prototype, "slotHasContent", void 0);
+], Checkbox.prototype, "slotHasContent", void 0);
 __decorate([
-    e$4('.track')
-], Switch.prototype, "trackElement", void 0);
+    e$4('.container')
+], Checkbox.prototype, "containerElement", void 0);
 __decorate([
     e$4('.input-native')
-], Switch.prototype, "nativeElement", void 0);
+], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$j = i`* {
+var css_248z$k = i`* {
   box-sizing: border-box;
 }
 
@@ -4652,9 +5169,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$j];
+Spinner.styles = [css_248z$k];
 
-var css_248z$i = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -4772,12 +5289,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$i];
+Container.styles = [css_248z$j];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$h = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -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$i];
 __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$h = i`* {
   box-sizing: border-box;
 }
 
@@ -6773,7 +7290,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$g];
+Tooltip.styles = [css_248z$h];
 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$g = 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$f = i`* {
   box-sizing: border-box;
 }
 
@@ -6969,7 +7486,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$e];
+BreadcrumbItem.styles = [css_248z$f];
 __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$g];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$d = i`* {
+var css_248z$e = 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$d = 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$c = 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$d, css_248z$c];
 __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$e];
 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$b = i`* {
   box-sizing: border-box;
 }
 
@@ -8019,7 +8536,7 @@ class SubMenu extends i$1 {
     `;
     }
 }
-SubMenu.styles = [css_248z$a];
+SubMenu.styles = [css_248z$b];
 __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$a = 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$a];
 __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$9 = 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,6 +8792,20 @@ var css_248z$8 = i`* {
 .tab .tab-content .slot-container {
   display: none;
 }
+.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;
@@ -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
           */
@@ -8449,6 +9026,14 @@ class Tab extends i$1 {
             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$9];
 __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$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -8604,7 +9196,7 @@ var css_248z$7 = i`* {
   height: 100%;
 }`;
 
-var css_248z$6 = i`* {
+var css_248z$7 = 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$7];
 Tabs.Tab = Tab;
 __decorate([
     n({ type: Boolean })
 ], Tabs.prototype, "managed", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$6 = 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$6];
 __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$8];
 TabGroup.Tabs = Tabs;
 TabGroup.TabPanel = TabPanel;
 __decorate([
     n({ reflect: true })
 ], TabGroup.prototype, "variant", void 0);
 
-var css_248z$4 = i`:host {
+var css_248z$5 = 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$5];
 __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$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -9689,7 +10328,7 @@ class Table extends i$1 {
     `;
     }
 }
-Table.styles = [css_248z$3];
+Table.styles = [css_248z$4];
 __decorate([
     n({ type: Array })
 ], Table.prototype, "columns", void 0);
@@ -9748,7 +10387,7 @@ __decorate([
     r()
 ], Table.prototype, "isHorizontallyScrolled", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -9930,7 +10569,7 @@ class Pagination extends i$1 {
     `;
     }
 }
-Pagination.styles = [css_248z$2];
+Pagination.styles = [css_248z$3];
 __decorate([
     n({ type: Number })
 ], Pagination.prototype, "page", void 0);
@@ -9944,7 +10583,7 @@ __decorate([
     n({ type: Array, attribute: 'page-sizes' })
 ], Pagination.prototype, "pageSizes", void 0);
 
-var css_248z$1 = i`* {
+var css_248z$2 = i`* {
   box-sizing: border-box;
 }
 
@@ -10259,7 +10898,7 @@ class TreeNode extends i$1 {
     </div>`;
     }
 }
-TreeNode.styles = [css_248z$1];
+TreeNode.styles = [css_248z$2];
 __decorate([
     n({ type: String, reflect: true })
 ], TreeNode.prototype, "value", void 0);
@@ -10291,7 +10930,7 @@ __decorate([
     e$4('.tree-node-content')
 ], TreeNode.prototype, "_nativeElement", void 0);
 
-var css_248z = i`* {
+var css_248z$1 = i`* {
   box-sizing: border-box;
 }
 
@@ -10454,11 +11093,234 @@ class TreeView extends i$1 {
     </div>`;
     }
 }
-TreeView.styles = [css_248z];
+TreeView.styles = [css_248z$1];
 TreeView.Node = TreeNode;
 __decorate([
     n({ type: String, attribute: 'selected-node', reflect: true })
 ], TreeView.prototype, "selectedNode", 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
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  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);
+}
+
+.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;
+  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);
+}
+
+.snackbar.open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.label {
+  flex: 1 1 auto;
+  color: inherit;
+}
+
+.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);
+}
+
+.close {
+  color: var(--snackbar-close-icon-color);
+  padding: 0;
+}
+
+.close wc-icon {
+  --icon-size: 1.125rem;
+  color: inherit;
+}
+
+.snackbar.multiline {
+  align-items: flex-start;
+}`;
+
+/**
+ * @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-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
+ * ```
+ * @tags display, feedback
+ */
+class Snackbar extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.message = '';
+        this.actionLabel = '';
+        this.showCloseIcon = false;
+        this.duration = 4000;
+        this.multiline = false;
+        this.hideTimer = null;
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.close('programmatic');
+    }
+    close(reason) {
+        if (!this.open) {
+            return;
+        }
+        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,
+        }));
+    }
+    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;
+        }
+        this.hideTimer = setTimeout(() => {
+            this.close('timeout');
+        }, this.duration);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            this.scheduleAutoHide();
+        }
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+        super.disconnectedCallback();
+    }
+    render() {
+        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>
+    `;
+    }
+}
+Snackbar.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Snackbar.prototype, "open", void 0);
+__decorate([
+    n({ type: String })
+], Snackbar.prototype, "message", void 0);
+__decorate([
+    n({ type: String, attribute: 'action-label' })
+], Snackbar.prototype, "actionLabel", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-close-icon' })
+], Snackbar.prototype, "showCloseIcon", void 0);
+__decorate([
+    n({ type: Number })
+], Snackbar.prototype, "duration", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Snackbar.prototype, "multiline", void 0);
+
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, TreeNode as G, TreeView as H, 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, 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, Slider as n, Snackbar as o, Spinner as p, SubMenu as q, Switch as r, TabGroup as s, TabPanel as t, Table as u, Tabs as v, Tag as w, Textarea as x, TimePicker as y, Tooltip as z };
+//# sourceMappingURL=snackbar-74YCdMPL.js.map