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

package/components/qds-switch.js

@@ -3,9 +3,9 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-7b04d43e.js';
-import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './p-4141d6ed.js';
-import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './p-d107c90c.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-002e77af.js';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './p-efdb8fa2.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
 
 const switchCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-knob,.qds-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-track{align-items:center;background-color:var(--qds-theme-control-slider-track-default);border-radius:var(--qds-control-slider-track-border-radius);display:flex;flex-shrink:0}.qds-track:hover{background-color:var(--qds-theme-control-slider-track-hover)}.qds-track:active{background-color:var(--qds-theme-control-slider-track-pressed)}.qds-knob{background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid #0000;border-radius:var(--qds-control-slider-knob-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;margin-inline:var(--qds-control-border-width)}.qds-container{box-sizing:border-box;cursor:pointer;display:flex}.qds-switch{clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.qds-switch:focus-visible~.qds-track{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-switch:checked~.qds-track{background-color:var(--qds-theme-signature-color-default);justify-content:flex-end}.qds-switch:checked~.qds-track:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-switch:checked~.qds-track:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-track[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:calc(var(--qds-control-slider-knob-small-size)*2)}.qds-knob[data-size=small]{height:var(--qds-control-slider-knob-small-size);width:var(--qds-control-slider-knob-small-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-track[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:calc(var(--qds-control-slider-knob-standard-size)*2)}.qds-knob[data-size=standard]{height:var(--qds-control-slider-knob-standard-size);width:var(--qds-control-slider-knob-standard-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-track[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:calc(var(--qds-control-slider-knob-large-size)*2)}.qds-knob[data-size=large]{height:var(--qds-control-slider-knob-large-size);width:var(--qds-control-slider-knob-large-size)}";
 const QdsSwitchStyle0 = switchCss;
@@ -31,6 +31,70 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.focusEmitter = createEvent(this, "qdsFocus", 2);
         this.internals = this.attachInternals();
         _Switch_instances.add(this);
+        /**
+         * Adds vertical margin to the switch for alignment.
+         *
+         * This is useful when creating inline layouts so that the first lines have
+         * the correct vertical centering.
+         */
+        this.inline = false;
+        /**
+         * The switches's size.
+         */
+        this.size = 'standard';
+        /**
+         * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+         * element to associate the switch with (its form owner).
+         *
+         * The value of this property must be the id of a `<form>` in the same
+         * document. If this property is not set, the `<qds-switch>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This property lets you associate `<qds-switch>` elements to `<form>`s
+         * anywhere in the document, not just inside a `<form>`. It can also override
+         *an ancestor `<form>` element.
+         *
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.form = null;
+        /**
+         * Returns a list of the [`<label>`][] elements associated with the
+         * `qds-switch` element.
+         *
+         * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+         *
+         * @readonly
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.labels = null;
+        /**
+         * The error message that would be shown to the user if the `<qds-switch>`
+         * was to be checked for validity.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validationMessage = '';
+        /**
+         * The [`ValidityState`][] object for this `<qds-switch>`.
+         *
+         * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validity = VALID_STATE;
+        /**
+         * True if `<qds-switch>` will be validated when the form is submitted;
+         * false otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.willValidate = false;
+        this.inheritedAttributes = {};
         this.checkValidity = () => this.internals.checkValidity();
         this.reportValidity = () => this.internals.reportValidity();
         this.setCustomValidity = (error) => {
@@ -45,20 +109,6 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         _Switch_onFocus.set(this, (event) => {
             this.focusEmitter.emit(pickFocusEventAttributes(event));
         });
-        this.inline = false;
-        this.size = 'standard';
-        this.autoFocus = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
-        this.form = null;
-        this.labels = null;
-        this.name = undefined;
-        this.value = undefined;
-        this.validationMessage = '';
-        this.validity = VALID_STATE;
-        this.willValidate = false;
-        this.tabIndex = undefined;
-        this.inheritedAttributes = {};
     }
     onClick(event) {
         if (__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get)) {
@@ -98,13 +148,13 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
     }
     render() {
-        return (h("div", { key: 'd2e5e0e1cee02851bcc4609815eda7f56eff1752', class: {
+        return (h("div", { key: '7eb3b4edd0db6a2871e428e0bf0f3cf8cd767387', class: {
                 'qds-container': true,
                 'qds-disabled': __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get),
                 'qds-inline': this.inline,
-            }, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("input", { key: '3f936c0009eae81618e96664a76cc1c1b8c9ba39', "aria-hidden": "true",
+            }, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("input", { key: 'c8676426e8fd902ecbebc6a41d171b51f5bd0c73', "aria-hidden": "true",
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _Switch_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Switch_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '49b17576a18e1badc099b0a7e6081ddd4c5c2621', class: "qds-track", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("div", { key: 'c34784d30707e6cf206ab9121c91c192ad1a003b', class: "qds-knob", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }))));
+            autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _Switch_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Switch_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '1bc219c5352f95bc096fd37d7ad7e16f38a214ee', class: "qds-track", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("div", { key: 'ab0da4496668672e4c767e023063449d351a474e', class: "qds-knob", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -119,7 +169,6 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
 }, [81, "qds-switch", {
         "inline": [4],
         "size": [1],
-        "autoFocus": [4, "autofocus"],
         "checked": [1028],
         "disabled": [4],
         "form": [1],

package/components/qds-switch.js.map

@@ -1 +1 @@
-{"file":"qds-switch.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=shadow","src/components/switch/switch.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-track,\n.qds-knob {\n  print-color-adjust: exact;\n}\n\n.qds-track {\n  align-items: center;\n  border-radius: var(--qds-control-slider-track-border-radius);\n  display: flex;\n  flex-shrink: 0;\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-slider-track-default);\n\n  &:hover {\n    background-color: var(--qds-theme-control-slider-track-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-control-slider-track-pressed);\n  }\n}\n\n.qds-knob {\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-slider-knob-border-radius);\n  border: var(--qds-control-border-width) solid transparent;\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  margin-inline: var(--qds-control-border-width);\n}\n\n.qds-container {\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n}\n\n.qds-switch {\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:focus-visible ~ .qds-track {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:checked ~ .qds-track {\n    justify-content: flex-end;\n    background-color: var(--qds-theme-signature-color-default);\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.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-small-size) * 2);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-small-size);\n    width: var(--qds-control-slider-knob-small-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-standard-size) * 2);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-standard-size);\n    width: var(--qds-control-slider-knob-standard-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-large-size) * 2);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-large-size);\n    width: var(--qds-control-slider-knob-large-size);\n  }\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  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n  tag: 'qds-switch',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n  /**\n   * Adds vertical margin to the switch 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   * The switches's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Specify whether the switch should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   *Sets the switch's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the switch from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the switch with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-switch>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-switch>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   *an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-switch` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n  /**\n   * The name of the switch, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the switch, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value\n\n  /**\n   * The error message that would be shown to the user if the `<qds-switch>`\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-switch>`.\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   * True if `<qds-switch>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the switch loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the switch's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the switch gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLQdsSwitchElement\n\n  @State() private tabIndex?: number\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedDisabled(): boolean {\n    return (\n      (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n      this.host.getAttribute('disabled') !== 'false'\n    )\n  }\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  get #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    this.checked = !this.#computedChecked\n    this.changeEmitter.emit()\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaChecked = this.#computedChecked.toString()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    this.#updateFormValue()\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'switch'\n    this.checkedChanged()\n    this.disabledChanged()\n\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('labels', () => this.internals.labels)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-disabled': this.#computedDisabled,\n          'qds-inline': this.inline,\n        }}\n        data-size={this.#computedSize}\n      >\n        <input\n          aria-hidden=\"true\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.checked}\n          class=\"qds-switch\"\n          disabled={this.disabled}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <div class=\"qds-track\" data-size={this.#computedSize}>\n          <div class=\"qds-knob\" data-size={this.#computedSize} />\n        </div>\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: HTMLInputElement['setCustomValidity'] = (error) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n\n  #updateFormValue(): void {\n    this.internals.setFormValue(\n      this.#computedChecked && !this.#computedDisabled\n        ? this.#computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n}\n"],"version":3}
+{"file":"qds-switch.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=shadow","src/components/switch/switch.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-track,\n.qds-knob {\n  print-color-adjust: exact;\n}\n\n.qds-track {\n  align-items: center;\n  border-radius: var(--qds-control-slider-track-border-radius);\n  display: flex;\n  flex-shrink: 0;\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-slider-track-default);\n\n  &:hover {\n    background-color: var(--qds-theme-control-slider-track-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-control-slider-track-pressed);\n  }\n}\n\n.qds-knob {\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-slider-knob-border-radius);\n  border: var(--qds-control-border-width) solid transparent;\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  margin-inline: var(--qds-control-border-width);\n}\n\n.qds-container {\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n}\n\n.qds-switch {\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:focus-visible ~ .qds-track {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:checked ~ .qds-track {\n    justify-content: flex-end;\n    background-color: var(--qds-theme-signature-color-default);\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.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-small-size) * 2);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-small-size);\n    width: var(--qds-control-slider-knob-small-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-standard-size) * 2);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-standard-size);\n    width: var(--qds-control-slider-knob-standard-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-large-size) * 2);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-slider-knob-large-size);\n    width: var(--qds-control-slider-knob-large-size);\n  }\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  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n  tag: 'qds-switch',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n  /**\n   * Adds vertical margin to the switch 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   * The switches's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   *Sets the switch's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the switch from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the switch with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-switch>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-switch>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   *an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-switch` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n  /**\n   * The name of the switch, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the switch, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value\n\n  /**\n   * The error message that would be shown to the user if the `<qds-switch>`\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-switch>`.\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   * True if `<qds-switch>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the switch loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the switch's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the switch gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedDisabled(): boolean {\n    return (\n      (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n      this.host.getAttribute('disabled') !== 'false'\n    )\n  }\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  get #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    this.checked = !this.#computedChecked\n    this.changeEmitter.emit()\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaChecked = this.#computedChecked.toString()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    this.#updateFormValue()\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'switch'\n    this.checkedChanged()\n    this.disabledChanged()\n\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('labels', () => this.internals.labels)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-disabled': this.#computedDisabled,\n          'qds-inline': this.inline,\n        }}\n        data-size={this.#computedSize}\n      >\n        <input\n          aria-hidden=\"true\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.host.autofocus}\n          checked={this.checked}\n          class=\"qds-switch\"\n          disabled={this.disabled}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <div class=\"qds-track\" data-size={this.#computedSize}>\n          <div class=\"qds-knob\" data-size={this.#computedSize} />\n        </div>\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: HTMLInputElement['setCustomValidity'] = (error) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n\n  #updateFormValue(): void {\n    this.internals.setFormValue(\n      this.#computedChecked && !this.#computedDisabled\n        ? this.#computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n}\n"],"version":3}

package/components/qds-tab.js

@@ -3,14 +3,14 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-7b04d43e.js';
-import { p as pickFocusEventAttributes, r as resolveTarget, i as inheritAriaAttributes } from './p-4141d6ed.js';
-import { d as defineCustomElement$7 } from './p-028b9d2e.js';
-import { d as defineCustomElement$6 } from './p-d279ae53.js';
-import { d as defineCustomElement$5 } from './p-82461767.js';
-import { d as defineCustomElement$4 } from './p-b82bac0a.js';
-import { d as defineCustomElement$3 } from './p-7f6e797a.js';
-import { d as defineCustomElement$2 } from './p-f5ba28ff.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-002e77af.js';
+import { p as pickFocusEventAttributes, r as resolveTarget, i as inheritAriaAttributes } from './p-efdb8fa2.js';
+import { d as defineCustomElement$7 } from './p-86a0fdf3.js';
+import { d as defineCustomElement$6 } from './p-2e88c3cc.js';
+import { d as defineCustomElement$5 } from './p-9a9561a8.js';
+import { d as defineCustomElement$4 } from './p-84aae53b.js';
+import { d as defineCustomElement$3 } from './p-252b0946.js';
+import { d as defineCustomElement$2 } from './p-ae6eda4e.js';
 
 const tabCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-target{-webkit-appearance:none;appearance:none;background-color:initial;border:none;cursor:pointer;padding:0;pointer-events:auto}.qds-target:disabled{pointer-events:none}.qds-target:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-target-icon{color:var(--qds-theme-control-text-standard)}.qds-icon,.qds-target-icon{flex-shrink:0}.qds-chevron{transform:rotate(180deg)}.qds-closable-wrapper,.qds-tab{position:relative}.qds-closable-tab,.qds-closable-wrapper,.qds-tab,.qds-target,.qds-texts{display:flex}.qds-texts{flex:1 0;flex-direction:column}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle);font:var(--qds-control-tab-standard-subtitle)}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}.qds-closable-wrapper[data-size=small],.qds-tab[data-size=small]{gap:var(--qds-control-tab-small-gap-internal);min-height:var(--qds-control-tab-small-height);padding-inline:var(--qds-control-tab-small-padding-horizontal)}.qds-collapse[data-size=small]{min-width:var(--qds-control-tab-small-height)}.qds-closable-tab[data-size=small]{gap:var(--qds-control-tab-small-gap-internal)}[data-size=small]>.qds-icon{font-size:var(--qds-control-tab-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-control-tab-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-control-tab-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-control-tab-small-subtitle)}.qds-target-icon[data-size=small]{--qds-experimental-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-closable-wrapper[data-size=standard],.qds-tab[data-size=standard]{gap:var(--qds-control-tab-standard-gap-internal);min-height:var(--qds-control-tab-standard-height);padding-inline:var(--qds-control-tab-standard-padding-horizontal)}.qds-collapse[data-size=standard]{min-width:var(--qds-control-tab-standard-height)}.qds-closable-tab[data-size=standard]{gap:var(--qds-control-tab-standard-gap-internal)}[data-size=standard]>.qds-icon{font-size:var(--qds-control-tab-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-control-tab-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-control-tab-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-control-tab-standard-subtitle)}.qds-target-icon[data-size=standard]{--qds-experimental-icon-click-target-size:var(\n      --qds-control-standard-height\n    );height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-closable-wrapper[data-size=large],.qds-tab[data-size=large]{gap:var(--qds-control-tab-large-gap-internal);min-height:var(--qds-control-tab-large-height);padding-inline:var(--qds-control-tab-large-padding-horizontal)}.qds-collapse[data-size=large]{min-width:var(--qds-control-tab-large-height)}.qds-closable-tab[data-size=large]{gap:var(--qds-control-tab-large-gap-internal)}[data-size=large]>.qds-icon{font-size:var(--qds-control-tab-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-control-tab-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-control-tab-large-title)}[data-size=large] .qds-subtext{font:var(--qds-control-tab-large-subtitle)}.qds-target-icon[data-size=large]{--qds-experimental-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-selected.qds-closable-wrapper[data-importance=emphasized],.qds-selected.qds-tab[data-importance=emphasized]{background-color:var(--qds-theme-control-background)}[data-importance=emphasized][data-size=standard] .qds-text{font:var(--qds-control-tab-standard-title-emphasized)}[data-importance=emphasized][data-size=small] .qds-text{font:var(--qds-control-tab-small-title-emphasized)}[data-importance=emphasized][data-size=large] .qds-text{font:var(--qds-control-tab-large-title-emphasized)}[data-importance=emphasized] .qds-icon,[data-importance=standard] .qds-selected .qds-icon{color:var(--qds-theme-signature-color-default)}:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";display:block;position:absolute}.qds-indicator-inline-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after,.qds-indicator-inline-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{height:100%;width:var(--qds-signature-line-connection-width)}.qds-indicator-inline-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{inset-inline-end:0}.qds-indicator-inline-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{inset-inline-start:0}.qds-indicator-block-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after,.qds-indicator-block-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{height:var(--qds-signature-line-connection-width);width:100%}.qds-indicator-block-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{bottom:0}.qds-indicator-block-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-selected[data-importance=emphasized],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],.qds-closable-wrapper[data-importance=emphasized],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover,[data-importance=emphasized] .qds-tab:hover):after{top:0}.qds-selected[data-importance=standard][data-size=standard] .qds-text,.qds-selected[data-importance=subdued][data-size=standard] .qds-text{font:var(--qds-control-tab-standard-title-emphasized)}.qds-selected[data-importance=standard][data-size=small] .qds-text,.qds-selected[data-importance=subdued][data-size=small] .qds-text{font:var(--qds-control-tab-small-title-emphasized)}.qds-selected[data-importance=standard][data-size=large] .qds-text,.qds-selected[data-importance=subdued][data-size=large] .qds-text{font:var(--qds-control-tab-large-title-emphasized)}[data-importance=emphasized]:hover:after,[data-importance=standard]:hover:after{background-color:var(--qds-theme-signature-color-hover)}[data-importance=emphasized]:active:after,[data-importance=standard]:active:after{background-color:var(--qds-theme-signature-color-pressed)}.qds-selected[data-importance=emphasized]:after,.qds-selected[data-importance=standard]:after{background-color:var(--qds-theme-signature-color-default)}.qds-selected[data-importance=subdued]:after,[data-importance=subdued] :active:after{background-color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:hover:after{background-color:var(--qds-theme-link-subdued-hover)}.qds-tab.qds-icon-only{padding-inline:0}.qds-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-closable-tab{width:100%}.qds-closable-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab{align-items:center;justify-content:center}.qds-closable-tab,.qds-tab{background-color:initial;border:none;cursor:pointer;text-align:initial}.qds-closable-tab:any-link,.qds-tab:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-hidden{display:none}";
 const QdsTabStyle0 = tabCss;
@@ -18,6 +18,13 @@ const QdsTabStyle0 = tabCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
 // SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -27,13 +34,6 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var _Tab_instances, _Tab_inheritedAttributes, _Tab_div, _Tab_panel, _Tab_collapsed_get, _Tab_computedAction_get, _Tab_computedSize_get, _Tab_computedImportance_get, _Tab_ariaLabel_get, _Tab_computedDisabled_get, _Tab_shouldCollapse_get, _Tab_placement_get, _Tab_renderText, _Tab_ref, _Tab_tooltipRef, _Tab_close, _Tab_onIconClick, _Tab_onIconKeyDown, _Tab_onBlur, _Tab_onFocus;
 const isCounter = (value) => typeof value === 'string'
     ? !Number.isNaN(Number.parseFloat(value))
@@ -49,6 +49,57 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
         this.blurEmitter = createEvent(this, "qdsBlur", 2);
         this.focusEmitter = createEvent(this, "qdsFocus", 2);
         _Tab_instances.add(this);
+        /**
+         * The tab's counter importance.
+         */
+        this.badgeCounterImportance = 'standard';
+        /**
+         * The indicator's status.
+         */
+        this.badgeIndicatorStatus = 'neutral';
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * Displays the tab in a collapsed state without its text. The text will be
+         * displayed in a tooltip instead.
+         *
+         * This property has no effect if the tab does not have an icon set.
+         */
+        this.iconOnly = false;
+        /**
+         * The tab's importance.
+         */
+        this.importance = 'standard';
+        /**
+         * The tab's indicator position.
+         */
+        this.indicatorPosition = 'block-end';
+        /**
+         * The name of a registered icon library.
+         */
+        this.tagIconLibrary = 'default';
+        /**
+         * The tab's tag importance.
+         */
+        this.tagImportance = 'emphasized';
+        /**
+         * The tab's tag size.
+         */
+        this.tagSize = 'small';
+        /**
+         * The tab's tag status.
+         */
+        this.tagStatus = 'info';
+        /**
+         * Whether or not the tab is selected.
+         */
+        this.selected = false;
+        /**
+         * The tab's size.
+         */
+        this.size = 'standard';
         _Tab_inheritedAttributes.set(this, {});
         _Tab_div.set(this, void 0);
         _Tab_panel.set(this, void 0);
@@ -87,31 +138,6 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
         _Tab_onFocus.set(this, (event) => {
             this.focusEmitter.emit(pickFocusEventAttributes(event));
         });
-        this.action = undefined;
-        this.badge = undefined;
-        this.badgeCounterImportance = 'standard';
-        this.badgeDescription = undefined;
-        this.badgeIndicatorStatus = 'neutral';
-        this.disabled = undefined;
-        this.iconLibrary = 'default';
-        this.iconName = undefined;
-        this.iconOnly = false;
-        this.importance = 'standard';
-        this.indicatorPosition = 'block-end';
-        this.panel = undefined;
-        this.tagIconDescription = undefined;
-        this.tagIconName = undefined;
-        this.tagIconLibrary = 'default';
-        this.tagImportance = 'emphasized';
-        this.tagSize = 'small';
-        this.tagStatus = 'info';
-        this.tagText = undefined;
-        this.selected = false;
-        this.size = 'standard';
-        this.subtitle = undefined;
-        this.text = undefined;
-        this.href = undefined;
-        this.tabIndex = undefined;
     }
     panelChanged() {
         this.disconnectedCallback();
@@ -167,11 +193,11 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
             : __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable'
                 ? 'button'
                 : 'div';
-        return (h("div", { key: '87b74471679bdaaea47e101725d6f96ceb5e8d3f', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, class: {
+        return (h("div", { key: '1c14b8e9898783ce010f06a1845465e3b07ebb12', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, class: {
                 'qds-closable-wrapper': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
                 'qds-selected': this.selected,
                 [`qds-indicator-${this.indicatorPosition}`]: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
-            }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get), ref: __classPrivateFieldGet(this, _Tab_ref, "f") }, h(Tag, { key: '54a53d47260e0c89eea928c688aa7f81a1a64d6e', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
+            }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get), ref: __classPrivateFieldGet(this, _Tab_ref, "f") }, h(Tag, { key: '66fb78974fd1de426ef559cbeb49ec50c388d504', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
                 'qds-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) !== 'closable',
                 'qds-icon-only': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_collapsed_get),
                 'qds-collapse': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) && __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) !== 'closable',
@@ -183,11 +209,11 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
                     ? 'true'
                     : 'false'
                 : undefined, "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get), "data-action": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), href: isLink ? this.href : undefined, ...__classPrivateFieldGet(this, _Tab_inheritedAttributes, "f") }, ((this.tagText !== undefined && this.tagText !== '') ||
-            (this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: '46bd543f6387afeff31f6e36393755ac7ea89ed2', text: this.tagText, status: this.tagStatus, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), importance: this.tagImportance, "icon-library": this.tagIconLibrary, "icon-name": this.tagIconName, "icon-description": this.tagIconDescription, class: { 'qds-hidden': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) } })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '464bf60019f9ad7f64056cb537d92bf9d375e57d', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) && this.text && __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this), isIndicator(this.badge) && (h("qds-badge-indicator", { key: '4b5233a1d8cac76f3a4d882751c4c35e635ea22f', class: {
+            (this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: '379484bef802ba7b5f09d4e01649403bf92f7170', text: this.tagText, status: this.tagStatus, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), importance: this.tagImportance, "icon-library": this.tagIconLibrary, "icon-name": this.tagIconName, "icon-description": this.tagIconDescription, class: { 'qds-hidden': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) } })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'ebb6c1be61e444a17871a4a3cee3d29124f509a2', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) && this.text && __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this), isIndicator(this.badge) && (h("qds-badge-indicator", { key: '0030f77c4b88bc95acaf161655afb62e407a88e2', class: {
                 'qds-indicator': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get),
-            }, status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: 'ef6f0c90068df3bebc9478ab2d25cf1c4b7b0749', class: {
+            }, status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: '9debd256a6c8b064bdd3ee9de997ef1f19db1146', class: {
                 'qds-indicator': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get),
-            }, description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable' && (h("qds-icon", { key: '3ca3191ff895a20796e1c516e06ba59dd700f7a4', "aria-hidden": "true", class: { 'qds-target-icon': true, 'qds-chevron': this.selected }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "dropdown" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable' && (h("button", { key: 'aacf7c8428924c3f17b086ae85b99c4e09fa5fe8', "aria-label": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_ariaLabel_get), class: "qds-target", tabIndex: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? undefined : this.tabIndex, disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Tab_onIconClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tab_onIconKeyDown, "f"), type: "button", ...__classPrivateFieldGet(this, _Tab_inheritedAttributes, "f") }, h("qds-icon", { key: '76e3c63d3289855e0cfe7a174fa4881e72a4d687', "aria-hidden": "true", class: "qds-target-icon", "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "close" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) && this.text && (h("qds-tooltip", { key: '894ae79391f12e7d1838de0eb2f3bc91d6a71c11', placement: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_placement_get), ref: __classPrivateFieldGet(this, _Tab_tooltipRef, "f") }, __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this)))));
+            }, description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable' && (h("qds-icon", { key: 'c01a87cf55e39c2a36fe83b930106a2ca0803d5a', "aria-hidden": "true", class: { 'qds-target-icon': true, 'qds-chevron': this.selected }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "dropdown" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable' && (h("button", { key: 'e6c0d9b2848734cbefbea8ef369ce3b2d07c1253', "aria-label": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_ariaLabel_get), class: "qds-target", tabIndex: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? undefined : this.tabIndex, disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Tab_onIconClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tab_onIconKeyDown, "f"), type: "button", ...__classPrivateFieldGet(this, _Tab_inheritedAttributes, "f") }, h("qds-icon", { key: '572daeb646acb65e6e4c24ec08ad417947cf0639', "aria-hidden": "true", class: "qds-target-icon", "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "close" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_shouldCollapse_get) && this.text && (h("qds-tooltip", { key: '4496bf6a5b15c3e7ebdf364389f997d4035349c9', placement: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_placement_get), ref: __classPrivateFieldGet(this, _Tab_tooltipRef, "f") }, __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/components/qds-tab.js.map

@@ -1 +1 @@
-{"file":"qds-tab.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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  line-height: 0;\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-target {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  pointer-events: auto;\n  background-color: transparent;\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-target-icon {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n  flex-shrink: 0;\n}\n\n.qds-chevron {\n  transform: rotate(180deg);\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n  position: relative;\n}\n\n.qds-target,\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n  display: flex;\n}\n\n.qds-texts {\n  flex: 1 0;\n  flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  color: var(--qds-theme-subtitle);\n  font: var(--qds-control-tab-standard-subtitle);\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  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-small-height);\n    gap: var(--qds-control-tab-small-gap-internal);\n    padding-inline: var(--qds-control-tab-small-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-small-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-small-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-small-title);\n  }\n\n  & .qds-subtitle {\n    font: var(--qds-control-tab-small-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-standard-height);\n    gap: var(--qds-control-tab-standard-gap-internal);\n    padding-inline: var(--qds-control-tab-standard-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-standard-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-standard-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-standard-title);\n  }\n\n  & .qds-subtitle {\n    font: var(--qds-control-tab-standard-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-large-height);\n    gap: var(--qds-control-tab-large-gap-internal);\n    padding-inline: var(--qds-control-tab-large-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-large-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-large-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-control-tab-large-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-selected {\n    &.qds-tab,\n    &.qds-closable-wrapper {\n      background-color: var(--qds-theme-control-background);\n    }\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-control-tab-standard-title-emphasized);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-control-tab-small-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-control-tab-large-title-emphasized);\n  }\n\n  & .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n}\n\n[data-importance='standard'] {\n  .qds-selected .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'],\n[data-importance='emphasized'] {\n  &.qds-selected,\n  &.qds-closable-wrapper,\n  .qds-tab:hover {\n    &::after {\n      border-radius: var(--qds-signature-line-connection-cap-radius);\n      content: '';\n      display: block;\n      position: absolute;\n    }\n\n    &.qds-indicator-inline-end::after,\n    &.qds-indicator-inline-start::after {\n      width: var(--qds-signature-line-connection-width);\n      height: 100%;\n    }\n\n    &.qds-indicator-inline-end::after {\n      inset-inline-end: 0;\n    }\n\n    &.qds-indicator-inline-start::after {\n      inset-inline-start: 0;\n    }\n\n    &.qds-indicator-block-end::after,\n    &.qds-indicator-block-start::after {\n      width: 100%;\n      height: var(--qds-signature-line-connection-width);\n    }\n\n    &.qds-indicator-block-end::after {\n      bottom: 0;\n    }\n\n    &.qds-indicator-block-start::after {\n      top: 0;\n    }\n  }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n  &.qds-selected {\n    &[data-size='standard'] .qds-text {\n      font: var(--qds-control-tab-standard-title-emphasized);\n    }\n\n    &[data-size='small'] .qds-text {\n      font: var(--qds-control-tab-small-title-emphasized);\n    }\n\n    &[data-size='large'] .qds-text {\n      font: var(--qds-control-tab-large-title-emphasized);\n    }\n  }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'] {\n  &:hover {\n    &::after {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n  }\n\n  &:active {\n    &::after {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n\n  &.qds-selected {\n    &::after {\n      background-color: var(--qds-theme-signature-color-default);\n    }\n  }\n}\n\n[data-importance='subdued'] {\n  &.qds-selected,\n  :active {\n    &::after {\n      background-color: var(--qds-theme-link-subdued-pressed);\n    }\n  }\n\n  &:hover {\n    &::after {\n      background-color: var(--qds-theme-link-subdued-hover);\n    }\n  }\n}\n\n.qds-tab {\n  &.qds-icon-only {\n    padding-inline: 0;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n    outline-offset: calc(\n      -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n    );\n  }\n}\n\n.qds-closable-tab {\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n\n.qds-closable-wrapper {\n  align-items: center;\n  justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  text-align: initial;\n\n  &:any-link {\n    text-decoration: none;\n  }\n}\n\n.qds-hidden {\n  display: none;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  pickFocusEventAttributes,\n  resolveTarget,\n} from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type Placement = 'bottom' | 'left' | 'right' | 'top'\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n  | 'block-end'\n  | 'block-start'\n  | 'inline-end'\n  | 'inline-start'\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\nlet autoIncrementingId = 1\n\n/**\n * <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n *\n * @see https://quartz.se.com/build/components/tab\n */\n@Component({\n  tag: 'qds-tab',\n  shadow: true,\n  styleUrl: 'tab.css',\n})\nexport class Tab 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  @Prop() public readonly badge?: number | string | true\n\n  /**\n   * The tab's counter importance.\n   */\n  @Prop()\n  public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n    'standard'\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   * Prevents the tab from being interacted with: it cannot be\n   * selected or focused.\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\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   * Displays the tab in a collapsed state without its text. The text will be\n   * displayed in a tooltip instead.\n   *\n   * This property has no effect if the tab does not have an icon set.\n   */\n  @Prop() public readonly iconOnly: boolean = false\n\n  /**\n   * The tab's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The tab's indicator position.\n   */\n  @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-end'\n\n  /**\n   * The tab panel element associated with this tab. The `panel` specified\n   * can be any of the following:\n   *\n   * - A CSS selector string\n   * - A reference to an [`Element`][]\n   * - A function returning a reference to an [`Element`][] or a CSS selector\n   * string\n   *\n   * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n   */\n  @Prop() public readonly panel!: Element | string | (() => Element | string)\n\n  /**\n   * The tag icon's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly tagIconDescription?: string\n\n  /**\n   * The name of the tab's tag icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly tagIconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly tagIconLibrary: string = 'default'\n\n  /**\n   * The tab's tag importance.\n   */\n  @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n    'emphasized'\n\n  /**\n   * The tab's tag size.\n   */\n  @Prop() public readonly tagSize?: Size = 'small'\n\n  /**\n   * The tab's tag status.\n   */\n  @Prop() public readonly tagStatus?: Status = 'info'\n\n  /**\n   * The tab's tag text.\n   */\n  @Prop() public readonly tagText?: string\n\n  /**\n   * Whether or not the tab is selected.\n   */\n  @Prop() public selected = false\n\n  /**\n   * The tab's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * When set, the underlying tab will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * This property has no effect if the tab has an `action`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Emitted when the tab is closed.\n   */\n  @Event({ eventName: 'qdsClose', cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the tab loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the tab gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLQdsTabElement\n\n  @State() private tabIndex?: number\n\n  #inheritedAttributes: Attributes = {}\n\n  #div?: HTMLDivElement\n\n  #panel?: Element\n\n  get #collapsed(): boolean {\n    const hasNoTag = this.tagText === undefined || this.tagText === ''\n    const hasNoBadge = this.badge === undefined || this.badge === ''\n\n    return (\n      this.#shouldCollapse &&\n      this.#computedAction === undefined &&\n      hasNoTag &&\n      hasNoBadge\n    )\n  }\n\n  get #computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'closable':\n      case 'expandable': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\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  get #computedImportance(): Importance {\n    switch (this.importance) {\n      case 'subdued':\n      case 'emphasized': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #ariaLabel(): string {\n    return `Close ${this.text}`\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #shouldCollapse(): boolean {\n    return this.iconOnly && this.iconName !== undefined && this.iconName !== ''\n  }\n\n  get #placement(): Placement {\n    switch (this.indicatorPosition) {\n      case 'inline-start': {\n        return 'left'\n      }\n      case 'inline-end': {\n        return 'right'\n      }\n      case 'block-start': {\n        return 'top'\n      }\n      default: {\n        return 'bottom'\n      }\n    }\n  }\n\n  @Watch('panel')\n  protected panelChanged(): void {\n    this.disconnectedCallback()\n\n    const panel = resolveTarget(this.panel)\n    if (!(panel instanceof globalThis.Element)) return\n    this.#panel = panel\n\n    const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n    if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n    if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n    if (this.#panel.getAttribute('aria-labelledby') === null)\n      this.#panel.setAttribute('aria-labelledby', this.host.id)\n    this.#panel.setAttribute(\n      'tabindex',\n      this.#panel.getAttribute('tabindex') ?? '0',\n    )\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n    this.host.id ||= `qds-tab-${autoIncrementingId}`\n    autoIncrementingId += 1\n  }\n\n  public componentDidLoad(): void {\n    this.panelChanged()\n  }\n\n  public disconnectedCallback(): void {\n    if (!this.#panel) return\n\n    const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n    if (tab) tab.removeAttribute('aria-controls')\n\n    if (this.#panel.role === 'tabpanel')\n      // eslint-disable-next-line unicorn/no-null\n      this.#panel.role = null\n    if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n      this.#panel.removeAttribute('aria-labelledby')\n    this.#panel.removeAttribute('tabindex')\n  }\n\n  public render() {\n    const isLink = this.href !== undefined && this.#computedAction === undefined\n    const Tag = isLink\n      ? 'a'\n      : this.#computedAction === 'expandable'\n        ? 'button'\n        : 'div'\n    return (\n      <div\n        aria-disabled={this.#computedDisabled ? 'true' : undefined}\n        class={{\n          'qds-closable-wrapper': this.#computedAction === 'closable',\n          'qds-selected': this.selected,\n          [`qds-indicator-${this.indicatorPosition}`]:\n            this.#computedAction === 'closable',\n        }}\n        data-size={this.#computedSize}\n        data-importance={this.#computedImportance}\n        ref={this.#ref}\n      >\n        <Tag\n          aria-disabled={this.#computedDisabled ? 'true' : undefined}\n          disabled={isLink ? undefined : this.disabled}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          class={{\n            'qds-tab': this.#computedAction !== 'closable',\n            'qds-icon-only': this.#collapsed,\n            'qds-collapse':\n              this.#shouldCollapse && this.#computedAction !== 'closable',\n            'qds-closable-tab': this.#computedAction === 'closable',\n            'qds-selected': this.selected,\n            [`qds-indicator-${this.indicatorPosition}`]:\n              this.#computedAction !== 'closable',\n          }}\n          role={\n            !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n          }\n          aria-current={isLink && this.selected ? 'true' : undefined}\n          aria-expanded={\n            this.#computedAction === 'expandable' && !isLink\n              ? this.selected\n                ? 'true'\n                : 'false'\n              : undefined\n          }\n          data-importance={this.#computedImportance}\n          data-action={this.#computedAction}\n          data-size={this.#computedSize}\n          href={isLink ? this.href : undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        >\n          {((this.tagText !== undefined && this.tagText !== '') ||\n            (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n            <qds-tag\n              text={this.tagText}\n              status={this.tagStatus}\n              size={this.#computedSize}\n              importance={this.tagImportance}\n              icon-library={this.tagIconLibrary}\n              icon-name={this.tagIconName}\n              icon-description={this.tagIconDescription}\n              class={{ 'qds-hidden': this.#shouldCollapse }}\n            />\n          )}\n\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {!this.#shouldCollapse && this.text && this.#renderText()}\n          {isIndicator(this.badge) && (\n            <qds-badge-indicator\n              class={{\n                'qds-indicator': this.#shouldCollapse,\n              }}\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.#shouldCollapse,\n              }}\n              description={this.badgeDescription}\n              importance={this.badgeCounterImportance}\n              size={this.#computedSize}\n              strokeRing\n              value={this.badge}\n            />\n          )}\n          {this.#computedAction === 'expandable' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n              data-size={this.#computedSize}\n              library=\"core\"\n              name=\"dropdown\"\n            />\n          )}\n        </Tag>\n        {this.#computedAction === 'closable' && (\n          <button\n            aria-label={this.#ariaLabel}\n            class=\"qds-target\"\n            tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n            disabled={this.disabled}\n            onClick={this.#onIconClick}\n            onKeyDown={this.#onIconKeyDown}\n            type=\"button\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.#inheritedAttributes}\n          >\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-target-icon\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name=\"close\"\n            />\n          </button>\n        )}\n        {this.#shouldCollapse && this.text && (\n          <qds-tooltip placement={this.#placement} ref={this.#tooltipRef}>\n            {this.#renderText()}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  #renderText(): JSX.Element {\n    return this.#shouldCollapse ? (\n      <qds-title subtitle={this.subtitle} layer=\"accessory\" level=\"root\">\n        {this.text}\n      </qds-title>\n    ) : (\n      <div class=\"qds-texts\">\n        <div class=\"qds-text\">{this.text}</div>\n        {this.subtitle !== undefined && this.subtitle !== '' && (\n          <div class=\"qds-subtitle\">{this.subtitle}</div>\n        )}\n      </div>\n    )\n  }\n\n  readonly #ref = (div?: HTMLDivElement): void => {\n    this.#div = div\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#div\n  }\n\n  readonly #close = (): void => {\n    this.closeEmitter.emit()\n  }\n\n  readonly #onIconClick = (event: MouseEvent): void => {\n    event.stopPropagation()\n\n    const path = event.composedPath()\n    const closeIcon = path.find(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        element.classList.contains('qds-target'),\n    )\n\n    if (closeIcon && !event.defaultPrevented) this.#close()\n  }\n\n  readonly #onIconKeyDown = (event: KeyboardEvent): void => {\n    const path = event.composedPath()\n    const closeIcon = path.find(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        element.classList.contains('qds-target'),\n    )\n\n    if (closeIcon && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.#close()\n    }\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-tab.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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  line-height: 0;\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-target {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  pointer-events: auto;\n  background-color: transparent;\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-target-icon {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n  flex-shrink: 0;\n}\n\n.qds-chevron {\n  transform: rotate(180deg);\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n  position: relative;\n}\n\n.qds-target,\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n  display: flex;\n}\n\n.qds-texts {\n  flex: 1 0;\n  flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  color: var(--qds-theme-subtitle);\n  font: var(--qds-control-tab-standard-subtitle);\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  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-small-height);\n    gap: var(--qds-control-tab-small-gap-internal);\n    padding-inline: var(--qds-control-tab-small-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-small-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-small-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-small-title);\n  }\n\n  & .qds-subtitle {\n    font: var(--qds-control-tab-small-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-standard-height);\n    gap: var(--qds-control-tab-standard-gap-internal);\n    padding-inline: var(--qds-control-tab-standard-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-standard-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-standard-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-standard-title);\n  }\n\n  & .qds-subtitle {\n    font: var(--qds-control-tab-standard-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-tab,\n  &.qds-closable-wrapper {\n    min-height: var(--qds-control-tab-large-height);\n    gap: var(--qds-control-tab-large-gap-internal);\n    padding-inline: var(--qds-control-tab-large-padding-horizontal);\n  }\n\n  &.qds-collapse {\n    min-width: var(--qds-control-tab-large-height);\n  }\n\n  &.qds-closable-tab {\n    gap: var(--qds-control-tab-large-gap-internal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-control-tab-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-control-tab-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-control-tab-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-control-tab-large-subtitle);\n  }\n\n  &.qds-target-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-selected {\n    &.qds-tab,\n    &.qds-closable-wrapper {\n      background-color: var(--qds-theme-control-background);\n    }\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-control-tab-standard-title-emphasized);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-control-tab-small-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-control-tab-large-title-emphasized);\n  }\n\n  & .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n}\n\n[data-importance='standard'] {\n  .qds-selected .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'],\n[data-importance='emphasized'] {\n  &.qds-selected,\n  &.qds-closable-wrapper,\n  .qds-tab:hover {\n    &::after {\n      border-radius: var(--qds-signature-line-connection-cap-radius);\n      content: '';\n      display: block;\n      position: absolute;\n    }\n\n    &.qds-indicator-inline-end::after,\n    &.qds-indicator-inline-start::after {\n      width: var(--qds-signature-line-connection-width);\n      height: 100%;\n    }\n\n    &.qds-indicator-inline-end::after {\n      inset-inline-end: 0;\n    }\n\n    &.qds-indicator-inline-start::after {\n      inset-inline-start: 0;\n    }\n\n    &.qds-indicator-block-end::after,\n    &.qds-indicator-block-start::after {\n      width: 100%;\n      height: var(--qds-signature-line-connection-width);\n    }\n\n    &.qds-indicator-block-end::after {\n      bottom: 0;\n    }\n\n    &.qds-indicator-block-start::after {\n      top: 0;\n    }\n  }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n  &.qds-selected {\n    &[data-size='standard'] .qds-text {\n      font: var(--qds-control-tab-standard-title-emphasized);\n    }\n\n    &[data-size='small'] .qds-text {\n      font: var(--qds-control-tab-small-title-emphasized);\n    }\n\n    &[data-size='large'] .qds-text {\n      font: var(--qds-control-tab-large-title-emphasized);\n    }\n  }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'] {\n  &:hover {\n    &::after {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n  }\n\n  &:active {\n    &::after {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n\n  &.qds-selected {\n    &::after {\n      background-color: var(--qds-theme-signature-color-default);\n    }\n  }\n}\n\n[data-importance='subdued'] {\n  &.qds-selected,\n  :active {\n    &::after {\n      background-color: var(--qds-theme-link-subdued-pressed);\n    }\n  }\n\n  &:hover {\n    &::after {\n      background-color: var(--qds-theme-link-subdued-hover);\n    }\n  }\n}\n\n.qds-tab {\n  &.qds-icon-only {\n    padding-inline: 0;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n    outline-offset: calc(\n      -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n    );\n  }\n}\n\n.qds-closable-tab {\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n\n.qds-closable-wrapper {\n  align-items: center;\n  justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  text-align: initial;\n\n  &:any-link {\n    text-decoration: none;\n  }\n}\n\n.qds-hidden {\n  display: none;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  pickFocusEventAttributes,\n  resolveTarget,\n} from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type Placement = 'bottom' | 'left' | 'right' | 'top'\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n  | 'block-end'\n  | 'block-start'\n  | 'inline-end'\n  | 'inline-start'\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\nlet autoIncrementingId = 1\n\n/**\n * <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n *\n * @see https://quartz.se.com/build/components/tab\n */\n@Component({\n  tag: 'qds-tab',\n  shadow: true,\n  styleUrl: 'tab.css',\n})\nexport class Tab 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  @Prop() public readonly badge?: number | string | true\n\n  /**\n   * The tab's counter importance.\n   */\n  @Prop()\n  public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n    'standard'\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   * Prevents the tab from being interacted with: it cannot be\n   * selected or focused.\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\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   * Displays the tab in a collapsed state without its text. The text will be\n   * displayed in a tooltip instead.\n   *\n   * This property has no effect if the tab does not have an icon set.\n   */\n  @Prop() public readonly iconOnly: boolean = false\n\n  /**\n   * The tab's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The tab's indicator position.\n   */\n  @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-end'\n\n  /**\n   * The tab panel element associated with this tab. The `panel` specified\n   * can be any of the following:\n   *\n   * - A CSS selector string\n   * - A reference to an [`Element`][]\n   * - A function returning a reference to an [`Element`][] or a CSS selector\n   * string\n   *\n   * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n   */\n  @Prop() public readonly panel!: Element | string | (() => Element | string)\n\n  /**\n   * The tag icon's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly tagIconDescription?: string\n\n  /**\n   * The name of the tab's tag icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly tagIconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly tagIconLibrary: string = 'default'\n\n  /**\n   * The tab's tag importance.\n   */\n  @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n    'emphasized'\n\n  /**\n   * The tab's tag size.\n   */\n  @Prop() public readonly tagSize?: Size = 'small'\n\n  /**\n   * The tab's tag status.\n   */\n  @Prop() public readonly tagStatus?: Status = 'info'\n\n  /**\n   * The tab's tag text.\n   */\n  @Prop() public readonly tagText?: string\n\n  /**\n   * Whether or not the tab is selected.\n   */\n  @Prop() public selected = false\n\n  /**\n   * The tab's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * When set, the underlying tab will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * This property has no effect if the tab has an `action`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Emitted when the tab is closed.\n   */\n  @Event({ eventName: 'qdsClose', cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the tab loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the tab gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  #inheritedAttributes: Attributes = {}\n\n  #div?: HTMLDivElement\n\n  #panel?: Element\n\n  get #collapsed(): boolean {\n    const hasNoTag = this.tagText === undefined || this.tagText === ''\n    const hasNoBadge = this.badge === undefined || this.badge === ''\n\n    return (\n      this.#shouldCollapse &&\n      this.#computedAction === undefined &&\n      hasNoTag &&\n      hasNoBadge\n    )\n  }\n\n  get #computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'closable':\n      case 'expandable': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\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  get #computedImportance(): Importance {\n    switch (this.importance) {\n      case 'subdued':\n      case 'emphasized': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #ariaLabel(): string {\n    return `Close ${this.text}`\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #shouldCollapse(): boolean {\n    return this.iconOnly && this.iconName !== undefined && this.iconName !== ''\n  }\n\n  get #placement(): Placement {\n    switch (this.indicatorPosition) {\n      case 'inline-start': {\n        return 'left'\n      }\n      case 'inline-end': {\n        return 'right'\n      }\n      case 'block-start': {\n        return 'top'\n      }\n      default: {\n        return 'bottom'\n      }\n    }\n  }\n\n  @Watch('panel')\n  protected panelChanged(): void {\n    this.disconnectedCallback()\n\n    const panel = resolveTarget(this.panel)\n    if (!(panel instanceof globalThis.Element)) return\n    this.#panel = panel\n\n    const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n    if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n    if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n    if (this.#panel.getAttribute('aria-labelledby') === null)\n      this.#panel.setAttribute('aria-labelledby', this.host.id)\n    this.#panel.setAttribute(\n      'tabindex',\n      this.#panel.getAttribute('tabindex') ?? '0',\n    )\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n    this.host.id ||= `qds-tab-${autoIncrementingId}`\n    autoIncrementingId += 1\n  }\n\n  public componentDidLoad(): void {\n    this.panelChanged()\n  }\n\n  public disconnectedCallback(): void {\n    if (!this.#panel) return\n\n    const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n    if (tab) tab.removeAttribute('aria-controls')\n\n    if (this.#panel.role === 'tabpanel')\n      // eslint-disable-next-line unicorn/no-null\n      this.#panel.role = null\n    if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n      this.#panel.removeAttribute('aria-labelledby')\n    this.#panel.removeAttribute('tabindex')\n  }\n\n  public render() {\n    const isLink = this.href !== undefined && this.#computedAction === undefined\n    const Tag = isLink\n      ? 'a'\n      : this.#computedAction === 'expandable'\n        ? 'button'\n        : 'div'\n    return (\n      <div\n        aria-disabled={this.#computedDisabled ? 'true' : undefined}\n        class={{\n          'qds-closable-wrapper': this.#computedAction === 'closable',\n          'qds-selected': this.selected,\n          [`qds-indicator-${this.indicatorPosition}`]:\n            this.#computedAction === 'closable',\n        }}\n        data-size={this.#computedSize}\n        data-importance={this.#computedImportance}\n        ref={this.#ref}\n      >\n        <Tag\n          aria-disabled={this.#computedDisabled ? 'true' : undefined}\n          disabled={isLink ? undefined : this.disabled}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          class={{\n            'qds-tab': this.#computedAction !== 'closable',\n            'qds-icon-only': this.#collapsed,\n            'qds-collapse':\n              this.#shouldCollapse && this.#computedAction !== 'closable',\n            'qds-closable-tab': this.#computedAction === 'closable',\n            'qds-selected': this.selected,\n            [`qds-indicator-${this.indicatorPosition}`]:\n              this.#computedAction !== 'closable',\n          }}\n          role={\n            !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n          }\n          aria-current={isLink && this.selected ? 'true' : undefined}\n          aria-expanded={\n            this.#computedAction === 'expandable' && !isLink\n              ? this.selected\n                ? 'true'\n                : 'false'\n              : undefined\n          }\n          data-importance={this.#computedImportance}\n          data-action={this.#computedAction}\n          data-size={this.#computedSize}\n          href={isLink ? this.href : undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        >\n          {((this.tagText !== undefined && this.tagText !== '') ||\n            (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n            <qds-tag\n              text={this.tagText}\n              status={this.tagStatus}\n              size={this.#computedSize}\n              importance={this.tagImportance}\n              icon-library={this.tagIconLibrary}\n              icon-name={this.tagIconName}\n              icon-description={this.tagIconDescription}\n              class={{ 'qds-hidden': this.#shouldCollapse }}\n            />\n          )}\n\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {!this.#shouldCollapse && this.text && this.#renderText()}\n          {isIndicator(this.badge) && (\n            <qds-badge-indicator\n              class={{\n                'qds-indicator': this.#shouldCollapse,\n              }}\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.#shouldCollapse,\n              }}\n              description={this.badgeDescription}\n              importance={this.badgeCounterImportance}\n              size={this.#computedSize}\n              strokeRing\n              value={this.badge}\n            />\n          )}\n          {this.#computedAction === 'expandable' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n              data-size={this.#computedSize}\n              library=\"core\"\n              name=\"dropdown\"\n            />\n          )}\n        </Tag>\n        {this.#computedAction === 'closable' && (\n          <button\n            aria-label={this.#ariaLabel}\n            class=\"qds-target\"\n            tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n            disabled={this.disabled}\n            onClick={this.#onIconClick}\n            onKeyDown={this.#onIconKeyDown}\n            type=\"button\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.#inheritedAttributes}\n          >\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-target-icon\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name=\"close\"\n            />\n          </button>\n        )}\n        {this.#shouldCollapse && this.text && (\n          <qds-tooltip placement={this.#placement} ref={this.#tooltipRef}>\n            {this.#renderText()}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  #renderText(): JSX.Element {\n    return this.#shouldCollapse ? (\n      <qds-title subtitle={this.subtitle} layer=\"accessory\" level=\"root\">\n        {this.text}\n      </qds-title>\n    ) : (\n      <div class=\"qds-texts\">\n        <div class=\"qds-text\">{this.text}</div>\n        {this.subtitle !== undefined && this.subtitle !== '' && (\n          <div class=\"qds-subtitle\">{this.subtitle}</div>\n        )}\n      </div>\n    )\n  }\n\n  readonly #ref = (div?: HTMLDivElement): void => {\n    this.#div = div\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#div\n  }\n\n  readonly #close = (): void => {\n    this.closeEmitter.emit()\n  }\n\n  readonly #onIconClick = (event: MouseEvent): void => {\n    event.stopPropagation()\n\n    const path = event.composedPath()\n    const closeIcon = path.find(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        element.classList.contains('qds-target'),\n    )\n\n    if (closeIcon && !event.defaultPrevented) this.#close()\n  }\n\n  readonly #onIconKeyDown = (event: KeyboardEvent): void => {\n    const path = event.composedPath()\n    const closeIcon = path.find(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        element.classList.contains('qds-target'),\n    )\n\n    if (closeIcon && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.#close()\n    }\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}