@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.90

package/dist/esm/qds-breadcrumb-item.entry.js

@@ -0,0 +1,92 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { r as registerInstance, h, F as Fragment } from './index-b1d6acd2.js';
+import { a as attachInternals, i as isOverflowing } from './helpers-2e4ca34d.js';
+
+const breadcrumbItemCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-anchor{-webkit-text-decoration:none;text-decoration:none}.qds-anchor:hover{-webkit-text-decoration:underline;text-decoration:underline}.qds-breadcrumb-item{align-items:center;display:inline-flex;font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-siblings-related);height:var(--qds-control-standard-height);width:inherit}.qds-divider{margin-inline:auto}.qds-overflow{line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-anchor,.qds-breadcrumb-item{color:var(--qds-theme-control-text-standard)}.qds-anchor:focus-visible,.qds-breadcrumb-item:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}";
+const QdsBreadcrumbItemStyle0 = breadcrumbItemCss;
+
+// 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 _QdsBreadcrumbItem_instances, _QdsBreadcrumbItem_internals, _QdsBreadcrumbItem_breadcrumbItem, _QdsBreadcrumbItem_ro, _QdsBreadcrumbItem_span, _QdsBreadcrumbItem_renderAnchor, _QdsBreadcrumbItem_renderText, _QdsBreadcrumbItem_breadcrumbItemRef, _QdsBreadcrumbItem_spanRef, _QdsBreadcrumbItem_tooltipRef;
+const QdsBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        _QdsBreadcrumbItem_instances.add(this);
+        this.tooltip = false;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        _QdsBreadcrumbItem_internals.set(this, attachInternals.call(this));
+        _QdsBreadcrumbItem_breadcrumbItem.set(this, void 0);
+        _QdsBreadcrumbItem_ro.set(this, void 0);
+        _QdsBreadcrumbItem_span.set(this, void 0);
+        _QdsBreadcrumbItem_breadcrumbItemRef.set(this, (breadcrumbItem) => {
+            __classPrivateFieldSet(this, _QdsBreadcrumbItem_breadcrumbItem, breadcrumbItem, "f");
+        });
+        _QdsBreadcrumbItem_spanRef.set(this, (span) => {
+            __classPrivateFieldSet(this, _QdsBreadcrumbItem_span, span, "f");
+        });
+        _QdsBreadcrumbItem_tooltipRef.set(this, (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItem, "f");
+        });
+    }
+    textChanged() {
+        if (__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f"))
+            __classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
+        if (!__classPrivateFieldGet(this, _QdsBreadcrumbItem_span, "f"))
+            return;
+        this.tooltip = isOverflowing(__classPrivateFieldGet(this, _QdsBreadcrumbItem_span, "f"));
+        __classPrivateFieldSet(this, _QdsBreadcrumbItem_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = isOverflowing(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").observe(__classPrivateFieldGet(this, _QdsBreadcrumbItem_span, "f"));
+    }
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _QdsBreadcrumbItem_internals, "f").role = 'listitem';
+    }
+    componentDidLoad() {
+        this.textChanged();
+    }
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f"))
+            __classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
+    }
+    render() {
+        return (h("div", { key: '7640d08e7afe853363af70eae0e9ea3b3ec4a1f3', class: "qds-breadcrumb-item", ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderText).call(this) : __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (h("qds-tooltip", { key: 'feb66781c919e1139bb92b6174bada2f59e3bb45', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_tooltipRef, "f") }, this.text))));
+    }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "text": ["textChanged"]
+    }; }
+};
+_QdsBreadcrumbItem_internals = new WeakMap(), _QdsBreadcrumbItem_breadcrumbItem = new WeakMap(), _QdsBreadcrumbItem_ro = new WeakMap(), _QdsBreadcrumbItem_span = new WeakMap(), _QdsBreadcrumbItem_breadcrumbItemRef = new WeakMap(), _QdsBreadcrumbItem_spanRef = new WeakMap(), _QdsBreadcrumbItem_tooltipRef = new WeakMap(), _QdsBreadcrumbItem_instances = new WeakSet(), _QdsBreadcrumbItem_renderAnchor = function _QdsBreadcrumbItem_renderAnchor() {
+    return (h(Fragment, null, h("span", { class: "qds-overflow", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_spanRef, "f") }, h("a", { class: "qds-anchor", href: this.href, hrefLang: this.hreflang, referrerPolicy: this.referrerPolicy, rel: this.rel, ref: this.href === undefined ? undefined : __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f"), target: this.target }, this.text)), h("span", { "aria-hidden": "true", class: "qds-divider" }, "/")));
+}, _QdsBreadcrumbItem_renderText = function _QdsBreadcrumbItem_renderText() {
+    return (h("span", { class: "qds-overflow", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_spanRef, "f") }, this.text));
+};
+QdsBreadcrumbItem.style = QdsBreadcrumbItemStyle0;
+
+export { QdsBreadcrumbItem as qds_breadcrumb_item };
+
+//# sourceMappingURL=qds-breadcrumb-item.entry.js.map

package/dist/esm/qds-breadcrumb-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-breadcrumb-item.entry.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,00BAA00B,CAAC;AACr2B,gCAAe,iBAAiB;;ACDhC;AACA;AACA;;;;;;;;;;;;;;;;;;MAwBa,iBAAiB;IAL9B;;;QAuJmB,YAAO,GAAG,KAAK,CAAA;;QAGvB,uCAA+B,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA;QAElE,oDAAoD;QAEpD,wCAAoB;QAEpB,0CAAuB;QA2Ed,+CAAqB,CAC5B,cAAmD;YAEnD,uBAAA,IAAI,qCAAmB,cAAc,MAAA,CAAA;SACtC,EAAA;QAEQ,qCAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,2BAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,wCAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,yCAAgB,CAAA;SACxC,EAAA;KACF;IAvFW,WAAW;QACnB,IAAI,uBAAA,IAAI,6BAAI;YAAE,uBAAA,IAAI,6BAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,+BAAM;YAAE,OAAM;QAEvB,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,uBAAA,IAAI,+BAAM,CAAC,CAAA;QACxC,uBAAA,IAAI,yBAAO,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;SAC/C,CAAC,MAAA,CAAA;QACF,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,+BAAM,CAAC,CAAA;KAC7B;IAEM,iBAAiB;QACtB,uBAAA,IAAI,oCAAW,CAAC,IAAI,GAAG,UAAU,CAAA;KAClC;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,6BAAI;YAAE,uBAAA,IAAI,6BAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACE,4DACE,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,uBAAA,IAAI,4CAAmB,GAAG,SAAS,EAClE,QAAQ,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,CAAC,GAAG,SAAS,IAEhE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,GAAG,uBAAA,IAAI,qEAAc,MAAlB,IAAI,CAAgB,EACnE,IAAI,CAAC,OAAO,KACX,mFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,qCAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACG,EACP;KACF;;;;;;;IAGC,QACE,kBACE,YAAM,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,uBAAA,IAAI,kCAAS,IAC3C,SACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,uBAAA,IAAI,4CAAmB,EAClE,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACR,CACC,EACP,2BAAkB,MAAM,EAAC,KAAK,EAAC,aAAa,QAErC,CACN,EACJ;AACH,CAAC;IAGC,QACE,YAAM,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,uBAAA,IAAI,kCAAS,IAC1C,IAAI,CAAC,IAAI,CACL,EACR;AACH,CAAC;;;;;","names":[],"sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.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-anchor {\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n.qds-breadcrumb-item {\n  align-items: center;\n  display: inline-flex;\n  font: var(--qds-control-standard-text);\n  gap: var(--qds-control-standard-gap-siblings-related);\n  height: var(--qds-control-standard-height);\n  width: inherit;\n}\n\n.qds-divider {\n  margin-inline: auto;\n}\n\n.qds-overflow {\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n  color: var(--qds-theme-control-text-standard);\n\n  &:focus-visible {\n    outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n    outline-offset: var(--qds-focus-border-offset);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, JSX } from '@stencil/core'\nimport { Component, Fragment, h, Prop, State, Watch } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport { attachInternals, isOverflowing } from '../../helpers'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * The `<qds-breadcrumb-item>` element is used as a navigational aid that is\n * typically placed between a site's header and the main content, displaying\n * either a hierarchy of the current page in relation to the site's structure,\n * from top level to current page, or a list of the links the user followed to\n * get to the current page, in the order visited.\n *\n * @see https://quartz.se.com/build/components/breadcrumb\n */\n@Component({\n  tag: 'qds-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem implements ComponentInterface {\n  /**\n   * The breadcrumb item's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: 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<BreadcrumbTarget, string>\n\n  @State() private tooltip = false\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  readonly #internals: ElementInternals = attachInternals.call(this)\n\n  #breadcrumbItem?: HTMLAnchorElement | HTMLDivElement\n\n  #ro?: ResizeObserver\n\n  #span?: HTMLSpanElement\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.#internals.role = 'listitem'\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    return (\n      <div\n        class=\"qds-breadcrumb-item\"\n        ref={this.href === undefined ? this.#breadcrumbItemRef : undefined}\n        tabIndex={this.tooltip && this.href === undefined ? 0 : undefined}\n      >\n        {this.href === undefined ? this.#renderText() : this.#renderAnchor()}\n        {this.tooltip && (\n          <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  #renderAnchor(): JSX.Element {\n    return (\n      <>\n        <span class=\"qds-overflow\" ref={this.#spanRef}>\n          <a\n            class=\"qds-anchor\"\n            href={this.href}\n            hrefLang={this.hreflang}\n            referrerPolicy={this.referrerPolicy}\n            rel={this.rel}\n            ref={this.href === undefined ? undefined : this.#breadcrumbItemRef}\n            target={this.target}\n          >\n            {this.text}\n          </a>\n        </span>\n        <span aria-hidden=\"true\" class=\"qds-divider\">\n          /\n        </span>\n      </>\n    )\n  }\n\n  #renderText(): JSX.Element {\n    return (\n      <span class=\"qds-overflow\" ref={this.#spanRef}>\n        {this.text}\n      </span>\n    )\n  }\n\n  readonly #breadcrumbItemRef = (\n    breadcrumbItem?: HTMLAnchorElement | HTMLDivElement,\n  ): void => {\n    this.#breadcrumbItem = breadcrumbItem\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.#breadcrumbItem\n  }\n}\n"],"version":3}

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

@@ -1,105 +1,336 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-d7183092.js';
-import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers-76b84f45.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { p as pickFocusEventAttributes, i as isOverflowing } from './helpers-2e4ca34d.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.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: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:\"i\"}.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:i;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:i;justify-content:center;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}.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]{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]{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]{width:var(--qds-control-large-height)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}[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-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 __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_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_onBlur, _Button_onFocus, _Button_buttonRef, _Button_spanRef, _Button_tooltipRef, _Button_defineGetter;
+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) {
-    registerInstance(this, hostRef);
-    this.blurEmitter = createEvent(this, "qdsBlur", 2);
-    this.focusEmitter = createEvent(this, "qdsFocus", 2);
-    this.inheritedAttributes = {};
-    this.onClick = (event) => {
-      if (this.computedDisabled) {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        _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';
+        /**
+         * 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;
+        this.tooltip = false;
+        _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_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Button_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(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");
+        });
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        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() {
+    }
+    disabledChanged() {
+        this.internals.ariaDisabled = __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get).toString();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    textChanged() {
+        this.internals.ariaLabel = this.text;
+        if (__classPrivateFieldGet(this, _Button_ro, "f"))
+            __classPrivateFieldGet(this, _Button_ro, "f").disconnect();
+        if (!__classPrivateFieldGet(this, _Button_span, "f"))
+            return;
+        this.tooltip = isOverflowing(__classPrivateFieldGet(this, _Button_span, "f"));
+        __classPrivateFieldSet(this, _Button_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = isOverflowing(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _Button_ro, "f").observe(__classPrivateFieldGet(this, _Button_span, "f"));
+    }
+    componentWillLoad() {
+        this.internals.role = 'button';
+        __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.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 disabledTabIndex = Tag === 'a' ? -1 : undefined;
+        const hasBadgeProperties = this.badgeDescription !== undefined && this.badge !== undefined;
+        const ariaLabel = hasBadgeProperties
+            ? `${this.text} ${this.badge} ${this.badgeDescription}`
+            : this.text;
+        return (h("div", { key: 'fa26ab96409ab7594ea6cfeda85a5ab5bc246f3b', class: "qds-container" }, h(Tag, { key: '8b1afcffde6991b7265e4222ca7e2c820d336caa', "aria-hidden": "true", class: {
+                'qds-button': true,
+                'qds-disabled': Tag === 'a' ? __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) : false,
+                '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, onBlur: __classPrivateFieldGet(this, _Button_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Button_onFocus, "f"), ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : 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, "aria-label": __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get) ? ariaLabel : undefined }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'df3e21439511c2bdaa92449cf5d9f39d595e68ef', "aria-hidden": "true", 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) && (h("span", { key: '7ac4c5771ee0f9bbc4a2b9693e8e0638bd401299', 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: '173fcf4fdfbfcd38c065ae6cb07a72ecd73130d6', 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: '41beedd254b4497d9475a7bb9ae0c0f322e6b0f3', 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 && (h("qds-icon", { key: 'c320c3eb40238c2e00727c0e9d4c971786778c02', "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) }))), h("div", { key: '84a9ae565f296a4bfeaa649ea1394c5ba70c89ea', 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 && (h("qds-tooltip", { key: '518348c9c25b932589cc1d1a0d48c5c6bee8f583', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f") }, this.text))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "text": ["textChanged"]
+    }; }
+};
+_Button_button = new WeakMap(), _Button_span = new WeakMap(), _Button_ro = 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_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 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_defineGetter = function _Button_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
 };
-Button.style = buttonCss;
+Button.style = QdsButtonStyle0;
 
 export { Button as qds_button };