@quartzds/core 1.0.0-beta.8 → 1.0.0-beta.81

package/dist/cjs/qds-button.cjs.entry.js

@@ -1,109 +1,256 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d181f952.js');
-const helpers = require('./helpers-452256e8.js');
+const index = require('./index-a9985af0.js');
+const helpers = require('./helpers-cdd65bd0.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}.qds-button,.qds-container,.qds-overflow{width:inherit}.qds-button:disabled,[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"h\"}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:h;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:h;justify-content:center;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}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;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);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-button.qds-icon-only[data-size=small]{padding-inline:0;width:var(--qds-control-small-height)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-button[data-size=standard]{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-button.qds-icon-only[data-size=standard]{padding-inline:0;width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}[data-size=large]{font:var(--qds-control-large-text)}.qds-button[data-size=large]{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-button.qds-icon-only[data-size=large]{padding-inline:0;width:var(--qds-control-large-height)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n        --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-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]{height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n          --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n        ))}.qds-icon[data-size=hero]{font-size:var(--qds-control-hero-icon-size)}[data-importance=subdued]{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);border-style:solid;border-width:var(--qds-control-border-width) var(\n        --qds-control-border-width-inline-end,var(--qds-control-border-width)\n      ) var(--qds-control-border-width-block-end,var(--qds-control-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]{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)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{margin-inline-start:auto;transition-duration:.3s;transition-property:transform}[data-importance=standard]:is([data-action=dropdown],[data-action=dropdown-close]){background-color:var(--qds-theme-control-input-background)}:is([data-action=dropdown],[data-action=dropdown-close]):not([data-importance=subdued]):not([data-importance=subdued-destructive]){padding-inline:var(--qds-control-input-padding-horizontal)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}";
+const QdsButtonStyle0 = buttonCss;
 
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+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 __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 _Button_instances, _Button_button, _Button_span, _Button_ro, _Button_inheritedAttributes, _Button_ariaExpanded_get, _Button_ariaHaspopup_get, _Button_formElement_get, _Button_buttonType_get, _Button_iconOnly_get, _Button_computedAction_get, _Button_computedActionIcon_get, _Button_computedDisabled_get, _Button_computedImportance_get, _Button_computedSize_get, _Button_onBlur, _Button_onFocus, _Button_buttonRef, _Button_spanRef, _Button_tooltipRef;
+const isCounter = (value) => typeof value === 'string'
+    ? !Number.isNaN(Number.parseFloat(value))
+    : typeof value === 'number';
+const isIndicator = (value) => value === '' || value === true;
 const Button = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
-    this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
-    this.inheritedAttributes = {};
-    this.onClick = (event) => {
-      if (this.computedDisabled) {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
+        _Button_instances.add(this);
+        _Button_button.set(this, void 0);
+        _Button_span.set(this, void 0);
+        _Button_ro.set(this, void 0);
+        _Button_inheritedAttributes.set(this, {});
+        _Button_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
+        });
+        _Button_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
+        });
+        _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 = __classPrivateFieldGet(this, _Button_button, "f");
+        });
+        this.action = undefined;
+        this.badge = undefined;
+        this.badgeDescription = undefined;
+        this.badgeIndicatorStatus = 'neutral';
+        this.iconName = undefined;
+        this.iconLibrary = 'default';
+        this.importance = 'standard';
+        this.popupType = undefined;
+        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.rel = 'noopener';
+        this.name = undefined;
+        this.target = undefined;
+        this.type = undefined;
+        this.value = undefined;
+        this.tabIndex = undefined;
+        this.tooltip = false;
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get) === 'button' || !__classPrivateFieldGet(this, _Button_instances, "a", _Button_formElement_get))
+            return;
         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(helpers.pickFocusEventAttributes(event));
-    };
-    this.onFocus = (event) => {
-      this.focusEmitter.emit(helpers.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() {
+        const fakeButton = document.createElement('button');
+        fakeButton.type = __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get);
+        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';
+        __classPrivateFieldGet(this, _Button_instances, "a", _Button_formElement_get).append(fakeButton);
+        fakeButton.click();
+        fakeButton.remove();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    textChanged() {
+        if (__classPrivateFieldGet(this, _Button_ro, "f"))
+            __classPrivateFieldGet(this, _Button_ro, "f").disconnect();
+        if (!__classPrivateFieldGet(this, _Button_span, "f"))
+            return;
+        this.tooltip = helpers.isOverflowing(__classPrivateFieldGet(this, _Button_span, "f"));
+        __classPrivateFieldSet(this, _Button_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = helpers.isOverflowing(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _Button_ro, "f").observe(__classPrivateFieldGet(this, _Button_span, "f"));
+    }
+    componentWillLoad() {
+        __classPrivateFieldSet(this, _Button_inheritedAttributes, helpers.inheritAriaAttributes(this.host), "f");
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    componentDidLoad() {
+        this.textChanged();
+    }
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _Button_ro, "f"))
+            __classPrivateFieldGet(this, _Button_ro, "f").disconnect();
+    }
+    render() {
+        const Tag = this.href === undefined ? 'button' : 'a';
+        const ariaDisabled = __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) ? 'true' : undefined;
+        const disabledTabIndex = Tag === 'a' ? -1 : undefined;
+        return (index.h("div", { key: 'a84866ec38f20b47420f19519f5e6a5e2e4e35c6', class: "qds-container" }, index.h(Tag, { key: '91032860d188045a2ac18a359ea4cffd96c285a8', "aria-disabled": Tag === 'a' ? ariaDisabled : undefined, class: {
+                'qds-button': true,
+                'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
+            }, "aria-expanded": __classPrivateFieldGet(this, _Button_instances, "a", _Button_ariaExpanded_get), "aria-haspopup": __classPrivateFieldGet(this, _Button_instances, "a", _Button_ariaHaspopup_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, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: __classPrivateFieldGet(this, _Button_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Button_onFocus, "f"), ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, role: Tag === 'a' && this.download !== undefined ? 'button' : undefined, tabIndex: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) ? disabledTabIndex : this.tabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value, ...__classPrivateFieldGet(this, _Button_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: 'ce954df6c6900de8b6a7bf22ef89d2a01c8073bf', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: this.iconLibrary, name: this.iconName })), this.text !== undefined && this.text !== '' && (index.h("span", { key: '80d260622ec9e49a3373b63f4bf6ecf35df11bcc', class: { 'qds-overflow': __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) !== 'hero' }, ref: __classPrivateFieldGet(this, _Button_spanRef, "f") }, this.text)), isIndicator(this.badge) && (index.h("qds-badge-indicator", { key: '04989f27c181ddb128ad9154a6bfbb9fdad6fd18', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true })), isCounter(this.badge) && (index.h("qds-badge-counter", { key: 'b36c3e954b09b2353447d1b1fcc51a1972e24abe', class: {
+                '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 && (index.h("qds-icon", { key: 'aa1a1dbe8fe6b5503c80414a2969f202352e04a3', "aria-hidden": "true", 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) }))), index.h("div", { key: '4ebdc7e6ad9f8acd5f80b3bd0bd07ca2e6d785ac', class: {
+                'qds-focus-ring': true,
+                '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 && (index.h("qds-tooltip", { key: '402615a2b1f4a93674f3018a8c1e620674810b95', ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f") }, this.text))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "tabindex": ["tabindexChanged"],
+        "text": ["textChanged"]
+    }; }
+};
+_Button_button = new WeakMap(), _Button_span = new WeakMap(), _Button_ro = new WeakMap(), _Button_inheritedAttributes = new WeakMap(), _Button_onBlur = new WeakMap(), _Button_onFocus = new WeakMap(), _Button_buttonRef = new WeakMap(), _Button_spanRef = new WeakMap(), _Button_tooltipRef = new WeakMap(), _Button_instances = new WeakSet(), _Button_ariaExpanded_get = function _Button_ariaExpanded_get() {
+    switch (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get)) {
+        case 'dropdown': {
+            return 'false';
+        }
+        case 'dropdown-close': {
+            return 'true';
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Button_ariaHaspopup_get = function _Button_ariaHaspopup_get() {
+    switch (this.popupType) {
+        case 'dialog':
+        case 'grid':
+        case 'menu':
+        case 'tree':
+        case 'true': {
+            return this.popupType;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Button_formElement_get = function _Button_formElement_get() {
     return this.form !== undefined && this.form !== ''
-      ? document.querySelector(`#${this.form}`)
-      : this.element.closest('form');
-  }
-  get buttonType() {
+        ? document.querySelector(`#${this.form}`)
+        : this.host.closest('form');
+}, _Button_buttonType_get = function _Button_buttonType_get() {
     if (this.type === undefined)
-      return this.formElement ? 'submit' : 'button';
+        return __classPrivateFieldGet(this, _Button_instances, "a", _Button_formElement_get) ? '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() {
+}, _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 = helpers.inheritAriaAttributes(this.element);
-  }
-  render() {
-    const Tag = this.href === undefined ? 'button' : 'a';
-    return (index.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 !== '' && (index.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 index.getElement(this); }
+}, _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.style = buttonCss;
+Button.style = QdsButtonStyle0;
 
 exports.qds_button = Button;
 

package/dist/cjs/qds-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.button {\n  appearance: none;\n  background-color: initial;\n  border: none;\n  padding-block: 0;\n  align-items: center;\n  border-radius: var(--qds-control-border-radius);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--qds-control-button-gap-internal);\n  justify-content: center;\n  padding-inline: var(--qds-control-button-padding-horizontal);\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: nowrap;\n  width: 100%;\n\n  &.icon-only {\n    padding-inline: 0;\n  }\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n\n  &.icon-only {\n    width: var(--qds-control-small-height);\n  }\n\n  &.icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n\n  &.icon-only {\n    width: var(--qds-control-standard-height);\n  }\n\n  &.icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n\n  &.icon-only {\n    width: var(--qds-control-large-height);\n  }\n\n  &.icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  border: var(--qds-control-border-width) solid transparent;\n  color: var(--qds-theme-link-default);\n\n  &.icon-only {\n    color: var(--qds-theme-control-text-standard);\n  }\n\n  &:hover {\n    border: var(--qds-control-border-width) solid var(--qds-theme-link-default);\n\n    &.icon-only {\n      background-color: var(--qds-theme-interactive-background-hover);\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n    }\n  }\n\n  &:active {\n    border: var(--qds-control-border-width) solid var(--qds-theme-link-pressed);\n    color: var(--qds-theme-link-pressed);\n\n    &.icon-only {\n      background-color: var(--qds-theme-interactive-background-pressed);\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n    }\n  }\n}\n\n[data-importance='standard'] {\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  color: var(--qds-theme-control-text-standard);\n\n  &:hover {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n}\n\n[data-importance='emphasized'] {\n  background-color: var(--qds-theme-signature-color-default);\n  color: var(--qds-theme-signature-color-contrast);\n\n  &:hover {\n    background-color: var(--qds-theme-signature-color-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-signature-color-pressed);\n  }\n}\n\n[data-importance='destructive'] {\n  background-color: var(--qds-theme-feedback-action-destructive-default);\n  color: var(--qds-theme-feedback-action-destructive-contrast);\n\n  &:hover {\n    background-color: var(--qds-theme-feedback-action-destructive-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-feedback-action-destructive-pressed);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\n\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type Importance = 'destructive' | 'emphasized' | 'standard' | 'subdued'\nexport type ButtonSize = 'large' | 'small' | 'standard'\nexport type FormMethod = 'get' | 'post'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop({ reflect: true }) public readonly size: ButtonSize = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to\n   * submit the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   *\n   * If specified, this attribute overrides the method attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10)\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n\n    return (\n      <Tag\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          button: true,\n          'icon-only': this.iconOnly,\n        }}\n        data-importance={this.importance}\n        data-size={this.size}\n        disabled={Tag === 'a' ? undefined : this.disabled}\n        download={Tag === 'a' ? this.download : undefined}\n        href={Tag === 'a' ? this.href : undefined}\n        name={Tag === 'a' ? undefined : this.name}\n        onBlur={this.onBlur}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n        role={Tag === 'a' ? 'button' : undefined}\n        tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n        target={Tag === 'a' ? this.target : undefined}\n        type={Tag === 'a' ? undefined : this.buttonType}\n        value={Tag === 'a' ? undefined : this.value}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.iconName !== undefined && this.iconName !== '' && (\n          <qds-icon\n            class=\"icon\"\n            data-size={this.size}\n            library={this.iconLibrary}\n            name={this.iconName}\n          />\n        )}\n        {this.text}\n      </Tag>\n    )\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    if (this.buttonType === 'button' || !this.formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","isOverflowing","inheritAriaAttributes","h"],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-container,\n.qds-button,\n.qds-overflow {\n  width: inherit;\n}\n\n.qds-button:disabled,\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-overflow {\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-action {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-container {\n  display: grid;\n  grid-template-areas: 'button';\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: button;\n  isolation: isolate;\n  outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  outline-offset: var(--qds-focus-border-offset);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n.qds-button {\n  position: relative;\n  align-items: center;\n  appearance: none;\n  background-color: initial;\n  border: none;\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  grid-area: button;\n  justify-content: center;\n  outline: none;\n  padding-block: 0;\n  print-color-adjust: exact;\n  text-align: center;\n  user-select: none;\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible ~ .qds-focus-ring {\n    visibility: visible;\n  }\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-indicator {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-button {\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-small-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-button {\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-standard-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-button {\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-large-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-size='hero'] {\n  font: var(--qds-control-hero-text);\n\n  &.qds-button {\n    border-radius: var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-hero-border-radius)\n      );\n    gap: var(--qds-control-hero-gap-internal);\n    padding-block: var(--qds-control-hero-padding-auto-height);\n    padding-inline: var(--qds-control-button-hero-padding-horizontal);\n\n    &.qds-icon-only {\n      height: var(--qds-control-hero-height);\n      padding-inline: 0;\n      width: var(--qds-control-hero-height);\n    }\n  }\n\n  &.qds-focus-ring {\n    border-radius: max(\n        1px,\n        var(\n          --qds-control-border-radius-top-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-top-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-left,\n          var(--qds-control-hero-border-radius)\n        )\n      );\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-hero-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &.qds-button {\n    border-block-end: var(--qds-control-border-width) solid transparent;\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);\n      color: var(--qds-theme-link-standard-hover);\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);\n      color: var(--qds-theme-link-standard-pressed);\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='standard'] {\n  color: var(--qds-theme-control-text-standard);\n\n  &.qds-button {\n    border-color: var(--qds-theme-control-border);\n    border-style: solid;\n    border-width: var(--qds-control-border-width)\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n      var(--qds-control-border-width);\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-button {\n    background-color: var(--qds-theme-signature-color-default);\n    color: var(--qds-theme-signature-color-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[data-importance='destructive'] {\n  &.qds-button {\n    background-color: var(--qds-theme-feedback-action-destructive-default);\n    color: var(--qds-theme-feedback-action-destructive-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-feedback-action-destructive-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n  }\n}\n\n[data-importance='subdued-destructive'] {\n  color: var(--qds-theme-feedback-action-destructive-default);\n\n  &.qds-button {\n    border-block-end: var(--qds-control-border-width) solid transparent;\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-feedback-action-destructive-hover);\n      color: var(--qds-theme-feedback-action-destructive-hover);\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-feedback-action-destructive-pressed);\n      color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n    }\n  }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n  .qds-action {\n    margin-inline-start: auto;\n    transition-duration: 0.3s;\n    transition-property: transform;\n  }\n\n  &[data-importance='standard'] {\n    background-color: var(--qds-theme-control-input-background);\n  }\n\n  &:not([data-importance='subdued'], [data-importance='subdued-destructive']) {\n    padding-inline: var(--qds-control-input-padding-horizontal);\n  }\n}\n\n[data-action='dropdown-close'] .qds-action {\n  transform: rotate(-180deg);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  isOverflowing,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' | 'dropdown' | 'next'\nexport type ButtonImportance =\n  | Importance\n  | 'destructive'\n  | 'subdued-destructive'\nexport type ButtonSize = Size | 'hero'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type PopupType = 'dialog' | 'grid' | 'menu' | 'tree' | 'true'\n\nconst isCounter = (value: unknown): value is number =>\n  typeof value === 'string'\n    ? !Number.isNaN(Number.parseFloat(value))\n    : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n  value === '' || value === true\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the action icon to render.\n   */\n  @Prop() public readonly action?: Action\n\n  /**\n   * Displays an indicator if `true` or the empty string. Otherwise, displays a\n   * counter badge if a number or string representing a number is used.\n   *\n   * @webnative\n   */\n  @Prop() public readonly badge?: number | string | true\n\n  /**\n   * The indicator or counter badge's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly badgeDescription?: string\n\n  /**\n   * The indicator's status.\n   */\n  @Prop()\n  public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n    'neutral'\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop() public readonly importance?: ButtonImportance = 'standard'\n\n  /**\n   * Indicates the type of interactive popup element that can be triggered by\n   * the `qds-button`.\n   */\n  @Prop() public readonly popupType?: PopupType\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop()\n  public readonly disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string = 'noopener'\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLQdsButtonElement\n\n  @State() private tabIndex?: number\n\n  @State() private tooltip = false\n\n  #button?: HTMLAnchorElement | HTMLButtonElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #inheritedAttributes: Attributes = {}\n\n  get #ariaExpanded(): 'false' | 'true' | undefined {\n    switch (this.#computedAction) {\n      case 'dropdown': {\n        return 'false'\n      }\n      case 'dropdown-close': {\n        return 'true'\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #ariaHaspopup(): PopupType | undefined {\n    switch (this.popupType) {\n      case 'dialog':\n      case 'grid':\n      case 'menu':\n      case 'tree':\n      case 'true': {\n        return this.popupType\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.host.closest('form')\n  }\n\n  get #buttonType(): ButtonType {\n    if (this.type === undefined) return this.#formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  get #iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  get #computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'dropdown-close':\n      case 'next': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedActionIcon(): Exclude<Action, 'dropdown-close'> | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'next': {\n        return this.action\n      }\n      case 'dropdown-close': {\n        return 'dropdown'\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedImportance(): ButtonImportance {\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued':\n      case 'destructive':\n      case 'subdued-destructive': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedSize(): ButtonSize {\n    switch (this.size) {\n      case 'small':\n      case 'large':\n      case 'hero': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (this.#buttonType === 'button' || !this.#formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.#buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.#formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    if (this.#ro) this.#ro.disconnect()\n\n    if (!this.#span) return\n\n    this.tooltip = isOverflowing(this.#span)\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    this.textChanged()\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n    const ariaDisabled = this.#computedDisabled ? 'true' : undefined\n    const disabledTabIndex = Tag === 'a' ? -1 : undefined\n\n    return (\n      <div class=\"qds-container\">\n        <Tag\n          aria-disabled={Tag === 'a' ? ariaDisabled : undefined}\n          class={{\n            'qds-button': true,\n            'qds-icon-only': this.#iconOnly,\n          }}\n          aria-expanded={this.#ariaExpanded}\n          aria-haspopup={this.#ariaHaspopup}\n          data-importance={this.#computedImportance}\n          data-size={this.#computedSize}\n          data-action={this.#computedAction}\n          disabled={Tag === 'a' ? undefined : this.disabled}\n          download={Tag === 'a' ? this.download : undefined}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          ref={this.#buttonRef}\n          rel={Tag === 'a' ? this.rel : undefined}\n          role={\n            Tag === 'a' && this.download !== undefined ? 'button' : undefined\n          }\n          tabIndex={this.#computedDisabled ? disabledTabIndex : this.tabIndex}\n          target={Tag === 'a' ? this.target : undefined}\n          type={Tag === 'a' ? undefined : this.#buttonType}\n          value={Tag === 'a' ? undefined : this.value}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {this.text !== undefined && this.text !== '' && (\n            <span\n              class={{ 'qds-overflow': this.#computedSize !== 'hero' }}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n          )}\n          {isIndicator(this.badge) && (\n            <qds-badge-indicator\n              class=\"qds-indicator\"\n              status={this.badgeIndicatorStatus}\n              description={this.badgeDescription}\n              size={this.#computedSize}\n              strokeRing\n            />\n          )}\n          {isCounter(this.badge) && (\n            <qds-badge-counter\n              class={{\n                'qds-indicator': this.#iconOnly,\n              }}\n              description={this.badgeDescription}\n              importance={this.#computedImportance}\n              size={this.#computedSize}\n              strokeRing\n              value={this.badge}\n            />\n          )}\n          {this.#computedActionIcon !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-action\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name={this.#computedActionIcon}\n            />\n          )}\n        </Tag>\n        <div\n          class={{\n            'qds-focus-ring': true,\n            'qds-icon-only': this.#iconOnly,\n          }}\n          data-importance={this.#computedImportance}\n          data-size={this.#computedSize}\n        />\n        {this.tooltip && (\n          <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #buttonRef = (\n    button?: HTMLAnchorElement | HTMLButtonElement,\n  ): void => {\n    this.#button = button\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#button\n  }\n}\n"],"version":3}