@quartzds/core 1.0.0-beta.50 → 1.0.0-beta.52

package/components/checkbox.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as pickFocusEventAttributes, i as inheritAriaAttributes, a as inheritAttributes } from './helpers.js';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
 import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './controls.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './label.js';
@@ -21,6 +21,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.changeEmitter = createEvent(this, "qdsChange", 6);
         this.focusEmitter = createEvent(this, "qdsFocus", 2);
         this.internals = this.attachInternals();
+        this.inheritedAttributes = {};
         this.ref = (checkbox) => {
             this.input = checkbox;
         };
@@ -52,7 +53,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.validity = VALID_STATE;
         this.value = 'on';
         this.willValidate = false;
-        this.inheritedAttributes = {};
+        this.tabIndex = undefined;
     }
     get computedChecked() {
         return this.checked ?? false;
@@ -100,31 +101,16 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
                 null);
     }
     disabledChanged() {
-        if (this.computedChecked && !this.computedDisabled) {
-            this.inheritedAttributes = {
-                ...this.inheritedAttributes,
-                tabindex: this.savedTabindex,
-            };
+        if (this.computedChecked && !this.computedDisabled)
             this.internals.setFormValue(this.computedValue);
-        }
-        else {
-            this.savedTabindex = this.inheritedAttributes.tabindex;
-            this.inheritedAttributes = {
-                ...this.inheritedAttributes,
-                tabindex: undefined,
-            };
-            // eslint-disable-next-line unicorn/no-null
+        // eslint-disable-next-line unicorn/no-null
+        else
             this.internals.setFormValue(null);
-        }
     }
     tabindexChanged(newValue) {
-        if (this.computedDisabled)
-            this.savedTabindex = newValue;
-        else
-            this.inheritedAttributes = {
-                ...this.inheritedAttributes,
-                tabindex: newValue,
-            };
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
     }
     valueChanged() {
         if (this.computedChecked && !this.computedDisabled)
@@ -139,26 +125,24 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.defineGetter('checkValidity', () => this.checkValidity);
         this.defineGetter('reportValidity', () => this.reportValidity);
         this.defineGetter('setCustomValidity', () => this.setCustomValidity);
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.element),
-            ...inheritAttributes(this.element, ['tabindex']),
-        };
+        this.inheritedAttributes = inheritAriaAttributes(this.element);
+        this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0');
     }
     render() {
         return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        h("label", { key: 'c609f771294bca531975797d0d21fbce193dc138', "aria-disabled": this.computedDisabled.toString(), class: {
+        h("label", { key: 'cd4689a54ca17ef1544e56cd5cd0e82f3efd84b8', "aria-disabled": this.computedDisabled ? 'true' : undefined, class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize }, h("div", { key: '943b612e74a43dfdc77d6584007721ca48e8ee0d', class: "qds-container" }, h("input", { key: '854762b8a06308356691234b14df858110e92fc6',
+            }, "data-size": this.computedSize }, h("div", { key: '58e279291650ed3f8257f32f1e226062db326c51', class: "qds-container" }, h("input", { key: '470c04f8e97e5b63224f86114940389574171c7b',
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: '1e8c9ad20ffe3dab2b9220465db25e2ce0b46d7c', "aria-hidden": "true", class: {
+            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, tabIndex: this.computedDisabled ? undefined : this.tabIndex, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: 'e44208a9d7fd03be8653cf1c02a4ee11f9cffd63', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-checked': true,
-            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: 'acff6e42e64ba70d8575c653f8870f6085606e7d', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '340e56e96df9343803430c1811e5609eb6e01dbb', "aria-hidden": "true", class: {
+            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: 'd36bf69de5e032cc2d764834292fcc481745d163', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '3404a948a2ebda3364b0e7b9302437c54ae1e3d3', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-indeterminate': true,
-            }, "data-size": this.computedSize, library: "core", name: "indeterminate" })), this.hasText && (h("qds-label", { required: this.required, size: this.size, text: this.text }))));
+            }, "data-size": this.computedSize, library: "core", name: "indeterminate" })), this.hasText && (h("qds-label", { key: '636810006f8fd9664e201ee2f5f4d7f9b19a289c', required: this.required, size: this.size, text: this.text }))));
     }
     defineGetter(p, get) {
         Object.defineProperty(this.element, p, { enumerable: true, get });
@@ -188,7 +172,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "validity": [16],
         "value": [8],
         "willValidate": [4, "will-validate"],
-        "inheritedAttributes": [32]
+        "tabIndex": [32]
     }, [[0, "click", "onClick"]], {
         "checked": ["checkedChanged"],
         "disabled": ["disabledChanged"],

package/components/checkbox.js.map

@@ -1 +1 @@
-{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n  grid-area: checkbox;\n  place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n  display: none;\n  pointer-events: none;\n}\n\n.qds-box {\n  border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n  display: grid;\n  align-self: flex-start;\n  grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n  color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n  cursor: pointer;\n  display: inline-flex;\n}\n\n.qds-checkbox {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  margin: 0;\n  print-color-adjust: exact;\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  &:hover ~ .qds-box,\n  &:active ~ .qds-box {\n    display: block;\n  }\n\n  &:hover ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-hover);\n  }\n\n  &:active ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .qds-checked,\n  &:indeterminate ~ .qds-indeterminate {\n    display: block;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-small-size);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-small-size);\n    height: var(--qds-control-toggle-indicator-small-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-standard-size);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-standard-size);\n    height: var(--qds-control-toggle-indicator-standard-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-large-size);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-large-size);\n    height: var(--qds-control-toggle-indicator-large-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n  tag: 'qds-checkbox',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n  /**\n   * Adds vertical margin to the checkbox for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * The checkbox's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the checkbox from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`][] element to associate the checkbox 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-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-checkbox>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represent a \"select all/none\" behavior when associated\n   * checkboxes have a mix of checked and unchecked states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * A value must be specified for the checkbox before the owning form can be\n   * submitted.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The error message that would be shown to the user if the `<qds-checkbox>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-checkbox>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * The value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: CheckboxValue = 'on'\n\n  /**\n   * True if `<qds-checkbox>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private savedTabindex?: string\n\n  private get computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  private get computedDisabled(): boolean {\n    return (\n      (this.element.matches(':disabled') || (this.disabled ?? false)) &&\n      this.element.getAttribute('disabled') !== 'false'\n    )\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private get computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\n    )\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    this.checked = this.computedIndeterminate ? true : !this.computedChecked\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.internals.setFormValue(\n      this.computedChecked && !this.computedDisabled\n        ? this.computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.computedChecked && !this.computedDisabled) {\n      this.inheritedAttributes = {\n        ...this.inheritedAttributes,\n        tabindex: this.savedTabindex,\n      }\n      this.internals.setFormValue(this.computedValue)\n    } else {\n      this.savedTabindex = this.inheritedAttributes.tabindex\n      this.inheritedAttributes = {\n        ...this.inheritedAttributes,\n        tabindex: undefined,\n      }\n      // eslint-disable-next-line unicorn/no-null\n      this.internals.setFormValue(null)\n    }\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    if (this.computedDisabled) this.savedTabindex = newValue\n    else\n      this.inheritedAttributes = {\n        ...this.inheritedAttributes,\n        tabindex: newValue,\n      }\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (this.computedChecked && !this.computedDisabled)\n      this.internals.setFormValue(this.computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.valueChanged()\n\n    this.defineGetter('form', () => this.internals.form)\n    this.defineGetter('willValidate', () => this.internals.willValidate)\n    this.defineGetter('validity', () => this.internals.validity)\n    this.defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.defineGetter('checkValidity', () => this.checkValidity)\n    this.defineGetter('reportValidity', () => this.reportValidity)\n    this.defineGetter('setCustomValidity', () => this.setCustomValidity)\n\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled.toString()}\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.computedSize}\n      >\n        <div class=\"qds-container\">\n          <input\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={this.autoFocus}\n            checked={this.computedIndeterminate ? false : this.checked}\n            class=\"qds-checkbox\"\n            data-size={this.computedSize}\n            disabled={this.computedDisabled}\n            indeterminate={this.indeterminate}\n            onBlur={this.onBlur}\n            onFocus={this.onFocus}\n            ref={this.ref}\n            required={this.required}\n            type=\"checkbox\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.inheritedAttributes}\n          />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-checked': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"checked\"\n          />\n          <div class=\"qds-box\" data-size={this.computedSize} />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-indeterminate': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"indeterminate\"\n          />\n        </div>\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.element, p, { enumerable: true, get })\n  }\n\n  private readonly checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  private readonly reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  private readonly setCustomValidity: HTMLInputElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.input)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n}\n"],"version":3}
+{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n  grid-area: checkbox;\n  place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n  display: none;\n  pointer-events: none;\n}\n\n.qds-box {\n  border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n  display: grid;\n  align-self: flex-start;\n  grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n  color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n  cursor: pointer;\n  display: inline-flex;\n}\n\n.qds-checkbox {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  margin: 0;\n  print-color-adjust: exact;\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  &:hover ~ .qds-box,\n  &:active ~ .qds-box {\n    display: block;\n  }\n\n  &:hover ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-hover);\n  }\n\n  &:active ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .qds-checked,\n  &:indeterminate ~ .qds-indeterminate {\n    display: block;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-small-size);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-small-size);\n    height: var(--qds-control-toggle-indicator-small-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-standard-size);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-standard-size);\n    height: var(--qds-control-toggle-indicator-standard-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-large-size);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-large-size);\n    height: var(--qds-control-toggle-indicator-large-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n  tag: 'qds-checkbox',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n  /**\n   * Adds vertical margin to the checkbox for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * The checkbox's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the checkbox from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`][] element to associate the checkbox 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-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-checkbox>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represent a \"select all/none\" behavior when associated\n   * checkboxes have a mix of checked and unchecked states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * A value must be specified for the checkbox before the owning form can be\n   * submitted.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The error message that would be shown to the user if the `<qds-checkbox>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-checkbox>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * The value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: CheckboxValue = 'on'\n\n  /**\n   * True if `<qds-checkbox>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  private get computedDisabled(): boolean {\n    return (\n      (this.element.matches(':disabled') || (this.disabled ?? false)) &&\n      this.element.getAttribute('disabled') !== 'false'\n    )\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private get computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\n    )\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    this.checked = this.computedIndeterminate ? true : !this.computedChecked\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.internals.setFormValue(\n      this.computedChecked && !this.computedDisabled\n        ? this.computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.computedChecked && !this.computedDisabled)\n      this.internals.setFormValue(this.computedValue)\n    // eslint-disable-next-line unicorn/no-null\n    else this.internals.setFormValue(null)\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (this.computedChecked && !this.computedDisabled)\n      this.internals.setFormValue(this.computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.valueChanged()\n\n    this.defineGetter('form', () => this.internals.form)\n    this.defineGetter('willValidate', () => this.internals.willValidate)\n    this.defineGetter('validity', () => this.internals.validity)\n    this.defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.defineGetter('checkValidity', () => this.checkValidity)\n    this.defineGetter('reportValidity', () => this.reportValidity)\n    this.defineGetter('setCustomValidity', () => this.setCustomValidity)\n\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : undefined}\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.computedSize}\n      >\n        <div class=\"qds-container\">\n          <input\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={this.autoFocus}\n            checked={this.computedIndeterminate ? false : this.checked}\n            class=\"qds-checkbox\"\n            data-size={this.computedSize}\n            disabled={this.computedDisabled}\n            indeterminate={this.indeterminate}\n            onBlur={this.onBlur}\n            onFocus={this.onFocus}\n            ref={this.ref}\n            required={this.required}\n            tabIndex={this.computedDisabled ? undefined : this.tabIndex}\n            type=\"checkbox\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.inheritedAttributes}\n          />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-checked': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"checked\"\n          />\n          <div class=\"qds-box\" data-size={this.computedSize} />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-indeterminate': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"indeterminate\"\n          />\n        </div>\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.element, p, { enumerable: true, get })\n  }\n\n  private readonly checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  private readonly reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  private readonly setCustomValidity: HTMLInputElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.input)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n}\n"],"version":3}

package/components/helpers.js

@@ -6,19 +6,6 @@
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
 // SPDX-License-Identifier: Apache-2.0
-/**
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `qds-input` should inherit
- * the `tabindex` attribute that developers set directly on `qds-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- *
- * @param element Element to inherit attributes from.
- * @param attributes Which attributes to inherit.
- */
 const inheritAttributes = (element, attributes = []) => {
     const attributeObject = {};
     for (const attribute of attributes) {
@@ -170,6 +157,6 @@ const roundByDPR = (value) => {
     return Math.round(value * dpr) / dpr;
 };
 
-export { inheritAttributes as a, ignorePromise as b, invariant as c, propertyToPx as d, pickInputEventAttributes as e, isTouchDevice as f, inheritAriaAttributes as i, pickFocusEventAttributes as p, roundByDPR as r };
+export { ignorePromise as a, invariant as b, propertyToPx as c, pickInputEventAttributes as d, isTouchDevice as e, inheritAriaAttributes as i, pickFocusEventAttributes as p, roundByDPR as r };
 
 //# sourceMappingURL=helpers.js.map

package/components/helpers.js.map

@@ -1 +1 @@
-{"file":"helpers.js","mappings":"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","names":[],"sources":["src/helpers.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n  MiddlewareState,\n  OffsetOptions as LibraryOffsetOptions,\n} from '@floating-ui/dom'\nimport type { Except, Replace } from 'type-fest'\n\nexport type Attributes = Record<string, string | undefined>\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `qds-input` should inherit\n * the `tabindex` attribute that developers set directly on `qds-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n *\n * @param element Element to inherit attributes from.\n * @param attributes Which attributes to inherit.\n */\nexport const inheritAttributes = (\n  element: Element,\n  attributes: string[] = [],\n): Attributes => {\n  const attributeObject: Attributes = {}\n\n  for (const attribute of attributes) {\n    const value = element.getAttribute(attribute)\n    if (value !== null) {\n      attributeObject[attribute] = value\n      element.removeAttribute(attribute)\n    }\n  }\n\n  return attributeObject\n}\n\ntype ARIAAttribute =\n  | Replace<Lowercase<keyof ARIAMixin>, 'aria', 'aria-'>\n  | 'aria-activedescendant'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-colindextext'\n  | 'aria-controls'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-errormessage'\n  | 'aria-flowto'\n  | 'aria-labelledby'\n  | 'aria-owns'\n  | 'aria-relevant'\n  | 'aria-rowindextext'\n\nconst ariaAttributes: ARIAAttribute[] = [\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n  'role',\n]\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n *\n * @param element The element that the attributes should be copied from.\n */\nexport const inheritAriaAttributes = (\n  element: Element,\n): ReturnType<typeof inheritAttributes> =>\n  inheritAttributes(element, ariaAttributes)\n\nconst isProduction = process.env.NODE_ENV === 'production'\nconst prefix = 'Invariant failed'\n\n/**\n * Throws an error if the value is falsy.\n *\n * @param value Value to test.\n * @param message Optional message to display in development builds.\n */\nexport function invariant(value: unknown, message?: string): asserts value {\n  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\n  if (value) return\n  if (isProduction) throw new Error(prefix)\n\n  const error = message === undefined ? prefix : `${prefix}: ${message}`\n  throw new Error(error)\n}\n\n/**\n * From an object pick a set of keys.\n *\n * @param object Object to pick from.\n * @param keys They keys to pick.\n * @returns New object with only the picked keys.\n */\nexport const pick = <T, K extends keyof T>(\n  object: T,\n  ...keys: K[]\n): Pick<T, K> => {\n  const returnValue: Partial<Pick<T, K>> = {}\n  for (const key of keys) returnValue[key] = object[key]\n  return returnValue as Pick<T, K>\n}\n\nexport type QdsFocusEventDetail = Pick<FocusEvent, 'relatedTarget'>\nexport type QdsInputEventDetail = Pick<\n  InputEvent,\n  'data' | 'inputType' | 'isComposing'\n>\nexport const pickFocusEventAttributes = (\n  event: FocusEvent,\n): QdsFocusEventDetail => pick(event, 'relatedTarget')\nexport const pickInputEventAttributes = (\n  event: InputEvent,\n): QdsInputEventDetail => pick(event, 'data', 'inputType', 'isComposing')\n\nconst getConversionFactor = (\n  element: Element,\n  unit: string,\n): number | undefined => {\n  switch (unit) {\n    case 'cm': {\n      return 96 / 2.54\n    }\n    case 'em': {\n      return Number.parseFloat(\n        globalThis.getComputedStyle(\n          element.parentElement ?? document.documentElement,\n        ).fontSize,\n      )\n    }\n    case 'in': {\n      return 96\n    }\n    case 'mm': {\n      return 96 / 25.4\n    }\n    case 'pc': {\n      return 16\n    }\n    case 'pt': {\n      return 96 / 72\n    }\n    case 'px': {\n      return 1\n    }\n    case 'rem': {\n      return Number.parseFloat(\n        globalThis.getComputedStyle(document.documentElement).fontSize,\n      )\n    }\n    default: {\n      return undefined\n    }\n  }\n}\n\nexport const propertyToPx = (\n  element: Element,\n  property: string,\n): number | undefined => {\n  const value = globalThis.getComputedStyle(element).getPropertyValue(property)\n  const number = Number.parseFloat(value)\n  if (Number.isNaN(number)) return undefined\n  const unit = /\\s*[\\d+.-]*\\s*(.*)/.exec(value)?.[1] ?? ''\n\n  const conversionFactor = getConversionFactor(element, unit) ?? 1\n  return number * conversionFactor\n}\n\nexport const ignorePromise = <T>(promise: Promise<T>): void => {\n  promise.catch(() => {\n    invariant(false)\n  })\n}\n\nexport const isTouchDevice = (): boolean =>\n  'ontouchstart' in globalThis ||\n  ('maxTouchPoints' in globalThis && globalThis.navigator.maxTouchPoints > 0)\n\nexport const roundByDPR = (value: number): number => {\n  const dpr = devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nexport type OffsetValue = Except<\n  Exclude<\n    LibraryOffsetOptions,\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    Function | number\n  >,\n  'mainAxis'\n>\nexport type OffsetFunction = (state: MiddlewareState) => OffsetValue\nexport type OffsetOptions = OffsetFunction | OffsetValue\n"],"version":3}
+{"file":"helpers.js","mappings":"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","names":[],"sources":["src/helpers.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n  MiddlewareState,\n  OffsetOptions as LibraryOffsetOptions,\n} from '@floating-ui/dom'\nimport type { Except, Replace } from 'type-fest'\n\nexport type Attributes = Record<string, string | undefined>\n\nconst inheritAttributes = (\n  element: Element,\n  attributes: string[] = [],\n): Attributes => {\n  const attributeObject: Attributes = {}\n\n  for (const attribute of attributes) {\n    const value = element.getAttribute(attribute)\n    if (value !== null) {\n      attributeObject[attribute] = value\n      element.removeAttribute(attribute)\n    }\n  }\n\n  return attributeObject\n}\n\ntype ARIAAttribute =\n  | Replace<Lowercase<keyof ARIAMixin>, 'aria', 'aria-'>\n  | 'aria-activedescendant'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-colindextext'\n  | 'aria-controls'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-errormessage'\n  | 'aria-flowto'\n  | 'aria-labelledby'\n  | 'aria-owns'\n  | 'aria-relevant'\n  | 'aria-rowindextext'\n\nconst ariaAttributes: ARIAAttribute[] = [\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n  'role',\n]\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n *\n * @param element The element that the attributes should be copied from.\n */\nexport const inheritAriaAttributes = (\n  element: Element,\n): ReturnType<typeof inheritAttributes> =>\n  inheritAttributes(element, ariaAttributes)\n\nconst isProduction = process.env.NODE_ENV === 'production'\nconst prefix = 'Invariant failed'\n\n/**\n * Throws an error if the value is falsy.\n *\n * @param value Value to test.\n * @param message Optional message to display in development builds.\n */\nexport function invariant(value: unknown, message?: string): asserts value {\n  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\n  if (value) return\n  if (isProduction) throw new Error(prefix)\n\n  const error = message === undefined ? prefix : `${prefix}: ${message}`\n  throw new Error(error)\n}\n\n/**\n * From an object pick a set of keys.\n *\n * @param object Object to pick from.\n * @param keys They keys to pick.\n * @returns New object with only the picked keys.\n */\nexport const pick = <T, K extends keyof T>(\n  object: T,\n  ...keys: K[]\n): Pick<T, K> => {\n  const returnValue: Partial<Pick<T, K>> = {}\n  for (const key of keys) returnValue[key] = object[key]\n  return returnValue as Pick<T, K>\n}\n\nexport type QdsFocusEventDetail = Pick<FocusEvent, 'relatedTarget'>\nexport type QdsInputEventDetail = Pick<\n  InputEvent,\n  'data' | 'inputType' | 'isComposing'\n>\nexport const pickFocusEventAttributes = (\n  event: FocusEvent,\n): QdsFocusEventDetail => pick(event, 'relatedTarget')\nexport const pickInputEventAttributes = (\n  event: InputEvent,\n): QdsInputEventDetail => pick(event, 'data', 'inputType', 'isComposing')\n\nconst getConversionFactor = (\n  element: Element,\n  unit: string,\n): number | undefined => {\n  switch (unit) {\n    case 'cm': {\n      return 96 / 2.54\n    }\n    case 'em': {\n      return Number.parseFloat(\n        globalThis.getComputedStyle(\n          element.parentElement ?? document.documentElement,\n        ).fontSize,\n      )\n    }\n    case 'in': {\n      return 96\n    }\n    case 'mm': {\n      return 96 / 25.4\n    }\n    case 'pc': {\n      return 16\n    }\n    case 'pt': {\n      return 96 / 72\n    }\n    case 'px': {\n      return 1\n    }\n    case 'rem': {\n      return Number.parseFloat(\n        globalThis.getComputedStyle(document.documentElement).fontSize,\n      )\n    }\n    default: {\n      return undefined\n    }\n  }\n}\n\nexport const propertyToPx = (\n  element: Element,\n  property: string,\n): number | undefined => {\n  const value = globalThis.getComputedStyle(element).getPropertyValue(property)\n  const number = Number.parseFloat(value)\n  if (Number.isNaN(number)) return undefined\n  const unit = /\\s*[\\d+.-]*\\s*(.*)/.exec(value)?.[1] ?? ''\n\n  const conversionFactor = getConversionFactor(element, unit) ?? 1\n  return number * conversionFactor\n}\n\nexport const ignorePromise = <T>(promise: Promise<T>): void => {\n  promise.catch(() => {\n    invariant(false)\n  })\n}\n\nexport const isTouchDevice = (): boolean =>\n  'ontouchstart' in globalThis ||\n  ('maxTouchPoints' in globalThis && globalThis.navigator.maxTouchPoints > 0)\n\nexport const roundByDPR = (value: number): number => {\n  const dpr = devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nexport type OffsetValue = Except<\n  Exclude<\n    LibraryOffsetOptions,\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    Function | number\n  >,\n  'mainAxis'\n>\nexport type OffsetFunction = (state: MiddlewareState) => OffsetValue\nexport type OffsetOptions = OffsetFunction | OffsetValue\n"],"version":3}

package/components/icon.js

@@ -171,7 +171,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         await this.setIcon();
     }
     render() {
-        return (h("div", { key: '3576e675de1f4e040c4e940affaf9ce6997985a3', class: "qds-container" }, h("span", { key: '4b130b6e2d50e63e17df66fc9f3dc243457403e3', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'b591c1935e6c1c2325fad315f76954062a439bae', class: "qds-click-target" })));
+        return (h("div", { key: 'bab64b4f8893fa2cd9fb8cdfffe6a9b88dee716d', class: "qds-container" }, h("span", { key: 'e2e724b2d12cc1c482cb777a2773d32f78628db5', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'bea57ad56240b0c4f3c9d2a90ac88b57de04d340', class: "qds-click-target" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/label.js

@@ -36,10 +36,10 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("span", { key: 'cf6b02baa4249970ad2218872e6d85d9377b65e3', class: {
+        return (h("span", { key: 'ddf310818f922bfefe2c4fc2787ace4589d2cfaa', class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { class: "qds-required" }, "*"), this.text));
+            }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { key: '9a115ebc0d76b6f81385f6871e401063a020119d', class: "qds-required" }, "*"), this.text));
     }
     get element() { return this; }
     static get style() { return QdsLabelStyle0; }

package/components/label.js.map

@@ -1 +1 @@
-{"file":"label.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,uuBAAuuB,CAAC;AACzvB,uBAAe,QAAQ;;MCoBV,KAAK;;;;;QA0BR,wBAAmB,GAAe,EAAE,CAAA;sBAnBF,KAAK;wBAKH,KAAK;oBAKX,UAAU;;;IAWhD,IAAY,YAAY;QACtB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO,EAAE;gBACZ,OAAO,IAAI,CAAC,IAAI,CAAA;aACjB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,IAAI,CAAC,YAAY,KAExB,IAAI,CAAC,mBAAmB,IAE3B,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,cAAc,QAAS,EACpD,IAAI,CAAC,IAAI,CACL,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-label {\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n}\n\n.qds-required {\n  color: var(--qds-theme-feedback-field-required);\n  user-select: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n  tag: 'qds-label',\n  shadow: true,\n  styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n  /**\n   * Adds vertical margin to the label for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * Specify the labelled item as required by appending a red asterisk (*).\n   */\n  @Prop() public readonly required: boolean = false\n\n  /**\n   * The label's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The label's text.\n   */\n  @Prop() public readonly text?: string\n\n  @Element() private readonly element!: HTMLQdsLabelElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <span\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.computedSize}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.required && <span class=\"qds-required\">*</span>}\n        {this.text}\n      </span>\n    )\n  }\n}\n"],"version":3}
+{"file":"label.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,uuBAAuuB,CAAC;AACzvB,uBAAe,QAAQ;;MCoBV,KAAK;;;;;QA0BR,wBAAmB,GAAe,EAAE,CAAA;sBAnBF,KAAK;wBAKH,KAAK;oBAKX,UAAU;;;IAWhD,IAAY,YAAY;QACtB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO,EAAE;gBACZ,OAAO,IAAI,CAAC,IAAI,CAAA;aACjB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,IAAI,CAAC,YAAY,KAExB,IAAI,CAAC,mBAAmB,IAE3B,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,cAAc,QAAS,EACpD,IAAI,CAAC,IAAI,CACL,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-label {\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n}\n\n.qds-required {\n  color: var(--qds-theme-feedback-field-required);\n  user-select: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n  tag: 'qds-label',\n  shadow: true,\n  styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n  /**\n   * Adds vertical margin to the label for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * Specify the labelled item as required by appending a red asterisk (*).\n   */\n  @Prop() public readonly required: boolean = false\n\n  /**\n   * The label's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The label's text.\n   */\n  @Prop() public readonly text?: string\n\n  @Element() private readonly element!: HTMLQdsLabelElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <span\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.computedSize}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.required && <span class=\"qds-required\">*</span>}\n        {this.text}\n      </span>\n    )\n  }\n}\n"],"version":3}

package/components/qds-breadcrumb-item.js

@@ -21,7 +21,7 @@ const QdsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class QdsBreadcrumb
         this.target = undefined;
     }
     render() {
-        return (h("li", { key: 'c9f6f9b7131257c405aef668550acd2beeb77df5', class: "qds-breadcrumb-item" }, this.href === undefined ? (this.text) : (h(Fragment, null, h("a", { class: "qds-anchor", href: this.href, hrefLang: this.hreflang, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target }, this.text), h("span", { "aria-hidden": "true" }, "/")))));
+        return (h("li", { key: 'a351d31f269a7dbb66d4ffcd73866ccc3dd651e2', class: "qds-breadcrumb-item", "aria-current": this.href === undefined ? 'page' : undefined }, this.href === undefined ? (this.text) : (h(Fragment, null, h("a", { class: "qds-anchor", href: this.href, hrefLang: this.hreflang, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target }, this.text), h("span", { "aria-hidden": "true" }, "/")))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return QdsBreadcrumbItemStyle0; }

package/components/qds-breadcrumb-item.js.map

@@ -1 +1 @@
-{"file":"qds-breadcrumb-item.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,6rBAA6rB,CAAC;AACxtB,gCAAe,iBAAiB;;MCanBA,mBAAiB;;;;;;;;;;;;IAkJrB,MAAM;QACX,QACE,2DAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,IAAI,KAAK,SAAS,IACtB,IAAI,CAAC,IAAI,KAET,kBACE,SACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACR,EACJ,2BAAkB,MAAM,QAAS,CAChC,CACJ,CACE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["QdsBreadcrumbItem"],"sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-breadcrumb-item {\n  font: var(--qds-control-standard-text);\n  display: inline-flex;\n  height: var(--qds-control-standard-height);\n  align-items: center;\n  gap: var(--qds-control-standard-gap-siblings-related);\n  flex-shrink: 0;\n  list-style: none;\n}\n\n.qds-anchor {\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n    outline-offset: var(--qds-focus-border-offset);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Component, Fragment, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n@Component({\n  tag: 'qds-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem {\n  /**\n   * The breadcrumb item's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<BreadcrumbTarget, string>\n\n  public render() {\n    return (\n      <li class=\"qds-breadcrumb-item\">\n        {this.href === undefined ? (\n          this.text\n        ) : (\n          <>\n            <a\n              class=\"qds-anchor\"\n              href={this.href}\n              hrefLang={this.hreflang}\n              referrerPolicy={this.referrerPolicy}\n              rel={this.rel}\n              target={this.target}\n            >\n              {this.text}\n            </a>\n            <span aria-hidden=\"true\">/</span>\n          </>\n        )}\n      </li>\n    )\n  }\n}\n"],"version":3}
+{"file":"qds-breadcrumb-item.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,6rBAA6rB,CAAC;AACxtB,gCAAe,iBAAiB;;MCanBA,mBAAiB;;;;;;;;;;;;IAkJrB,MAAM;QACX,QACE,2DACE,KAAK,EAAC,qBAAqB,kBACb,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAEzD,IAAI,CAAC,IAAI,KAAK,SAAS,IACtB,IAAI,CAAC,IAAI,KAET,kBACE,SACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACR,EACJ,2BAAkB,MAAM,QAAS,CAChC,CACJ,CACE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["QdsBreadcrumbItem"],"sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-breadcrumb-item {\n  font: var(--qds-control-standard-text);\n  display: inline-flex;\n  height: var(--qds-control-standard-height);\n  align-items: center;\n  gap: var(--qds-control-standard-gap-siblings-related);\n  flex-shrink: 0;\n  list-style: none;\n}\n\n.qds-anchor {\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n    outline-offset: var(--qds-focus-border-offset);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Component, Fragment, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n@Component({\n  tag: 'qds-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem {\n  /**\n   * The breadcrumb item's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<BreadcrumbTarget, string>\n\n  public render() {\n    return (\n      <li\n        class=\"qds-breadcrumb-item\"\n        aria-current={this.href === undefined ? 'page' : undefined}\n      >\n        {this.href === undefined ? (\n          this.text\n        ) : (\n          <>\n            <a\n              class=\"qds-anchor\"\n              href={this.href}\n              hrefLang={this.hreflang}\n              referrerPolicy={this.referrerPolicy}\n              rel={this.rel}\n              target={this.target}\n            >\n              {this.text}\n            </a>\n            <span aria-hidden=\"true\">/</span>\n          </>\n        )}\n      </li>\n    )\n  }\n}\n"],"version":3}

package/components/qds-button.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-button:disabled,[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-container{display:grid;grid-template-areas:'button'}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:button;justify-content:center;outline:none;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:var(--qds-internal-white-space-property, nowrap);width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-focus-ring{border-radius:max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );grid-area:button;isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );height:calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  )}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}.qds-icon{flex-shrink:0}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-button.qds-icon-only[data-size='small']{padding-inline:0;width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-button.qds-icon-only[data-size='standard']{padding-inline:0;width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-button.qds-icon-only[data-size='large']{padding-inline:0;width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-button[data-importance='subdued']{border-block-end:var(--qds-control-border-width) solid transparent;padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance='subdued']{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n      var(--qds-control-border-width)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-hero-border-radius)\n      );font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);white-space:normal}.qds-button[data-variant='hero'][data-importance='standard']{padding-block:calc(\n          var(--qds-control-hero-padding-auto-height) -\n            var(\n              --qds-control-border-width-block-start,\n              var(--qds-control-border-width)\n            )\n        )\n        calc(\n          var(--qds-control-hero-padding-auto-height) -\n            var(\n              --qds-control-border-width-block-end,\n              var(--qds-control-border-width)\n            )\n        )}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-variant='hero']{height:var(--qds-control-hero-height);padding:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-variant='hero']{border-radius:max(\n        1px,\n        var(\n          --qds-control-border-radius-top-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-top-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}.qds-button[data-action^='dropdown']{padding-inline:var(--qds-control-input-padding-horizontal);justify-content:space-between}.qds-button[data-action^='dropdown'][data-importance='standard']{background-color:var(--qds-theme-control-input-background)}";
+const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-button:disabled,[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-container{display:grid;grid-template-areas:'button'}.qds-focus-ring{border-radius:max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );grid-area:button;isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );height:calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  )}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:button;justify-content:center;outline:none;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:var(--qds-internal-white-space-property, nowrap);width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}.qds-icon{flex-shrink:0}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-button.qds-icon-only[data-size='small']{padding-inline:0;width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-button.qds-icon-only[data-size='standard']{padding-inline:0;width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-button.qds-icon-only[data-size='large']{padding-inline:0;width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-button[data-importance='subdued']{border-block-end:var(--qds-control-border-width) solid transparent;padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance='subdued']{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n      var(--qds-control-border-width)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-hero-border-radius)\n      );font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);white-space:normal}.qds-button[data-variant='hero'][data-importance='standard']{padding-block:calc(\n          var(--qds-control-hero-padding-auto-height) -\n            var(\n              --qds-control-border-width-block-start,\n              var(--qds-control-border-width)\n            )\n        )\n        calc(\n          var(--qds-control-hero-padding-auto-height) -\n            var(\n              --qds-control-border-width-block-end,\n              var(--qds-control-border-width)\n            )\n        )}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-variant='hero']{height:var(--qds-control-hero-height);padding:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-variant='hero']{border-radius:max(\n        1px,\n        var(\n          --qds-control-border-radius-top-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-top-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}:is([data-action='dropdown'],[data-action='dropdown-close']) .qds-action{margin-inline-start:auto}[data-importance='standard']:is([data-action='dropdown'],[data-action='dropdown-close']){background-color:var(--qds-theme-control-input-background)}:is([data-action='dropdown'],[data-action='dropdown-close']):not([data-importance='subdued']){padding-inline:var(--qds-control-input-padding-horizontal)}";
 const QdsButtonStyle0 = buttonCss;
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
@@ -44,6 +44,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         this.target = undefined;
         this.type = undefined;
         this.value = undefined;
+        this.tabIndex = undefined;
     }
     get formElement() {
         return this.form !== undefined && this.form !== ''
@@ -102,10 +103,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             }
         }
     }
-    get computedTabIndex() {
-        const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex ?? '0', 10);
-        return Number.isNaN(parsedValue) ? 0 : parsedValue;
-    }
     onClick(event) {
         if (this.computedDisabled) {
             event.stopImmediatePropagation();
@@ -131,21 +128,32 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         fakeButton.click();
         fakeButton.remove();
     }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.element);
+        this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0');
     }
     render() {
         const Tag = this.href === undefined ? 'button' : 'a';
-        return (h("div", { key: '973eb3edebecf0255600ea759c50a9b58fc7d3a5', class: "qds-container" }, h(Tag, { key: '75fddf7053219bac65fce340ec8c2e6d36a579cd', "aria-disabled": Tag === 'a' ? this.computedDisabled.toString() : undefined, class: {
+        const ariaDisabled = this.computedDisabled ? 'true' : undefined;
+        const disabledTabIndex = Tag === 'a' ? -1 : undefined;
+        return (h("div", { key: '2312c0decdb696b80fe57a0cf0ba3bfafdbaf040', class: "qds-container" }, h(Tag, { key: '1d1dd43c79821359d90f9d467e336784647a947e', "aria-disabled": Tag === 'a' ? ariaDisabled : undefined, class: {
                 'qds-button': true,
                 'qds-icon-only': this.iconOnly,
-            }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-action": this.computedAction, "data-variant": this.variant, 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, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: 'f2823aefd79a9b733a788fa78d45b1decdbc5810', class: {
+            }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-action": this.computedAction, "data-variant": this.variant, 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, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' && this.download !== undefined ? 'button' : undefined, tabIndex: this.computedDisabled ? disabledTabIndex : this.tabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '765ee5d7c07781e5833755a89fb0f63b4b5f1d90', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { key: '87c173726bf35916e999d5a3d7ec0e2ca8be92f0', class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { key: 'fd1939608b8ce0c918ad99a5a26143c6f159b83c', "aria-hidden": "true", class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: '087f29f6a2774333f5f12578ae8207afa0b77d0b', class: {
                 'qds-focus-ring': true,
                 'qds-icon-only': this.iconOnly,
             }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant })));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }
+    static get watchers() { return {
+        "tabindex": ["tabindexChanged"]
+    }; }
     static get style() { return QdsButtonStyle0; }
 }, [17, "qds-button", {
         "action": [1],
@@ -167,8 +175,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "name": [1],
         "target": [1],
         "type": [1],
-        "value": [1]
-    }, [[0, "click", "onClick"]]]);
+        "value": [1],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "tabindex": ["tabindexChanged"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;