@redvars/peacock 3.2.7 → 3.2.9

package/dist/button-2MeDq0Yy.js

@@ -0,0 +1,898 @@
+import { i, _ as __decorate, n, a as i$2, A, c as __classPrivateFieldGet, b, P as PeacockComponent } from './PeacockComponent-CxJc63xj.js';
+import { r } from './state-B09bP3XH.js';
+import { e as e$2 } from './class-map-BvQRv7eW.js';
+import { e as e$1, i as isActivationClick, d as dispatchActivationClick, t as throttle, o as observerSlotChangesWithCallback } from './dispatch-event-utils-vbdiOSeC.js';
+import { e, i as i$1, t } from './directive-Cuw6h7YA.js';
+
+var css_248z$2 = 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$1 = 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 = 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;
+}`;
+
+class SpreadDirective extends i$1 {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== t.ELEMENT) {
+            throw new Error('spread() can only be used on elements');
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_props) {
+        return '';
+    }
+    update(part, [props]) {
+        if (!props)
+            return;
+        // eslint-disable-next-line guard-for-in,no-restricted-syntax
+        for (const key in props) {
+            const value = props[key];
+            if (value === undefined || value === null) {
+                part.element.removeAttribute(key);
+            }
+            else {
+                part.element.setAttribute(key, value);
+            }
+        }
+    }
+}
+const spread = e(SpreadDirective);
+
+var _BaseButton_id;
+class BaseButton extends i$2 {
+    constructor() {
+        super(...arguments);
+        _BaseButton_id.set(this, crypto.randomUUID());
+        this.htmlType = 'button';
+        /**
+         * The visual style of the button.
+         *
+         *  Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"text"` is a transparent button.
+         * `"tonal"` is a light color button.
+         * `"elevated"` is elevated button
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
+        /**
+         * Button size.
+         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'sm';
+        /**
+         * If true, the user cannot interact with the button. Defaults to `false`.
+         */
+        this.disabled = false;
+        this.skeleton = false;
+        /**
+         * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
+         */
+        this.softDisabled = false;
+        /**
+         * If button is disabled, the reason why it is disabled.
+         */
+        this.disabledReason = '';
+        /**
+         * Sets or retrieves the window or frame at which to target content.
+         */
+        this.target = '_self';
+        this.selected = false;
+        /**
+         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+         */
+        this.throttleDelay = 200;
+        /**
+         * States
+         */
+        this.isPressed = false;
+        this.__handlePress = (event) => {
+            if (this.disabled || this.skeleton || this.softDisabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.isPressed = true;
+            }
+            else {
+                this.isPressed = false;
+            }
+        };
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.buttonElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.buttonElement);
+        };
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+        window.addEventListener('mouseup', this.__handlePress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.__handlePress);
+        this.removeEventListener('click', this.__dispatchClickWithThrottle);
+        super.disconnectedCallback();
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'dark';
+            this.variant = 'outlined';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        {this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderTooltip() {
+        if (this.tooltip) {
+            return b `<base-tooltip for="button">${this.tooltip}</base-tooltip>`;
+        }
+        return A;
+    }
+}
+_BaseButton_id = new WeakMap();
+__decorate([
+    n({ type: String })
+], BaseButton.prototype, "htmlType", void 0);
+__decorate([
+    n({ type: String })
+], BaseButton.prototype, "type", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], BaseButton.prototype, "color", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], BaseButton.prototype, "disabled", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "skeleton", void 0);
+__decorate([
+    n({ reflect: true, attribute: 'soft-disabled' })
+], BaseButton.prototype, "softDisabled", void 0);
+__decorate([
+    n({ attribute: 'disabled-reason' })
+], BaseButton.prototype, "disabledReason", void 0);
+__decorate([
+    n({ reflect: true })
+], BaseButton.prototype, "href", void 0);
+__decorate([
+    n({ reflect: true })
+], BaseButton.prototype, "configAria", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "target", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "selected", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "throttleDelay", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "tooltip", void 0);
+__decorate([
+    r()
+], BaseButton.prototype, "isPressed", void 0);
+__decorate([
+    e$1('.button')
+], BaseButton.prototype, "buttonElement", void 0);
+
+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
+ */
+let Button = 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$2(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$2(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$2, css_248z$1, css_248z];
+__decorate([
+    n({ attribute: 'icon-align' })
+], Button.prototype, "iconAlign", void 0);
+__decorate([
+    r()
+], Button.prototype, "slotHasContent", void 0);
+Button = __decorate([
+    PeacockComponent
+], Button);
+
+export { Button as B, css_248z$1 as a, BaseButton as b, css_248z$2 as c, spread as s };
+//# sourceMappingURL=button-2MeDq0Yy.js.map