@redvars/peacock 3.2.7 → 3.2.9

package/dist/switch-DqxIiVsB.js

@@ -1,2738 +0,0 @@
-import { _ as __decorate, n, a as __classPrivateFieldGet } from './property-DNVWDdPC.js';
-import { i, b, A } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.js';
-import { e } from './class-map-BmCohX9p.js';
-import { t as throttle, o as observerSlotChangesWithCallback, r as redispatchEvent } from './utils-DGMeCC48.js';
-import { s as spread } from './spread-axRTFMoH.js';
-import { BaseButton } from './BaseButton.js';
-import { o } from './style-map-CdmclYgz.js';
-import { BaseProgress } from './base-progress.js';
-import { e as e$1 } from './query-QBcUV-L_.js';
-import BaseInput from './BaseInput.js';
-
-var css_248z$b = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-flex;
-  --z-index-button: 0;
-  --button-height: unset;
-  --button-icon-size: unset;
-  --button-container-shape: unset;
-  --button-container-shape-start-start: unset;
-  --button-container-shape-start-end: unset;
-  --button-container-shape-end-start: unset;
-  --button-container-shape-end-end: unset;
-  --button-container-shape-variant: unset;
-}
-
-/**
-  * Private CSS Variables
-  * These variables are used internally within the button component
-  */
-slot::slotted(*) {
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
-}
-
-/*
-  * Reset native button/link styles
-  */
-.button.button-element {
-  background: transparent;
-  border: none;
-  appearance: none;
-  margin: 0;
-  outline: none;
-  text-decoration: none;
-}
-
-.button {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: var(--button-height, var(--_button-height));
-  padding: 0 var(--_container-padding);
-  width: 100%;
-  font-family: var(--font-family-sans) !important;
-  cursor: pointer;
-  --_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-corner-shape-variant: var(--button-container-shape-variant, squircle);
-}
-.button .button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--_button-icon-label-spacing);
-  width: 100%;
-  z-index: 1;
-  color: var(--_label-text-color);
-  opacity: var(--_label-text-opacity, 1);
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
-}
-.button .button-content .slot-container {
-  display: none;
-}
-.button.disabled {
-  cursor: not-allowed;
-}
-.button {
-  /*
-    Background layers
-   */
-}
-.button .focus-ring {
-  z-index: 2;
-  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
-}
-.button .ripple {
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  --ripple-state-opacity: var(--_container-state-opacity, 0);
-  --ripple-pressed-color: var(--_container-state-color);
-}
-.button .background {
-  display: block;
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  pointer-events: none;
-}
-.button .skeleton {
-  display: none;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: 0;
-  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
-  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
-  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
-  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
-  --skeleton-container-shape-variant: var(--_container-corner-shape-variant);
-}
-.button .elevation {
-  --elevation-level: var(--_container-elevation-level);
-  transition-duration: 280ms;
-  --elevation-container-shape-start-start: var(--_container-shape-start-start);
-  --elevation-container-shape-start-end: var(--_container-shape-start-end);
-  --elevation-container-shape-end-start: var(--_container-shape-end-start);
-  --elevation-container-shape-end-end: var(--_container-shape-end-end);
-  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
-}
-.button .neo-background {
-  display: none;
-  position: absolute;
-  background: var(--color-inverse-surface);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  transform: translateX(0.25rem) translateY(0.25rem);
-}
-.button .neo-background:before {
-  z-index: 0;
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  width: 100%;
-  height: 100%;
-  background: white;
-  left: 0;
-  transform: translateX(-0.25rem) translateY(-0.25rem);
-}
-.button .outline {
-  z-index: 0;
-  display: none;
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--_outline-width) solid var(--_outline-color);
-  opacity: var(--_outline-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-}
-.button.has-content .slot-container {
-  display: flex;
-  flex: none;
-  justify-content: center;
-}
-.button.show-skeleton .background {
-  display: none;
-}
-.button.show-skeleton .neo-background {
-  display: none;
-}
-.button.show-skeleton .neo-background:before {
-  display: none;
-}
-.button.show-skeleton .ripple {
-  display: none;
-}
-.button.show-skeleton .skeleton {
-  display: block;
-}
-.button.icon-align-start .button-content {
-  flex-direction: row-reverse;
-}
-.button.icon-align-end .button-content {
-  flex-direction: row;
-}
-
-/**
- * Button variant definitions
- */
-.button.variant-elevated {
-  --_container-color: var(--elevated-button-container-color);
-  --_label-text-color: var(--elevated-button-label-text-color);
-  --_container-elevation-level: 1;
-  --_container-state-color: var(--_label-text-color);
-}
-.button.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 2;
-  --_container-state-opacity: 0.08;
-}
-.button.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.12;
-}
-.button.variant-elevated.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.button.variant-elevated.disabled .ripple {
-  display: none;
-}
-
-.button.variant-filled {
-  --_container-color: var(--filled-button-container-color);
-  --_label-text-color: var(--filled-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.button.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.08;
-}
-.button.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 0;
-  --_container-state-opacity: 0.1;
-}
-.button.variant-filled.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.button.variant-filled.disabled .ripple {
-  display: none;
-}
-
-.button.variant-tonal {
-  --_container-color: var(--tonal-button-container-color);
-  --_label-text-color: var(--tonal-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.button.variant-tonal:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.08;
-}
-.button.variant-tonal.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 0;
-  --_container-state-opacity: 0.12;
-}
-.button.variant-tonal.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.button.variant-tonal.disabled .ripple {
-  display: none;
-}
-
-.button.variant-outlined {
-  --_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_outline-color: var(--outlined-button-outline-color);
-  --_label-text-color: var(--outlined-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.button.variant-outlined .outline {
-  display: block;
-}
-.button.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.08;
-}
-.button.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.12;
-}
-.button.variant-outlined.disabled {
-  --_outline-color: var(--color-on-surface);
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-  --_outline-opacity: 0.12;
-}
-.button.variant-outlined.disabled .ripple {
-  display: none;
-}
-
-.button.variant-text {
-  --_label-text-color: var(--text-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.button.variant-text:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.08;
-}
-.button.variant-text.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.12;
-}
-.button.variant-text.disabled {
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.button.variant-text.disabled .ripple {
-  display: none;
-}
-
-.button.variant-neo {
-  --_container-color: var(--neo-button-container-color);
-  --_label-text-color: var(--neo-button-label-text-color);
-  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
-  --_outline-color: var(--color-inverse-surface);
-}
-.button.variant-neo .outline {
-  display: block;
-}
-.button.variant-neo .neo-background {
-  display: block;
-}
-.button.variant-neo .ripple {
-  display: none;
-}
-.button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .background, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .button-content, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .outline {
-  transform: translateX(0.25rem) translateY(0.25rem);
-}
-.button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .neo-background:before {
-  transform: translateX(0) translateY(0);
-}
-.button.variant-neo.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-  --_outline-opacity: 0.12;
-}
-.button.variant-neo.disabled .ripple {
-  display: none;
-}
-
-:host([block]) {
-  width: 100%;
-}`;
-
-var css_248z$a = i`:host([color=primary]) {
-  --filled-button-container-color: var(--color-primary);
-  --filled-button-label-text-color: var(--color-on-primary);
-  --tonal-button-container-color: var(--color-primary-container);
-  --tonal-button-label-text-color: var(--color-on-primary-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-primary);
-  --outlined-button-outline-color: var(--color-primary);
-  --outlined-button-label-text-color: var(--color-primary);
-  --text-button-label-text-color: var(--color-primary);
-  --neo-button-container-color: var(--color-primary);
-  --neo-button-label-text-color: var(--color-on-primary);
-}
-
-:host([color=secondary]) {
-  --filled-button-container-color: var(--color-secondary);
-  --filled-button-label-text-color: var(--color-on-secondary);
-  --tonal-button-container-color: var(--color-secondary-container);
-  --tonal-button-label-text-color: var(--color-on-secondary-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-secondary);
-  --outlined-button-outline-color: var(--color-secondary);
-  --outlined-button-label-text-color: var(--color-secondary);
-  --text-button-label-text-color: var(--color-secondary);
-  --neo-button-container-color: var(--color-secondary);
-  --neo-button-label-text-color: var(--color-on-secondary);
-}
-
-:host([color=tertiary]) {
-  --filled-button-container-color: var(--color-tertiary);
-  --filled-button-label-text-color: var(--color-on-tertiary);
-  --tonal-button-container-color: var(--color-tertiary-container);
-  --tonal-button-label-text-color: var(--color-on-tertiary-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-tertiary);
-  --outlined-button-outline-color: var(--color-tertiary);
-  --outlined-button-label-text-color: var(--color-tertiary);
-  --text-button-label-text-color: var(--color-tertiary);
-  --neo-button-container-color: var(--color-tertiary);
-  --neo-button-label-text-color: var(--color-on-tertiary);
-}
-
-:host([color=success]) {
-  --filled-button-container-color: var(--color-success);
-  --filled-button-label-text-color: var(--color-on-success);
-  --tonal-button-container-color: var(--color-success-container);
-  --tonal-button-label-text-color: var(--color-on-success-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-success);
-  --outlined-button-outline-color: var(--color-success);
-  --outlined-button-label-text-color: var(--color-success);
-  --text-button-label-text-color: var(--color-success);
-  --neo-button-container-color: var(--color-success);
-  --neo-button-label-text-color: var(--color-on-success);
-}
-
-:host([color=danger]) {
-  --filled-button-container-color: var(--color-error);
-  --filled-button-label-text-color: var(--color-on-error);
-  --tonal-button-container-color: var(--color-error-container);
-  --tonal-button-label-text-color: var(--color-on-error-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-error);
-  --outlined-button-outline-color: var(--color-error);
-  --outlined-button-label-text-color: var(--color-error);
-  --text-button-label-text-color: var(--color-error);
-  --neo-button-container-color: var(--color-error);
-  --neo-button-label-text-color: var(--color-on-error);
-}
-
-:host([color=dark]) {
-  --filled-button-container-color: var(--color-on-surface);
-  --filled-button-label-text-color: var(--color-surface);
-  --tonal-button-container-color: var(--color-surface-container);
-  --tonal-button-label-text-color: var(--color-on-surface-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-on-surface);
-  --outlined-button-outline-color: var(--color-on-surface);
-  --outlined-button-label-text-color: var(--color-on-surface);
-  --text-button-label-text-color: var(--color-on-surface);
-  --neo-button-container-color: var(--color-on-surface);
-  --neo-button-label-text-color: var(--color-surface);
-}
-
-:host([color=light]) {
-  --filled-button-container-color: var(--color-surface);
-  --filled-button-label-text-color: var(--color-on-surface);
-  --tonal-button-container-color: var(--color-on-surface-container);
-  --tonal-button-label-text-color: var(--color-surface-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-white);
-  --outlined-button-outline-color: var(--color-surface);
-  --outlined-button-label-text-color: var(--color-surface);
-  --text-button-label-text-color: var(--color-surface);
-  --neo-button-container-color: var(--color-surface);
-  --neo-button-label-text-color: var(--color-on-surface);
-}`;
-
-var css_248z$9 = i`.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
-  --_button-icon-size: 1rem;
-  --_container-padding: 0.75rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
-  --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
-  --_button-icon-label-spacing: 0.5rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
-  --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
-  font-size: 1rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.5rem !important;
-  letter-spacing: 0.15px !important;
-}
-
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
-  --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2rem !important;
-  letter-spacing: 0 !important;
-}
-
-.button.size-xl {
-  --_button-height: 8.5rem;
-  --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
-  font-size: 2rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2.5rem !important;
-  letter-spacing: 0 !important;
-}`;
-
-var _Button_tabindex;
-/**
- * @label Button
- * @tag base-button
- * @rawTag button
- *
- * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
- * @overview
- * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
- *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
- *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
- *
- *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
- *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
- *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
- *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
- *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
- *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
- *
- * @fires {MouseEvent} click - Dispatched when the button is clicked.
- *
- * @example
- * ```html
- * <base-button>Button</base-button>
- * ```
- * @tags display
- */
-class Button extends BaseButton {
-    constructor() {
-        super(...arguments);
-        _Button_tabindex.set(this, 0);
-        /**
-         * Icon alignment.
-         * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
-         */
-        this.iconAlign = 'end';
-        this.slotHasContent = false;
-    }
-    firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
-            this.slotHasContent = hasContent;
-            this.requestUpdate();
-        });
-        this.__convertTypeToVariantAndColor();
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            button: true,
-            'button-element': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`color-${this.color}`]: true,
-            disabled: this.disabled || this.softDisabled,
-            pressed: this.isPressed,
-            'has-content': this.slotHasContent,
-            'show-skeleton': this.skeleton,
-            [`icon-align-${this.iconAlign}`]: true,
-        };
-        if (!isLink) {
-            return b `<button
-          class=${e(cssClasses)}
-          id="button"
-          tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
-          type=${this.htmlType}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          ?aria-describedby=${this.__getDisabledReasonID()}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-        }
-        return b `<a
-        class=${e(cssClasses)}
-        id="button"
-        tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
-        href=${this.href}
-        target=${this.target}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
-        role="button"
-        ?aria-describedby=${this.__getDisabledReasonID()}
-        aria-disabled=${`${this.disabled}`}
-        ${spread(this.configAria)}
-      >
-        ${this.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
-    }
-    renderButtonContent() {
-        return b `
-      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
-      <base-elevation class="elevation"></base-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <base-ripple class="ripple"></base-ripple>
-      <base-skeleton class="skeleton"></base-skeleton>
-
-      <div class="button-content">
-        <div class="slot-container">
-          <slot></slot>
-        </div>
-
-        <slot name="icon"></slot>
-      </div>
-
-      ${this.__renderDisabledReason()}
-    `;
-    }
-}
-_Button_tabindex = new WeakMap();
-Button.styles = [css_248z$b, css_248z$a, css_248z$9];
-__decorate([
-    n({ attribute: 'icon-align' })
-], Button.prototype, "iconAlign", void 0);
-__decorate([
-    r()
-], Button.prototype, "slotHasContent", void 0);
-
-var css_248z$8 = i`.button {
-  --_container-padding: 0.75rem;
-  width: var(--_button-height);
-  --_container-padding: 0;
-}
-
-.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
-  --_button-icon-size: 1rem;
-}
-
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
-  --_button-icon-size: 1.25rem;
-  --_button-icon-label-spacing: 0.5rem;
-}
-
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
-  --_button-icon-size: 1.5rem;
-}
-
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
-  --_button-icon-size: 2rem;
-}
-
-.button.size-xl {
-  --_button-height: 8.5rem;
-  --_button-icon-size: 2.5rem;
-}`;
-
-var _IconButton_id, _IconButton_tabindex;
-/**
- * @label Icon Button
- * @tag icon-button
- * @rawTag icon-button
- *
- * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
- *
- * @overview
- * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>
- *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
- *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
- *
- *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
- *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
- *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
- *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
- *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
- *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
- *
- * @fires {CustomEvent} button:click - Dispatched when the button is clicked.
- *
- * @example
- * ```html
- * <icon-button name="home"></icon-button>
- * ```
- * @tags display
- */
-class IconButton extends BaseButton {
-    constructor() {
-        super(...arguments);
-        _IconButton_id.set(this, crypto.randomUUID());
-        _IconButton_tabindex.set(this, 0);
-        this.provider = 'material-symbols';
-    }
-    firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        this.__convertTypeToVariantAndColor();
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            button: true,
-            'button-element': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`color-${this.color}`]: true,
-            disabled: this.disabled || this.softDisabled,
-            pressed: this.isPressed,
-            skeleton: this.skeleton,
-        };
-        if (!isLink) {
-            return b `<button
-          class=${e(cssClasses)}
-          id="button"
-          tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
-          type=${this.htmlType}
-          @click=${this.__dispatchClickWithThrottle}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          ?aria-describedby=${(this.disabled || this.softDisabled) &&
-                this.disabledReason
-                ? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
-                : null}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-        }
-        return b `<a
-        class=${e(cssClasses)}
-        id="button"
-        tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
-        href=${this.href}
-        target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
-        role="button"
-        aria-describedby=${this.disabled && this.disabledReason
-            ? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
-            : null}
-        aria-disabled=${`${this.disabled}`}
-        ${spread(this.configAria)}
-      >
-        ${this.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
-    }
-    renderButtonContent() {
-        return b `
-      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
-      <base-elevation class="elevation"></base-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <base-ripple class="ripple"></base-ripple>
-      <base-skeleton class="skeleton"></base-skeleton>
-
-      <div class="button-content">
-        <base-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></base-icon>
-      </div>
-
-      ${this.__renderDisabledReason()}
-    `;
-    }
-}
-_IconButton_id = new WeakMap(), _IconButton_tabindex = new WeakMap();
-IconButton.styles = [css_248z$b, css_248z$a, css_248z$8];
-__decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "name", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "src", void 0);
-__decorate([
-    n({ type: String })
-], IconButton.prototype, "provider", void 0);
-
-var css_248z$7 = i`:host {
-  display: block;
-  --progress-height: 0.25rem;
-  --progress-container-color: var(--color-primary);
-  --progress-track-color: var(--color-secondary-container);
-  min-width: 2.5rem;
-}
-
-.linear-progress {
-  display: flex;
-  flex-direction: column;
-}
-.linear-progress .progress-header {
-  display: flex;
-  align-items: center;
-}
-.linear-progress .progress-header .progress-label {
-  font-family: var(--typography-label-medium-font-family) !important;
-  font-size: var(--typography-label-medium-font-size) !important;
-  font-weight: var(--typography-label-medium-font-weight) !important;
-  line-height: var(--typography-label-medium-line-height) !important;
-  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
-  color: var(--color-on-surface);
-  flex: 1;
-}
-.linear-progress .progress-body {
-  display: flex;
-  flex-direction: column;
-}
-.linear-progress .progress-body .linear-progress-container {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  margin: var(--spacing-100) 0;
-}
-.linear-progress .progress-body .linear-progress-container .track {
-  position: relative;
-}
-.linear-progress .progress-body .linear-progress-container .track:after {
-  content: "";
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  width: calc(100% - 0.25rem);
-  height: var(--progress-height);
-  background: var(--progress-track-color);
-  border-radius: var(--shape-corner-full);
-}
-.linear-progress .progress-body .linear-progress-container .track-start:after {
-  margin-inline-end: 0.25rem;
-}
-.linear-progress .progress-body .linear-progress-container .active-indicator {
-  height: var(--progress-height);
-  background: var(--progress-container-color);
-  border-radius: var(--shape-corner-full);
-}
-.linear-progress .progress-body .linear-progress-container .track-end {
-  flex: 1;
-}
-.linear-progress .progress-body .linear-progress-container .track-end:after {
-  margin-inline-start: 0.25rem;
-}
-.linear-progress .progress-body .progress-helper {
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  color: var(--color-on-surface-variant);
-}
-.linear-progress:not(.indeterminate) .track-start {
-  transition: width var(--duration-medium2) var(--easing-standard);
-}
-.linear-progress:not(.indeterminate) .active-indicator {
-  transition: width var(--duration-medium2) var(--easing-standard);
-}
-.linear-progress.indeterminate .linear-progress-container .track-start {
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-name: track-start-indeterminate;
-  animation-timing-function: var(--easing-linear);
-}
-.linear-progress.indeterminate .linear-progress-container .active-indicator {
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-name: active-indicator-indeterminate;
-  animation-timing-function: var(--easing-linear);
-}
-.linear-progress.inline {
-  flex-direction: row;
-  gap: var(--spacing-200);
-}
-.linear-progress.inline .progress-body {
-  flex: 1;
-}
-
-@keyframes track-start-indeterminate {
-  0% {
-    width: 0;
-  }
-  50% {
-    width: 33%;
-  }
-  80%, to {
-    width: 100%;
-    padding-inline-end: 0;
-  }
-}
-@keyframes active-indicator-indeterminate {
-  0% {
-    width: 0;
-  }
-  50% {
-    width: 33%;
-  }
-  80%, to {
-    width: 0;
-  }
-}`;
-
-/**
- * @label Linear Progress
- * @tag linear-progress
- * @rawTag linear-progress
- *
- * @summary A linear progress indicator is a visual representation of progress toward a specific goal.
- *
- * @example
- * ```html
- * <linear-progress value="30" style="width:10rem"></linear-progress>
- * ```
- */
-class LinearProgress extends BaseProgress {
-    render() {
-        return b `
-      <div
-        class="${e({
-            'linear-progress': true,
-            indeterminate: this.indeterminate,
-            inline: this.inline,
-        })}"
-      >
-        ${this.label
-            ? b `<div class="progress-header">
-              <label class="progress-label">${this.label}</label>
-            </div>`
-            : ''}
-
-        <div class="progress-body">
-          <div
-            class="linear-progress-container"
-            title=${this.label}
-            ?aria-valuenow="${this.__getPercentageValue()}"
-            aria-valuemin="0"
-            aria-valuemax="100"
-            role="progressbar"
-          >
-            <div class="track track-start"></div>
-            <div
-              class="active-indicator"
-              style="${o({
-            width: `${this.__getPercentageValue()}%`,
-        })}"
-            ></div>
-            <div class="track track-end"></div>
-          </div>
-
-          ${this.helperText
-            ? b `<div class="progress-helper">${this.helperText}</div>`
-            : ''}
-        </div>
-      </div>
-    `;
-    }
-}
-// Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$7];
-
-var css_248z$6 = i`:host {
-  display: inline-block;
-  --progress-height: 1.5rem;
-  --progress-line-thickness: 4px;
-  --progress-container-color: var(--color-primary);
-  --progress-track-color: var(--color-secondary-container);
-}
-
-.circular-progress {
-  display: flex;
-  flex-direction: column;
-}
-.circular-progress .circular-progress-container {
-  position: relative;
-  width: 100%;
-  --_container-height: clamp(0rem, var(--progress-height), 15rem);
-  height: var(--_container-height);
-}
-.circular-progress .circular-progress-container .progress-label {
-  font-family: var(--typography-label-large-emphasized-font-family) !important;
-  font-size: var(--typography-label-large-emphasized-font-size) !important;
-  font-weight: var(--typography-label-large-emphasized-font-weight) !important;
-  line-height: var(--typography-label-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-label-large-emphasized-letter-spacing) !important;
-  color: var(--color-on-surface);
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.circular-progress .circular-progress-container svg {
-  transform: rotate(-90deg);
-  width: 100%;
-  height: 100%;
-}
-.circular-progress .circular-progress-container circle {
-  fill: none;
-  stroke-linecap: round;
-  transition: stroke-dashoffset var(--duration-medium2) var(--easing-standard);
-}
-.circular-progress .circular-progress-container .track {
-  stroke: var(--progress-track-color);
-  stroke-width: calc(var(--progress-line-thickness) / (tan(atan2(var(--_container-height), 1px)) / 16));
-}
-.circular-progress .circular-progress-container .active-indicator {
-  stroke: var(--progress-container-color);
-  stroke-width: calc(var(--progress-line-thickness) / (tan(atan2(var(--_container-height), 1px)) / 16));
-}
-.circular-progress.indeterminate .active-indicator {
-  animation: arc-indeterminate 1.5s ease-in-out infinite;
-}
-.circular-progress .progress-label {
-  font-family: var(--typography-label-medium-font-family) !important;
-  font-size: var(--typography-label-medium-font-size) !important;
-  font-weight: var(--typography-label-medium-font-weight) !important;
-  line-height: var(--typography-label-medium-line-height) !important;
-  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
-  color: var(--color-on-surface);
-}
-.circular-progress .progress-helper {
-  font-family: var(--typography-label-small-font-family) !important;
-  font-size: var(--typography-label-small-font-size) !important;
-  font-weight: var(--typography-label-small-font-weight) !important;
-  line-height: var(--typography-label-small-line-height) !important;
-  letter-spacing: var(--typography-label-small-letter-spacing) !important;
-  color: var(--color-on-surface-variant);
-  text-align: center;
-}
-.circular-progress.inline {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-200);
-}
-.circular-progress.inline .progress-footer {
-  flex: 1;
-}
-.circular-progress.inline .progress-helper {
-  text-align: right;
-}
-
-@keyframes rotate-container {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes arc-indeterminate {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}`;
-
-/**
- * @label Circular Progress
- * @tag circular-progress
- * @rawTag circular-progress
- *
- * @summary A circular progress indicator is a visual representation of progress toward a specific goal.
- *
- * @example
- * ```html
- * <circular-progress value="30"></circular-progress>
- * ```
- */
-class CircularProgress extends BaseProgress {
-    render() {
-        const percentage = this.__getPercentageValue();
-        // Radius of 18 with stroke 4 fits nicely in a 40x40 viewBox
-        const radius = 6;
-        const circumference = 2 * Math.PI * radius;
-        const offset = circumference - (percentage / 100) * circumference;
-        return b `
-      <div
-        class="${e({
-            'circular-progress': true,
-            indeterminate: this.indeterminate,
-            inline: this.inline,
-        })}"
-        title=${this.label}
-        role="progressbar"
-        aria-valuenow="${this.indeterminate ? undefined : percentage}"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
-        <div class="circular-progress-container">
-          <svg viewBox="0 0 16 16">
-            <circle class="track" cx="8" cy="8" r="6"></circle>
-            <circle
-              class="active-indicator"
-              cx="8"
-              cy="8"
-              r="6"
-              style="${o({
-            strokeDasharray: `${circumference}`,
-            strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
-        })}"
-            ></circle>
-          </svg>
-        </div>
-
-        <div class="progress-footer">
-          ${this.label
-            ? b `<div class="progress-label">${this.label}</div>`
-            : ''}
-          ${this.helperText
-            ? b `<div class="progress-helper">${this.helperText}</div>`
-            : ''}
-        </div>
-      </div>
-    `;
-    }
-}
-// Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$6];
-
-var css_248z$5 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-.input-wrapper .input {
-  flex: 1;
-  width: 100%;
-  background: none;
-  cursor: inherit;
-}
-.input-wrapper .password-toggle {
-  --button-container-shape: var(--shape-corner-full);
-}`;
-
-/**
- * @label Input
- * @tag input-field
- * @rawTag input
- *
- * @summary The Input component is used to capture user input.
- *
- * @example
- * ```html
- * <input-field label="Name" required placeholder="Enter your name"></input-field>
- * ```
- */
-class Input extends BaseInput {
-    constructor() {
-        super(...arguments);
-        this.value = '';
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.type = 'text';
-        this.autocomplete = 'off';
-        this.configAria = {};
-        this.variant = 'default';
-        /**
-         * Helper text to display below the input.
-         */
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.focused = false;
-        this.passwordVisible = false;
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleInitialAttributes();
-    }
-    handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
-        Array.from(this.attributes).forEach(attr => {
-            if (attr.name.startsWith('aria-')) {
-                this.configAria[attr.name] = attr.value;
-                this.removeAttribute(attr.name);
-            }
-        });
-    }
-    __handleInput(event) {
-        this.dirty = true;
-        this.value = event.target.value;
-    }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
-    __redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    render() {
-        const displayType = this.type === 'password' && this.passwordVisible ? 'text' : this.type;
-        return b `
-      <base-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        variant=${this.variant}
-        ?populated=${!!this.value}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
-        class="input-wrapper"
-      >
-        <slot name="start" slot="field-start"></slot>
-
-        <input
-          class="input input-element"
-          name=${this.name}
-          type=${displayType}
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?tabindex=${this.tabindex}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
-          ${spread(this.configAria)}
-        />
-
-        ${this.type === 'password'
-            ? b `
-              <pc-tooltip
-                slot="field-end"
-                content=${this.passwordVisible
-                ? 'Hide password'
-                : 'Show password'}
-              >
-                <icon-button
-                  class="password-toggle"
-                  variant="text"
-                  name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
-                  @click=${() => {
-                this.passwordVisible = !this.passwordVisible;
-            }}
-                >
-                </icon-button>
-              </pc-tooltip>
-            `
-            : A}
-
-        <slot name="end" slot="field-end"></slot>
-      </base-field>
-    `;
-    }
-}
-Input.styles = [css_248z$5];
-__decorate([
-    n({ type: String })
-], Input.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "placeholder", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Input.prototype, "inline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Input.prototype, "size", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "type", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "autocomplete", void 0);
-__decorate([
-    n({ type: Object })
-], Input.prototype, "configAria", void 0);
-__decorate([
-    n({ type: String })
-], Input.prototype, "variant", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], Input.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Input.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], Input.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Input.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], Input.prototype, "warningText", void 0);
-__decorate([
-    r()
-], Input.prototype, "focused", void 0);
-__decorate([
-    r()
-], Input.prototype, "passwordVisible", void 0);
-__decorate([
-    r()
-], Input.prototype, "dirty", void 0);
-__decorate([
-    e$1('.input-element')
-], Input.prototype, "inputElement", void 0);
-
-var css_248z$4 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-.input-wrapper .input {
-  flex: 1;
-  width: 100%;
-  background: none;
-  cursor: inherit;
-}
-.input-wrapper .password-toggle {
-  --button-container-shape: var(--shape-corner-full);
-}
-
-.stepper {
-  /* Chrome, Safari, Edge, Opera */
-}
-.stepper input::-webkit-outer-spin-button,
-.stepper input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.stepper {
-  /* Firefox */
-}
-.stepper input[type=number] {
-  -moz-appearance: textfield;
-}`;
-
-var _NumberField_id;
-/**
- * @label Number Field
- * @tag number-field
- * @rawTag number
- *
- * @summary The Number Field component is used to capture numeric user input.
- *
- * @example
- * ```html
- * <number-field label="Age" placeholder="Enter your age"></number-field>
- * ```
- */
-class NumberField extends BaseInput {
-    constructor() {
-        super(...arguments);
-        _NumberField_id.set(this, crypto.randomUUID());
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.autocomplete = 'off';
-        this.configAria = {};
-        /**
-         * Helper text to display below the input.
-         */
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.stepper = false;
-        this.focused = false;
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleInitialAttributes();
-    }
-    handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
-        Array.from(this.attributes).forEach(attr => {
-            if (attr.name.startsWith('aria-')) {
-                this.configAria[attr.name] = attr.value;
-                this.removeAttribute(attr.name);
-            }
-        });
-    }
-    __handleInput(event) {
-        this.dirty = true;
-        this.value = Number(event.target.value);
-    }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
-    __redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    stepUp() {
-        this.inputElement?.stepUp();
-    }
-    stepDown() {
-        this.inputElement?.stepDown();
-    }
-    render() {
-        const classes = {
-            'input-wrapper': true,
-            stepper: this.stepper,
-        };
-        return b `
-      <base-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
-        class=${e(classes)}
-      >
-        ${this.stepper && !this.disabled
-            ? b `<icon-button
-              class="stepper"
-              name="remove"
-              variant="text"
-              slot="field-start"
-              @click=${this.stepDown}
-            ></icon-button>`
-            : A}
-
-        <slot name="start" slot="field-start"></slot>
-
-        <input
-          class="input input-element"
-          name=${this.name}
-          type="number"
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?tabindex=${this.tabindex}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          min=${this.min}
-          max=${this.max}
-          step=${this.step}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
-          ${spread(this.configAria)}
-        />
-
-        <slot name="end" slot="field-end"></slot>
-
-        ${this.stepper && !this.disabled
-            ? b `<icon-button
-              class="stepper"
-              variant="text"
-              name="add"
-              slot="field-end"
-              @click=${this.stepUp}
-            ></icon-button>`
-            : A}
-      </base-field>
-    `;
-    }
-}
-_NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$4];
-__decorate([
-    n({ type: Number })
-], NumberField.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], NumberField.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], NumberField.prototype, "placeholder", void 0);
-__decorate([
-    n({ type: String })
-], NumberField.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], NumberField.prototype, "inline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], NumberField.prototype, "size", void 0);
-__decorate([
-    n({ type: Number })
-], NumberField.prototype, "max", void 0);
-__decorate([
-    n({ type: Number })
-], NumberField.prototype, "min", void 0);
-__decorate([
-    n({ type: Number })
-], NumberField.prototype, "step", void 0);
-__decorate([
-    n({ type: String })
-], NumberField.prototype, "autocomplete", void 0);
-__decorate([
-    n({ type: Object })
-], NumberField.prototype, "configAria", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], NumberField.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], NumberField.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], NumberField.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], NumberField.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], NumberField.prototype, "warningText", void 0);
-__decorate([
-    n({ type: Boolean })
-], NumberField.prototype, "stepper", void 0);
-__decorate([
-    r()
-], NumberField.prototype, "focused", void 0);
-__decorate([
-    r()
-], NumberField.prototype, "dirty", void 0);
-__decorate([
-    e$1('.input-element')
-], NumberField.prototype, "inputElement", void 0);
-
-var css_248z$3 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-.input-wrapper .input {
-  flex: 1;
-  width: 100%;
-  background: none;
-  cursor: inherit;
-}
-.input-wrapper .input::-webkit-inner-spin-button,
-.input-wrapper .input::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}`;
-
-/**
- * @label Date Picker
- * @tag date-picker
- * @rawTag date-picker
- *
- * @summary The Date Picker component is used to capture date user input.
- *
- * @example
- * ```html
- * <date-picker label="Name" required placeholder="Enter your name"></date-picker>
- * ```
- */
-class DatePicker extends BaseInput {
-    constructor() {
-        super(...arguments);
-        this.value = '';
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.autocomplete = 'off';
-        this.configAria = {};
-        this.variant = 'default';
-        /**
-         * Helper text to display below the input.
-         */
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.focused = false;
-        this.passwordVisible = false;
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleInitialAttributes();
-    }
-    handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
-        Array.from(this.attributes).forEach(attr => {
-            if (attr.name.startsWith('aria-')) {
-                this.configAria[attr.name] = attr.value;
-                this.removeAttribute(attr.name);
-            }
-        });
-    }
-    __handleInput(event) {
-        this.dirty = true;
-        this.value = event.target.value;
-    }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
-    __redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    render() {
-        return b `
-      <base-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        variant=${this.variant}
-        ?populated=${!!this.value}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
-        class="input-wrapper"
-      >
-        <slot name="start" slot="field-start"></slot>
-
-        <input
-          class="input input-element"
-          name=${this.name}
-          type="date"
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?tabindex=${this.tabindex}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
-          ${spread(this.configAria)}
-        />
-
-        <slot name="end" slot="field-end"></slot>
-
-        <icon-button
-          slot="field-end"
-          color="secondary"
-          variant="text"
-          name="calendar_today"
-          ?disabled=${this.disabled}
-          @click=${() => {
-            setTimeout(() => {
-                // @ts-ignore
-                this.inputElement.showPicker();
-            });
-        }}
-        >
-        </icon-button>
-      </base-field>
-    `;
-    }
-}
-DatePicker.styles = [css_248z$3];
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "placeholder", void 0);
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], DatePicker.prototype, "inline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], DatePicker.prototype, "size", void 0);
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "autocomplete", void 0);
-__decorate([
-    n({ type: Object })
-], DatePicker.prototype, "configAria", void 0);
-__decorate([
-    n({ type: String })
-], DatePicker.prototype, "variant", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], DatePicker.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], DatePicker.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], DatePicker.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], DatePicker.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], DatePicker.prototype, "warningText", void 0);
-__decorate([
-    r()
-], DatePicker.prototype, "focused", void 0);
-__decorate([
-    r()
-], DatePicker.prototype, "passwordVisible", void 0);
-__decorate([
-    r()
-], DatePicker.prototype, "dirty", void 0);
-__decorate([
-    e$1('.input-element')
-], DatePicker.prototype, "inputElement", void 0);
-
-var css_248z$2 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-.input-wrapper .input {
-  flex: 1;
-  width: 100%;
-  background: none;
-  cursor: inherit;
-}
-.input-wrapper .input::-webkit-inner-spin-button,
-.input-wrapper .input::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}`;
-
-/**
- * @label Time Picker
- * @tag time-picker
- * @rawTag time-picker
- *
- * @summary The Time Picker component is used to capture time user input.
- *
- * @example
- * ```html
- * <time-picker label="Name" required placeholder="Enter your name"></time-picker>
- * ```
- */
-class TimePicker extends BaseInput {
-    constructor() {
-        super(...arguments);
-        this.value = '';
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.autocomplete = 'off';
-        this.configAria = {};
-        this.variant = 'default';
-        /**
-         * Helper text to display below the input.
-         */
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.focused = false;
-        this.passwordVisible = false;
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleInitialAttributes();
-    }
-    handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
-        Array.from(this.attributes).forEach(attr => {
-            if (attr.name.startsWith('aria-')) {
-                this.configAria[attr.name] = attr.value;
-                this.removeAttribute(attr.name);
-            }
-        });
-    }
-    __handleInput(event) {
-        this.dirty = true;
-        this.value = event.target.value;
-    }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
-    __redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    render() {
-        return b `
-      <base-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        variant=${this.variant}
-        ?populated=${!!this.value}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
-        class="input-wrapper"
-      >
-        <slot name="start" slot="field-start"></slot>
-
-        <input
-          class="input input-element"
-          name=${this.name}
-          type="time"
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?tabindex=${this.tabindex}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
-          ${spread(this.configAria)}
-        />
-
-        <slot name="end" slot="field-end"></slot>
-
-        <icon-button
-          slot="field-end"
-          color="secondary"
-          variant="text"
-          name="calendar_today"
-          ?disabled=${this.disabled}
-          @click=${() => {
-            setTimeout(() => {
-                // @ts-ignore
-                this.inputElement.showPicker();
-            });
-        }}
-        >
-        </icon-button>
-      </base-field>
-    `;
-    }
-}
-TimePicker.styles = [css_248z$2];
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "placeholder", void 0);
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], TimePicker.prototype, "inline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], TimePicker.prototype, "size", void 0);
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "autocomplete", void 0);
-__decorate([
-    n({ type: Object })
-], TimePicker.prototype, "configAria", void 0);
-__decorate([
-    n({ type: String })
-], TimePicker.prototype, "variant", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], TimePicker.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], TimePicker.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], TimePicker.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], TimePicker.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], TimePicker.prototype, "warningText", void 0);
-__decorate([
-    r()
-], TimePicker.prototype, "focused", void 0);
-__decorate([
-    r()
-], TimePicker.prototype, "passwordVisible", void 0);
-__decorate([
-    r()
-], TimePicker.prototype, "dirty", void 0);
-__decorate([
-    e$1('.input-element')
-], TimePicker.prototype, "inputElement", void 0);
-
-var css_248z$1 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.input-element {
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-.input-wrapper .input {
-  flex: 1;
-  width: 100%;
-  background: none;
-  cursor: inherit;
-}
-
-.textarea {
-  height: 100%;
-  position: relative;
-  align-items: flex-start;
-  --field-height: auto;
-  --field-padding-block: var(--spacing-100);
-}
-.textarea .input {
-  height: 100%;
-  resize: vertical;
-}`;
-
-/**
- * @label Textarea
- * @tag textarea-field
- * @rawTag textarea
- *
- * @summary The Textarea component is used to capture user input.
- *
- * @example
- * ```html
- * <textarea-field label="Name" required placeholder="Enter your name"></textarea-field>
- * ```
- */
-class Textarea extends BaseInput {
-    constructor() {
-        super(...arguments);
-        this.value = '';
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.inline = false;
-        this.size = 'md';
-        this.autocomplete = 'off';
-        this.configAria = {};
-        this.variant = 'default';
-        /**
-         * Helper text to display below the input.
-         */
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.rows = '3';
-        this.focused = false;
-        this.passwordVisible = false;
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleInitialAttributes();
-    }
-    handleInitialAttributes() {
-        if (this.hasAttribute('tabindex')) {
-            this.tabindex = this.getAttribute('tabindex') || undefined;
-            this.removeAttribute('tabindex');
-        }
-        Array.from(this.attributes).forEach(attr => {
-            if (attr.name.startsWith('aria-')) {
-                this.configAria[attr.name] = attr.value;
-                this.removeAttribute(attr.name);
-            }
-        });
-    }
-    __handleInput(event) {
-        this.dirty = true;
-        this.value = event.target.value;
-    }
-    focus() {
-        this.inputElement?.focus();
-    }
-    blur() {
-        this.inputElement?.blur();
-    }
-    __handleFocusChange() {
-        // When calling focus() or reportValidity() during change, it's possible
-        // for blur to be called after the new focus event. Rather than set
-        // `this.focused` to true/false on focus/blur, we always set it to whether
-        // or not the input itself is focused.
-        this.focused = this.inputElement?.matches(':focus') ?? false;
-    }
-    __redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    render() {
-        return b `
-      <base-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        variant=${this.variant}
-        ?populated=${!!this.value}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
-        class="input-wrapper textarea"
-      >
-        <slot name="start" slot="field-start"></slot>
-
-        <textarea
-          class="input input-element"
-          rows=${this.rows}
-          name=${this.name}
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?tabindex=${this.tabindex}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
-          ${spread(this.configAria)}
-        ></textarea>
-
-        <slot name="end" slot="field-end"></slot>
-      </base-field>
-    `;
-    }
-}
-Textarea.styles = [css_248z$1];
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "placeholder", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Textarea.prototype, "inline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Textarea.prototype, "size", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "autocomplete", void 0);
-__decorate([
-    n({ type: Object })
-], Textarea.prototype, "configAria", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "variant", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], Textarea.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Textarea.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], Textarea.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Textarea.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], Textarea.prototype, "warningText", void 0);
-__decorate([
-    n({ type: String })
-], Textarea.prototype, "rows", void 0);
-__decorate([
-    r()
-], Textarea.prototype, "focused", void 0);
-__decorate([
-    r()
-], Textarea.prototype, "passwordVisible", void 0);
-__decorate([
-    r()
-], Textarea.prototype, "dirty", void 0);
-__decorate([
-    e$1('.input-element')
-], Textarea.prototype, "inputElement", void 0);
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-block;
-  --switch-track-color: var(--color-primary);
-  --switch-track-off-color: var(--color-surface-container-highest);
-}
-
-.switch {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.switch .input-native {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.switch .label {
-  font-family: var(--typography-label-medium-font-family) !important;
-  font-size: var(--typography-label-medium-font-size) !important;
-  font-weight: var(--typography-label-medium-font-weight) !important;
-  line-height: var(--typography-label-medium-line-height) !important;
-  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
-}
-.switch.has-content {
-  gap: var(--spacing-150);
-}
-.switch .track {
-  position: relative;
-  background: var(--switch-track-off-color);
-  border: 2px solid var(--color-outline);
-  border-radius: var(--shape-corner-full);
-  cursor: pointer;
-  display: flex;
-  transition: background-color var(--duration-short2) var(--easing-standard);
-  align-items: center;
-  width: var(--_container-width);
-  height: var(--_container-height);
-  padding: 0 4px;
-}
-.switch .track .handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--shape-corner-full);
-  transition: all var(--duration-short2) var(--easing-standard);
-  background: white;
-  height: var(--switch-handle-radius);
-  width: var(--switch-handle-radius);
-  background: var(--switch-handle-color);
-}
-.switch .track .handle .icon {
-  --icon-size: .75rem;
-  --icon-color: var(--switch-track-off-color);
-}
-.switch.has-focus:not(.active) .track {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
-  border-color: var(--color-white);
-}
-.switch.has-focus:not(.active):not(.state-checked) .handle {
-  border-color: var(--icon-01);
-}
-
-.switch.state-checked .track {
-  background: var(--switch-track-color);
-  border-color: transparent;
-}
-.switch.state-checked .handle {
-  margin-inline-start: calc(100% - var(--switch-handle-radius));
-}
-.switch.state-checked .handle .icon {
-  --icon-size: 1rem;
-  --icon-color: var(--switch-track-color);
-}
-.switch.state-checked.active .track {
-  border-color: var(--switch-track-color);
-}
-.switch.state-checked.has-focus:not(.active) .track {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
-  border-color: var(--color-white);
-}
-
-.switch {
-  --_container-width: 3.25rem;
-  --_container-height: 2rem;
-  --switch-handle-radius: 16px;
-  --switch-handle-color: var(--color-outline);
-}
-.switch.state-checked {
-  --switch-handle-radius: 22px;
-  --switch-handle-color: var(--color-surface-container-lowest);
-}
-
-.switch.readonly {
-  cursor: default;
-}
-.switch.readonly .track {
-  border-color: var(--color-outline);
-  background: var(--switch-track-off-color);
-  opacity: 0.38;
-}
-.switch.readonly .track .handle {
-  background: var(--color-outline) !important;
-}
-
-.switch.disabled {
-  cursor: not-allowed;
-}
-.switch.disabled .track {
-  border-color: var(--color-on-surface);
-  background: var(--switch-track-off-color);
-  opacity: 0.38;
-}
-.switch.disabled .track .handle {
-  background: var(--color-on-surface) !important;
-}`;
-
-/**
- * @label Switch
- * @tag base-switch
- * @rawTag switch
- *
- * @summary Captures boolean input with an on/off switch interaction.
- * @overview
- * <p>Toggles are used to enable or disable a single option. They provide immediate feedback about whether an option is active or inactive.</p>
- *
- * @cssprop --switch-track-color: Color of the switch track when checked.
- * @cssprop --switch-track-off-color: Color of the switch track when unchecked.
- * @cssprop --switch-width: Width of the switch track.
- * @cssprop --switch-height: Height of the switch track.
- * @cssprop --switch-handle-radius: Size of the switch handle.
- * @cssprop --switch-handle-color: Color of the switch handle.
- *
- * @fires {CustomEvent} change - Dispatched when the switch value changes.
- * @fires {CustomEvent} blur - Dispatched when the switch loses focus.
- * @fires {CustomEvent} focus - Dispatched when the switch receives focus.
- *
- * @example
- * ```html
- * <base-switch value="true"></base-switch>
- * ```
- * @tags input, form
- */
-class Switch extends BaseInput {
-    constructor() {
-        super(...arguments);
-        this.value = false;
-        /**
-         * The input field name.
-         */
-        this.name = '';
-        /**
-         * The switch label.
-         */
-        this.label = '';
-        /**
-         * If true, the toggle has rounded corners. Defaults to `true`.
-         */
-        this.rounded = true;
-        /**
-         * If true, required icon is shown. Defaults to `false`.
-         */
-        this.required = false;
-        /**
-         * If true, the toggle is readonly. Defaults to `false`.
-         */
-        this.readonly = false;
-        /**
-         * If true, the user cannot interact with the toggle. Defaults to `false`.
-         */
-        this.disabled = false;
-        this.withIcon = 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.dispatchEvent(new CustomEvent('change', {
-                    detail: { value: this.value, originalEvent: ev },
-                    bubbles: true,
-                    composed: true,
-                }));
-                this.trackElement?.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 toggle.
-     */
-    focus() {
-        this.trackElement?.focus();
-    }
-    /**
-     * Removes focus from the toggle.
-     */
-    blur() {
-        this.trackElement?.blur();
-    }
-    __renderIcon() {
-        if (this.withIcon) {
-            if (this.value)
-                return b `<base-icon name="check" class="icon"></base-icon>`;
-            return b `<base-icon name="close" class="icon"></base-icon>`;
-        }
-        return A;
-    }
-    render() {
-        const cssClasses = {
-            switch: true,
-            'state-checked': this.value,
-            '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(cssClasses)}>
-        <div
-          class="track"
-          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}
-          ${spread(this.configAria)}
-        >
-          <div class="handle">${this.__renderIcon()}</div>
-        </div>
-
-        <input
-          type="checkbox"
-          class="input-native"
-          name=${this.name}
-          .checked=${this.value}
-          aria-hidden="true"
-          ?required=${this.required}
-          tabindex="-1"
-          @click=${this.clickHandler}
-        />
-
-        ${this.label
-            ? b `<div class="label">${this.label}</div>`
-            : b `<div class="slot-container"><slot></slot></div>`}
-      </label>
-    `;
-    }
-}
-Switch.styles = [css_248z];
-__decorate([
-    n({ type: Boolean })
-], Switch.prototype, "value", void 0);
-__decorate([
-    n({ type: String })
-], Switch.prototype, "name", void 0);
-__decorate([
-    n({ type: String })
-], Switch.prototype, "label", void 0);
-__decorate([
-    n({ type: Boolean })
-], Switch.prototype, "rounded", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], 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$1('.track')
-], Switch.prototype, "trackElement", void 0);
-__decorate([
-    e$1('.input-native')
-], Switch.prototype, "nativeElement", void 0);
-
-export { Button as B, CircularProgress as C, DatePicker as D, IconButton as I, LinearProgress as L, NumberField as N, Switch as S, Textarea as T, Input as a, TimePicker as b };
-//# sourceMappingURL=switch-DqxIiVsB.js.map