@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

package/components/qds-button.js

@@ -1,148 +1,494 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, c as createEvent, d as readTask, h } from './p-D2489VzR.js';
+import { p as pickFocusEventAttributes, b as isEllipsisActive, d as isIndicator, e as isCounter, f as computeBadgeValue } from './p-eUDNu0SE.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-CZRW1LV_.js';
+import { d as defineCustomElement$5 } from './p-XP2CY_fo.js';
+import { d as defineCustomElement$4 } from './p-DOqfdgQA.js';
+import { d as defineCustomElement$3 } from './p-fKK7EmM2.js';
+import { d as defineCustomElement$2 } from './p-B9xuNEzc.js';
 
-const buttonCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.button{-webkit-appearance:none;appearance:none;background-color:transparent;background-color:initial;border:none;padding-block:0;align-items:center;border-radius:var(--qds-control-border-radius);cursor:pointer;display:inline-flex;gap:var(--qds-control-button-gap-internal);justify-content:center;padding-inline:var(--qds-control-button-padding-horizontal);-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.button.icon-only{padding-inline:0}.button:link,.button:visited,area[href].button{-webkit-text-decoration:none;text-decoration:none}.button:any-link{-webkit-text-decoration:none;text-decoration:none}.button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.icon-only[data-size='small']{width:var(--qds-control-small-height)}.icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.icon-only[data-size='large']{width:var(--qds-control-large-height)}.icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{border:var(--qds-control-border-width) solid transparent;color:var(--qds-theme-link-default)}.icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:hover{border:var(--qds-control-border-width) solid var(--qds-theme-link-default)}.icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:active{border:var(--qds-control-border-width) solid var(--qds-theme-link-pressed);color:var(--qds-theme-link-pressed)}.icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}";
+const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"c\"}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:c;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-form-input-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(\n      --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:c;justify-content:center;letter-spacing:inherit;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none;word-spacing:inherit}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-icon{flex-shrink:0}.qds-indicator{position:absolute;transform:translate(50%,-50%)}[data-size=small]{font:var(--qds-control-small-text)}.qds-button[data-size=small]{gap:var(--qds-control-small-gap-internal);min-height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size=small]{width:var(--qds-control-small-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-indicator{inset-block-start:var(--qds-control-button-small-badge-padding-top);inset-inline-end:var(--qds-control-button-small-badge-padding-end)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-button[data-size=standard]{gap:var(--qds-control-standard-gap-internal);min-height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size=standard]{width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-indicator{inset-block-start:var(--qds-control-button-standard-badge-padding-top);inset-inline-end:var(--qds-control-button-standard-badge-padding-end)}[data-size=large]{font:var(--qds-control-large-text)}.qds-button[data-size=large]{gap:var(--qds-control-large-gap-internal);min-height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size=large]{width:var(--qds-control-large-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-indicator{inset-block-start:var(--qds-control-button-large-badge-padding-top);inset-inline-end:var(--qds-control-button-large-badge-padding-end)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n        --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n      );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{min-height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-button[data-size=hero] .qds-indicator{inset-block-start:var(--qds-control-button-hero-badge-padding-top);inset-inline-end:var(--qds-control-button-hero-badge-padding-end)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n          --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n        ))}.qds-icon[data-size=hero]{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{border-radius:0;color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border-default);border-style:solid;border-width:var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border-radius:0;color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{transition-duration:.3s;transition-property:transform}:is([data-action=dropdown],[data-action=dropdown-close]):not(:has(qds-badge-counter)) .qds-action{margin-inline-start:auto}:is([data-action=dropdown],[data-action=dropdown-close]) qds-badge-counter{margin-inline-start:auto}";
 
-const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.blurEmitter = createEvent(this, "qdsBlur", 2);
-    this.focusEmitter = createEvent(this, "qdsFocus", 2);
-    this.inheritedAttributes = {};
-    this.onClick = (event) => {
-      if (this.computedDisabled) {
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Button_instances, _Button_savedTabIndex, _Button_button, _Button_span, _Button_ro, _Button_buttonType_get, _Button_iconOnly_get, _Button_computedAction_get, _Button_computedActionIcon_get, _Button_computedDisabled_get, _Button_computedImportance_get, _Button_computedSize_get, _Button_buttonRef, _Button_spanRef, _Button_tooltipRef, _Button_onClick, _Button_updateAriaLabel, _Button_defineGetter;
+const preventDefault = (event) => {
+    event.preventDefault();
+};
+const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.internals = this.attachInternals();
+        _Button_instances.add(this);
+        /**
+         * The indicator's status.
+         */
+        this.badgeIndicatorStatus = 'neutral';
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * The button's importance.
+         */
+        this.importance = 'standard';
+        /**
+         * The button's size.
+         */
+        this.size = 'standard';
+        /**
+         * @deprecated The icon-only button feature is deprecated and will be removed by september 2026. Please use the icon-button instead.
+         *
+         * Sets if button is icon only.
+         */
+        this.iconOnly = false;
+        /**
+         * The [`<form>`][] element to associate the button with (its form owner).
+         *
+         * The value of this attribute must be the id of a `<form>` in the same
+         * document. If this attribute is not set, the `<qds-button>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This attribute lets you associate `<qds-button>` elements to `<form>`s
+         * anywhere in the document, not just inside a `<form>`. It can also override
+         * an ancestor `<form>` element.
+         *
+         * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
+         *
+         * @readonly
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.form = null;
+        /**
+         * If the button is a submit button, this attribute specifies that the form
+         * is not to be
+         * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)
+         * when it is submitted. If this attribute is specified, it overrides the
+         * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)
+         * attribute of the button's form owner.
+         *
+         * @webnative
+         */
+        this.formNoValidate = false;
+        /**
+         * If the button is a submit button, this attribute is an author-defined name
+         * or standardized, underscore-prefixed keyword indicating where to display
+         * the response from submitting the form. This is the `name` of, or keyword
+         * for, a browsing context (a tab, window, or
+         * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).
+         * If this attribute is specified, it overrides the
+         * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)
+         * attribute of the button's form owner. The following keywords have special
+         * meanings:
+         *
+         * - `_blank`: Load the response into a new unnamed browsing context — usually
+         * a new tab or window, depending on the user's browser settings.
+         * - `_parent`: Load the response into the parent browsing context of the
+         * current one. If there is no parent, this option behaves the same way as
+         * `_self`.
+         * - `_self`: Load the response into the same browsing context as the current
+         * one.
+         * - `_top`: Load the response into the top-level browsing context (that is,
+         * the browsing context that is an ancestor of the current one, and has no
+         * parent). If there is no parent, this option behaves the same way as
+         * `_self`.
+         *
+         * @webnative
+         */
+        this.formTarget = '_self';
+        /**
+         * Returns a list of the [`<label>`][] elements associated with the
+         * `qds-button` element.
+         *
+         * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+         *
+         * @readonly
+         * @webnative
+         */
+        this.labels = {};
+        /**
+         * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.
+         *
+         * @webnative
+         */
+        this.rel = 'noopener';
+        /**
+         * The error message that would be shown to the user if the `<qds-button>`
+         * was to be checked for validity.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validationMessage = '';
+        /**
+         * The [`ValidityState`][] object for this `<qds-button>`.
+         *
+         * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validity = VALID_STATE;
+        /**
+         * True if `<qds-button>` will be validated when the form is submitted; false
+         * otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.willValidate = false;
+        /**
+         * Placement of the overflow tooltip.
+         */
+        this.tooltipPlacement = 'top';
+        this.tooltip = false;
+        _Button_savedTabIndex.set(this, 0);
+        _Button_button.set(this, void 0);
+        _Button_span.set(this, void 0);
+        _Button_ro.set(this, void 0);
+        this.checkValidity = () => this.internals.checkValidity();
+        this.reportValidity = () => this.internals.reportValidity();
+        this.setCustomValidity = (error) => {
+            if (error)
+                this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, __classPrivateFieldGet(this, _Button_button, "f"));
+            else
+                this.internals.setValidity(NO_ERROR_FLAGS);
+        };
+        _Button_buttonRef.set(this, (button) => {
+            __classPrivateFieldSet(this, _Button_button, button, "f");
+        });
+        _Button_spanRef.set(this, (span) => {
+            __classPrivateFieldSet(this, _Button_span, span, "f");
+        });
+        _Button_tooltipRef.set(this, (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = this.host;
+        });
+        _Button_onClick.set(this, (event) => {
+            if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get)) {
+                preventDefault(event);
+                event.stopImmediatePropagation();
+            }
+        });
+    }
+    onBlur(event) {
+        this.blurEmitter.emit(pickFocusEventAttributes(event));
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (__classPrivateFieldGet(this, _Button_button, "f") instanceof HTMLAnchorElement)
+            __classPrivateFieldGet(this, _Button_button, "f").click();
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get) === 'button' || !this.internals.form)
+            return;
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get) === 'reset') {
+            this.internals.form.reset();
+        }
+        else {
+            this.internals.form.requestSubmit();
+        }
         event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (this.buttonType === 'button' || !this.formElement)
-        return;
-      event.preventDefault();
-      const fakeButton = document.createElement('button');
-      fakeButton.type = this.buttonType;
-      if (this.name !== undefined)
-        fakeButton.name = this.name;
-      if (this.value !== undefined)
-        fakeButton.value = this.value;
-      if (this.formAction !== undefined)
-        fakeButton.formAction = this.formAction;
-      if (this.formMethod !== undefined)
-        fakeButton.formMethod = this.formMethod;
-      fakeButton.formNoValidate = this.formNoValidate;
-      fakeButton.formTarget = this.formTarget;
-      fakeButton.style.display = 'none';
-      this.formElement.append(fakeButton);
-      fakeButton.click();
-      fakeButton.remove();
-    };
-    this.onBlur = (event) => {
-      this.blurEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.onFocus = (event) => {
-      this.focusEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.iconName = undefined;
-    this.iconLibrary = 'default';
-    this.importance = 'standard';
-    this.size = 'standard';
-    this.text = undefined;
-    this.disabled = undefined;
-    this.download = undefined;
-    this.form = undefined;
-    this.formAction = undefined;
-    this.formMethod = undefined;
-    this.formNoValidate = false;
-    this.formTarget = '_self';
-    this.href = undefined;
-    this.name = undefined;
-    this.target = '_self';
-    this.type = undefined;
-    this.value = undefined;
-  }
-  get formElement() {
-    return this.form !== undefined && this.form !== ''
-      ? document.querySelector(`#${this.form}`)
-      : this.element.closest('form');
-  }
-  get buttonType() {
+    }
+    onFocus(event) {
+        this.focusEmitter.emit(pickFocusEventAttributes(event));
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            if (__classPrivateFieldGet(this, _Button_button, "f") instanceof HTMLAnchorElement)
+                __classPrivateFieldGet(this, _Button_button, "f").click();
+            else
+                this.host.click();
+        }
+    }
+    onKeyup(event) {
+        if (event.key === ' ' && !(__classPrivateFieldGet(this, _Button_button, "f") instanceof HTMLAnchorElement))
+            this.host.click();
+    }
+    actionChanged() {
+        switch (this.action) {
+            case 'dropdown': {
+                this.internals.ariaExpanded = 'false';
+                break;
+            }
+            case 'dropdown-close': {
+                this.internals.ariaExpanded = 'true';
+                break;
+            }
+            default: {
+                // eslint-disable-next-line unicorn/no-null
+                this.internals.ariaExpanded = null;
+            }
+        }
+    }
+    disabledChanged() {
+        this.internals.ariaDisabled = __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get).toString();
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get))
+            this.host.removeAttribute('tabindex');
+        else
+            this.host.tabIndex = __classPrivateFieldGet(this, _Button_savedTabIndex, "f");
+    }
+    hrefChanged() {
+        this.internals.role = this.href === undefined ? 'button' : 'link';
+    }
+    tabindexChanged(newValue) {
+        if (newValue !== null) {
+            const parsedValue = Number.parseInt(newValue, 10);
+            __classPrivateFieldSet(this, _Button_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
+                ? 0
+                : parsedValue, "f");
+        }
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get))
+            this.host.removeAttribute('tabindex');
+        else
+            this.host.tabIndex = __classPrivateFieldGet(this, _Button_savedTabIndex, "f");
+    }
+    textChanged() {
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_updateAriaLabel).call(this);
+        if (__classPrivateFieldGet(this, _Button_ro, "f"))
+            __classPrivateFieldGet(this, _Button_ro, "f").disconnect();
+        if (!__classPrivateFieldGet(this, _Button_span, "f"))
+            return;
+        const span = __classPrivateFieldGet(this, _Button_span, "f");
+        readTask(() => {
+            this.tooltip = isEllipsisActive(span);
+        });
+        __classPrivateFieldSet(this, _Button_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = isEllipsisActive(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _Button_ro, "f").observe(__classPrivateFieldGet(this, _Button_span, "f"));
+    }
+    /* DEPRECATED: will be removed by september 2026  */
+    iconOnlyChanged() {
+        this.tooltip = this.iconOnly;
+    }
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_defineGetter).call(this, 'form', () => this.internals.form);
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_defineGetter).call(this, 'validity', () => this.internals.validity);
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
+        __classPrivateFieldGet(this, _Button_instances, "m", _Button_defineGetter).call(this, 'labels', () => this.internals.labels);
+        this.hrefChanged();
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+        this.disabledChanged();
+        this.actionChanged();
+    }
+    componentDidLoad() {
+        this.textChanged();
+        /* DEPRECATED: will be removed by september 2026  */
+        this.iconOnlyChanged();
+    }
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _Button_ro, "f"))
+            __classPrivateFieldGet(this, _Button_ro, "f").disconnect();
+    }
+    render() {
+        const Tag = this.href === undefined ? 'button' : 'a';
+        return (h("div", { key: '9d6105e917cd6f56940e57bbc1a887012236b412', class: "qds-container", onClick: __classPrivateFieldGet(this, _Button_onClick, "f"), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, "aria-hidden": "true" }, h(Tag, { key: 'c75229b0603aa562ee9c54c74701ac7c8fa1679f', class: {
+                'qds-button': true,
+                'qds-disabled': Tag === 'a' ? __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) : false,
+                /* DEPRECATED: will be removed by september 2026  */
+                'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
+            }, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), "data-action": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get), disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, formAction: this.formAction, formMethod: this.formMethod, formNoValidate: this.formNoValidate, formTarget: this.formTarget, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, tabIndex: -1, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '95bc587c136ea8ec2cd17aab3294677cb018d5f1', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get) && (
+        /* DEPRECATED: will be removed by september 2026  */
+        h("span", { key: '715cd57557a2f651f6779dc40d1dd30f84646707', class: "qds-overflow", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), ref: __classPrivateFieldGet(this, _Button_spanRef, "f") }, this.text)), isIndicator(this.badge) && (h("qds-badge-indicator", { key: 'c798711734b520aef7898e05bf812367e6ac9fc6', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: '3535e3a5ab8278e5f314fb38f7d376eef6294d2e', class: {
+                /* DEPRECATED: will be removed by september 2026  */
+                'qds-indicator': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
+            }, description: this.badgeDescription, importance: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) !== undefined && (h("qds-icon", { key: 'ff6a13827be83fb15a8d401784534e2c09efc2e4', class: "qds-icon qds-action", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) }))), h("div", { key: 'a67b763f688efbe98dd13ec7cffc5a4a1c0efcd2', class: {
+                'qds-focus-ring': true,
+                /* DEPRECATED: will be removed by september 2026  */
+                'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
+            }, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (h("qds-tooltip", { key: 'cbff06c60fca024f700dfd30f191cb974462e063', ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f"), placement: this.tooltipPlacement }, this.text))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "action": ["actionChanged"],
+        "disabled": ["disabledChanged"],
+        "href": ["hrefChanged"],
+        "tabindex": ["tabindexChanged"],
+        "text": ["textChanged"],
+        "iconOnly": ["iconOnlyChanged"]
+    }; }
+    static get style() { return buttonCss; }
+}, [321, "qds-button", {
+        "action": [1],
+        "badge": [8],
+        "badgeDescription": [1, "badge-description"],
+        "badgeIndicatorStatus": [1, "badge-indicator-status"],
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "importance": [1],
+        "size": [1],
+        "text": [1],
+        "iconOnly": [4, "icon-only"],
+        "disabled": [4],
+        "download": [1],
+        "form": [1],
+        "formAction": [1, "formaction"],
+        "formMethod": [1, "formmethod"],
+        "formNoValidate": [4, "formnovalidate"],
+        "formTarget": [1, "formtarget"],
+        "href": [1],
+        "labels": [16],
+        "rel": [1],
+        "name": [1],
+        "target": [1],
+        "type": [1],
+        "validationMessage": [1, "validation-message"],
+        "validity": [16],
+        "value": [1],
+        "willValidate": [4, "will-validate"],
+        "tooltipPlacement": [1, "tooltip-placement"],
+        "tooltip": [32]
+    }, [[0, "blur", "onBlur"], [0, "click", "onClick"], [0, "focus", "onFocus"], [0, "keydown", "onKeydown"], [0, "keyup", "onKeyup"]], {
+        "action": ["actionChanged"],
+        "disabled": ["disabledChanged"],
+        "href": ["hrefChanged"],
+        "tabindex": ["tabindexChanged"],
+        "text": ["textChanged"],
+        "iconOnly": ["iconOnlyChanged"]
+    }]);
+_Button_savedTabIndex = new WeakMap(), _Button_button = new WeakMap(), _Button_span = new WeakMap(), _Button_ro = new WeakMap(), _Button_buttonRef = new WeakMap(), _Button_spanRef = new WeakMap(), _Button_tooltipRef = new WeakMap(), _Button_onClick = new WeakMap(), _Button_instances = new WeakSet(), _Button_buttonType_get = function _Button_buttonType_get() {
     if (this.type === undefined)
-      return this.formElement ? 'submit' : 'button';
+        return this.internals.form ? 'submit' : 'button';
     return this.type;
-  }
-  get iconOnly() {
+}, _Button_iconOnly_get = function _Button_iconOnly_get() {
     const hasIcon = this.iconName !== undefined && this.iconName !== '';
-    const hasNoLabel = this.text === undefined || this.text === '';
-    return hasIcon && hasNoLabel;
-  }
-  get computedDisabled() {
+    return hasIcon && this.iconOnly;
+}, _Button_computedAction_get = function _Button_computedAction_get() {
+    switch (this.action) {
+        case 'dropdown':
+        case 'dropdown-close':
+        case 'next': {
+            return this.action;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Button_computedActionIcon_get = function _Button_computedActionIcon_get() {
+    switch (this.action) {
+        case 'dropdown':
+        case 'next': {
+            return this.action;
+        }
+        case 'dropdown-close': {
+            return 'dropdown';
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Button_computedDisabled_get = function _Button_computedDisabled_get() {
     return this.disabled ?? false;
-  }
-  get computedTabIndex() {
-    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10);
-    return Number.isNaN(parsedValue) ? 0 : parsedValue;
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAriaAttributes(this.element);
-  }
-  render() {
-    const Tag = this.href === undefined ? 'button' : 'a';
-    return (h(Tag, { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
-        button: true,
-        'icon-only': this.iconOnly,
-      }, "data-importance": this.importance, "data-size": this.size, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconLibrary, name: this.iconName })), this.text));
-  }
-  static get delegatesFocus() { return true; }
-  get element() { return this; }
-  static get style() { return buttonCss; }
-}, [17, "qds-button", {
-    "iconName": [513, "icon-name"],
-    "iconLibrary": [513, "icon-library"],
-    "importance": [513],
-    "size": [513],
-    "text": [1537],
-    "disabled": [1540],
-    "download": [1],
-    "form": [1],
-    "formAction": [1, "formaction"],
-    "formMethod": [1, "formmethod"],
-    "formNoValidate": [4, "formnovalidate"],
-    "formTarget": [1, "formtarget"],
-    "href": [1],
-    "name": [1],
-    "target": [1],
-    "type": [1],
-    "value": [1]
-  }]);
+}, _Button_computedImportance_get = function _Button_computedImportance_get() {
+    switch (this.importance) {
+        case 'emphasized':
+        case 'subdued':
+        case 'destructive':
+        case 'subdued-destructive': {
+            return this.importance;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Button_computedSize_get = function _Button_computedSize_get() {
+    switch (this.size) {
+        case 'small':
+        case 'large':
+        case 'hero': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Button_updateAriaLabel = function _Button_updateAriaLabel() {
+    const hasBadge = this.badge !== undefined;
+    if (hasBadge) {
+        this.internals.ariaLabel = computeBadgeValue(this.text, this.badge, this.badgeDescription);
+        return;
+    }
+    if (this.target !== undefined &&
+        this.target === '_blank' &&
+        this.href !== undefined) {
+        this.internals.ariaLabel = `${this.text} Opens in a new tab`;
+        return;
+    }
+    this.internals.ariaLabel = this.text;
+}, _Button_defineGetter = function _Button_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+};
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["qds-button", "qds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "qds-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Button);
-      }
-      break;
-    case "qds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-button", "qds-badge-counter", "qds-badge-indicator", "qds-icon", "qds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Button);
+            }
+            break;
+        case "qds-badge-counter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "qds-badge-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "qds-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const QdsButton = Button;
 const defineCustomElement = defineCustomElement$1;
 
 export { QdsButton, defineCustomElement };
+//# sourceMappingURL=qds-button.js.map
 
 //# sourceMappingURL=qds-button.js.map