@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.15

package/components/qds-textarea.js.map

@@ -1 +1 @@
-{"file":"qds-textarea.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=qds-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  resize: both;\n}\n\n.textarea {\n  background-color: var(--qds-theme-control-input-background);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  resize: inherit;\n  width: 100%;\n  height: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  padding-block: var(--qds-control-small-padding-auto-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  padding-block: var(--qds-control-standard-padding-auto-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  padding-block: var(--qds-control-large-padding-auto-height);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  EnterKeyHint,\n  InputMode,\n  SelectDirection,\n  Value,\n} from '../controls'\n\nexport type TextAreaAutoComplete = 'off' | 'on'\nexport type TextAreaSize = 'large' | 'small' | 'standard'\nexport type Wrap = 'hard' | 'off' | 'soft'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-textarea>` element represents a multi-line plain-text editing\n * control, useful when you want to allow users to enter a sizeable amount of\n * free-form text, for example a comment on a review or feedback form.\n *\n * @see https://quartz.se.com/build/components/textarea\n */\n@Component({\n  tag: 'qds-textarea',\n  scoped: true,\n  styleUrl: 'textarea.css',\n})\nexport class TextArea implements ComponentInterface {\n  /**\n   * Defines if the textarea is in an invalid state. Validity is determined by\n   * attributes such as `required`, `minlength`, and `maxlength` using\n   * [constraint validation][].\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid?: boolean\n\n  /**\n   * The textarea's size.\n   *\n   * > **_NOTE:_** The native [`size` HTML attribute][] is not supported. CSS\n   * `width` should be used instead if this functionality is needed.\n   *\n   * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop({ reflect: true }) public readonly size: TextAreaSize = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Indicates whether the value of the textarea can be automatically completed\n   * by the browser. Possible values:\n   *\n   * `off`: The user must explicitly enter a value into this field for every\n   * use, or the document provides its own auto-completion method; the browser\n   * does not automatically complete the entry.\n   * `on`: The browser can automatically complete the value based on values\n   * that the user has entered during previous uses.\n   *\n   * If the `autocomplete` attribute is not specified on a `<qds-textarea>`\n   * element, then the browser uses the `autocomplete` attribute value of the\n   * `<qds-textarea>` element's form owner. The form owner is either the\n   * [`<form>`][] element that this `<qds-textarea>` element is a descendant of\n   * or the form element whose `id` is specified by the `form` attribute of the\n   * `qds-textarea` element. For more information, see the [`autocomplete`]\n   * attribute in [`<form>`][].\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Element/form#autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: TextAreaAutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * The visible width of the text control, in average character widths. If it\n   * is specified, it must be a positive integer. If it is not specified, the\n   * default value is `20`.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public readonly cols?: number\n\n  /**\n   * Prevents the input from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`][] element to associate the input with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-textarea>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-textarea>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the textarea. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the textarea\n   * has no maximum length.\n   *\n   * The textarea will fail [constraint validation][] if the length of the text\n   * entered into the field is greater than `maxlength` UTF-16 code units long.\n   * By default, browsers prevent users from entering more characters than\n   * allowed by the `maxlength` attribute. See [Client-side validation][] for\n   * more information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the textarea. This must be an non-negative integer value smaller than\n   * or equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the textarea has no minimum\n   * length.\n   *\n   * The textarea will fail [constraint validation][] if the length of the text\n   * entered into the field is fewer than `minlength` UTF-16 code units long,\n   * preventing form submission. See [Client-side validation][] for more\n   * information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * The name of the control, which is submitted with the form data. An\n   * incrementing textarea ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-textarea-${autoIncrementingId}`\n\n  /**\n   * Text that appears in the textarea when it has no value set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * The value of the textarea cannot be edited.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'readonly' }) public readonly readOnly?: boolean\n\n  /**\n   * A value must be specified for the textarea before the owning form can be\n   * submitted.\n   *\n   * See [Client-side validation][] and the [HTML attribute: `required`][] for\n   * more information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The number of visible text lines for the control. If it is specified, it\n   * must be a positive integer. If it is not specified, the default value is\n   * `2`.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public readonly rows?: number\n\n  /**\n   * Defines whether the textarea may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * The value of the textarea.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Indicates how the control should wrap the value for form submission.\n   * Possible values are:\n   *\n   * - `hard`: The browser automatically inserts line breaks (`CR+LF`) so that\n   * each line is no longer than the width of the control; the `cols` attribute\n   * must be specified for this to take effect\n   * - `soft`: The browser ensures that all line breaks in the entered value\n   * are a `CR+LF` pair, but no additional line breaks are added to the value.\n   * - `off`: Like `soft` but changes appearance to `white-space: pre` so line\n   * segments exceeding `cols` are not wrapped and the `<qds-textarea>` becomes\n   * horizontally scrollable.\n   *\n   * If this attribute is not specified, `soft` is its default value.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public wrap?: Wrap\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the textarea's value is committed by the\n   * user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the textarea gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the textarea's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsTextareaElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private textarea?: HTMLTextAreaElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  /**\n   * Returns true if the element's value passes validity checks; otherwise,\n   * returns false, fires an invalid event at the element, and (if the event\n   * isn't canceled) reports the problem to the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.textarea)\n\n    return this.textarea.reportValidity()\n  }\n\n  /**\n   * Selects the entire content of the `<qds-textarea>` element if the\n   * element's content is selectable.\n   */\n  @Method()\n  public async select(): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.select()\n  }\n\n  /**\n   * Sets a custom validity message for the textarea. If this message is not\n   * the empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setCustomValidity(message)\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  /**\n   * Sets the contents of the specified range of characters in the textarea\n   * element to a given string.\n   *\n   * @param replacement The string to insert.\n   * @param start The 0-based index of the first character to replace. Defaults to the current selectionStart value (the start of the user's current selection).\n   * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).\n   * @param selectionMode A string defining how the selection should be set after the text has been replaced. Possible values:\n   *\n   * - `\"select\"` selects the newly inserted text.\n   * - `\"start\"` moves the selection to just before the inserted text.\n   * - `\"end\"` moves the selection to just after the inserted text.\n   * - `\"preserve\"` attempts to preserve the selection.\n   */\n  @Method()\n  public async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode: SelectionMode = 'preserve',\n  ): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  /**\n   * Selects the specified range of characters within the textarea.\n   *\n   * @param start The offset into the input for the start of the selection.\n   * @param end The offset into the input for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  @Method()\n  public async setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: SelectDirection,\n  ): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setSelectionRange(start, end, direction)\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.textarea)\n\n    // Disabled inputs are always valid, so we need to recheck validity when\n    // the state changes.\n    this.textarea.disabled = this.computedDisabled\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.textarea)\n\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <textarea\n        aria-invalid={this.invalid ?? false ? 'true' : 'false'}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"textarea\"\n        cols={this.cols}\n        data-size={this.size}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        form={this.form}\n        inputMode={this.inputmode}\n        maxLength={this.maxLength}\n        minLength={this.minLength}\n        name={this.name}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        onInvalid={this.onInvalid}\n        placeholder={this.placeholder}\n        readOnly={this.readOnly}\n        ref={this.ref}\n        required={this.required}\n        rows={this.rows}\n        spellcheck={this.spellCheck}\n        value={this.value ?? undefined}\n        wrap={this.wrap}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (textarea?: HTMLTextAreaElement): void => {\n    this.textarea = textarea\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    invariant(this.textarea)\n\n    this.value = this.textarea.value\n    this.changeEmitter.emit()\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.textarea)\n\n    this.value = this.textarea.value\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}
+{"file":"qds-textarea.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=qds-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  resize: both;\n}\n\n.qds-textarea {\n  background-color: var(--qds-theme-control-input-background);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  resize: inherit;\n  width: 100%;\n  height: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  padding-block: var(--qds-control-small-padding-auto-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  padding-block: var(--qds-control-standard-padding-auto-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  padding-block: var(--qds-control-large-padding-auto-height);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  EnterKeyHint,\n  InputMode,\n  SelectDirection,\n  Value,\n} from '../controls'\n\nexport type TextAreaAutoComplete = 'off' | 'on'\nexport type TextAreaSize = 'large' | 'small' | 'standard'\nexport type Wrap = 'hard' | 'off' | 'soft'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-textarea>` element represents a multi-line plain-text editing\n * control, useful when you want to allow users to enter a sizeable amount of\n * free-form text, for example a comment on a review or feedback form.\n *\n * @see https://quartz.se.com/build/components/textarea\n */\n@Component({\n  tag: 'qds-textarea',\n  scoped: true,\n  styleUrl: 'textarea.css',\n})\nexport class TextArea implements ComponentInterface {\n  /**\n   * Defines if the textarea is in an invalid state. Validity is determined by\n   * attributes such as `required`, `minlength`, and `maxlength` using\n   * [constraint validation][].\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid?: boolean\n\n  /**\n   * The textarea's size.\n   *\n   * > **_NOTE:_** The native [`size` HTML attribute][] is not supported. CSS\n   * `width` should be used instead if this functionality is needed.\n   *\n   * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop({ reflect: true }) public readonly size: TextAreaSize = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Indicates whether the value of the textarea can be automatically completed\n   * by the browser. Possible values:\n   *\n   * `off`: The user must explicitly enter a value into this field for every\n   * use, or the document provides its own auto-completion method; the browser\n   * does not automatically complete the entry.\n   * `on`: The browser can automatically complete the value based on values\n   * that the user has entered during previous uses.\n   *\n   * If the `autocomplete` attribute is not specified on a `<qds-textarea>`\n   * element, then the browser uses the `autocomplete` attribute value of the\n   * `<qds-textarea>` element's form owner. The form owner is either the\n   * [`<form>`][] element that this `<qds-textarea>` element is a descendant of\n   * or the form element whose `id` is specified by the `form` attribute of the\n   * `qds-textarea` element. For more information, see the [`autocomplete`]\n   * attribute in [`<form>`][].\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Element/form#autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: TextAreaAutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * The visible width of the text control, in average character widths. If it\n   * is specified, it must be a positive integer. If it is not specified, the\n   * default value is `20`.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public readonly cols?: number\n\n  /**\n   * Prevents the input from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`][] element to associate the input with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-textarea>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-textarea>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the textarea. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the textarea\n   * has no maximum length.\n   *\n   * The textarea will fail [constraint validation][] if the length of the text\n   * entered into the field is greater than `maxlength` UTF-16 code units long.\n   * By default, browsers prevent users from entering more characters than\n   * allowed by the `maxlength` attribute. See [Client-side validation][] for\n   * more information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the textarea. This must be an non-negative integer value smaller than\n   * or equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the textarea has no minimum\n   * length.\n   *\n   * The textarea will fail [constraint validation][] if the length of the text\n   * entered into the field is fewer than `minlength` UTF-16 code units long,\n   * preventing form submission. See [Client-side validation][] for more\n   * information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * The name of the control, which is submitted with the form data. An\n   * incrementing textarea ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-textarea-${autoIncrementingId}`\n\n  /**\n   * Text that appears in the textarea when it has no value set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * The value of the textarea cannot be edited.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'readonly' }) public readonly readOnly?: boolean\n\n  /**\n   * A value must be specified for the textarea before the owning form can be\n   * submitted.\n   *\n   * See [Client-side validation][] and the [HTML attribute: `required`][] for\n   * more information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The number of visible text lines for the control. If it is specified, it\n   * must be a positive integer. If it is not specified, the default value is\n   * `2`.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public readonly rows?: number\n\n  /**\n   * Defines whether the textarea may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * The value of the textarea.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Indicates how the control should wrap the value for form submission.\n   * Possible values are:\n   *\n   * - `hard`: The browser automatically inserts line breaks (`CR+LF`) so that\n   * each line is no longer than the width of the control; the `cols` attribute\n   * must be specified for this to take effect\n   * - `soft`: The browser ensures that all line breaks in the entered value\n   * are a `CR+LF` pair, but no additional line breaks are added to the value.\n   * - `off`: Like `soft` but changes appearance to `white-space: pre` so line\n   * segments exceeding `cols` are not wrapped and the `<qds-textarea>` becomes\n   * horizontally scrollable.\n   *\n   * If this attribute is not specified, `soft` is its default value.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public wrap?: Wrap\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the textarea's value is committed by the\n   * user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the textarea gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the textarea's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsTextareaElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private textarea?: HTMLTextAreaElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  /**\n   * Returns true if the element's value passes validity checks; otherwise,\n   * returns false, fires an invalid event at the element, and (if the event\n   * isn't canceled) reports the problem to the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.textarea)\n\n    return this.textarea.reportValidity()\n  }\n\n  /**\n   * Selects the entire content of the `<qds-textarea>` element if the\n   * element's content is selectable.\n   */\n  @Method()\n  public async select(): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.select()\n  }\n\n  /**\n   * Sets a custom validity message for the textarea. If this message is not\n   * the empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setCustomValidity(message)\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  /**\n   * Sets the contents of the specified range of characters in the textarea\n   * element to a given string.\n   *\n   * @param replacement The string to insert.\n   * @param start The 0-based index of the first character to replace. Defaults to the current selectionStart value (the start of the user's current selection).\n   * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).\n   * @param selectionMode A string defining how the selection should be set after the text has been replaced. Possible values:\n   *\n   * - `\"select\"` selects the newly inserted text.\n   * - `\"start\"` moves the selection to just before the inserted text.\n   * - `\"end\"` moves the selection to just after the inserted text.\n   * - `\"preserve\"` attempts to preserve the selection.\n   */\n  @Method()\n  public async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode: SelectionMode = 'preserve',\n  ): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  /**\n   * Selects the specified range of characters within the textarea.\n   *\n   * @param start The offset into the input for the start of the selection.\n   * @param end The offset into the input for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  @Method()\n  public async setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: SelectDirection,\n  ): Promise<void> {\n    invariant(this.textarea)\n\n    this.textarea.setSelectionRange(start, end, direction)\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.textarea)\n\n    // Disabled inputs are always valid, so we need to recheck validity when\n    // the state changes.\n    this.textarea.disabled = this.computedDisabled\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.textarea)\n\n    this.invalid = !this.textarea.checkValidity()\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <textarea\n        aria-invalid={this.invalid ?? false ? 'true' : 'false'}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"qds-textarea\"\n        cols={this.cols}\n        data-size={this.size}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        form={this.form}\n        inputMode={this.inputmode}\n        maxLength={this.maxLength}\n        minLength={this.minLength}\n        name={this.name}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        onInvalid={this.onInvalid}\n        placeholder={this.placeholder}\n        readOnly={this.readOnly}\n        ref={this.ref}\n        required={this.required}\n        rows={this.rows}\n        spellcheck={this.spellCheck}\n        value={this.value ?? undefined}\n        wrap={this.wrap}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (textarea?: HTMLTextAreaElement): void => {\n    this.textarea = textarea\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    invariant(this.textarea)\n\n    this.value = this.textarea.value\n    this.changeEmitter.emit()\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.textarea)\n\n    this.value = this.textarea.value\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}

package/components/qds-title.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const titleCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.titles,.title{display:flex}.titles{flex-direction:column}.title,.subtitle,.kicker{margin-block:0}.icon{flex-shrink:0}.title{font-weight:normal;font-weight:initial;font-size:medium;font-size:initial;color:var(--qds-theme-title)}.subtitle{color:var(--qds-theme-subtitle)}.kicker{color:var(--qds-theme-kicker);order:-1}.subtitle,.kicker{word-wrap:break-word}.main.section.titles,.main.section.title{gap:var(--qds-main-section-titles-gap)}.main.section.title{font:var(--qds-main-section-title)}.main.section.title .icon{--qds-main-section-title-line-height:2rem;width:var(--qds-main-section-titles-icon-size);height:2rem;height:var(--qds-main-section-title-line-height)}.main.section.subtitle{font:var(--qds-main-section-subtitle)}.main.section.kicker{font:var(--qds-main-section-kicker)}.main.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.main.section.has-icon-end{-webkit-padding-end:calc(\n        0px +\n          0px\n      );padding-inline-end:calc(\n        0px +\n          0px\n      );-webkit-padding-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.main.subsection.titles,.main.subsection.title{gap:var(--qds-main-subsection-titles-gap)}.main.subsection.title{font:var(--qds-main-subsection-title)}.main.subsection.title .icon{--qds-main-subsection-title-line-height:1.5rem;width:var(--qds-main-subsection-titles-icon-size);height:1.5rem;height:var(--qds-main-subsection-title-line-height)}.main.subsection.subtitle{font:var(--qds-main-subsection-subtitle)}.main.subsection.kicker{font:var(--qds-main-subsection-kicker)}.main.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      )}.panel.root.titles,.panel.root.title{gap:var(--qds-panel-titles-gap)}.panel.root.title{font:var(--qds-panel-title)}.panel.root.title .icon{--qds-panel-title-line-height:2rem;width:var(--qds-panel-titles-icon-size);height:2rem;height:var(--qds-panel-title-line-height)}.panel.root.subtitle{font:var(--qds-panel-subtitle)}.panel.root.kicker{font:var(--qds-panel-kicker)}.panel.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      )}.panel.section.titles,.panel.section.title{gap:var(--qds-panel-section-titles-gap)}.panel.section.title{font:var(--qds-panel-section-title)}.panel.section.title .icon{--qds-panel-section-title-line-height:1.5rem;width:var(--qds-panel-section-titles-icon-size);height:1.5rem;height:var(--qds-panel-section-title-line-height)}.panel.section.subtitle{font:var(--qds-panel-section-subtitle)}.panel.section.kicker{font:var(--qds-panel-section-kicker)}.panel.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      )}.panel.subsection.titles,.panel.subsection.title{gap:var(--qds-panel-subsection-titles-gap)}.panel.subsection.title{font:var(--qds-panel-subsection-title)}.panel.subsection.title .icon{--qds-panel-subsection-title-line-height:1.25rem;width:var(--qds-panel-subsection-titles-icon-size);height:1.25rem;height:var(--qds-panel-subsection-title-line-height)}.panel.subsection.subtitle{font:var(--qds-panel-subsection-subtitle)}.panel.subsection.kicker{font:var(--qds-panel-subsection-kicker)}.panel.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      )}.navigation.section.titles,.navigation.section.title{gap:var(--qds-navigation-section-titles-gap)}.navigation.section.title{font:var(--qds-navigation-section-title)}.navigation.section.title .icon{--qds-navigation-section-title-line-height:1.5rem;width:var(--qds-navigation-section-titles-icon-size);height:1.5rem;height:var(--qds-navigation-section-title-line-height)}.navigation.section.subtitle{font:var(--qds-navigation-section-subtitle)}.navigation.section.kicker{font:var(--qds-navigation-section-kicker)}.navigation.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      )}.navigation.subsection.titles,.navigation.subsection.title{gap:var(--qds-navigation-subsection-titles-gap)}.navigation.subsection.title{font:var(--qds-navigation-subsection-title)}.navigation.subsection.title .icon{--qds-navigation-subsection-title-line-height:1.25rem;width:var(--qds-navigation-subsection-titles-icon-size);height:1.25rem;height:var(--qds-navigation-subsection-title-line-height)}.navigation.subsection.subtitle{font:var(--qds-navigation-subsection-subtitle)}.navigation.subsection.kicker{font:var(--qds-navigation-subsection-kicker)}.navigation.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      )}.popup.root.titles,.popup.root.title{gap:var(--qds-popup-titles-gap)}.popup.root.title{font:var(--qds-popup-title)}.popup.root.title .icon{--qds-popup-title-line-height:1.75rem;width:var(--qds-popup-titles-icon-size);height:1.75rem;height:var(--qds-popup-title-line-height)}.popup.root.subtitle{font:var(--qds-popup-subtitle)}.popup.root.kicker{font:var(--qds-popup-kicker)}.popup.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      )}.popup.section.titles,.popup.section.title{gap:var(--qds-popup-section-titles-gap)}.popup.section.title{font:var(--qds-popup-section-title)}.popup.section.title .icon{--qds-popup-section-title-line-height:1.5rem;width:var(--qds-popup-section-titles-icon-size);height:1.5rem;height:var(--qds-popup-section-title-line-height)}.popup.section.subtitle{font:var(--qds-popup-section-subtitle)}.popup.section.kicker{font:var(--qds-popup-section-kicker)}.popup.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      )}.popup.subsection.titles,.popup.subsection.title{gap:var(--qds-popup-subsection-titles-gap)}.popup.subsection.title{font:var(--qds-popup-subsection-title)}.popup.subsection.title .icon{--qds-popup-subsection-title-line-height:1.25rem;width:var(--qds-popup-subsection-titles-icon-size);height:1.25rem;height:var(--qds-popup-subsection-title-line-height)}.popup.subsection.subtitle{font:var(--qds-popup-subsection-subtitle)}.popup.subsection.kicker{font:var(--qds-popup-subsection-kicker)}.popup.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      )}.accessory.root.titles,.accessory.root.title{gap:var(--qds-accessory-titles-gap)}.accessory.root.title{font:var(--qds-accessory-title)}.accessory.root.title .icon{--qds-accessory-title-line-height:1.5rem;width:var(--qds-accessory-titles-icon-size);height:1.5rem;height:var(--qds-accessory-title-line-height)}.accessory.root.subtitle{font:var(--qds-accessory-subtitle)}.accessory.root.kicker{font:var(--qds-accessory-kicker)}.accessory.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      )}.accessory.section.titles,.accessory.section.title{gap:var(--qds-accessory-section-titles-gap)}.accessory.section.title{font:var(--qds-accessory-section-title)}.accessory.section.title .icon{--qds-accessory-section-title-line-height:1.25rem;width:var(--qds-accessory-section-titles-icon-size);height:1.25rem;height:var(--qds-accessory-section-title-line-height)}.accessory.section.subtitle{font:var(--qds-accessory-section-subtitle)}.accessory.section.kicker{font:var(--qds-accessory-section-kicker)}.accessory.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      )}";
+const titleCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.qds-titles,.qds-title{display:flex}.qds-titles{flex-direction:column}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-icon{flex-shrink:0}.qds-title{font-weight:normal;font-weight:initial;font-size:medium;font-size:initial;color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-subtitle,.qds-kicker{word-wrap:break-word}.qds-main.qds-section.qds-titles,.qds-main.qds-section.qds-title{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section.qds-title .qds-icon{--qds-main-section-title-line-height:2rem;width:var(--qds-main-section-titles-icon-size);height:2rem;height:var(--qds-main-section-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.qds-main.qds-section.qds-has-icon-end{-webkit-padding-end:calc(\n        0px +\n          0px\n      );padding-inline-end:calc(\n        0px +\n          0px\n      );-webkit-padding-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.qds-main.qds-subsection.qds-titles,.qds-main.qds-subsection.qds-title{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection.qds-title .qds-icon{--qds-main-subsection-title-line-height:1.5rem;width:var(--qds-main-subsection-titles-icon-size);height:1.5rem;height:var(--qds-main-subsection-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      )}.qds-panel.qds-root.qds-titles,.qds-panel.qds-root.qds-title{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root.qds-title .qds-icon{--qds-panel-title-line-height:2rem;width:var(--qds-panel-titles-icon-size);height:2rem;height:var(--qds-panel-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      )}.qds-panel.qds-section.qds-titles,.qds-panel.qds-section.qds-title{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section.qds-title .qds-icon{--qds-panel-section-title-line-height:1.5rem;width:var(--qds-panel-section-titles-icon-size);height:1.5rem;height:var(--qds-panel-section-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      )}.qds-panel.qds-subsection.qds-titles,.qds-panel.qds-subsection.qds-title{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection.qds-title .qds-icon{--qds-panel-subsection-title-line-height:1.25rem;width:var(--qds-panel-subsection-titles-icon-size);height:1.25rem;height:var(--qds-panel-subsection-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      )}.qds-navigation.qds-section.qds-titles,.qds-navigation.qds-section.qds-title{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section.qds-title .qds-icon{--qds-navigation-section-title-line-height:1.5rem;width:var(--qds-navigation-section-titles-icon-size);height:1.5rem;height:var(--qds-navigation-section-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      )}.qds-navigation.qds-subsection.qds-titles,.qds-navigation.qds-subsection.qds-title{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection.qds-title .qds-icon{--qds-navigation-subsection-title-line-height:1.25rem;width:var(--qds-navigation-subsection-titles-icon-size);height:1.25rem;height:var(--qds-navigation-subsection-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      )}.qds-popup.qds-root.qds-titles,.qds-popup.qds-root.qds-title{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root.qds-title .qds-icon{--qds-popup-title-line-height:1.75rem;width:var(--qds-popup-titles-icon-size);height:1.75rem;height:var(--qds-popup-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      )}.qds-popup.qds-section.qds-titles,.qds-popup.qds-section.qds-title{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section.qds-title .qds-icon{--qds-popup-section-title-line-height:1.5rem;width:var(--qds-popup-section-titles-icon-size);height:1.5rem;height:var(--qds-popup-section-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      )}.qds-popup.qds-subsection.qds-titles,.qds-popup.qds-subsection.qds-title{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection.qds-title .qds-icon{--qds-popup-subsection-title-line-height:1.25rem;width:var(--qds-popup-subsection-titles-icon-size);height:1.25rem;height:var(--qds-popup-subsection-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      )}.qds-accessory.qds-root.qds-titles,.qds-accessory.qds-root.qds-title{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root.qds-title .qds-icon{--qds-accessory-title-line-height:1.5rem;width:var(--qds-accessory-titles-icon-size);height:1.5rem;height:var(--qds-accessory-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      )}.qds-accessory.qds-section.qds-titles,.qds-accessory.qds-section.qds-title{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section.qds-title .qds-icon{--qds-accessory-section-title-line-height:1.25rem;width:var(--qds-accessory-section-titles-icon-size);height:1.25rem;height:var(--qds-accessory-section-title-line-height)}.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-has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      )}";
 
 const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
   constructor() {
@@ -18,7 +18,7 @@ const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
     this.iconName = undefined;
     this.iconLibrary = 'default';
     this.kicker = undefined;
-    this.layer = 'panel';
+    this.layer = 'main';
     this.level = 'section';
     this.subtitle = undefined;
     this.tag = 'h2';
@@ -36,24 +36,26 @@ const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
     this.inheritedAttributes = inheritAriaAttributes(this.element);
   }
   render() {
+    const layer = `qds-${this.layer}`;
+    const level = `qds-${this.level ?? 'root'}`;
     return (h("hgroup", { class: {
-        [this.layer]: true,
-        [this.level ?? 'root']: true,
-        titles: true,
+        [layer]: true,
+        [level]: true,
+        'qds-titles': true,
       }, ...this.inheritedAttributes }, h(this.tag, { class: {
-        [this.layer]: true,
-        [this.level ?? 'root']: true,
-        title: true,
-      } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "icon", name: this.iconName, library: this.iconLibrary })), h("div", null, h("slot", null))), this.hasSubtitle && (h("p", { class: {
-        [this.layer]: true,
-        [this.level ?? 'root']: true,
-        subtitle: true,
-        'has-icon': this.hasIcon,
+        [layer]: true,
+        [level]: true,
+        'qds-title': true,
+      } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", name: this.iconName, library: this.iconLibrary })), h("div", null, h("slot", null))), this.hasSubtitle && (h("p", { class: {
+        [layer]: true,
+        [level]: true,
+        'qds-subtitle': true,
+        'qds-has-icon': this.hasIcon,
       } }, this.subtitle)), this.hasKicker && (h("p", { class: {
-        [this.layer]: true,
-        [this.level ?? 'root']: true,
-        kicker: true,
-        'has-icon': this.hasIcon,
+        [layer]: true,
+        [level]: true,
+        'qds-kicker': true,
+        'qds-has-icon': this.hasIcon,
       } }, this.kicker))));
   }
   get element() { return this; }

package/components/qds-title.js.map

@@ -1 +1 @@
-{"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,qnXAAqnX;;MCuBznX,KAAK;;;;;IAkCR,wBAAmB,GAAe,EAAE,CAAA;;uBAvBmB,SAAS;;iBAOjC,OAAO;iBAEN,SAAS;;eAUd,IAAI;;EAMvC,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;GACvD;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACE,cACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;OACb,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,IACP,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,KAAK,EAAE,IAAI;OACZ,IAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACD,eACE,eAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACf,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,QAAQ,CACZ,CACL,EACA,IAAI,CAAC,SAAS,KACb,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,MAAM,CACV,CACL,CACM,EACV;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.titles,\n.title {\n  display: flex;\n}\n\n.titles {\n  flex-direction: column;\n}\n\n.title,\n.subtitle,\n.kicker {\n  margin-block: 0;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.title {\n  font-weight: initial;\n  font-size: initial;\n  color: var(--qds-theme-title);\n}\n\n.subtitle {\n  color: var(--qds-theme-subtitle);\n}\n\n.kicker {\n  color: var(--qds-theme-kicker);\n  order: -1;\n}\n\n.subtitle,\n.kicker {\n  overflow-wrap: break-word;\n}\n\n.main {\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-main-section-title);\n\n      & .icon {\n        --qds-main-section-title-line-height: 2rem;\n\n        width: var(--qds-main-section-titles-icon-size);\n        height: var(--qds-main-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n\n    &.has-icon-end {\n      padding-inline-end: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-main-subsection-title);\n\n      & .icon {\n        --qds-main-subsection-title-line-height: 1.5rem;\n\n        width: var(--qds-main-subsection-titles-icon-size);\n        height: var(--qds-main-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.panel {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-title);\n\n      & .icon {\n        --qds-panel-title-line-height: 2rem;\n\n        width: var(--qds-panel-titles-icon-size);\n        height: var(--qds-panel-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-section-title);\n\n      & .icon {\n        --qds-panel-section-title-line-height: 1.5rem;\n\n        width: var(--qds-panel-section-titles-icon-size);\n        height: var(--qds-panel-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-subsection-title);\n\n      & .icon {\n        --qds-panel-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-panel-subsection-titles-icon-size);\n        height: var(--qds-panel-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.navigation {\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-navigation-section-title);\n\n      & .icon {\n        --qds-navigation-section-title-line-height: 1.5rem;\n\n        width: var(--qds-navigation-section-titles-icon-size);\n        height: var(--qds-navigation-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-navigation-subsection-title);\n\n      & .icon {\n        --qds-navigation-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-navigation-subsection-titles-icon-size);\n        height: var(--qds-navigation-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.popup {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-title);\n\n      & .icon {\n        --qds-popup-title-line-height: 1.75rem;\n\n        width: var(--qds-popup-titles-icon-size);\n        height: var(--qds-popup-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-section-title);\n\n      & .icon {\n        --qds-popup-section-title-line-height: 1.5rem;\n\n        width: var(--qds-popup-section-titles-icon-size);\n        height: var(--qds-popup-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-subsection-title);\n\n      & .icon {\n        --qds-popup-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-popup-subsection-titles-icon-size);\n        height: var(--qds-popup-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.accessory {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-accessory-title);\n\n      & .icon {\n        --qds-accessory-title-line-height: 1.5rem;\n\n        width: var(--qds-accessory-titles-icon-size);\n        height: var(--qds-accessory-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-accessory-section-title);\n\n      & .icon {\n        --qds-accessory-section-title-line-height: 1.25rem;\n\n        width: var(--qds-accessory-section-titles-icon-size);\n        height: var(--qds-accessory-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer: Layer = 'panel'\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  @Element() private readonly element!: HTMLQdsTitleElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  private get hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  private get hasIcon(): boolean {\n    return this.iconName !== undefined && this.iconName !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <hgroup\n        class={{\n          [this.layer]: true,\n          [this.level ?? 'root']: true,\n          titles: true,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <this.tag\n          class={{\n            [this.layer]: true,\n            [this.level ?? 'root']: true,\n            title: true,\n          }}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"icon\"\n              name={this.iconName}\n              library={this.iconLibrary}\n            />\n          )}\n          <div>\n            <slot />\n          </div>\n        </this.tag>\n        {this.hasSubtitle && (\n          <p\n            class={{\n              [this.layer]: true,\n              [this.level ?? 'root']: true,\n              subtitle: true,\n              'has-icon': this.hasIcon,\n            }}\n          >\n            {this.subtitle}\n          </p>\n        )}\n        {this.hasKicker && (\n          <p\n            class={{\n              [this.layer]: true,\n              [this.level ?? 'root']: true,\n              kicker: true,\n              'has-icon': this.hasIcon,\n            }}\n          >\n            {this.kicker}\n          </p>\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}
+{"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,itZAAitZ;;MCuBrtZ,KAAK;;;;;IAkCR,wBAAmB,GAAe,EAAE,CAAA;;uBAvBmB,SAAS;;iBAOjC,MAAM;iBAEL,SAAS;;eAUd,IAAI;;EAMvC,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;GACvD;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;IACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;IAE3C,QACE,cACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,YAAY,EAAE,IAAI;OACnB,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,IACP,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,WAAW,EAAE,IAAI;OAClB,IAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACD,eACE,eAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACf,SACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,cAAc,EAAE,IAAI;QACpB,cAAc,EAAE,IAAI,CAAC,OAAO;OAC7B,IAEA,IAAI,CAAC,QAAQ,CACZ,CACL,EACA,IAAI,CAAC,SAAS,KACb,SACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,YAAY,EAAE,IAAI;QAClB,cAAc,EAAE,IAAI,CAAC,OAAO;OAC7B,IAEA,IAAI,CAAC,MAAM,CACV,CACL,CACM,EACV;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-titles,\n.qds-title {\n  display: flex;\n}\n\n.qds-titles {\n  flex-direction: column;\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n  margin-block: 0;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-title {\n  font-weight: initial;\n  font-size: initial;\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  color: var(--qds-theme-kicker);\n  order: -1;\n}\n\n.qds-subtitle,\n.qds-kicker {\n  overflow-wrap: break-word;\n}\n\n.qds-main {\n  &.qds-section {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-main-section-title);\n\n      & .qds-icon {\n        --qds-main-section-title-line-height: 2rem;\n\n        width: var(--qds-main-section-titles-icon-size);\n        height: var(--qds-main-section-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n\n    &.qds-has-icon-end {\n      padding-inline-end: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-main-subsection-title);\n\n      & .qds-icon {\n        --qds-main-subsection-title-line-height: 1.5rem;\n\n        width: var(--qds-main-subsection-titles-icon-size);\n        height: var(--qds-main-subsection-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.qds-panel {\n  &.qds-root {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-panel-title);\n\n      & .qds-icon {\n        --qds-panel-title-line-height: 2rem;\n\n        width: var(--qds-panel-titles-icon-size);\n        height: var(--qds-panel-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-panel-section-title);\n\n      & .qds-icon {\n        --qds-panel-section-title-line-height: 1.5rem;\n\n        width: var(--qds-panel-section-titles-icon-size);\n        height: var(--qds-panel-section-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-panel-subsection-title);\n\n      & .qds-icon {\n        --qds-panel-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-panel-subsection-titles-icon-size);\n        height: var(--qds-panel-subsection-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.qds-navigation {\n  &.qds-section {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-navigation-section-title);\n\n      & .qds-icon {\n        --qds-navigation-section-title-line-height: 1.5rem;\n\n        width: var(--qds-navigation-section-titles-icon-size);\n        height: var(--qds-navigation-section-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-navigation-subsection-title);\n\n      & .qds-icon {\n        --qds-navigation-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-navigation-subsection-titles-icon-size);\n        height: var(--qds-navigation-subsection-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.qds-popup {\n  &.qds-root {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-popup-title);\n\n      & .qds-icon {\n        --qds-popup-title-line-height: 1.75rem;\n\n        width: var(--qds-popup-titles-icon-size);\n        height: var(--qds-popup-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-popup-section-title);\n\n      & .qds-icon {\n        --qds-popup-section-title-line-height: 1.5rem;\n\n        width: var(--qds-popup-section-titles-icon-size);\n        height: var(--qds-popup-section-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-subsection {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-popup-subsection-title);\n\n      & .qds-icon {\n        --qds-popup-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-popup-subsection-titles-icon-size);\n        height: var(--qds-popup-subsection-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.qds-accessory {\n  &.qds-root {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-accessory-title);\n\n      & .qds-icon {\n        --qds-accessory-title-line-height: 1.5rem;\n\n        width: var(--qds-accessory-titles-icon-size);\n        height: var(--qds-accessory-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.qds-section {\n    &.qds-titles,\n    &.qds-title {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.qds-title {\n      font: var(--qds-accessory-section-title);\n\n      & .qds-icon {\n        --qds-accessory-section-title-line-height: 1.25rem;\n\n        width: var(--qds-accessory-section-titles-icon-size);\n        height: var(--qds-accessory-section-title-line-height);\n      }\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-has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * 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  @Element() private readonly element!: HTMLQdsTitleElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  private get hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  private get hasIcon(): boolean {\n    return this.iconName !== undefined && this.iconName !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    const layer = `qds-${this.layer}`\n    const level = `qds-${this.level ?? 'root'}`\n\n    return (\n      <hgroup\n        class={{\n          [layer]: true,\n          [level]: true,\n          'qds-titles': true,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <this.tag\n          class={{\n            [layer]: true,\n            [level]: true,\n            'qds-title': true,\n          }}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"qds-icon\"\n              name={this.iconName}\n              library={this.iconLibrary}\n            />\n          )}\n          <div>\n            <slot />\n          </div>\n        </this.tag>\n        {this.hasSubtitle && (\n          <p\n            class={{\n              [layer]: true,\n              [level]: true,\n              'qds-subtitle': true,\n              'qds-has-icon': this.hasIcon,\n            }}\n          >\n            {this.subtitle}\n          </p>\n        )}\n        {this.hasKicker && (\n          <p\n            class={{\n              [layer]: true,\n              [level]: true,\n              'qds-kicker': true,\n              'qds-has-icon': this.hasIcon,\n            }}\n          >\n            {this.kicker}\n          </p>\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}

package/components/qds-tooltip.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { o as offset, f as flip, s as shift, l as limitShift, b as arrow, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm.js';
 import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR, f as isTouchDevice } from './helpers.js';
 
-const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n    0px +\n      0px\n  );height:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );top:100%}:host([data-side='bottom'])::before{top:calc(\n    -1 * (0px +\n          0px)\n  );top:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n    0px +\n      0px\n  );width:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );left:100%}:host([data-side='right'])::before{left:calc(\n    -1 * (0px +\n          0px)\n  );left:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}.arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.arrow-container[data-side='top']{top:100%}.arrow{fill:var(--qds-theme-accessory-background)}";
+const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n    0px +\n      0px\n  );height:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );top:100%}:host([data-side='bottom'])::before{top:calc(\n    -1 * (0px +\n          0px)\n  );top:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n    0px +\n      0px\n  );width:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );left:100%}:host([data-side='right'])::before{left:calc(\n    -1 * (0px +\n          0px)\n  );left:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}.qds-arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.qds-arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.qds-arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.qds-arrow-container[data-side='top']{top:100%}.qds-arrow{fill:var(--qds-theme-accessory-background)}";
 
 let autoIncrementingId = 1;
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement {
@@ -212,11 +212,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     return (h(Host, { "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
         position: this.hostPosition,
         transform: this.hostTransform,
-      } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
+      } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
         left: this.aX,
         top: this.aY,
         display: this.aDisplay,
-      } }, h("path", { class: "arrow", d: this.aShape }))));
+      } }, h("path", { class: "qds-arrow", d: this.aShape }))));
   }
   async handleFocus() {
     if (!this.disabled)

package/components/qds-tooltip.js.map

@@ -1 +1 @@
-{"file":"qds-tooltip.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,8xEAA8xE;;AC+CjzE,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAWb,OAAO;;;;;;IAoIV,mBAAc,GAAG,KAAK,CAAA;IAEtB,kBAAa,GAAG,KAAK,CAAA;IAiPZ,sBAAiB,GAAG,CAAC,GAAgB;MACpD,IAAI,CAAC,qBAAqB,GAAG,GAAG,CAAA;KACjC,CAAA;IAEgB,0BAAqB,GAAG;MACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;KAC3B,CAAA;IAMgB,eAAU,GAAG;MAC5B,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;KAClC,CAAA;IAMgB,oBAAe,GAAG;MACjC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;KACvC,CAAA;IAcgB,oBAAe,GAAG,CAAC,KAAY;MAC9C,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;KAC5C,CAAA;IAcgB,kBAAa,GAAG,CAAC,KAAY;MAC5C,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;KAC1C,CAAA;IAMgB,wBAAmB,GAAG;MACrC,aAAa,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;KAC3C,CAAA;;oBAxa0C,KAAK;;kBAoBN,KAAK;mBAMJ,KAAK;;qBAkBD,KAAK;;;;;;gBAiD5B,KAAK;;;gBAMC,KAAK;kBAET,EAAE;oBAEA,EAAE;mBAEH,CAAC;kBAEF,CAAC;gBAEH,CAAC;cAEH,EAAE;cAEF,EAAE;;;;;EAgBjB,MAAM,IAAI;IACf,IAAI,IAAI,CAAC,IAAI;MAAE,OAAM;IAErB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;MACrD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IAExE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;IACjD,IAAI,CAAC,eAAe,EAAE,CAAA;GACvB;;;;EAMM,MAAM,KAAK;IAChB,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAM;IAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACxB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;MACrD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IAE3E,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;IACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;IAC3B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAChD,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,OAAO,EAAE,CAAA;GACjC;;;;;;;EASM,MAAM,WAAW;IACtB,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,CAAA;IAE3E,IAAI,CAAC,OAAO;MACV,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,8CAA8C,CAC/C,IAAI,CAAC,CAAA;IAER,IAAI,CAAC,MAAM;MACT,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;IAER,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA;IAE3E,MAAM,UAAU,GACd,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;IAER,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACtD,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,UAAU,IAAI,CAAC,CAAA;IAElD,IAAI,CAAC,MAAM;MACT,MAAM;QACN,KAAK,IAAI,CAAC,MAAM,EAAE;QAClB,KAAK,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;QAChD,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;QACrE,IAAI,CAAA;GACP;EAGS,MAAM,eAAe,CAAC,KAAiB;IAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;IACzC,MAAM,YAAY,GAChB,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;OAClC,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;QAClD,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAA;IACjD,IAAI,CAAC,YAAY;MAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;GACtC;EASS,MAAM,gBAAgB;IAC9B,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;IAErC,IAAI,CAAC,UAAU,GAAG;MAChB,MAAM,CAAC;QACL,GAAG,IAAI,CAAC,aAAa;QACrB,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO;OACnC,CAAC;MACF,CAAC,IAAI,CAAC,MAAM;QACV,IAAI,CAAC;UACH,SAAS,EAAE,IAAI,CAAC,OAAO;UACvB,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;MACJ,CAAC,IAAI,CAAC,OAAO;QACX,KAAK,CAAC;UACJ,OAAO,EAAE,UAAU,EAAE;UACrB,GAAG,IAAI,CAAC,YAAY;SACrB,CAAC;MACJ,KAAK,CAAC;QACJ,OAAO,EAAE,IAAI,CAAC,qBAAqB;OACpC,CAAC;KACH,CAAC,MAAM,CAAC,CAAC,UAAU,KAA+B,UAAU,KAAK,KAAK,CAAC,CAAA;GACzE;EAGO,MAAM,sBAAsB;;IAClC,IAAI,CAAC,0BAA0B,EAAE,CAAA;IAEjC,MAAM,cAAc,GAClB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;IACjE,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;MACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;MACtD,IAAI,OAAO,KAAK,IAAI;QAClB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;MAChE,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;KAChC;;MAAM,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAA;IAE7C,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;MAAE,OAAM;IAElE,IAAI,IAAI,CAAC,aAAa;MACpB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;IAC3E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAChE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAC1E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAC1E,MAAA,IAAI,CAAC,OAAO,EAAC,EAAE,QAAF,EAAE,GAAK,eAAe,kBAAkB,EAAE,EAAA;IACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;GACxE;EAKO,MAAM,cAAc;IAC1B,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAEhC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,MAAM,eAAe,CACzE,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;MACE,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;KACxB,CACF,CAAA;IACD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;IAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,UAAU,CAAC,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC,KAAK,CAAA;IAEvE,IAAI,CAAC,cAAc,CAAC,KAAK;MAAE,OAAM;IAEjC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;IAErC,IAAI,cAAc,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE;MAC3C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;MACtB,OAAM;KACP;IACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;IAEzB,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAW,CAAA;IAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAEhB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAA;IAE7C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;GAC5C;EAGO,eAAe;IACrB,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAEhC,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,OAAO,EAAE,CAAA;IAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CACvB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;MACE,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;KACrC,EACD,IAAI,CAAC,iBAAiB,CACvB,CAAA;GACF;EAEM,MAAM,iBAAiB;IAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,EAAE,CAAA;IACpC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAChD,MAAM,IAAI,CAAC,sBAAsB,EAAE,CAAA;IACnC,kBAAkB,IAAI,CAAC,CAAA;GACxB;EAEM,MAAM,gBAAgB;IAC3B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;GACzB;EAEM,oBAAoB;IACzB,IAAI,CAAC,0BAA0B,EAAE,CAAA;GAClC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,iBACQ,IAAI,CAAC,IAAI,EACpB,UAAU,EAAE,IAAI,CAAC,aAAa,EAC9B,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,EACpC,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,YAAY;QAC3B,SAAS,EAAE,IAAI,CAAC,aAAa;OAC9B,IAED,eAAQ,EACR,6CAEa,IAAI,CAAC,IAAI,EACpB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,EAAE;QACb,GAAG,EAAE,IAAI,CAAC,EAAE;QACZ,OAAO,EAAE,IAAI,CAAC,QAAQ;OACvB,IAED,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAI,CAClC,CACD,EACR;GACF;EAUO,MAAM,WAAW;IACvB,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACtC;EAMO,MAAM,gBAAgB;IAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACtC;EAMO,MAAM,gBAAgB,CAAC,KAAY;IACzC,IACE,CAAC,IAAI,CAAC,cAAc;MACpB,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;MAChD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,OAAO;MAC/D,KAAK,YAAY,UAAU;MAC3B,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;MAC7C,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;MAEpC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;GACrB;EAMO,MAAM,cAAc,CAAC,KAAY;IACvC,IAAI,EAAE,KAAK,YAAY,UAAU,CAAC;MAAE,OAAM;IAC1C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAE/B,IACE,aAAa,YAAY,UAAU,CAAC,OAAO;MAC3C,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;MACrC,IAAI,CAAC,gBAAgB,KAAK,aAAa;MAEvC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;GACrB;EAMO,MAAM,oBAAoB;IAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;GACnE;EAMO,0BAA0B;IAChC,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;MAAE,OAAM;IAElE,IAAI,IAAI,CAAC,aAAa;MACpB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,OAAO,EACP,IAAI,CAAC,mBAAmB,CACzB,CAAA;IACH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACnE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACzE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;IACD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;IACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;GAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  align-items: flex-start;\n  background-color: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  color: var(--qds-theme-text-standard);\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-accessory-gap-children-unrelated);\n  left: 0;\n  padding: var(--qds-accessory-padding);\n  top: 0;\n}\n\n:host([aria-hidden='true']) {\n  display: none;\n}\n\n:host::before {\n  content: '';\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n  height: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n  top: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n  width: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  left: 100%;\n}\n\n:host([data-side='right'])::before {\n  left: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n.arrow-container {\n  height: var(--qds-signature-triangle-pointer-size-width);\n  position: absolute;\n  width: var(--qds-signature-triangle-pointer-size-width);\n\n  &[data-side='bottom'] {\n    bottom: 100%;\n    transform: rotate(180deg);\n  }\n\n  &[data-side='left'] {\n    left: 100%;\n    transform: rotate(-90deg);\n  }\n\n  &[data-side='right'] {\n    right: 100%;\n    transform: rotate(90deg);\n  }\n\n  &[data-side='top'] {\n    top: 100%;\n  }\n}\n\n.arrow {\n  fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Side,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  isTouchDevice,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n  tag: 'qds-tooltip',\n  shadow: true,\n  styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the tooltip from being shown by user interaction. The tooltip can\n   * still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the tooltip relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'top'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the tooltip. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the tooltip is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsTooltipElement\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  @State() private open = false\n\n  @State() private middleware?: Middleware[]\n\n  @State() private aDisplay?: string\n\n  @State() private side: Side = 'top'\n\n  @State() private aShape = ''\n\n  @State() private aViewbox = ''\n\n  @State() private aHeight = 0\n\n  @State() private aWidth = 0\n\n  @State() private aGap = 0\n\n  @State() private aX = ''\n\n  @State() private aY = ''\n\n  private arrowContainerElement?: SVGElement\n\n  private cleanup?: () => void\n\n  private clickedTooltip = false\n\n  private isTouchDevice = false\n\n  private referenceElement?: ReferenceElement\n\n  /**\n   * Show the tooltip.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element)\n      this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n    this.open = true\n    this.element.setAttribute('aria-hidden', 'false')\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    this.closeEmitter.emit()\n    if (this.referenceElement instanceof globalThis.Element)\n      this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n    this.open = false\n    this.clickedTooltip = false\n    this.element.setAttribute('aria-hidden', 'true')\n    if (this.cleanup) this.cleanup()\n  }\n\n  /**\n   * Update the tooltip's arrow.\n   *\n   * This method should typically be called when the Quartz platform was\n   * changed.\n   */\n  @Method()\n  public async updateArrow(): Promise<void> {\n    this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n    this.aHeight =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-height`,\n      ) ?? 0\n\n    this.aWidth =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-width`,\n      ) ?? 0\n\n    this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n    const aTipRadius =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-tip-radius`,\n      ) ?? 0\n\n    const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n    const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n    this.aShape =\n      'M0,0' +\n      ` H${this.aWidth}` +\n      ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n      ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n      ' Z'\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('aGap')\n  @Watch('aHeight')\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  protected async updateMiddleware(): Promise<void> {\n    invariant(this.arrowContainerElement)\n\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis: this.aGap + this.aHeight,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n      arrow({\n        element: this.arrowContainerElement,\n      }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    if (this.isTouchDevice)\n      this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focus', this.boundFocus)\n    this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n    this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n    this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n    this.referenceElement.setAttribute('aria-describedby', this.element.id)\n  }\n\n  @Watch('middleware')\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, middlewareData, placement, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n    if (!middlewareData.arrow) return\n\n    invariant(this.arrowContainerElement)\n\n    if (middlewareData.arrow.centerOffset !== 0) {\n      this.aDisplay = 'none'\n      return\n    }\n    this.aDisplay = undefined\n\n    const [side] = placement.split('-') as [Side]\n    this.side = side\n\n    const { x: aX, y: aY } = middlewareData.arrow\n\n    this.aX = aX === undefined ? '' : `${aX}px`\n    this.aY = aY === undefined ? '' : `${aY}px`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.isTouchDevice = isTouchDevice()\n    this.element.setAttribute('aria-hidden', 'true')\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n  }\n\n  public async componentDidLoad(): Promise<void> {\n    await this.updateArrow()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        data-side={this.side}\n        onFocusout={this.boundFocusout}\n        onMouseDown={this.boundTooltipMouseDown}\n        onMouseLeave={this.boundMouseLeave}\n        role={this.element.role ?? 'tooltip'}\n        style={{\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n        <svg\n          aria-hidden\n          data-side={this.side}\n          class=\"arrow-container\"\n          ref={this.arrowContainerRef}\n          viewBox={this.aViewbox}\n          style={{\n            left: this.aX,\n            top: this.aY,\n            display: this.aDisplay,\n          }}\n        >\n          <path class=\"arrow\" d={this.aShape} />\n        </svg>\n      </Host>\n    )\n  }\n\n  private readonly arrowContainerRef = (svg?: SVGElement): void => {\n    this.arrowContainerElement = svg\n  }\n\n  private readonly boundTooltipMouseDown = (): void => {\n    this.clickedTooltip = true\n  }\n\n  private async handleFocus(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundFocus = (): void => {\n    ignorePromise(this.handleFocus())\n  }\n\n  private async handleMouseEnter(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundMouseEnter = (): void => {\n    ignorePromise(this.handleMouseEnter())\n  }\n\n  private async handleMouseLeave(event: Event): Promise<void> {\n    if (\n      !this.clickedTooltip &&\n      document.activeElement !== this.referenceElement &&\n      document.activeElement?.closest('qds-tooltip') !== this.element &&\n      event instanceof MouseEvent &&\n      event.relatedTarget !== this.referenceElement &&\n      event.relatedTarget !== this.element\n    )\n      await this.close()\n  }\n\n  private readonly boundMouseLeave = (event: Event): void => {\n    ignorePromise(this.handleMouseLeave(event))\n  }\n\n  private async handleFocusOut(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusOut(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    if (this.isTouchDevice)\n      this.referenceElement.removeEventListener(\n        'click',\n        this.boundReferenceClick,\n      )\n    this.referenceElement.removeEventListener('focus', this.boundFocus)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener(\n      'mouseenter',\n      this.boundMouseEnter,\n    )\n    this.referenceElement.removeEventListener(\n      'mouseleave',\n      this.boundMouseLeave,\n    )\n    this.referenceElement.removeAttribute('aria-describedby')\n  }\n}\n"],"version":3}
+{"file":"qds-tooltip.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  align-items: flex-start;\n  background-color: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  color: var(--qds-theme-text-standard);\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-accessory-gap-children-unrelated);\n  left: 0;\n  padding: var(--qds-accessory-padding);\n  top: 0;\n}\n\n:host([aria-hidden='true']) {\n  display: none;\n}\n\n:host::before {\n  content: '';\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n  height: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n  top: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n  width: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  left: 100%;\n}\n\n:host([data-side='right'])::before {\n  left: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n.qds-arrow-container {\n  height: var(--qds-signature-triangle-pointer-size-width);\n  position: absolute;\n  width: var(--qds-signature-triangle-pointer-size-width);\n\n  &[data-side='bottom'] {\n    bottom: 100%;\n    transform: rotate(180deg);\n  }\n\n  &[data-side='left'] {\n    left: 100%;\n    transform: rotate(-90deg);\n  }\n\n  &[data-side='right'] {\n    right: 100%;\n    transform: rotate(90deg);\n  }\n\n  &[data-side='top'] {\n    top: 100%;\n  }\n}\n\n.qds-arrow {\n  fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Side,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  isTouchDevice,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n  tag: 'qds-tooltip',\n  shadow: true,\n  styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the tooltip from being shown by user interaction. The tooltip can\n   * still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the tooltip relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'top'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the tooltip. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the tooltip is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsTooltipElement\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  @State() private open = false\n\n  @State() private middleware?: Middleware[]\n\n  @State() private aDisplay?: string\n\n  @State() private side: Side = 'top'\n\n  @State() private aShape = ''\n\n  @State() private aViewbox = ''\n\n  @State() private aHeight = 0\n\n  @State() private aWidth = 0\n\n  @State() private aGap = 0\n\n  @State() private aX = ''\n\n  @State() private aY = ''\n\n  private arrowContainerElement?: SVGElement\n\n  private cleanup?: () => void\n\n  private clickedTooltip = false\n\n  private isTouchDevice = false\n\n  private referenceElement?: ReferenceElement\n\n  /**\n   * Show the tooltip.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element)\n      this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n    this.open = true\n    this.element.setAttribute('aria-hidden', 'false')\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    this.closeEmitter.emit()\n    if (this.referenceElement instanceof globalThis.Element)\n      this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n    this.open = false\n    this.clickedTooltip = false\n    this.element.setAttribute('aria-hidden', 'true')\n    if (this.cleanup) this.cleanup()\n  }\n\n  /**\n   * Update the tooltip's arrow.\n   *\n   * This method should typically be called when the Quartz platform was\n   * changed.\n   */\n  @Method()\n  public async updateArrow(): Promise<void> {\n    this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n    this.aHeight =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-height`,\n      ) ?? 0\n\n    this.aWidth =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-width`,\n      ) ?? 0\n\n    this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n    const aTipRadius =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-tip-radius`,\n      ) ?? 0\n\n    const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n    const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n    this.aShape =\n      'M0,0' +\n      ` H${this.aWidth}` +\n      ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n      ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n      ' Z'\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('aGap')\n  @Watch('aHeight')\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  protected async updateMiddleware(): Promise<void> {\n    invariant(this.arrowContainerElement)\n\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis: this.aGap + this.aHeight,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n      arrow({\n        element: this.arrowContainerElement,\n      }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    if (this.isTouchDevice)\n      this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focus', this.boundFocus)\n    this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n    this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n    this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n    this.referenceElement.setAttribute('aria-describedby', this.element.id)\n  }\n\n  @Watch('middleware')\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, middlewareData, placement, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n    if (!middlewareData.arrow) return\n\n    invariant(this.arrowContainerElement)\n\n    if (middlewareData.arrow.centerOffset !== 0) {\n      this.aDisplay = 'none'\n      return\n    }\n    this.aDisplay = undefined\n\n    const [side] = placement.split('-') as [Side]\n    this.side = side\n\n    const { x: aX, y: aY } = middlewareData.arrow\n\n    this.aX = aX === undefined ? '' : `${aX}px`\n    this.aY = aY === undefined ? '' : `${aY}px`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.isTouchDevice = isTouchDevice()\n    this.element.setAttribute('aria-hidden', 'true')\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n  }\n\n  public async componentDidLoad(): Promise<void> {\n    await this.updateArrow()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        data-side={this.side}\n        onFocusout={this.boundFocusout}\n        onMouseDown={this.boundTooltipMouseDown}\n        onMouseLeave={this.boundMouseLeave}\n        role={this.element.role ?? 'tooltip'}\n        style={{\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n        <svg\n          aria-hidden\n          data-side={this.side}\n          class=\"qds-arrow-container\"\n          ref={this.arrowContainerRef}\n          viewBox={this.aViewbox}\n          style={{\n            left: this.aX,\n            top: this.aY,\n            display: this.aDisplay,\n          }}\n        >\n          <path class=\"qds-arrow\" d={this.aShape} />\n        </svg>\n      </Host>\n    )\n  }\n\n  private readonly arrowContainerRef = (svg?: SVGElement): void => {\n    this.arrowContainerElement = svg\n  }\n\n  private readonly boundTooltipMouseDown = (): void => {\n    this.clickedTooltip = true\n  }\n\n  private async handleFocus(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundFocus = (): void => {\n    ignorePromise(this.handleFocus())\n  }\n\n  private async handleMouseEnter(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundMouseEnter = (): void => {\n    ignorePromise(this.handleMouseEnter())\n  }\n\n  private async handleMouseLeave(event: Event): Promise<void> {\n    if (\n      !this.clickedTooltip &&\n      document.activeElement !== this.referenceElement &&\n      document.activeElement?.closest('qds-tooltip') !== this.element &&\n      event instanceof MouseEvent &&\n      event.relatedTarget !== this.referenceElement &&\n      event.relatedTarget !== this.element\n    )\n      await this.close()\n  }\n\n  private readonly boundMouseLeave = (event: Event): void => {\n    ignorePromise(this.handleMouseLeave(event))\n  }\n\n  private async handleFocusOut(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusOut(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    if (this.isTouchDevice)\n      this.referenceElement.removeEventListener(\n        'click',\n        this.boundReferenceClick,\n      )\n    this.referenceElement.removeEventListener('focus', this.boundFocus)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener(\n      'mouseenter',\n      this.boundMouseEnter,\n    )\n    this.referenceElement.removeEventListener(\n      'mouseleave',\n      this.boundMouseLeave,\n    )\n    this.referenceElement.removeAttribute('aria-describedby')\n  }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d181f952.js');
 const helpers = require('./helpers-452256e8.js');
 
-const buttonCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.button{-webkit-appearance:none;appearance:none;background-color:transparent;background-color:initial;border:none;padding-block:0;align-items:center;border-radius:var(--qds-control-border-radius);cursor:pointer;display:inline-flex;gap:var(--qds-control-button-gap-internal);justify-content:center;padding-inline:var(--qds-control-button-padding-horizontal);-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.button.icon-only{padding-inline:0}.button:link,.button:visited,area[href].button{-webkit-text-decoration:none;text-decoration:none}.button:any-link{-webkit-text-decoration:none;text-decoration:none}.button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.icon-only[data-size='small']{width:var(--qds-control-small-height)}.icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.icon-only[data-size='large']{width:var(--qds-control-large-height)}.icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{border:var(--qds-control-border-width) solid transparent;color:var(--qds-theme-link-default)}.icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:hover{border:var(--qds-control-border-width) solid var(--qds-theme-link-default)}.icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:active{border:var(--qds-control-border-width) solid var(--qds-theme-link-pressed);color:var(--qds-theme-link-pressed)}.icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}";
+const buttonCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.qds-button{-webkit-appearance:none;appearance:none;background-color:transparent;background-color:initial;border:none;padding-block:0;align-items:center;border-radius:var(--qds-control-border-radius);cursor:pointer;display:inline-flex;gap:var(--qds-control-button-gap-internal);justify-content:center;padding-inline:var(--qds-control-button-padding-horizontal);-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button.qds-icon-only{padding-inline:0}.qds-button:link,.qds-button:visited,area[href].qds-button{-webkit-text-decoration:none;text-decoration:none}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{border:var(--qds-control-border-width) solid transparent;color:var(--qds-theme-link-default)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:hover{border:var(--qds-control-border-width) solid var(--qds-theme-link-default)}.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:active{border:var(--qds-control-border-width) solid var(--qds-theme-link-pressed);color:var(--qds-theme-link-pressed)}.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}";
 
 const Button = class {
   constructor(hostRef) {
@@ -96,9 +96,9 @@ const Button = class {
   render() {
     const Tag = this.href === undefined ? 'button' : 'a';
     return (index.h(Tag, { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
-        button: true,
-        'icon-only': this.iconOnly,
-      }, "data-importance": this.importance, "data-size": this.size, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconLibrary, name: this.iconName })), this.text));
+        'qds-button': true,
+        'qds-icon-only': this.iconOnly,
+      }, "data-importance": this.importance, "data-size": this.size, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { class: "qds-icon", "data-size": this.size, library: this.iconLibrary, name: this.iconName })), this.text));
   }
   static get delegatesFocus() { return true; }
   get element() { return index.getElement(this); }