@redvars/peacock 3.1.2 → 3.1.3

package/dist/button.js

@@ -0,0 +1,710 @@
+import { _ as __decorate, n, a as __classPrivateFieldGet } from './property-CR1ZrEd9.js';
+import { i, a as i$1, b } from './lit-element-CkD27PXL.js';
+import { r, t as throttle, o as observerSlotChangesWithCallback } from './utils-CY3RyfcA.js';
+import { e as e$2 } from './class-map-Cavm-B1S.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './directive-BKuZRRPO.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
+var css_248z = i`/**
+ * @prop --pc-button-color: Button filling color.
+ * @prop --pc-button-color-light: Button filling color for light variant.
+ * @prop --pc-button-color-hover: Button filling color on hover.
+ * @prop --pc-button-color-active: Button filling color on active.
+ * @prop --pc-button-support-contrast-color: Button support color (text or border). Should be white or black based on weight of button filling color.
+ */
+:host {
+  display: inline-flex;
+  --z-index-button: 0;
+  --pc-button-border-width: var(--goat-theme-button-border-width);
+  /**
+   * @prop --pc-button-border-radius: Button border radius.
+   * @prop --goat-theme-button-border-radius: Theme level button border radius. (applies to all buttons)
+   */
+  --pc-button-border-radius: var(--goat-theme-button-border-radius, var(--border-radius));
+  /**
+   * @prop --pc-button-border-style: Button border style.
+   * @prop --goat-theme-button-border-style: Theme level button border style. (applies to all buttons)
+   */
+  --pc-button-border-style: var(--goat-theme-button-border-style, solid);
+  /**
+    * @prop --pc-button-padding: Button padding.
+   */
+  --pc-button-padding: unset;
+  --button-height: unset;
+  --button-icon-size: unset;
+  --button-container-shape: unset;
+  --filled-button-container-color: var(--color-primary);
+  --filled-button-label-text-color: var(--color-on-primary);
+  --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-primary);
+}
+
+/**
+  * Private CSS Variables
+  * These variables are used internally within the button component
+  */
+.button {
+  --_container-padding: 0.0625rem;
+}
+
+slot::slotted(*) {
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+}
+
+/*
+  * 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);
+  cursor: pointer;
+  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);
+}
+.button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_button-icon-label-spacing);
+  z-index: var(--z-index-button);
+  width: 100%;
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-color: currentColor;
+}
+.button .button-content .slot-container {
+  display: none;
+}
+.button.disabled {
+  cursor: not-allowed;
+}
+.button {
+  /*
+    Background layers
+   */
+}
+.button .focus-ring {
+  --focus-ring-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-shape-end-end: var(--_container-shape-end-end);
+}
+.button .ripple {
+  border-radius: inherit;
+}
+.button .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  box-sizing: border-box;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.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;
+  border-radius: inherit;
+}
+.button .neo-background {
+  display: none;
+  position: absolute;
+  background: var(--color-inverse-surface);
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: translateX(0.25rem) translateY(0.25rem);
+}
+.button .neo-background:before {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  background: white;
+  left: 0;
+  transform: translateX(-0.25rem) translateY(-0.25rem);
+}
+.button .outline {
+  z-index: 1;
+  display: none;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: var(--_outline-width) solid var(--_outline-color);
+  border-radius: inherit;
+}
+.button.has-content .slot-container {
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+
+.button {
+  font-family: var(--font-family-sans) !important;
+}
+
+.button.size-xs,
+.button.size-extra-small {
+  --_button-height: 2rem;
+  --_button-icon-size: 1.25rem;
+  --_container-padding: 0.75rem;
+}
+.button.size-xs:not(.has-content).has-icon,
+.button.size-extra-small:not(.has-content).has-icon {
+  --internal-button-padding: 0.25rem;
+}
+
+.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: 1px !important;
+}
+
+.button.size-md,
+.button.size-medium {
+  --_button-height: 3.5rem;
+  --_button-icon-size: 1.5rem;
+  --_container-padding: 1.5rem;
+}
+.button.size-md:not(.has-content).has-icon,
+.button.size-medium:not(.has-content).has-icon {
+  --internal-button-padding: 0.75rem;
+}
+
+.button.size-lg,
+.button.size-large {
+  --_button-height: 6rem;
+  --_button-icon-size: 2rem;
+  --_container-padding: 3rem;
+}
+
+.button.size-xl {
+  --_button-height: 8.5rem;
+  --_button-icon-size: 2.5rem;
+  --_container-padding: 4rem;
+}
+.button.size-xl .button-content {
+  padding-bottom: 1rem;
+}
+
+/**
+ * Button variant definitions
+ */
+.button.variant-filled {
+  --_container-shape-start-start: var(--filled-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--filled-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--filled-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--filled-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_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(.disabled) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-filled.pressed:not(.disabled) {
+  --_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-elevated {
+  --_container-shape-start-start: var(--elevated-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--elevated-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--elevated-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--elevated-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_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(.disabled) {
+  --_container-elevation-level: 2;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-elevated.pressed:not(.disabled) {
+  --_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-tonal {
+  --_container-shape-start-start: var(--tonal-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--tonal-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--tonal-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--tonal-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_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(.disabled) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-tonal.pressed:not(.disabled) {
+  --_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 {
+  --_container-shape-start-start: var(--outlined-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--outlined-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--outlined-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--outlined-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --_outline-color: var(--outlined-button-outline-color, var(--color-outline));
+  --_label-text-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface-variant);
+}
+.button.variant-outlined .outline {
+  display: block;
+}
+.button.variant-outlined:hover:not(.disabled) {
+  --_container-state-opacity: 0.08;
+}
+.button.variant-outlined.pressed:not(.disabled) {
+  --_container-state-opacity: 0.12;
+}
+.button.variant-outlined.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_outline-color: var(--color-on-surface);
+}
+.button.variant-outlined.disabled .ripple {
+  display: none;
+}
+
+.button.variant-text {
+  --_container-shape-start-start: var(--text-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--text-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--text-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--text-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_label-text-color: var(--color-primary);
+  --_container-state-color: var(--color-primary);
+}
+.button.variant-text:hover:not(.disabled) {
+  --_container-state-opacity: 0.08;
+}
+.button.variant-text.pressed:not(.disabled) {
+  --_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-shape-start-start: var(--outlined-button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-start-end: var(--outlined-button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-start: var(--outlined-button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-shape-end-end: var(--outlined-button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-small)));
+  --_container-color: var(--color-primary);
+  --_label-text-color: var(--filled-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(.disabled) .background, .button.variant-neo.pressed:not(.disabled) .button-content, .button.variant-neo.pressed:not(.disabled) .outline {
+  transform: translateX(0.25rem) translateY(0.25rem);
+}
+.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-color: var(--color-on-surface);
+}
+.button.variant-neo.disabled .ripple {
+  display: none;
+}
+
+@keyframes outward-grow {
+  from {
+    outline-width: 0;
+  }
+  to {
+    outline-width: var(--focus-ring-active-width, 8px);
+  }
+}
+@keyframes outward-shrink {
+  from {
+    outline-width: var(--focus-ring-active-width, 8px);
+  }
+}`;
+styleInject(css_248z);
+
+var _Button_id, _Button_tabindex;
+/**
+ * @label Button
+ * @tag p-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 --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <pc-button>Button</pc-button>
+ * ```
+ * @tags display
+ */
+class Button extends i$1 {
+    constructor() {
+        super(...arguments);
+        _Button_id.set(this, crypto.randomUUID());
+        _Button_tabindex.set(this, 0);
+        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.
+         *
+         */
+        this.variant = 'filled';
+        /**
+         * 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;
+        /**
+         * 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 = '';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
+        /**
+         * Icon alignment.
+         * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+         */
+        this.iconAlign = 'end';
+        /**
+         * 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.slotHasContent = 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)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            this.focus();
+            this.dispatchEvent(new CustomEvent('button:click', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.__handlePress = (event) => {
+            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;
+            }
+        };
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('mouseup', this.__handlePress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.__handlePress);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __renderDisabledReason() {
+        if (this.disabled && this.disabledReason)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _Button_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="sr-only"
+      >
+        {this.disabledReason}
+      </div>`;
+        return null;
+    }
+    /* @ts-ignore */
+    __isLink() {
+        return !!this.href;
+    }
+    render() {
+        const isLink = this.__isLink();
+        const { variant, subVariant } = this.getVariant();
+        const cssClasses = {
+            button: true,
+            'button-element': true,
+            [`size-${this.size}`]: true,
+            [`variant-${variant}`]: true,
+            [`variant-${subVariant}`]: !!subVariant,
+            [`color-${this.color}`]: true,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+            'has-content': this.slotHasContent,
+        };
+        if (!isLink) {
+            return b `<button
+        class=${e$2(cssClasses)}
+        tabindex=${__classPrivateFieldGet(this, _Button_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, _Button_id, "f")}`
+                : null}
+        aria-disabled=${`${this.disabled || this.softDisabled}`}
+        ?disabled=${this.disabled}
+      >
+        ${this.renderButtonContent()}
+      </button>`;
+        }
+        return b `<a
+      class=${e$2(cssClasses)}
+      tabindex=${__classPrivateFieldGet(this, _Button_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, _Button_id, "f")}`
+            : null}
+      aria-disabled=${`${this.disabled}`}
+    >
+      <div class="icon">
+        <slot name="icon"></slot>
+      </div>
+
+      <div class="slot-container">
+        <slot></slot>
+      </div>
+    </a>`;
+    }
+    getVariant() {
+        const variants = this.variant?.split('.');
+        if (!['filled', 'outlined', 'text', 'tonal', 'neo'].includes(variants[0])) {
+            variants.unshift('filled');
+        }
+        const [variant, subVariant] = variants;
+        return { variant, subVariant };
+    }
+    renderButtonContent() {
+        return b `
+      <p-focus-ring class="focus-ring" .control=${this}></p-focus-ring>
+      <p-elevation class="elevation"></p-elevation>
+      <div class="neo-background"></div>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <p-ripple class="ripple"></p-ripple>
+
+      <div class="button-content">
+        ${this.iconAlign === 'start'
+            ? b `<slot name="icon"></slot></div>`
+            : null}
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        ${this.iconAlign === 'end' ? b `<slot name="icon"></slot>` : null}
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+}
+_Button_id = new WeakMap(), _Button_tabindex = new WeakMap();
+Button.styles = [css_248z];
+__decorate([
+    e('.button')
+], Button.prototype, "buttonElement", void 0);
+__decorate([
+    n({ type: String })
+], Button.prototype, "htmlType", void 0);
+__decorate([
+    n()
+], Button.prototype, "variant", void 0);
+__decorate([
+    n()
+], Button.prototype, "size", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "softDisabled", void 0);
+__decorate([
+    n()
+], Button.prototype, "disabledReason", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "color", void 0);
+__decorate([
+    n()
+], Button.prototype, "iconAlign", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "href", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "configAria", void 0);
+__decorate([
+    n()
+], Button.prototype, "target", void 0);
+__decorate([
+    n()
+], Button.prototype, "selected", void 0);
+__decorate([
+    n()
+], Button.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], Button.prototype, "isPressed", void 0);
+__decorate([
+    r()
+], Button.prototype, "slotHasContent", void 0);
+
+export { Button };
+//# sourceMappingURL=button.js.map