@redvars/peacock 3.2.0 → 3.2.1

package/dist/switch-BCbVyXJW.js

@@ -0,0 +1,2736 @@
+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 { throttle, observerSlotChangesWithCallback, redispatchEvent } from './utils.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(--_input-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(--_input-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+  --icon-color: var(--_input-text-color);
+}
+.button .button-content .slot-container {
+  display: none;
+}
+.button.disabled {
+  cursor: not-allowed;
+}
+.button {
+  /*
+    Background layers
+   */
+}
+.button .focus-ring {
+  --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);
+}
+.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 .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+}
+.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 variant definitions
+ */
+.button.variant-elevated {
+  --_container-color: var(--elevated-button-container-color);
+  --_input-text-color: var(--elevated-button-label-text-color);
+  --_container-elevation-level: 1;
+  --_container-state-color: var(--_input-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;
+  --_input-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);
+  --_input-text-color: var(--filled-button-label-text-color);
+  --_container-state-color: var(--_input-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;
+  --_input-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);
+  --_input-text-color: var(--tonal-button-label-text-color);
+  --_container-state-color: var(--_input-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;
+  --_input-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);
+  --_input-text-color: var(--outlined-button-label-text-color);
+  --_container-state-color: var(--_input-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);
+  --_input-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 {
+  --_input-text-color: var(--text-button-label-text-color);
+  --_container-state-color: var(--_input-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 {
+  --_input-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);
+  --_input-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;
+  --_input-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 {CustomEvent} button: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,
+        };
+        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}></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">
+        ${this.iconAlign === 'start'
+            ? b `<slot name="icon"></slot>`
+            : A}
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        ${this.iconAlign === 'end' ? b `<slot name="icon"></slot>` : A}
+      </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}></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);
+}
+
+.toggle.state-checked .track {
+  background: var(--switch-track-color);
+  border-color: transparent;
+}
+.toggle.state-checked .handle {
+  margin-inline-start: calc(100% - var(--switch-handle-radius));
+}
+.toggle.state-checked .handle .icon {
+  --icon-size: 1rem;
+  --icon-color: var(--switch-track-color);
+}
+.toggle.state-checked.active .track {
+  border-color: var(--switch-track-color);
+}
+.toggle.state-checked.has-focus:not(.active) .track {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-color: var(--color-white);
+}
+
+.toggle {
+  --_container-width: 3.25rem;
+  --_container-height: 2rem;
+  --switch-handle-radius: 16px;
+  --switch-handle-color: var(--color-outline);
+}
+.toggle.state-checked {
+  --switch-handle-radius: 22px;
+  --switch-handle-color: var(--color-surface-container-lowest);
+}
+
+.toggle.readonly {
+  cursor: default;
+}
+.toggle.readonly .track {
+  border-color: var(--color-outline);
+  background: var(--switch-track-off-color);
+  opacity: 0.38;
+}
+.toggle.readonly .track .handle {
+  background: var(--color-outline) !important;
+}
+
+.toggle.disabled {
+  cursor: not-allowed;
+}
+.toggle.disabled .track {
+  border-color: var(--color-on-surface);
+  background: var(--switch-track-off-color);
+  opacity: 0.38;
+}
+.toggle.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, TimePicker as T, Input as a, Textarea as b };
+//# sourceMappingURL=switch-BCbVyXJW.js.map