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

package/dist/esm/qds-switch.entry.js.map

@@ -1 +1 @@
-{"file":"qds-switch.entry.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  box-sizing: border-box;\n  flex-shrink: 0;\n  padding: var(--qds-control-toggle-padding);\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  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  margin: 0;\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: var(--qds-control-toggle-box-small-width);\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: var(--qds-control-toggle-box-standard-width);\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: var(--qds-control-toggle-box-large-width);\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}
+{"file":"qds-switch.entry.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-toggle-track-border-radius);\n  display: flex;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  padding: var(--qds-control-toggle-track-padding);\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-toggle-track-default);\n\n  &:hover {\n    background-color: var(--qds-theme-control-toggle-track-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-control-toggle-track-pressed);\n  }\n}\n\n.qds-knob {\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-knob-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  margin: 0;\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: var(--qds-control-toggle-track-small-width);\n    height: var(--qds-control-toggle-track-small-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-small-size);\n    width: var(--qds-control-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: var(--qds-control-toggle-track-standard-width);\n    height: var(--qds-control-toggle-track-standard-height);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-standard-size);\n    width: var(--qds-control-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-toggle-track-large-height) * 2);\n    height: var(--qds-control-toggle-track-large-height);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-large-size);\n    width: var(--qds-control-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/dist/esm/qds-tabbar.entry.js

@@ -226,9 +226,14 @@ const Tabbar = class {
     }
     componentWillLoad() {
         __classPrivateFieldSet(this, _Tabbar_inheritedAttributes, inheritAriaAttributes(this.host), "f");
-        const firstTab = this.host.querySelector('qds-tab');
-        if (firstTab)
-            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, firstTab);
+        const tabs = [
+            ...this.host.querySelectorAll('qds-tab'),
+        ];
+        const preselectedTab = tabs.find((tab) => tab.selected);
+        if (preselectedTab)
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, preselectedTab);
+        else if (tabs.length > 0)
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, tabs[0]);
     }
     componentDidRender() {
         if (this.activeTab)
@@ -256,22 +261,22 @@ const Tabbar = class {
             __classPrivateFieldGet(this, _Tabbar_ro, "f").disconnect();
     }
     render() {
-        return (h("div", { key: '8a05c8bc51227253df1313c80f1e6784d7f5886b', class: { 'qds-vertical-divider': this.orientation === 'vertical' }, "data-layer": this.layer, "data-level": this.level }, h("div", { key: 'aa576b8b7198bce7e7c8d9b2eff184758790f40d', class: "qds-tabbar" }, h("div", { key: '1c8c7284eaac0f166b07308fb918c80837cf315d', class: {
+        return (h("div", { key: '1bac1d9e7275ef07b70ebe6272723657ad28a6dd', class: { 'qds-vertical-divider': this.orientation === 'vertical' }, "data-layer": this.layer, "data-level": this.level }, h("div", { key: 'f5c335aef291edf70ce9ee481933d83d6ceac038', class: "qds-tabbar" }, h("div", { key: '6f93b1bea5382f9dfa4d7a89783e172ae0f11f1b', class: {
                 'qds-flex': !(this.disableEndArrow && this.disableStartArrow),
                 'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
                     this.orientation === 'vertical',
-            } }, h("qds-button", { key: '370b21a840df802230d68987fd8de14f9b6aa416', text: "show previous tab", importance: "subdued", "icon-name": "dropdown", "icon-library": "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow, iconOnly: true })), h("ul", { key: '014f35b9b08ed293b789530080f5d71fa8c3d99c', class: {
+            } }, h("qds-button", { key: '8632fccf7dce7e7e219a7ac4281b0aec3ce8bb8e', text: "show previous tab", importance: "subdued", "icon-name": "dropdown", "icon-library": "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow, iconOnly: true })), h("ul", { key: '1d7e4207088326204c2aa39f77225bc6ed1dd7ba', class: {
                 'qds-tabs': true,
                 'qds-vertical': this.orientation === 'vertical',
             }, role: "tablist", "aria-label": this.tablistDescription, ref: (element) => {
                 __classPrivateFieldSet(this, _Tabbar_tabbar, element, "f");
-            }, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f"), ...__classPrivateFieldGet(this, _Tabbar_inheritedAttributes, "f") }, h("slot", { key: '1d8cd9d888dbc93c243f4965e704e6027325a842', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: '8e8dcc61329edf62f7b7f061b12490df1b3b5fe0', class: {
+            }, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f"), ...__classPrivateFieldGet(this, _Tabbar_inheritedAttributes, "f") }, h("slot", { key: '1cbde9037a47302cb4969c7e27580f465f577994', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: '718ed1e9a9e28f8611ffb770dd25c605665a2d04', class: {
                 'qds-flex': !(this.disableEndArrow && this.disableStartArrow),
                 'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
                     this.orientation === 'vertical',
-            } }, h("qds-button", { key: 'e23de4dd325878352d3491ee8bf5c049d2fdc588', text: "show next tab", "icon-name": "dropdown", "icon-library": "core", importance: "subdued", class: "qds-arrow-end", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow, iconOnly: true }))), ((this.level === 'root' &&
+            } }, h("qds-button", { key: '9c750f868d16309052a129d844a6a1ed9bf92987', text: "show next tab", "icon-name": "dropdown", "icon-library": "core", importance: "subdued", class: "qds-arrow-end", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow, iconOnly: true }))), ((this.level === 'root' &&
             (this.layer === 'popup' || this.layer === 'accessory')) ||
-            (this.level === 'section' && this.layer === 'main')) && (h("qds-divider", { key: '3e7797ba7a0928aca35073c0ae4cd2e3bc815f68', vertical: this.orientation === 'vertical' }))));
+            (this.level === 'section' && this.layer === 'main')) && (h("qds-divider", { key: 'fd40c7eed666d65eba2972ab3b3f146f1feb4948', vertical: this.orientation === 'vertical' }))));
     }
     static get delegatesFocus() { return true; }
     get host() { return getElement(this); }

package/dist/esm/qds-tabbar.entry.js.map

@@ -1 +1 @@
-{"file":"qds-tabbar.entry.js","mappings":"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","names":[],"sources":["src/components/tabbar/tabbar.css?tag=qds-tabbar&encapsulation=shadow","src/components/tabbar/tabbar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-vertical,\n.qds-vertical-divider,\n.qds-tabbar,\n.qds-tabs {\n  display: flex;\n}\n\n.qds-vertical-divider,\n.qds-tabbar {\n  width: inherit;\n}\n\n.qds-arrow-start {\n  transform: scaleX(var(--qds-direction-factor, 1)) rotate(90deg);\n}\n\n.qds-arrow-end {\n  transform: scaleX(var(--qds-direction-factor, 1)) rotate(-90deg);\n}\n\n.qds-flex {\n  display: flex;\n}\n\n.qds-hidden {\n  display: none;\n}\n\n.qds-tabs {\n  flex: 1;\n  margin-block: 0;\n  overflow: hidden;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n}\n\n.qds-vertical {\n  flex-direction: column;\n}\n\n.qds-vertical-divider {\n  flex-direction: row;\n}\n\n[data-layer='main'] {\n  &[data-level='root'] .qds-tabs {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n\n  &[data-level='section'] .qds-tabs {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &[data-level='subsection'] .qds-tabs {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-layer='popup'] {\n  &[data-level='root'] .qds-tabs {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &[data-level='section'] .qds-tabs {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n:is([data-layer='panel'], [data-layer='accessory'])[data-level='root']\n  .qds-tabs {\n  gap: var(--qds-control-small-gap-siblings-related);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\nimport type { Tab } from '../tab/tab'\n\nexport type Layer = 'accessory' | 'main' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Orientation = 'horizontal' | 'vertical'\n\nconst HORIZONTAL_MOVE_KEYS: ReadonlySet<string> = new Set([\n  'ArrowLeft',\n  'ArrowRight',\n  'Home',\n  'End',\n])\n\nconst VERTICAL_MOVE_KEYS: ReadonlySet<string> = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'Home',\n  'End',\n])\n\nconst TAB_SETTINGS: Record<\n  string,\n  Pick<Tab, 'importance' | 'indicatorPosition' | 'size'> | undefined\n> = {\n  'main-root': {\n    importance: 'standard',\n    size: 'large',\n    indicatorPosition: 'block-end',\n  },\n  'main-section': {\n    importance: 'standard',\n    size: 'standard',\n    indicatorPosition: 'block-end',\n  },\n  'popup-root': {\n    importance: 'standard',\n    size: 'standard',\n    indicatorPosition: 'block-end',\n  },\n  'main-subsection': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'block-start',\n  },\n  'popup-section': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'inline-start',\n  },\n  'panel-root': {\n    importance: 'standard',\n    size: 'small',\n    indicatorPosition: 'block-start',\n  },\n  'accessory-root': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'block-end',\n  },\n}\n\nconst isEnabledTabItem = (item: unknown): item is HTMLQdsTabElement => {\n  if (!(item instanceof HTMLElement)) return false\n  const tagName = item.tagName.toLowerCase()\n\n  return (\n    (!item.inert && tagName === 'qds-tab') ||\n    (item as HTMLQdsTabElement).disabled !== true\n  )\n}\n\n/**\n * `<qds-tabbar>` is the component that facilitates navigation between the groups\n * of related content within the page.\n * It allows users to switch between groups by clicking on Tabs without going to another page.\n */\n@Component({\n  tag: 'qds-tabbar',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'tabbar.css',\n})\nexport class Tabbar implements ComponentInterface {\n  /**\n   * The tabbar's layer.\n   */\n  @Prop() public layer?: Layer = 'main'\n\n  /**\n   * The tabbar's level.\n   */\n  @Prop() public level?: Level = 'root'\n\n  /**\n   * The tabbar's orientation.\n   */\n  @Prop() public orientation?: Orientation = 'horizontal'\n\n  /**\n   * the tablist Description\n   */\n  @Prop() public readonly tablistDescription?: string\n\n  /**\n   * Emitted when the user selects the tab.\n   */\n  @Event({ eventName: 'qdsTabShow', cancelable: false })\n  private readonly showEmitter!: EventEmitter<HTMLElement>\n\n  /**\n   * Emitted when the user selects the tab.\n   */\n  @Event({ eventName: 'qdsTabHide', cancelable: false })\n  private readonly hideEmitter!: EventEmitter<HTMLElement>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private disableEndArrow = false\n\n  @State() private disableStartArrow = false\n\n  @State() private activeTab?: HTMLQdsTabElement\n\n  #ro: ResizeObserver | undefined\n\n  #tabbar?: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  @Listen('resize', { target: 'window' })\n  protected windowResize(): void {\n    this.#onViewportCrop()\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n\n    const firstTab = this.host.querySelector('qds-tab')\n    if (firstTab) this.#setActiveTab(firstTab)\n  }\n\n  public componentDidRender(): void {\n    if (this.activeTab) this.#switchTabPanel(this.activeTab)\n\n    const settings = TAB_SETTINGS[`${this.layer}-${this.level}`]\n    if (!settings) return\n\n    for (const tab of this.host.querySelectorAll('qds-tab')) {\n      /* eslint-disable @typescript-eslint/no-unsafe-member-access */\n      tab.importance = settings.importance\n      tab.size = settings.size\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      tab.indicatorPosition =\n        this.orientation === 'vertical' ? 'inline-end' : tab.indicatorPosition\n      /* eslint-enable @typescript-eslint/no-unsafe-member-access */\n    }\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#tabbar)\n\n    this.#ro = new ResizeObserver(this.#onScroll)\n    this.#ro.observe(this.#tabbar)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    return (\n      <div\n        class={{ 'qds-vertical-divider': this.orientation === 'vertical' }}\n        data-layer={this.layer}\n        data-level={this.level}\n      >\n        <div class=\"qds-tabbar\">\n          <div\n            class={{\n              'qds-flex': !(this.disableEndArrow && this.disableStartArrow),\n              'qds-hidden':\n                (this.disableEndArrow && this.disableStartArrow) ||\n                this.orientation === 'vertical',\n            }}\n          >\n            <qds-button\n              text=\"show previous tab\"\n              importance=\"subdued\"\n              icon-name=\"dropdown\"\n              icon-library=\"core\"\n              class=\"qds-arrow-start\"\n              onClick={this.#scrollToStart}\n              disabled={this.disableStartArrow}\n              iconOnly\n            />\n          </div>\n          <ul\n            class={{\n              'qds-tabs': true,\n              'qds-vertical': this.orientation === 'vertical',\n            }}\n            role=\"tablist\"\n            aria-label={this.tablistDescription}\n            ref={(element) => {\n              this.#tabbar = element\n            }}\n            onClick={this.#onClick}\n            onKeyDown={this.#onKeyDown}\n            onMouseDown={this.#onMouseDown}\n            onScroll={this.#onScroll}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.#inheritedAttributes}\n          >\n            <slot onSlotchange={this.#onSlotchange} />\n          </ul>\n          <div\n            class={{\n              'qds-flex': !(this.disableEndArrow && this.disableStartArrow),\n              'qds-hidden':\n                (this.disableEndArrow && this.disableStartArrow) ||\n                this.orientation === 'vertical',\n            }}\n          >\n            <qds-button\n              text=\"show next tab\"\n              icon-name=\"dropdown\"\n              icon-library=\"core\"\n              importance=\"subdued\"\n              class=\"qds-arrow-end\"\n              onClick={this.#scrollToEnd}\n              disabled={this.disableEndArrow}\n              iconOnly\n            />\n          </div>\n        </div>\n        {((this.level === 'root' &&\n          (this.layer === 'popup' || this.layer === 'accessory')) ||\n          (this.level === 'section' && this.layer === 'main')) && (\n          <qds-divider vertical={this.orientation === 'vertical'} />\n        )}\n      </div>\n    )\n  }\n\n  readonly #scrollToStart = (): void => {\n    invariant(this.#tabbar)\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.#tabbar.scroll({\n      left: isRTL\n        ? this.#tabbar.scrollLeft + this.#tabbar.clientWidth\n        : this.#tabbar.scrollLeft - this.#tabbar.clientWidth,\n    })\n  }\n\n  readonly #scrollToEnd = (): void => {\n    invariant(this.#tabbar)\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.#tabbar.scroll({\n      left: isRTL\n        ? this.#tabbar.scrollLeft - this.#tabbar.clientWidth\n        : this.#tabbar.scrollLeft + this.#tabbar.clientWidth,\n    })\n  }\n\n  #setActiveTab(tab: HTMLQdsTabElement): void {\n    this.activeTab = tab\n\n    for (const t of this.host.querySelectorAll('qds-tab')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n      const target = t.shadowRoot?.querySelector('[role=\"tab\"]')\n\n      const isSelected = t === tab\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      t.selected = isSelected\n      if (target instanceof globalThis.Element)\n        target.ariaSelected = isSelected.toString()\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/class-methods-use-this\n  #getAllTabPanels(): HTMLElement[] {\n    const tabPanels = document.querySelectorAll('[role=\"tabpanel\"]')\n    return [...tabPanels].filter(\n      (element): element is HTMLElement => element instanceof HTMLElement,\n    )\n  }\n\n  #switchTabPanel(activeTab: HTMLQdsTabElement): void {\n    const target = activeTab.shadowRoot?.querySelector('[role=\"tab\"]')\n    const tabAriaControls = target?.getAttribute('aria-controls')\n    const tabPanels = this.#getAllTabPanels()\n\n    for (const panel of tabPanels)\n      panel.hidden = tabAriaControls !== panel.getAttribute('id')\n  }\n\n  #handleTabActivation(tab: HTMLQdsTabElement): void {\n    const previousTab = this.activeTab\n    if (previousTab === tab) return\n\n    this.activeTab = tab\n\n    this.hideEmitter.emit(previousTab)\n\n    this.showEmitter.emit(tab)\n    this.#setCurrentTab(tab)\n    this.#switchTabPanel(tab)\n  }\n\n  #getTabs(): HTMLQdsTabElement[] {\n    const slot = this.host.shadowRoot?.querySelector('slot')\n    return slot\n      ? [...slot.assignedElements({ flatten: true })].filter<HTMLQdsTabElement>(\n          (element) => isEnabledTabItem(element),\n        )\n      : []\n  }\n\n  #getCurrentTab(): HTMLQdsTabElement | undefined {\n    const currentTab = this.#getTabs().find(\n      (tab) =>\n        tab.shadowRoot\n          ?.querySelector('[role=\"tab\"]')\n          ?.getAttribute('tabindex') === '0',\n    )\n    return currentTab\n  }\n\n  #setCurrentTab(tab: HTMLQdsTabElement): void {\n    const tabs = this.#getTabs()\n    for (const t of tabs) {\n      const isCurrent = t === tab\n      const target = t.shadowRoot?.querySelector('[role=\"tab\"]')\n      const closeButton = t.shadowRoot?.querySelector('.qds-target')\n\n      const isDisabled = target?.getAttribute('aria-disabled') === 'true'\n      const shouldActivateTab = isCurrent && !isDisabled\n      const tabindex = shouldActivateTab ? '0' : '-1'\n\n      if (target) {\n        target.setAttribute('tabindex', tabindex)\n        if (shouldActivateTab) this.#handleTabActivation(t)\n      }\n\n      if (closeButton) closeButton.setAttribute('tabindex', tabindex)\n    }\n  }\n\n  readonly #onClick = (event: MouseEvent): void => {\n    const { target } = event\n    if (!(target instanceof HTMLElement)) return\n    const tab = target.closest('qds-tab')\n    if (!tab || tab.disabled === true || tab.inert) return\n\n    this.#handleTabActivation(tab)\n    this.#setActiveTab(tab)\n  }\n\n  readonly #onKeyDown = (event: KeyboardEvent): void => {\n    const isVertical = this.orientation === 'vertical'\n    const MOVE_SELECTION_KEYS = isVertical\n      ? VERTICAL_MOVE_KEYS\n      : HORIZONTAL_MOVE_KEYS\n    if (!MOVE_SELECTION_KEYS.has(event.key)) return\n\n    const tabs = this.#getTabs()\n    if (tabs.length === 0) return\n\n    event.preventDefault()\n    event.stopPropagation()\n\n    const activeTab = this.#getCurrentTab()\n    let index = activeTab ? tabs.indexOf(activeTab) : 0\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n\n    let nextTab: HTMLQdsTabElement | undefined\n    do {\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          index = (isRTL ? index < tabs.length - 1 : index > 0)\n            ? index - (isRTL ? -1 : 1)\n            : isRTL\n              ? 0\n              : tabs.length - 1\n          break\n        }\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          index = (isRTL ? index > 0 : index < tabs.length - 1)\n            ? index + (isRTL ? -1 : 1)\n            : isRTL\n              ? tabs.length - 1\n              : 0\n          break\n        }\n        case 'Home': {\n          index = isRTL ? tabs.length - 1 : 0\n          break\n        }\n        case 'End': {\n          index = isRTL ? 0 : tabs.length - 1\n          break\n        }\n        default:\n      }\n      nextTab = tabs[index]\n    } while (nextTab.disabled === true)\n\n    this.#setCurrentTab(nextTab)\n\n    const target =\n      nextTab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]')\n    if (target) {\n      target.focus()\n      target.scrollIntoView()\n    }\n    this.#handleTabActivation(nextTab)\n    this.#setActiveTab(nextTab)\n  }\n\n  readonly #onMouseDown = (event: MouseEvent): void => {\n    const { target } = event\n\n    if (isEnabledTabItem(target)) this.#setCurrentTab(target)\n  }\n\n  readonly #onScroll = (): void => {\n    if (!this.#tabbar) return\n\n    const { clientWidth, scrollWidth, scrollLeft } = this.#tabbar\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.disableStartArrow = scrollLeft === 0\n    this.disableEndArrow = isRTL\n      ? scrollWidth + scrollLeft <= clientWidth\n      : scrollWidth - clientWidth - scrollLeft <= 1\n  }\n\n  readonly #onViewportCrop = (): void => {\n    if (!this.#tabbar) return\n\n    const { scrollWidth, clientWidth } = this.#tabbar\n\n    if (scrollWidth > clientWidth) {\n      this.#onScroll()\n    }\n  }\n\n  readonly #onSlotchange = (): void => {\n    const tabs = this.#getTabs()\n\n    if (tabs.length > 0) this.#setCurrentTab(tabs[0])\n  }\n}\n"],"version":3}
+{"file":"qds-tabbar.entry.js","mappings":"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","names":[],"sources":["src/components/tabbar/tabbar.css?tag=qds-tabbar&encapsulation=shadow","src/components/tabbar/tabbar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-vertical,\n.qds-vertical-divider,\n.qds-tabbar,\n.qds-tabs {\n  display: flex;\n}\n\n.qds-vertical-divider,\n.qds-tabbar {\n  width: inherit;\n}\n\n.qds-arrow-start {\n  transform: scaleX(var(--qds-direction-factor, 1)) rotate(90deg);\n}\n\n.qds-arrow-end {\n  transform: scaleX(var(--qds-direction-factor, 1)) rotate(-90deg);\n}\n\n.qds-flex {\n  display: flex;\n}\n\n.qds-hidden {\n  display: none;\n}\n\n.qds-tabs {\n  flex: 1;\n  margin-block: 0;\n  overflow: hidden;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n}\n\n.qds-vertical {\n  flex-direction: column;\n}\n\n.qds-vertical-divider {\n  flex-direction: row;\n}\n\n[data-layer='main'] {\n  &[data-level='root'] .qds-tabs {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n\n  &[data-level='section'] .qds-tabs {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &[data-level='subsection'] .qds-tabs {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-layer='popup'] {\n  &[data-level='root'] .qds-tabs {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &[data-level='section'] .qds-tabs {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n:is([data-layer='panel'], [data-layer='accessory'])[data-level='root']\n  .qds-tabs {\n  gap: var(--qds-control-small-gap-siblings-related);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\nimport type { Tab } from '../tab/tab'\n\nexport type Layer = 'accessory' | 'main' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Orientation = 'horizontal' | 'vertical'\n\nconst HORIZONTAL_MOVE_KEYS: ReadonlySet<string> = new Set([\n  'ArrowLeft',\n  'ArrowRight',\n  'Home',\n  'End',\n])\n\nconst VERTICAL_MOVE_KEYS: ReadonlySet<string> = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'Home',\n  'End',\n])\n\nconst TAB_SETTINGS: Record<\n  string,\n  Pick<Tab, 'importance' | 'indicatorPosition' | 'size'> | undefined\n> = {\n  'main-root': {\n    importance: 'standard',\n    size: 'large',\n    indicatorPosition: 'block-end',\n  },\n  'main-section': {\n    importance: 'standard',\n    size: 'standard',\n    indicatorPosition: 'block-end',\n  },\n  'popup-root': {\n    importance: 'standard',\n    size: 'standard',\n    indicatorPosition: 'block-end',\n  },\n  'main-subsection': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'block-start',\n  },\n  'popup-section': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'inline-start',\n  },\n  'panel-root': {\n    importance: 'standard',\n    size: 'small',\n    indicatorPosition: 'block-start',\n  },\n  'accessory-root': {\n    importance: 'subdued',\n    size: 'small',\n    indicatorPosition: 'block-end',\n  },\n}\n\nconst isEnabledTabItem = (item: unknown): item is HTMLQdsTabElement => {\n  if (!(item instanceof HTMLElement)) return false\n  const tagName = item.tagName.toLowerCase()\n\n  return (\n    (!item.inert && tagName === 'qds-tab') ||\n    (item as HTMLQdsTabElement).disabled !== true\n  )\n}\n\n/**\n * `<qds-tabbar>` is the component that facilitates navigation between the groups\n * of related content within the page.\n * It allows users to switch between groups by clicking on Tabs without going to another page.\n */\n@Component({\n  tag: 'qds-tabbar',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'tabbar.css',\n})\nexport class Tabbar implements ComponentInterface {\n  /**\n   * The tabbar's layer.\n   */\n  @Prop() public layer?: Layer = 'main'\n\n  /**\n   * The tabbar's level.\n   */\n  @Prop() public level?: Level = 'root'\n\n  /**\n   * The tabbar's orientation.\n   */\n  @Prop() public orientation?: Orientation = 'horizontal'\n\n  /**\n   * the tablist Description\n   */\n  @Prop() public readonly tablistDescription?: string\n\n  /**\n   * Emitted when the user selects the tab.\n   */\n  @Event({ eventName: 'qdsTabShow', cancelable: false })\n  private readonly showEmitter!: EventEmitter<HTMLElement>\n\n  /**\n   * Emitted when the user selects the tab.\n   */\n  @Event({ eventName: 'qdsTabHide', cancelable: false })\n  private readonly hideEmitter!: EventEmitter<HTMLElement>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private disableEndArrow = false\n\n  @State() private disableStartArrow = false\n\n  @State() private activeTab?: HTMLQdsTabElement\n\n  #ro: ResizeObserver | undefined\n\n  #tabbar?: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  @Listen('resize', { target: 'window' })\n  protected windowResize(): void {\n    this.#onViewportCrop()\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n\n    const tabs = [\n      ...this.host.querySelectorAll('qds-tab'),\n    ] as HTMLQdsTabElement[]\n    const preselectedTab = tabs.find((tab) => tab.selected)\n    if (preselectedTab) this.#setActiveTab(preselectedTab)\n    else if (tabs.length > 0) this.#setActiveTab(tabs[0])\n  }\n\n  public componentDidRender(): void {\n    if (this.activeTab) this.#switchTabPanel(this.activeTab)\n\n    const settings = TAB_SETTINGS[`${this.layer}-${this.level}`]\n    if (!settings) return\n\n    for (const tab of this.host.querySelectorAll('qds-tab')) {\n      /* eslint-disable @typescript-eslint/no-unsafe-member-access */\n      tab.importance = settings.importance\n      tab.size = settings.size\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      tab.indicatorPosition =\n        this.orientation === 'vertical' ? 'inline-end' : tab.indicatorPosition\n      /* eslint-enable @typescript-eslint/no-unsafe-member-access */\n    }\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#tabbar)\n\n    this.#ro = new ResizeObserver(this.#onScroll)\n    this.#ro.observe(this.#tabbar)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    return (\n      <div\n        class={{ 'qds-vertical-divider': this.orientation === 'vertical' }}\n        data-layer={this.layer}\n        data-level={this.level}\n      >\n        <div class=\"qds-tabbar\">\n          <div\n            class={{\n              'qds-flex': !(this.disableEndArrow && this.disableStartArrow),\n              'qds-hidden':\n                (this.disableEndArrow && this.disableStartArrow) ||\n                this.orientation === 'vertical',\n            }}\n          >\n            <qds-button\n              text=\"show previous tab\"\n              importance=\"subdued\"\n              icon-name=\"dropdown\"\n              icon-library=\"core\"\n              class=\"qds-arrow-start\"\n              onClick={this.#scrollToStart}\n              disabled={this.disableStartArrow}\n              iconOnly\n            />\n          </div>\n          <ul\n            class={{\n              'qds-tabs': true,\n              'qds-vertical': this.orientation === 'vertical',\n            }}\n            role=\"tablist\"\n            aria-label={this.tablistDescription}\n            ref={(element) => {\n              this.#tabbar = element\n            }}\n            onClick={this.#onClick}\n            onKeyDown={this.#onKeyDown}\n            onMouseDown={this.#onMouseDown}\n            onScroll={this.#onScroll}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.#inheritedAttributes}\n          >\n            <slot onSlotchange={this.#onSlotchange} />\n          </ul>\n          <div\n            class={{\n              'qds-flex': !(this.disableEndArrow && this.disableStartArrow),\n              'qds-hidden':\n                (this.disableEndArrow && this.disableStartArrow) ||\n                this.orientation === 'vertical',\n            }}\n          >\n            <qds-button\n              text=\"show next tab\"\n              icon-name=\"dropdown\"\n              icon-library=\"core\"\n              importance=\"subdued\"\n              class=\"qds-arrow-end\"\n              onClick={this.#scrollToEnd}\n              disabled={this.disableEndArrow}\n              iconOnly\n            />\n          </div>\n        </div>\n        {((this.level === 'root' &&\n          (this.layer === 'popup' || this.layer === 'accessory')) ||\n          (this.level === 'section' && this.layer === 'main')) && (\n          <qds-divider vertical={this.orientation === 'vertical'} />\n        )}\n      </div>\n    )\n  }\n\n  readonly #scrollToStart = (): void => {\n    invariant(this.#tabbar)\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.#tabbar.scroll({\n      left: isRTL\n        ? this.#tabbar.scrollLeft + this.#tabbar.clientWidth\n        : this.#tabbar.scrollLeft - this.#tabbar.clientWidth,\n    })\n  }\n\n  readonly #scrollToEnd = (): void => {\n    invariant(this.#tabbar)\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.#tabbar.scroll({\n      left: isRTL\n        ? this.#tabbar.scrollLeft - this.#tabbar.clientWidth\n        : this.#tabbar.scrollLeft + this.#tabbar.clientWidth,\n    })\n  }\n\n  #setActiveTab(tab: HTMLQdsTabElement): void {\n    this.activeTab = tab\n\n    for (const t of this.host.querySelectorAll('qds-tab')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n      const target = t.shadowRoot?.querySelector('[role=\"tab\"]')\n\n      const isSelected = t === tab\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      t.selected = isSelected\n      if (target instanceof globalThis.Element)\n        target.ariaSelected = isSelected.toString()\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/class-methods-use-this\n  #getAllTabPanels(): HTMLElement[] {\n    const tabPanels = document.querySelectorAll('[role=\"tabpanel\"]')\n    return [...tabPanels].filter(\n      (element): element is HTMLElement => element instanceof HTMLElement,\n    )\n  }\n\n  #switchTabPanel(activeTab: HTMLQdsTabElement): void {\n    const target = activeTab.shadowRoot?.querySelector('[role=\"tab\"]')\n    const tabAriaControls = target?.getAttribute('aria-controls')\n    const tabPanels = this.#getAllTabPanels()\n\n    for (const panel of tabPanels)\n      panel.hidden = tabAriaControls !== panel.getAttribute('id')\n  }\n\n  #handleTabActivation(tab: HTMLQdsTabElement): void {\n    const previousTab = this.activeTab\n    if (previousTab === tab) return\n\n    this.activeTab = tab\n\n    this.hideEmitter.emit(previousTab)\n\n    this.showEmitter.emit(tab)\n    this.#setCurrentTab(tab)\n    this.#switchTabPanel(tab)\n  }\n\n  #getTabs(): HTMLQdsTabElement[] {\n    const slot = this.host.shadowRoot?.querySelector('slot')\n    return slot\n      ? [...slot.assignedElements({ flatten: true })].filter<HTMLQdsTabElement>(\n          (element) => isEnabledTabItem(element),\n        )\n      : []\n  }\n\n  #getCurrentTab(): HTMLQdsTabElement | undefined {\n    const currentTab = this.#getTabs().find(\n      (tab) =>\n        tab.shadowRoot\n          ?.querySelector('[role=\"tab\"]')\n          ?.getAttribute('tabindex') === '0',\n    )\n    return currentTab\n  }\n\n  #setCurrentTab(tab: HTMLQdsTabElement): void {\n    const tabs = this.#getTabs()\n    for (const t of tabs) {\n      const isCurrent = t === tab\n      const target = t.shadowRoot?.querySelector('[role=\"tab\"]')\n      const closeButton = t.shadowRoot?.querySelector('.qds-target')\n\n      const isDisabled = target?.getAttribute('aria-disabled') === 'true'\n      const shouldActivateTab = isCurrent && !isDisabled\n      const tabindex = shouldActivateTab ? '0' : '-1'\n\n      if (target) {\n        target.setAttribute('tabindex', tabindex)\n        if (shouldActivateTab) this.#handleTabActivation(t)\n      }\n\n      if (closeButton) closeButton.setAttribute('tabindex', tabindex)\n    }\n  }\n\n  readonly #onClick = (event: MouseEvent): void => {\n    const { target } = event\n    if (!(target instanceof HTMLElement)) return\n    const tab = target.closest('qds-tab')\n    if (!tab || tab.disabled === true || tab.inert) return\n\n    this.#handleTabActivation(tab)\n    this.#setActiveTab(tab)\n  }\n\n  readonly #onKeyDown = (event: KeyboardEvent): void => {\n    const isVertical = this.orientation === 'vertical'\n    const MOVE_SELECTION_KEYS = isVertical\n      ? VERTICAL_MOVE_KEYS\n      : HORIZONTAL_MOVE_KEYS\n    if (!MOVE_SELECTION_KEYS.has(event.key)) return\n\n    const tabs = this.#getTabs()\n    if (tabs.length === 0) return\n\n    event.preventDefault()\n    event.stopPropagation()\n\n    const activeTab = this.#getCurrentTab()\n    let index = activeTab ? tabs.indexOf(activeTab) : 0\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n\n    let nextTab: HTMLQdsTabElement | undefined\n    do {\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          index = (isRTL ? index < tabs.length - 1 : index > 0)\n            ? index - (isRTL ? -1 : 1)\n            : isRTL\n              ? 0\n              : tabs.length - 1\n          break\n        }\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          index = (isRTL ? index > 0 : index < tabs.length - 1)\n            ? index + (isRTL ? -1 : 1)\n            : isRTL\n              ? tabs.length - 1\n              : 0\n          break\n        }\n        case 'Home': {\n          index = isRTL ? tabs.length - 1 : 0\n          break\n        }\n        case 'End': {\n          index = isRTL ? 0 : tabs.length - 1\n          break\n        }\n        default:\n      }\n      nextTab = tabs[index]\n    } while (nextTab.disabled === true)\n\n    this.#setCurrentTab(nextTab)\n\n    const target =\n      nextTab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]')\n    if (target) {\n      target.focus()\n      target.scrollIntoView()\n    }\n    this.#handleTabActivation(nextTab)\n    this.#setActiveTab(nextTab)\n  }\n\n  readonly #onMouseDown = (event: MouseEvent): void => {\n    const { target } = event\n\n    if (isEnabledTabItem(target)) this.#setCurrentTab(target)\n  }\n\n  readonly #onScroll = (): void => {\n    if (!this.#tabbar) return\n\n    const { clientWidth, scrollWidth, scrollLeft } = this.#tabbar\n\n    const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl'\n    this.disableStartArrow = scrollLeft === 0\n    this.disableEndArrow = isRTL\n      ? scrollWidth + scrollLeft <= clientWidth\n      : scrollWidth - clientWidth - scrollLeft <= 1\n  }\n\n  readonly #onViewportCrop = (): void => {\n    if (!this.#tabbar) return\n\n    const { scrollWidth, clientWidth } = this.#tabbar\n\n    if (scrollWidth > clientWidth) {\n      this.#onScroll()\n    }\n  }\n\n  readonly #onSlotchange = (): void => {\n    const tabs = this.#getTabs()\n\n    if (tabs.length > 0) this.#setCurrentTab(tabs[0])\n  }\n}\n"],"version":3}

package/dist/esm/qds-table-body.entry.js

@@ -38,7 +38,7 @@ const TableBody = class {
         __classPrivateFieldSet(this, _TableBody_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("tbody", { key: '276cc186078c0876f0c3b6c68e0ab8a05533d049', class: "qds-table-body", ...__classPrivateFieldGet(this, _TableBody_inheritedAttributes, "f") }, h("slot", { key: '6c6ac6fab64e79a4b132c7a337ef2b6ad78382c9' })));
+        return (h("tbody", { key: '2f8916cd08ec80db82a1189c992cc83902c6d517', class: "qds-table-body", ...__classPrivateFieldGet(this, _TableBody_inheritedAttributes, "f") }, h("slot", { key: 'a6f29148dcaec459b7a5a260bbb74b457f5bb82d' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/qds-table-cell.entry.js

@@ -38,7 +38,7 @@ const TableCell = class {
         __classPrivateFieldSet(this, _TableCell_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("td", { key: 'd605c52fcc8ad36575a5e9cb92cf6b58fb9fa3ed', class: "qds-table-cell", colSpan: this.colSpan, rowSpan: this.rowSpan, ...__classPrivateFieldGet(this, _TableCell_inheritedAttributes, "f") }, h("slot", { key: '4f48d6d012e41bcdceeafd4cc0e0cb9eda855460' })));
+        return (h("td", { key: '9d2d455ea9123eda65ab83a5c95a286a96b2e671', class: "qds-table-cell", colSpan: this.colSpan, rowSpan: this.rowSpan, ...__classPrivateFieldGet(this, _TableCell_inheritedAttributes, "f") }, h("slot", { key: 'fb6049d38354d5bb9636d1ce605a9bda8bfb5b45' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/qds-table-head.entry.js

@@ -38,7 +38,7 @@ const TableHead = class {
         __classPrivateFieldSet(this, _TableHead_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("thead", { key: '7dbee88b482541d1da2260e2a8beabe272f1cc63', class: "qds-table-head", ...__classPrivateFieldGet(this, _TableHead_inheritedAttributes, "f") }, h("slot", { key: '49a8f0f72bccadbfee545d8400dade2a242465d8' })));
+        return (h("thead", { key: '23e490cff0689c33d92d0fbe231f098296c05ec2', class: "qds-table-head", ...__classPrivateFieldGet(this, _TableHead_inheritedAttributes, "f") }, h("slot", { key: '6dfad826fe9a74aa3a71e2bd683c200ef17ae46a' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/qds-table-row.entry.js

@@ -38,7 +38,7 @@ const TableRow = class {
         __classPrivateFieldSet(this, _TableRow_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("tr", { key: '5d68a0c56d209dbb0dddf25a28cda66dce2a5e7b', class: "qds-table-row", ...__classPrivateFieldGet(this, _TableRow_inheritedAttributes, "f") }, h("slot", { key: '794f69764a49aa01f3d22b4797bc27b86ba8002c' })));
+        return (h("tr", { key: '9d546535247d9d49aa8b81fa12ff12f1774c84fc', class: "qds-table-row", ...__classPrivateFieldGet(this, _TableRow_inheritedAttributes, "f") }, h("slot", { key: '553098dee0b8d56593f6556b2bb7f8f046a2c0d8' })));
     }
     get host() { return getElement(this); }
 };

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

@@ -38,7 +38,7 @@ const Table = class {
         __classPrivateFieldSet(this, _Table_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("table", { key: '95d6a594ade3ff220e03900bf412a3aea6ce9e7a', class: "qds-table", ...__classPrivateFieldGet(this, _Table_inheritedAttributes, "f") }, h("slot", { key: 'b372c22b23421853c5b556e11c6031fe7932c7eb' })));
+        return (h("table", { key: 'ddab0d1320ce279f7392eef6302f0e3be6946834', class: "qds-table", ...__classPrivateFieldGet(this, _Table_inheritedAttributes, "f") }, h("slot", { key: 'e9a180f7051bbd51ce049fdea230893934ace2cb' })));
     }
     get host() { return getElement(this); }
 };

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

@@ -6,7 +6,7 @@
 import { r as registerInstance, h, F as Fragment, a as getElement } from './index-b1d6acd2.js';
 import { b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
 
-const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{text-overflow:ellipsis}.qds-sr-only,.qds-text{overflow:hidden;white-space:nowrap}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-result-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-control-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-result-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-result-success);color:var(--qds-theme-feedback-result-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{font:var(--qds-control-small-text);gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-chip-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-tag[data-size=standard]{font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-chip-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-tag[data-size=large]{font:var(--qds-control-large-text);gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-chip-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
+const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{text-overflow:ellipsis}.qds-sr-only,.qds-text{overflow:hidden;white-space:nowrap}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-message-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-control-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-message-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-message-success);color:var(--qds-theme-feedback-message-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{font:var(--qds-control-small-text);gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-chip-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-tag[data-size=standard]{font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-chip-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-tag[data-size=large]{font:var(--qds-control-large-text);gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-chip-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
 const QdsTagStyle0 = tagCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -28,7 +28,7 @@ var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) |
         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 _Tag_instances, _Tag_inheritedAttributes, _Tag_computedImportance_get, _Tag_computedSize_get, _Tag_computedStatus_get;
+var _Tag_instances, _Tag_inheritedAttributes, _Tag_computedImportance_get, _Tag_computedSize_get, _Tag_computedStatus_get, _Tag_hasBadge_get;
 const Tag = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -49,14 +49,18 @@ const Tag = class {
          * The tag's size.
          */
         this.size = 'standard';
+        /**
+         * Displays an indicator if `true`.
+         */
+        this.badge = false;
         _Tag_inheritedAttributes.set(this, {});
     }
     componentWillLoad() {
         __classPrivateFieldSet$1(this, _Tag_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("span", { key: '374627092aa5279ebaa3f84297e1157a56cca01f', class: "qds-tag", "data-importance": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedImportance_get), "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), "data-status": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedStatus_get), ...__classPrivateFieldGet$1(this, _Tag_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' && (h(Fragment, null, this.iconDescription !== undefined &&
-            this.iconDescription !== '' && (h("span", { key: '5d85fe5b675bd4211befa67ad28dd3368db98994', class: "qds-sr-only" }, this.iconDescription)), h("qds-icon", { key: 'e39f3f03240a915c72cad6143ce5b4b6fc761072', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), library: this.iconLibrary, name: this.iconName }))), h("span", { key: '1f650a5ab5ed763ba212a5f6596dce109e5a8fb5', class: "qds-text" }, this.text)));
+        return (h("span", { key: '85725dcb77777d3611e29f89858b98523a121fef', class: "qds-tag", "data-importance": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedImportance_get), "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), "data-status": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedStatus_get), ...__classPrivateFieldGet$1(this, _Tag_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' ? (h(Fragment, null, this.iconDescription !== undefined &&
+            this.iconDescription !== '' && (h("span", { class: "qds-sr-only" }, this.iconDescription)), h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), library: this.iconLibrary, name: this.iconName }))) : (__classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_hasBadge_get) && (h("qds-badge-indicator", { status: __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedStatus_get), description: this.badgeDescription, size: __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), strokeRing: true }))), h("span", { key: 'e585f7b37f91ff96586676b65d52bce026df9d10', class: "qds-text" }, this.text)));
     }
     get host() { return getElement(this); }
 };
@@ -93,10 +97,12 @@ _Tag_inheritedAttributes = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_c
             return 'neutral';
         }
     }
+}, _Tag_hasBadge_get = function _Tag_hasBadge_get() {
+    return (this.badge ?? false) && this.importance !== 'emphasized';
 };
 Tag.style = QdsTagStyle0;
 
-const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"b\"}.qds-titles.qds-has-kicker{grid-template-areas:\"c\" \"b\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"b\" \"d\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"c\" \"b\" \"d\"}.qds-has-icon{grid-template-areas:\"e b\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". c\" \"e b\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"e b\" \". d\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". c\" \"e b\" \". d\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:b}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:d}.qds-kicker{color:var(--qds-theme-kicker);grid-area:c}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:e}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap);margin:auto}[data-variant=web-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"b\"}.qds-titles.qds-has-kicker{grid-template-areas:\"c\" \"b\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"b\" \"d\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"c\" \"b\" \"d\"}.qds-has-icon{grid-template-areas:\"e b\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". c\" \"e b\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"e b\" \". d\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". c\" \"e b\" \". d\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:b}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:d}.qds-kicker{color:var(--qds-theme-kicker);grid-area:c}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:e}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -146,17 +152,15 @@ const Title = class {
         const layer = `qds-${this.layer ?? 'main'}`;
         const level = `qds-${this.level ?? 'section'}`;
         const Tag = this.tag ?? 'h2';
-        const hasIcon = this.iconName !== undefined &&
-            this.iconName !== '' &&
-            this.variant !== 'web-promo';
-        return (h("hgroup", { key: 'b72d04ef4449fe14f6a49cf6a6c2c1fcd59a72ce', "data-alignment": this.alignment ?? 'start', "data-variant": this.variant, class: {
+        const hasIcon = this.iconName !== undefined && this.iconName !== '';
+        return (h("hgroup", { key: '60cf2da13546e770f2e94cda9c033a938b987b51', "data-alignment": this.alignment ?? 'start', "data-variant": this.variant, class: {
                 [layer]: true,
                 [level]: true,
                 'qds-titles': true,
                 'qds-has-icon': hasIcon,
                 'qds-has-kicker': __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasKicker_get),
                 'qds-has-subtitle': __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasSubtitle_get),
-            }, ...__classPrivateFieldGet(this, _Title_inheritedAttributes, "f") }, h(Tag, { key: '26fbf1a16c1757c32e0a654377e531dd62581e81', class: "qds-title", "data-variant": this.variant }, h("slot", { key: 'd46e9c5c2a74fb1cc0604221e4ffc4fc95f99643' })), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasKicker_get) && h("p", { key: '72349725c3d777f4b4bc8b954d7af761101263c9', class: "qds-kicker" }, this.kicker), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasSubtitle_get) && h("p", { key: '12e38afb867ae51ae115e321fd9522f8d631e18f', class: "qds-subtitle" }, this.subtitle), hasIcon && (h("qds-icon", { key: '5b1b308f9372fc39e863e589dfc961d132b364ef', "aria-hidden": "true", class: "qds-icon", name: this.iconName, library: this.iconLibrary }))));
+            }, ...__classPrivateFieldGet(this, _Title_inheritedAttributes, "f") }, h(Tag, { key: 'b3cf8314d7abbc0ec1438660bcfa846959d96228', class: "qds-title", "data-variant": this.variant }, h("slot", { key: 'eedd8a6045cf21214cc07fa9b4fe429443282b17' })), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasKicker_get) && h("p", { key: '439ff80d64c9f4c80a2a0802032971719bbf538a', class: "qds-kicker" }, this.kicker), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasSubtitle_get) && h("p", { key: '76c9f7379a4fa0e1479e87c441756469c08adadc', class: "qds-subtitle" }, this.subtitle), hasIcon && (h("qds-icon", { key: '4b9dc344b7fa61a82db199b1253dbc137c82c284', "aria-hidden": "true", class: "qds-icon", name: this.iconName, library: this.iconLibrary }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/qds-tag_2.entry.js.map

@@ -1 +1 @@
-{"file":"qds-tag.qds-title.entry.js","mappings":"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","names":["__classPrivateFieldSet","__classPrivateFieldGet"],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx","src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-tag {\n  align-items: center;\n  border-radius: var(--qds-control-rounded-border-radius);\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  max-width: inherit;\n  min-width: inherit;\n  width: inherit;\n}\n\n.qds-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-sr-only {\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n[data-status='error'] {\n  color: var(--qds-theme-feedback-message-critical);\n}\n\n[data-status='success'] {\n  color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n  color: var(--qds-theme-feedback-message-important);\n}\n\n[data-status='info'] {\n  color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='neutral'] {\n  color: var(--qds-theme-feedback-message-neutral);\n}\n\n[data-importance='subdued'] .qds-text {\n  color: var(--qds-theme-control-text-standard);\n}\n\n[data-importance='standard'] {\n  &[data-status='error'] {\n    background-color: var(--qds-theme-feedback-message-critical-dimmed);\n  }\n\n  &[data-status='success'] {\n    background-color: var(--qds-theme-feedback-result-success-dimmed);\n  }\n\n  &[data-status='warning'] {\n    background-color: var(--qds-theme-feedback-message-important-dimmed);\n  }\n\n  &[data-status='info'] {\n    background-color: var(--qds-theme-feedback-message-informational-dimmed);\n  }\n\n  &[data-status='neutral'] {\n    background-color: var(--qds-theme-feedback-message-neutral-dimmed);\n  }\n}\n\n[data-importance='emphasized'] {\n  &[data-status='error'] {\n    background-color: var(--qds-theme-feedback-message-critical);\n    color: var(--qds-theme-feedback-message-critical-contrast);\n  }\n\n  &[data-status='success'] {\n    background-color: var(--qds-theme-feedback-result-success);\n    color: var(--qds-theme-feedback-result-success-contrast);\n  }\n\n  &[data-status='warning'] {\n    background-color: var(--qds-theme-feedback-message-important);\n    color: var(--qds-theme-feedback-message-important-contrast);\n  }\n\n  &[data-status='info'] {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &[data-status='neutral'] {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n}\n\n[data-size='small'] {\n  &.qds-tag {\n    font: var(--qds-control-small-text);\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-chip-small-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-tag {\n    font: var(--qds-control-standard-text);\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-tag {\n    font: var(--qds-control-large-text);\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-chip-large-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, Fragment, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type TagStatus = Status | 'neutral'\n\n/**\n * The `<qds-tag>` element is a static descriptor used for items that need to\n * be labeled, categorized, or organized using keywords that describe them.\n *\n * @see https://quartz.se.com/build/components/tag\n */\n@Component({\n  tag: 'qds-tag',\n  shadow: true,\n  styleUrl: 'tag.css',\n})\nexport class Tag implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The tag's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The tag's status.\n   */\n  @Prop() public readonly status?: TagStatus = 'neutral'\n\n  /**\n   * The tag's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The tag's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Provides a text description of the icon for screen readers.\n   */\n  @Prop() public readonly iconDescription?: string\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\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 #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 #computedStatus(): TagStatus {\n    switch (this.status) {\n      case 'error':\n      case 'info':\n      case 'success':\n      case 'warning': {\n        return this.status\n      }\n      default: {\n        return 'neutral'\n      }\n    }\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    return (\n      <span\n        class=\"qds-tag\"\n        data-importance={this.#computedImportance}\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        {this.iconName !== undefined && this.iconName !== '' && (\n          <>\n            {this.iconDescription !== undefined &&\n              this.iconDescription !== '' && (\n                <span class=\"qds-sr-only\">{this.iconDescription}</span>\n              )}\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          </>\n        )}\n        <span class=\"qds-text\">{this.text}</span>\n      </span>\n    )\n  }\n}\n","/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-titles {\n  display: grid;\n  grid-template-areas: 'title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      'kicker'\n      'title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'title'\n      'subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      'kicker'\n      'title'\n      'subtitle';\n  }\n}\n\n.qds-has-icon {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: 'icon title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      '.    kicker'\n      'icon title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'icon title'\n      '.    subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      '.    kicker'\n      'icon title'\n      '.    subtitle';\n  }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n  margin-block: 0;\n}\n\n.qds-title {\n  grid-area: title;\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  grid-area: subtitle;\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  grid-area: kicker;\n  color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n  grid-area: icon;\n  align-content: center;\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-titles-icon-size);\n      height: var(--qds-main-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-subsection-titles-icon-size);\n      height: var(--qds-main-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-panel {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-titles-icon-size);\n      height: var(--qds-panel-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-section-titles-icon-size);\n      height: var(--qds-panel-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-subsection-titles-icon-size);\n      height: var(--qds-panel-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-navigation {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-section-titles-icon-size);\n      height: var(--qds-navigation-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-subsection-titles-icon-size);\n      height: var(--qds-navigation-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-popup {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-titles-icon-size);\n      height: var(--qds-popup-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-section-titles-icon-size);\n      height: var(--qds-popup-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-subsection-titles-icon-size);\n      height: var(--qds-popup-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-accessory {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-titles-icon-size);\n      height: var(--qds-accessory-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-section-titles-icon-size);\n      height: var(--qds-accessory-section-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-variant='web-promo'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-hero-titles-gap);\n      margin: auto;\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-hero-title);\n    }\n  }\n}\n\n[data-alignment='start'] {\n  text-align: start;\n}\n\n[data-alignment='center'] {\n  text-align: center;\n}\n\n[data-alignment='end'] {\n  text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-display-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-display-title);\n    }\n  }\n}\n\n[data-variant='web-main-subsection-card'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-card-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-card-title);\n    }\n  }\n}\n\n[data-variant='web-main-section-hero'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-hero-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-hero-title);\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n  | 'web-main-section-display'\n  | 'web-main-section-hero'\n  | 'web-main-subsection-card'\n  | 'web-promo'\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n  tag: 'qds-title',\n  shadow: true,\n  styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n  /**\n   * The alignment of the title.\n   */\n  @Prop() public readonly alignment?: Alignment = 'start'\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer?: Layer = 'main'\n\n  @Prop() public readonly level?: Level = 'section'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * HTML tag to use to render the title.\n   */\n  @Prop() public readonly tag?: Tag = 'h2'\n\n  /**\n   * The title's variant.\n   */\n  @Prop() public readonly variant?: TitleVariant\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  get #hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  get #hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    const layer = `qds-${this.layer ?? 'main'}`\n    const level = `qds-${this.level ?? 'section'}`\n    const Tag = this.tag ?? 'h2'\n    const hasIcon =\n      this.iconName !== undefined &&\n      this.iconName !== '' &&\n      this.variant !== 'web-promo'\n\n    return (\n      <hgroup\n        data-alignment={this.alignment ?? 'start'}\n        data-variant={this.variant}\n        class={{\n          [layer]: true,\n          [level]: true,\n          'qds-titles': true,\n          'qds-has-icon': hasIcon,\n          'qds-has-kicker': this.#hasKicker,\n          'qds-has-subtitle': this.#hasSubtitle,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        <Tag class=\"qds-title\" data-variant={this.variant}>\n          <slot />\n        </Tag>\n        {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n        {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n        {hasIcon && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon\"\n            name={this.iconName}\n            library={this.iconLibrary}\n          />\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}
+{"file":"qds-tag.qds-title.entry.js","mappings":"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","names":["__classPrivateFieldSet","__classPrivateFieldGet"],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx","src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-tag {\n  align-items: center;\n  border-radius: var(--qds-control-rounded-border-radius);\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  max-width: inherit;\n  min-width: inherit;\n  width: inherit;\n}\n\n.qds-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-sr-only {\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n[data-status='error'] {\n  color: var(--qds-theme-feedback-message-critical);\n}\n\n[data-status='success'] {\n  color: var(--qds-theme-feedback-message-success);\n}\n\n[data-status='warning'] {\n  color: var(--qds-theme-feedback-message-important);\n}\n\n[data-status='info'] {\n  color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='neutral'] {\n  color: var(--qds-theme-feedback-message-neutral);\n}\n\n[data-importance='subdued'] .qds-text {\n  color: var(--qds-theme-control-text-standard);\n}\n\n[data-importance='standard'] {\n  &[data-status='error'] {\n    background-color: var(--qds-theme-feedback-message-critical-dimmed);\n  }\n\n  &[data-status='success'] {\n    background-color: var(--qds-theme-feedback-message-success-dimmed);\n  }\n\n  &[data-status='warning'] {\n    background-color: var(--qds-theme-feedback-message-important-dimmed);\n  }\n\n  &[data-status='info'] {\n    background-color: var(--qds-theme-feedback-message-informational-dimmed);\n  }\n\n  &[data-status='neutral'] {\n    background-color: var(--qds-theme-feedback-message-neutral-dimmed);\n  }\n}\n\n[data-importance='emphasized'] {\n  &[data-status='error'] {\n    background-color: var(--qds-theme-feedback-message-critical);\n    color: var(--qds-theme-feedback-message-critical-contrast);\n  }\n\n  &[data-status='success'] {\n    background-color: var(--qds-theme-feedback-message-success);\n    color: var(--qds-theme-feedback-message-success-contrast);\n  }\n\n  &[data-status='warning'] {\n    background-color: var(--qds-theme-feedback-message-important);\n    color: var(--qds-theme-feedback-message-important-contrast);\n  }\n\n  &[data-status='info'] {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &[data-status='neutral'] {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n}\n\n[data-size='small'] {\n  &.qds-tag {\n    font: var(--qds-control-small-text);\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-chip-small-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-tag {\n    font: var(--qds-control-standard-text);\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-tag {\n    font: var(--qds-control-large-text);\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-chip-large-padding-horizontal);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, Fragment, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type TagStatus = Status | 'neutral'\n\n/**\n * The `<qds-tag>` element is a static descriptor used for items that need to\n * be labeled, categorized, or organized using keywords that describe them.\n *\n * @see https://quartz.se.com/build/components/tag\n */\n@Component({\n  tag: 'qds-tag',\n  shadow: true,\n  styleUrl: 'tag.css',\n})\nexport class Tag implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The tag's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The tag's status.\n   */\n  @Prop() public readonly status?: TagStatus = 'neutral'\n\n  /**\n   * The tag's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The tag's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Provides a text description of the icon for screen readers.\n   */\n  @Prop() public readonly iconDescription?: string\n\n  /**\n   * Displays an indicator if `true`.\n   */\n  @Prop() public readonly badge?: boolean = false\n\n  /**\n   * The indicator badge's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly badgeDescription?: string\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\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 #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 #computedStatus(): TagStatus {\n    switch (this.status) {\n      case 'error':\n      case 'info':\n      case 'success':\n      case 'warning': {\n        return this.status\n      }\n      default: {\n        return 'neutral'\n      }\n    }\n  }\n\n  get #hasBadge(): boolean {\n    return (this.badge ?? false) && this.importance !== 'emphasized'\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    return (\n      <span\n        class=\"qds-tag\"\n        data-importance={this.#computedImportance}\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        {this.iconName !== undefined && this.iconName !== '' ? (\n          <>\n            {this.iconDescription !== undefined &&\n              this.iconDescription !== '' && (\n                <span class=\"qds-sr-only\">{this.iconDescription}</span>\n              )}\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          </>\n        ) : (\n          this.#hasBadge && (\n            <qds-badge-indicator\n              status={this.#computedStatus}\n              description={this.badgeDescription}\n              size={this.#computedSize}\n              strokeRing\n            />\n          )\n        )}\n        <span class=\"qds-text\">{this.text}</span>\n      </span>\n    )\n  }\n}\n","/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-titles {\n  display: grid;\n  grid-template-areas: 'title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      'kicker'\n      'title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'title'\n      'subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      'kicker'\n      'title'\n      'subtitle';\n  }\n}\n\n.qds-has-icon {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: 'icon title';\n\n  &.qds-has-kicker {\n    grid-template-areas:\n      '.    kicker'\n      'icon title';\n  }\n\n  &.qds-has-subtitle {\n    grid-template-areas:\n      'icon title'\n      '.    subtitle';\n  }\n\n  &.qds-has-kicker.qds-has-subtitle {\n    grid-template-areas:\n      '.    kicker'\n      'icon title'\n      '.    subtitle';\n  }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n  margin-block: 0;\n}\n\n.qds-title {\n  grid-area: title;\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  grid-area: subtitle;\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  grid-area: kicker;\n  color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n  grid-area: icon;\n  align-content: center;\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-titles-icon-size);\n      height: var(--qds-main-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-subsection-titles-icon-size);\n      height: var(--qds-main-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-panel {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-titles-icon-size);\n      height: var(--qds-panel-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-section-titles-icon-size);\n      height: var(--qds-panel-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-panel-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-panel-subsection-titles-icon-size);\n      height: var(--qds-panel-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-navigation {\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-section-titles-icon-size);\n      height: var(--qds-navigation-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-navigation-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-navigation-subsection-titles-icon-size);\n      height: var(--qds-navigation-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-popup {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-titles-icon-size);\n      height: var(--qds-popup-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-section-titles-icon-size);\n      height: var(--qds-popup-section-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-popup-subsection-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-popup-subsection-titles-icon-size);\n      height: var(--qds-popup-subsection-titles-icon-crop-height);\n    }\n  }\n}\n\n.qds-accessory {\n  &.qds-root {\n    &.qds-titles {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-titles-icon-size);\n      height: var(--qds-accessory-titles-icon-crop-height);\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-accessory-section-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    & .qds-icon {\n      width: var(--qds-accessory-section-titles-icon-size);\n      height: var(--qds-accessory-section-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-variant='web-main-section-promo'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-promo-titles-gap);\n      margin: auto;\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-promo-title);\n    }\n\n    & .qds-subtitle {\n      font: var(--qds-main-section-promo-subtitle);\n    }\n\n    & .qds-kicker {\n      font: var(--qds-main-section-promo-kicker);\n    }\n\n    &.qds-has-icon {\n      gap: var(--qds-main-section-promo-titles-gap)\n        var(--qds-main-section-promo-titles-icon-gap);\n    }\n\n    & .qds-icon {\n      width: var(--qds-main-section-promo-titles-icon-size);\n      height: var(--qds-main-section-promo-titles-icon-crop-height);\n    }\n  }\n}\n\n[data-alignment='start'] {\n  text-align: start;\n}\n\n[data-alignment='center'] {\n  text-align: center;\n}\n\n[data-alignment='end'] {\n  text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-display-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-display-title);\n    }\n  }\n}\n\n[data-variant='web-main-subsection-card'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-subsection-card-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-subsection-card-title);\n    }\n  }\n}\n\n[data-variant='web-main-section-hero'] {\n  &:is(.qds-root, .qds-section, .qds-subsection) {\n    &.qds-titles {\n      gap: var(--qds-main-section-hero-titles-gap);\n    }\n\n    & .qds-title {\n      font: var(--qds-main-section-hero-title);\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n  | 'web-main-section-display'\n  | 'web-main-section-hero'\n  | 'web-main-section-promo'\n  | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n  tag: 'qds-title',\n  shadow: true,\n  styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n  /**\n   * The alignment of the title.\n   */\n  @Prop() public readonly alignment?: Alignment = 'start'\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer?: Layer = 'main'\n\n  @Prop() public readonly level?: Level = 'section'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * HTML tag to use to render the title.\n   */\n  @Prop() public readonly tag?: Tag = 'h2'\n\n  /**\n   * The title's variant.\n   */\n  @Prop() public readonly variant?: TitleVariant\n\n  @Element() private readonly host!: HTMLElement\n\n  #inheritedAttributes: Attributes = {}\n\n  get #hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  get #hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public render() {\n    const layer = `qds-${this.layer ?? 'main'}`\n    const level = `qds-${this.level ?? 'section'}`\n    const Tag = this.tag ?? 'h2'\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return (\n      <hgroup\n        data-alignment={this.alignment ?? 'start'}\n        data-variant={this.variant}\n        class={{\n          [layer]: true,\n          [level]: true,\n          'qds-titles': true,\n          'qds-has-icon': hasIcon,\n          'qds-has-kicker': this.#hasKicker,\n          'qds-has-subtitle': this.#hasSubtitle,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.#inheritedAttributes}\n      >\n        <Tag class=\"qds-title\" data-variant={this.variant}>\n          <slot />\n        </Tag>\n        {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n        {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n        {hasIcon && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon\"\n            name={this.iconName}\n            library={this.iconLibrary}\n          />\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}