@quartzds/core 1.0.0-beta.98 → 1.0.0-beta.99

package/CHANGELOG.md

@@ -11,6 +11,20 @@ SPDX-License-Identifier: Apache-2.0
 
 > All notable changes to this project will be documented in this file
 
+## @quartzds/core [1.0.0-beta.99](https://github.com/quartzds/core-foundations/compare/@quartzds/core@1.0.0-beta.98...@quartzds/core@1.0.0-beta.99) (2025-07-15)
+
+
+### ✨ Features
+
+* **qds-tooltip:** add tooltip `border` ([50aa948](https://github.com/quartzds/core-foundations/commit/50aa9486839fc8eec08683aff4c79272f110321d))
+
+
+### 🐛 Bug Fixes
+
+* **qds-badge-counter:** update `tokens` ([1509c05](https://github.com/quartzds/core-foundations/commit/1509c050b8609fd05768feac3d2712ce1a2eb465))
+* **qds-badge-indicator:** update `tokens` ([95d9fa9](https://github.com/quartzds/core-foundations/commit/95d9fa992c07da9d637fe0ab97fb0e814ba2fe38))
+* **qds-tag:** update `tokens` ([4da0b7a](https://github.com/quartzds/core-foundations/commit/4da0b7a1f53a2c87d2e6b04b53780ebd1bcd235d))
+
 ## @quartzds/core [1.0.0-beta.98](https://github.com/quartzds/core-foundations/compare/@quartzds/core@1.0.0-beta.97...@quartzds/core@1.0.0-beta.98) (2025-07-15)
 
 

package/components/index.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-50f85f75.js';
-export { r as registerIconLibrary, u as unregisterIconLibrary } from './p-c4122977.js';
+export { r as registerIconLibrary, u as unregisterIconLibrary } from './p-5576dc00.js';
 export { QdsBadgeCounter, defineCustomElement as defineCustomElementQdsBadgeCounter } from './qds-badge-counter.js';
 export { QdsBadgeIndicator, defineCustomElement as defineCustomElementQdsBadgeIndicator } from './qds-badge-indicator.js';
 export { QdsBreadcrumbItem, defineCustomElement as defineCustomElementQdsBreadcrumbItem } from './qds-breadcrumb-item.js';

package/components/{p-6879ec37.js → p-00118ac9.js}

@@ -46,7 +46,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
         this.verticalChanged();
     }
     render() {
-        return (h("hr", { key: '805394b1a2a1124bfd62a588afcb0b352f2e135e', class: {
+        return (h("hr", { key: '0091e543776d239e1c06551f827d3abc4750b6af', class: {
                 'qds-divider': true,
                 'qds-vertical': this.vertical,
             }, "aria-hidden": "true", "data-importance": __classPrivateFieldGet(this, _Divider_instances, "a", _Divider_computedImportance_get) }));
@@ -88,4 +88,4 @@ function defineCustomElement() {
 
 export { Divider as D, defineCustomElement as d };
 
-//# sourceMappingURL=p-6879ec37.js.map
+//# sourceMappingURL=p-00118ac9.js.map

package/components/{p-6879ec37.js.map → p-00118ac9.js.map}

@@ -1 +1 @@
-{"file":"p-6879ec37.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,yBAAe,UAAU;;ACDzB;AACA;AACA;;;;;;;;;MAsBa,OAAO;IALpB;;;;;;;;QAS0B,eAAU,GAAgB,UAAU,CAAA;;;;QAKpC,aAAQ,GAAY,KAAK,CAAA;;QAGxC,6BAA+B,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA;KAsCnE;IAvBW,eAAe;QACvB,uBAAA,IAAI,0BAAW,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAA;KAC5E;IAEM,iBAAiB;QACtB,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,WAAW,CAAA;QAClC,uBAAA,IAAI,0BAAW,CAAC,UAAU,GAAG,MAAM,CAAA;QAEnC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;IAEM,MAAM;QACX,QACE,2DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,iBACW,MAAM,qBACD,uBAAA,IAAI,2DAAoB,GACzC,EACH;KACF;;;;;;;;;;;;IAlCC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,YAAY,CAAC;QAClB,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.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: block;\n}\n\n.qds-divider {\n  border: none;\n  height: var(--qds-control-border-width);\n  margin: 0;\n  width: 100%;\n}\n\n.qds-vertical {\n  height: 100%;\n  width: var(--qds-control-border-width);\n}\n\n[data-importance='standard'] {\n  background-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n  background-color: var(--qds-theme-divider-emphasized);\n}\n\n[data-importance='subdued'] {\n  background-color: var(--qds-theme-divider-subdued);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, Watch } from '@stencil/core'\n\nimport { attachInternals } from '../../helpers'\nimport type { Importance } from '../shared'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n  tag: 'qds-divider',\n  shadow: true,\n  styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * The divider's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * Display the divider in vertical orientation.\n   */\n  @Prop() public readonly vertical: boolean = false\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  readonly #internals: ElementInternals = attachInternals.call(this)\n\n  get #computedImportance(): Importance {\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('vertical')\n  protected verticalChanged(): void {\n    this.#internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal'\n  }\n\n  public componentWillLoad(): void {\n    this.#internals.role = 'separator'\n    this.#internals.ariaHidden = 'true'\n\n    this.verticalChanged()\n  }\n\n  public render() {\n    return (\n      <hr\n        class={{\n          'qds-divider': true,\n          'qds-vertical': this.vertical,\n        }}\n        aria-hidden=\"true\"\n        data-importance={this.#computedImportance}\n      />\n    )\n  }\n}\n"],"version":3}
+{"file":"p-00118ac9.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,yBAAe,UAAU;;ACDzB;AACA;AACA;;;;;;;;;MAsBa,OAAO;IALpB;;;;;;;;QAS0B,eAAU,GAAgB,UAAU,CAAA;;;;QAKpC,aAAQ,GAAY,KAAK,CAAA;;QAGxC,6BAA+B,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA;KAsCnE;IAvBW,eAAe;QACvB,uBAAA,IAAI,0BAAW,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAA;KAC5E;IAEM,iBAAiB;QACtB,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,WAAW,CAAA;QAClC,uBAAA,IAAI,0BAAW,CAAC,UAAU,GAAG,MAAM,CAAA;QAEnC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;IAEM,MAAM;QACX,QACE,2DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,iBACW,MAAM,qBACD,uBAAA,IAAI,2DAAoB,GACzC,EACH;KACF;;;;;;;;;;;;IAlCC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,YAAY,CAAC;QAClB,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.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: block;\n}\n\n.qds-divider {\n  border: none;\n  height: var(--qds-control-border-width);\n  margin: 0;\n  width: 100%;\n}\n\n.qds-vertical {\n  height: 100%;\n  width: var(--qds-control-border-width);\n}\n\n[data-importance='standard'] {\n  background-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n  background-color: var(--qds-theme-divider-emphasized);\n}\n\n[data-importance='subdued'] {\n  background-color: var(--qds-theme-divider-subdued);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, Watch } from '@stencil/core'\n\nimport { attachInternals } from '../../helpers'\nimport type { Importance } from '../shared'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n  tag: 'qds-divider',\n  shadow: true,\n  styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * The divider's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * Display the divider in vertical orientation.\n   */\n  @Prop() public readonly vertical: boolean = false\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  readonly #internals: ElementInternals = attachInternals.call(this)\n\n  get #computedImportance(): Importance {\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('vertical')\n  protected verticalChanged(): void {\n    this.#internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal'\n  }\n\n  public componentWillLoad(): void {\n    this.#internals.role = 'separator'\n    this.#internals.ariaHidden = 'true'\n\n    this.verticalChanged()\n  }\n\n  public render() {\n    return (\n      <hr\n        class={{\n          'qds-divider': true,\n          'qds-vertical': this.vertical,\n        }}\n        aria-hidden=\"true\"\n        data-importance={this.#computedImportance}\n      />\n    )\n  }\n}\n"],"version":3}

package/components/{p-a6ca0040.js → p-24e6297f.js}

@@ -5,7 +5,7 @@
  */
 import { p as proxyCustomElement, H, r as readTask, h } from './p-50f85f75.js';
 import { b as isOverflowing } from './p-c58c7ab6.js';
-import { d as defineCustomElement$1 } from './p-1bf3d7c6.js';
+import { d as defineCustomElement$1 } from './p-b12f8c8d.js';
 
 const labelCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap);width:100%}.qds-label: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)}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}";
 const QdsLabelStyle0 = labelCss;
@@ -89,12 +89,12 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
             __classPrivateFieldGet(this, _Label_ro, "f").disconnect();
     }
     render() {
-        return (h("span", { key: '04557d25d0f4063cdc200c14dcc5093282480ef2', class: {
+        return (h("span", { key: 'f5fb8edbdad01bf57ba88b2e65c240d9512d63ff', class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
             }, "data-size": __classPrivateFieldGet(this, _Label_instances, "a", _Label_computedSize_get), ref: __classPrivateFieldGet(this, _Label_labelRef, "f"),
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '9ec237e88c66e0eaa9039a29cace2205aa00b5fc', class: "qds-required" }, "*"), h("span", { key: '6675cf1a16640d5530d32f2d5e8f3892a8225c15', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (h("qds-tooltip", { key: '80bdb4ec82929404911f752dce2b525603dd613c', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
+            tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '3dd4a66af8b2e1e8ce32d98427ffab9973e23387', class: "qds-required" }, "*"), h("span", { key: 'a5a06d788520604f85bb2868579f2b985eb82d79', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (h("qds-tooltip", { key: '29e5a9dd29895c775dd77d31d47893e8c7e5cdf6', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
     }
     static get watchers() { return {
         "text": ["textChanged"]
@@ -142,4 +142,4 @@ function defineCustomElement() {
 
 export { Label as L, defineCustomElement as d };
 
-//# sourceMappingURL=p-a6ca0040.js.map
+//# sourceMappingURL=p-24e6297f.js.map

package/components/{p-a6ca0040.js.map → p-24e6297f.js.map}

@@ -1 +1 @@
-{"file":"p-a6ca0040.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,kgCAAkgC,CAAC;AACphC,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAkBa,KAAK;IALlB;;;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,aAAQ,GAAY,KAAK,CAAA;;;;QAKzB,SAAI,GAAU,UAAU,CAAA;QAO/B,YAAO,GAAG,KAAK,CAAA;QAEhC,+BAAwB;QAExB,4BAAoB;QAEpB,8BAAuB;QAgEd,0BAAY,CAAC,KAAuB;YAC3C,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,yBAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,eAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,4BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,oBAAO,CAAA;SAC/B,EAAA;KACF;IA7DW,WAAW;QACnB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,mBAAM;YAAE,OAAM;QAEvB,MAAM,IAAI,GAAG,uBAAA,IAAI,mBAAM,CAAA;QACvB,QAAQ,CAAC;YACP,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;SACnC,CAAC,CAAA;QACF,uBAAA,IAAI,aAAO,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,iBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;KAC7B;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAU;;YAEnB,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,IAErC,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,cAAc,QAAS,EACrD,6DAAM,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,uBAAA,IAAI,sBAAS,IACtC,IAAI,CAAC,IAAI,CACL,EACN,IAAI,CAAC,OAAO,KACX,mFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,yBAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACI,EACR;KACF;;;;;;;;;;;;;;;IA3DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.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-label {\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n  width: 100%;\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\n.qds-text {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n}\n\n.qds-required {\n  color: var(--qds-theme-feedback-field-required);\n  user-select: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, readTask, State, Watch } from '@stencil/core'\n\nimport { isOverflowing } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n  tag: 'qds-label',\n  shadow: true,\n  styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n  /**\n   * Adds vertical margin to the label for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * Specify the labelled item as required by appending a red asterisk (*).\n   */\n  @Prop() public readonly required: boolean = false\n\n  /**\n   * The label's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The label's text.\n   */\n  @Prop() public readonly text?: string\n\n  @State() private tooltip = false\n\n  #label?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #span?: HTMLSpanElement\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    if (this.#ro) this.#ro.disconnect()\n\n    if (!this.#span) return\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\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      <span\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.#computedSize}\n        ref={this.#labelRef}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={this.tooltip ? 0 : undefined}\n      >\n        {this.required && <span class=\"qds-required\">*</span>}\n        <span class=\"qds-text\" ref={this.#spanRef}>\n          {this.text}\n        </span>\n        {this.tooltip && (\n          <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n            {this.text}\n          </qds-tooltip>\n        )}\n      </span>\n    )\n  }\n\n  readonly #labelRef = (label?: HTMLSpanElement): void => {\n    this.#label = label\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.#label\n  }\n}\n"],"version":3}
+{"file":"p-24e6297f.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,kgCAAkgC,CAAC;AACphC,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAkBa,KAAK;IALlB;;;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,aAAQ,GAAY,KAAK,CAAA;;;;QAKzB,SAAI,GAAU,UAAU,CAAA;QAO/B,YAAO,GAAG,KAAK,CAAA;QAEhC,+BAAwB;QAExB,4BAAoB;QAEpB,8BAAuB;QAgEd,0BAAY,CAAC,KAAuB;YAC3C,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,yBAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,eAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,4BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,oBAAO,CAAA;SAC/B,EAAA;KACF;IA7DW,WAAW;QACnB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,mBAAM;YAAE,OAAM;QAEvB,MAAM,IAAI,GAAG,uBAAA,IAAI,mBAAM,CAAA;QACvB,QAAQ,CAAC;YACP,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;SACnC,CAAC,CAAA;QACF,uBAAA,IAAI,aAAO,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,iBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;KAC7B;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAU;;YAEnB,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,IAErC,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,cAAc,QAAS,EACrD,6DAAM,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,uBAAA,IAAI,sBAAS,IACtC,IAAI,CAAC,IAAI,CACL,EACN,IAAI,CAAC,OAAO,KACX,mFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,yBAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACI,EACR;KACF;;;;;;;;;;;;;;;IA3DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.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-label {\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n  width: 100%;\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\n.qds-text {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n}\n\n.qds-required {\n  color: var(--qds-theme-feedback-field-required);\n  user-select: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, readTask, State, Watch } from '@stencil/core'\n\nimport { isOverflowing } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n  tag: 'qds-label',\n  shadow: true,\n  styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n  /**\n   * Adds vertical margin to the label for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * Specify the labelled item as required by appending a red asterisk (*).\n   */\n  @Prop() public readonly required: boolean = false\n\n  /**\n   * The label's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The label's text.\n   */\n  @Prop() public readonly text?: string\n\n  @State() private tooltip = false\n\n  #label?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #span?: HTMLSpanElement\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    if (this.#ro) this.#ro.disconnect()\n\n    if (!this.#span) return\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\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      <span\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.#computedSize}\n        ref={this.#labelRef}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={this.tooltip ? 0 : undefined}\n      >\n        {this.required && <span class=\"qds-required\">*</span>}\n        <span class=\"qds-text\" ref={this.#spanRef}>\n          {this.text}\n        </span>\n        {this.tooltip && (\n          <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n            {this.text}\n          </qds-tooltip>\n        )}\n      </span>\n    )\n  }\n\n  readonly #labelRef = (label?: HTMLSpanElement): void => {\n    this.#label = label\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.#label\n  }\n}\n"],"version":3}

package/components/{p-88fcb762.js → p-30a089f2.js}

@@ -6,12 +6,12 @@
 import { p as proxyCustomElement, H, c as createEvent, r as readTask, h } from './p-50f85f75.js';
 import { p as pickFocusEventAttributes, b as isOverflowing } from './p-c58c7ab6.js';
 import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
-import { d as defineCustomElement$4 } from './p-e22dd76d.js';
-import { d as defineCustomElement$3 } from './p-5570cc30.js';
-import { d as defineCustomElement$2 } from './p-c4122977.js';
-import { d as defineCustomElement$1 } from './p-1bf3d7c6.js';
+import { d as defineCustomElement$4 } from './p-e62b2711.js';
+import { d as defineCustomElement$3 } from './p-ace9a02b.js';
+import { d as defineCustomElement$2 } from './p-5576dc00.js';
+import { d as defineCustomElement$1 } from './p-b12f8c8d.js';
 
-const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"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      ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-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;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-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 buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"f\"}.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:f;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      ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-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:f;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-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
@@ -435,4 +435,4 @@ function defineCustomElement() {
 
 export { Button as B, defineCustomElement as d };
 
-//# sourceMappingURL=p-88fcb762.js.map
+//# sourceMappingURL=p-30a089f2.js.map

package/components/{p-88fcb762.js.map → p-30a089f2.js.map}

@@ -1 +1 @@
-{"file":"p-88fcb762.js","mappings":"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","names":[],"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  outline: none;\n}\n\n.qds-button:disabled,\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-overflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &[data-size='hero'] {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    white-space: normal;\n  }\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:host(:focus-visible) .qds-focus-ring {\n  visibility: visible;\n}\n\n.qds-button {\n  position: relative;\n  align-items: center;\n  appearance: none;\n\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\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\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      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      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      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='small'],\n[data-size='standard'],\n[data-size='large'] {\n  line-height: normal;\n\n  &.qds-button.qds-icon-only {\n    padding-inline: 0;\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\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'\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\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n  event.preventDefault()\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  formAssociated: true,\n  shadow: 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   * 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   * Sets if button is icon only.\n   */\n  @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-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   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\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   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-button` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\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   * The error message that would be shown to the user if the `<qds-button>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-button>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\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   * True if `<qds-button>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 tooltip = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  #savedTabIndex = 0\n\n  #button?: HTMLAnchorElement | HTMLButtonElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  get #buttonType(): ButtonType {\n    if (this.type === undefined)\n      return this.internals.form ? 'submit' : 'button'\n    return this.type\n  }\n\n  get #iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return hasIcon && this.iconOnly\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('blur')\n  protected onBlur(event: FocusEvent): void {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\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.internals.form) return\n    if (this.#buttonType === 'reset') {\n      this.internals.form.reset()\n    } else {\n      this.internals.form.requestSubmit()\n    }\n    event.preventDefault()\n  }\n\n  @Listen('focus')\n  protected onFocus(event: FocusEvent): void {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  @Listen('keydown')\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') this.host.click()\n  }\n\n  @Listen('keyup')\n  protected onKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ') this.host.click()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n    if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n    else this.host.tabIndex = this.#savedTabIndex\n  }\n\n  @Watch('href')\n  protected hrefChanged(): void {\n    this.internals.role = this.href === undefined ? 'button' : 'link'\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string | null): void {\n    if (newValue !== null) {\n      const parsedValue = Number.parseInt(newValue, 10)\n      this.#savedTabIndex =\n        Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n          ? 0\n          : parsedValue\n    }\n    if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n    else this.host.tabIndex = this.#savedTabIndex\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    this.internals.ariaLabel = this.text\n\n    if (this.#ro) this.#ro.disconnect()\n    if (!this.#span) return\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\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.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.hrefChanged()\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n    this.disabledChanged()\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 hasBadgeProperties =\n      this.badgeDescription !== undefined && this.badge !== undefined\n    const ariaLabel = hasBadgeProperties\n      ? `${this.text} ${this.badge} ${this.badgeDescription}`\n      : this.text\n\n    return (\n      <div\n        class=\"qds-container\"\n        onClick={this.#onClick}\n        onKeyDown={preventDefault}\n        onKeyUp={preventDefault}\n        onKeyPress={preventDefault}\n        aria-hidden=\"true\"\n      >\n        <Tag\n          class={{\n            'qds-button': true,\n            'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n            'qds-icon-only': this.#iconOnly,\n          }}\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          formAction={this.formAction}\n          formMethod={this.formMethod}\n          formNoValidate={this.formNoValidate}\n          formTarget={this.formTarget}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          ref={this.#buttonRef}\n          rel={Tag === 'a' ? this.rel : undefined}\n          tabIndex={-1}\n          target={Tag === 'a' ? this.target : undefined}\n          type={Tag === 'a' ? undefined : this.#buttonType}\n          value={Tag === 'a' ? undefined : this.value}\n          aria-label={this.#iconOnly ? ariaLabel : undefined}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {!this.#iconOnly && (\n            <span\n              class=\"qds-overflow\"\n              data-size={this.#computedSize}\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              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  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\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.host\n  }\n\n  readonly #onClick = (event: MouseEvent): void => {\n    if (this.#computedDisabled) {\n      preventDefault(event)\n    }\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}
+{"file":"p-30a089f2.js","mappings":"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","names":[],"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  outline: none;\n}\n\n.qds-button:disabled,\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-overflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &[data-size='hero'] {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    white-space: normal;\n  }\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:host(:focus-visible) .qds-focus-ring {\n  visibility: visible;\n}\n\n.qds-button {\n  position: relative;\n  align-items: center;\n  appearance: none;\n\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\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\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      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      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      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='small'],\n[data-size='standard'],\n[data-size='large'] {\n  line-height: normal;\n\n  &.qds-button.qds-icon-only {\n    padding-inline: 0;\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\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'\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\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n  event.preventDefault()\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  formAssociated: true,\n  shadow: 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   * 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   * Sets if button is icon only.\n   */\n  @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-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   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\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   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-button` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\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   * The error message that would be shown to the user if the `<qds-button>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-button>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\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   * True if `<qds-button>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 tooltip = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  #savedTabIndex = 0\n\n  #button?: HTMLAnchorElement | HTMLButtonElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  get #buttonType(): ButtonType {\n    if (this.type === undefined)\n      return this.internals.form ? 'submit' : 'button'\n    return this.type\n  }\n\n  get #iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return hasIcon && this.iconOnly\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('blur')\n  protected onBlur(event: FocusEvent): void {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\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.internals.form) return\n    if (this.#buttonType === 'reset') {\n      this.internals.form.reset()\n    } else {\n      this.internals.form.requestSubmit()\n    }\n    event.preventDefault()\n  }\n\n  @Listen('focus')\n  protected onFocus(event: FocusEvent): void {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  @Listen('keydown')\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') this.host.click()\n  }\n\n  @Listen('keyup')\n  protected onKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ') this.host.click()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n    if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n    else this.host.tabIndex = this.#savedTabIndex\n  }\n\n  @Watch('href')\n  protected hrefChanged(): void {\n    this.internals.role = this.href === undefined ? 'button' : 'link'\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string | null): void {\n    if (newValue !== null) {\n      const parsedValue = Number.parseInt(newValue, 10)\n      this.#savedTabIndex =\n        Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n          ? 0\n          : parsedValue\n    }\n    if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n    else this.host.tabIndex = this.#savedTabIndex\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    this.internals.ariaLabel = this.text\n\n    if (this.#ro) this.#ro.disconnect()\n    if (!this.#span) return\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\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.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.hrefChanged()\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n    this.disabledChanged()\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 hasBadgeProperties =\n      this.badgeDescription !== undefined && this.badge !== undefined\n    const ariaLabel = hasBadgeProperties\n      ? `${this.text} ${this.badge} ${this.badgeDescription}`\n      : this.text\n\n    return (\n      <div\n        class=\"qds-container\"\n        onClick={this.#onClick}\n        onKeyDown={preventDefault}\n        onKeyUp={preventDefault}\n        onKeyPress={preventDefault}\n        aria-hidden=\"true\"\n      >\n        <Tag\n          class={{\n            'qds-button': true,\n            'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n            'qds-icon-only': this.#iconOnly,\n          }}\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          formAction={this.formAction}\n          formMethod={this.formMethod}\n          formNoValidate={this.formNoValidate}\n          formTarget={this.formTarget}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          ref={this.#buttonRef}\n          rel={Tag === 'a' ? this.rel : undefined}\n          tabIndex={-1}\n          target={Tag === 'a' ? this.target : undefined}\n          type={Tag === 'a' ? undefined : this.#buttonType}\n          value={Tag === 'a' ? undefined : this.value}\n          aria-label={this.#iconOnly ? ariaLabel : undefined}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {!this.#iconOnly && (\n            <span\n              class=\"qds-overflow\"\n              data-size={this.#computedSize}\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              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  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\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.host\n  }\n\n  readonly #onClick = (event: MouseEvent): void => {\n    if (this.#computedDisabled) {\n      preventDefault(event)\n    }\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}

package/components/{p-da0bfe0b.js → p-4b9c6565.js}

@@ -5,7 +5,7 @@
  */
 import { p as proxyCustomElement, H, h } from './p-50f85f75.js';
 import { i as inheritAriaAttributes } from './p-c58c7ab6.js';
-import { d as defineCustomElement$1 } from './p-c4122977.js';
+import { d as defineCustomElement$1 } from './p-5576dc00.js';
 
 const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"a\"}.qds-titles.qds-has-kicker{grid-template-areas:\"b\" \"a\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"a\" \"c\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"b\" \"a\" \"c\"}.qds-has-icon{grid-template-areas:\"d a\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". b\" \"d a\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"d a\" \". c\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". b\" \"d a\" \". c\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:a}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:c}.qds-kicker{color:var(--qds-theme-kicker);grid-area:b}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:d}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
@@ -108,4 +108,4 @@ function defineCustomElement() {
 
 export { Title as T, defineCustomElement as d };
 
-//# sourceMappingURL=p-da0bfe0b.js.map
+//# sourceMappingURL=p-4b9c6565.js.map

package/components/{p-da0bfe0b.js.map → p-4b9c6565.js.map}

@@ -1 +1 @@
-{"file":"p-da0bfe0b.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.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: block;\n}\n\n.qds-titles {\n  display: grid;\n  grid-template-areas: 'title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      'kicker'\n      'title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'title'\n      'subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      'kicker'\n      'title'\n      'subtitle';\n  }\n}\n\n.qds-has-icon {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: 'icon title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      '.    kicker'\n      'icon title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'icon title'\n      '.    subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      '.    kicker'\n      'icon title'\n      '.    subtitle';\n  }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n  margin-block: 0;\n}\n\n.qds-title {\n  grid-area: title;\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  grid-area: subtitle;\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  grid-area: kicker;\n  color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n  grid-area: icon;\n  align-content: center;\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-titles-icon-size);\n      height: var(--qds-main-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-subsection-titles-icon-size);\n      height: var(--qds-main-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-panel {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-titles-icon-size);\n      height: var(--qds-panel-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-section-titles-icon-size);\n      height: var(--qds-panel-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-subsection-titles-icon-size);\n      height: var(--qds-panel-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-navigation {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-section-titles-icon-size);\n      height: var(--qds-navigation-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-subsection-titles-icon-size);\n      height: var(--qds-navigation-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-popup {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-titles-icon-size);\n      height: var(--qds-popup-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-section-titles-icon-size);\n      height: var(--qds-popup-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-subsection-titles-icon-size);\n      height: var(--qds-popup-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-accessory {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-titles-icon-size);\n      height: var(--qds-accessory-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-section-titles-icon-size);\n      height: var(--qds-accessory-section-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-variant='web-main-section-promo'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-promo-titles-gap);\n      margin: auto;\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-promo-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-promo-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-promo-kicker);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-promo-titles-gap)\n        var(--qds-main-section-promo-titles-icon-gap);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-promo-titles-icon-size);\n      height: var(--qds-main-section-promo-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-alignment='start'] {\n  text-align: start;\n}\n\n[data-alignment='center'] {\n  text-align: center;\n}\n\n[data-alignment='end'] {\n  text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-display-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-display-title);\n    }\n  }\n}\n\n[data-variant='web-main-subsection-card'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-card-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-card-title);\n    }\n  }\n}\n\n[data-variant='web-main-section-hero'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-hero-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-hero-title);\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n  | 'web-main-section-display'\n  | 'web-main-section-hero'\n  | 'web-main-section-promo'\n  | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n  tag: 'qds-title',\n  shadow: true,\n  styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n  /**\n   * The alignment of the title.\n   */\n  @Prop() public readonly alignment?: Alignment = 'start'\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   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer?: Layer = 'main'\n\n  @Prop() public readonly level?: Level = 'section'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * HTML tag to use to render the title.\n   */\n  @Prop() public readonly tag?: Tag = 'h2'\n\n  /**\n   * The title's variant.\n   */\n  @Prop() public readonly variant?: TitleVariant\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  get #hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  get #hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    const layer = `qds-${this.layer ?? 'main'}`\n    const level = `qds-${this.level ?? 'section'}`\n    const Tag = this.tag ?? 'h2'\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return (\n      <hgroup\n        data-alignment={this.alignment ?? 'start'}\n        data-variant={this.variant}\n        class={{\n          [layer]: true,\n          [level]: true,\n          'qds-titles': true,\n          'qds-has-icon': hasIcon,\n          'qds-has-kicker': this.#hasKicker,\n          'qds-has-subtitle': this.#hasSubtitle,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        <Tag class=\"qds-title\" data-variant={this.variant}>\n          <slot />\n        </Tag>\n        {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n        {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n        {hasIcon && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon\"\n            name={this.iconName}\n            library={this.iconLibrary}\n          />\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}
+{"file":"p-4b9c6565.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.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: block;\n}\n\n.qds-titles {\n  display: grid;\n  grid-template-areas: 'title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      'kicker'\n      'title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'title'\n      'subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      'kicker'\n      'title'\n      'subtitle';\n  }\n}\n\n.qds-has-icon {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: 'icon title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      '.    kicker'\n      'icon title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'icon title'\n      '.    subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      '.    kicker'\n      'icon title'\n      '.    subtitle';\n  }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n  margin-block: 0;\n}\n\n.qds-title {\n  grid-area: title;\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  grid-area: subtitle;\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  grid-area: kicker;\n  color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n  grid-area: icon;\n  align-content: center;\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-titles-icon-size);\n      height: var(--qds-main-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-subsection-titles-icon-size);\n      height: var(--qds-main-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-panel {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-titles-icon-size);\n      height: var(--qds-panel-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-section-titles-icon-size);\n      height: var(--qds-panel-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-subsection-titles-icon-size);\n      height: var(--qds-panel-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-navigation {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-section-titles-icon-size);\n      height: var(--qds-navigation-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-subsection-titles-icon-size);\n      height: var(--qds-navigation-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-popup {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-titles-icon-size);\n      height: var(--qds-popup-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-section-titles-icon-size);\n      height: var(--qds-popup-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-subsection-titles-icon-size);\n      height: var(--qds-popup-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-accessory {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-titles-icon-size);\n      height: var(--qds-accessory-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-section-titles-icon-size);\n      height: var(--qds-accessory-section-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-variant='web-main-section-promo'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-promo-titles-gap);\n      margin: auto;\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-promo-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-promo-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-promo-kicker);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-promo-titles-gap)\n        var(--qds-main-section-promo-titles-icon-gap);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-promo-titles-icon-size);\n      height: var(--qds-main-section-promo-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-alignment='start'] {\n  text-align: start;\n}\n\n[data-alignment='center'] {\n  text-align: center;\n}\n\n[data-alignment='end'] {\n  text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-display-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-display-title);\n    }\n  }\n}\n\n[data-variant='web-main-subsection-card'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-card-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-card-title);\n    }\n  }\n}\n\n[data-variant='web-main-section-hero'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-hero-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-hero-title);\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n  | 'web-main-section-display'\n  | 'web-main-section-hero'\n  | 'web-main-section-promo'\n  | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n  tag: 'qds-title',\n  shadow: true,\n  styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n  /**\n   * The alignment of the title.\n   */\n  @Prop() public readonly alignment?: Alignment = 'start'\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   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer?: Layer = 'main'\n\n  @Prop() public readonly level?: Level = 'section'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * HTML tag to use to render the title.\n   */\n  @Prop() public readonly tag?: Tag = 'h2'\n\n  /**\n   * The title's variant.\n   */\n  @Prop() public readonly variant?: TitleVariant\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  get #hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  get #hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    const layer = `qds-${this.layer ?? 'main'}`\n    const level = `qds-${this.level ?? 'section'}`\n    const Tag = this.tag ?? 'h2'\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return (\n      <hgroup\n        data-alignment={this.alignment ?? 'start'}\n        data-variant={this.variant}\n        class={{\n          [layer]: true,\n          [level]: true,\n          'qds-titles': true,\n          'qds-has-icon': hasIcon,\n          'qds-has-kicker': this.#hasKicker,\n          'qds-has-subtitle': this.#hasSubtitle,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        <Tag class=\"qds-title\" data-variant={this.variant}>\n          <slot />\n        </Tag>\n        {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n        {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n        {hasIcon && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon\"\n            name={this.iconName}\n            library={this.iconLibrary}\n          />\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}

package/components/{p-c4122977.js → p-5576dc00.js}

@@ -225,7 +225,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
         await this.setIcon();
     }
     render() {
-        return (h("div", { key: '3fca209ec743cded809432d194d8c9488ba07fd8', class: "qds-container" }, h("span", { key: '0d9759a324e57446f7a00cae5365808f70500f8f', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: '3f728385959c92a7386fd6495419299eb66997fc', class: "qds-click-target" })));
+        return (h("div", { key: '2286e132e7a3e112d6cbb5ca47971b5d8c21e2f8', class: "qds-container" }, h("span", { key: '916d8a3fefcb6111eb9a9f9426a5b83bf5dc6536', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'd662f4925a6fc000046321d69ff94d78363c450a', class: "qds-click-target" })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -258,4 +258,4 @@ function defineCustomElement() {
 
 export { Icon as I, defineCustomElement as d, registerIconLibrary as r, unregisterIconLibrary as u };
 
-//# sourceMappingURL=p-c4122977.js.map
+//# sourceMappingURL=p-5576dc00.js.map