@quartzds/core 1.0.0-beta.53 → 1.0.0-beta.54

package/components/icon.js

@@ -171,7 +171,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         await this.setIcon();
     }
     render() {
-        return (h("div", { key: 'd51eef354d739ef11993169100c976889d41830f', class: "qds-container" }, h("span", { key: '41b970b5ccec2641bd5b989863d5ad6a70dace1d', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'c19b079994f42dcfe112871c3ff87e530806850d', class: "qds-click-target" })));
+        return (h("div", { key: 'aebf2afb7218f674d29c6bff3a56372d8ebc0590', class: "qds-container" }, h("span", { key: '6571de55c757cc3adb24f9bb3d26cb61cd4cba5d', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'e1160159c01344cb40780a0a642bd271aeae731d', 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: '70901da66ab70ea6f802ad67b1382ce5c5125bb3', class: {
+        return (h("span", { key: 'b7f8355b5ac7052684708d8c91271b79dad009b9', class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { key: 'bde98d5d94694460ad1fc82fc6d6c4f115c41db2', class: "qds-required" }, "*"), this.text));
+            }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { key: 'e1d14eb03e14d79a4f80d1702eb1d852572b52b5', class: "qds-required" }, "*"), this.text));
     }
     get element() { return this; }
     static get style() { return QdsLabelStyle0; }

package/components/qds-button.js

@@ -26,7 +26,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         };
         this.action = undefined;
         this.badge = undefined;
-        this.badgeContext = undefined;
+        this.badgeDescription = undefined;
         this.iconName = undefined;
         this.iconLibrary = 'default';
         this.importance = 'standard';
@@ -142,10 +142,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         const Tag = this.href === undefined ? 'button' : 'a';
         const ariaDisabled = this.computedDisabled ? 'true' : undefined;
         const disabledTabIndex = Tag === 'a' ? -1 : undefined;
-        return (h("div", { key: 'd843c7ea3d24cc9716af97c866ce59bb159a3cd7', class: "qds-container" }, h(Tag, { key: '80777de6a38363fc138b1a1e5819720be4198784', "aria-disabled": Tag === 'a' ? ariaDisabled : undefined, class: {
+        return (h("div", { key: '4317d778f6cc9d0d53d8ba212fea8e0feb7f3939', class: "qds-container" }, h(Tag, { key: 'ce17d74867a7d8eecb590bbe3251a4006355cdb8', "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' && 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: 'bb415de4c5b5f86019f7bd7e85731bd8fe7dcb7e', "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: '3ce72e7087fa010cdd2b6fec83775e28513b620c', class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge, h("span", { key: 'f0999ed8504abfcafdc67b5cb7d5dee031fea898', class: "qds-sr-only" }, this.badgeContext))), this.computedAction !== undefined && (h("qds-icon", { key: 'b52b6e90c05e942016d97382a0a2e14c00d97f52', "aria-hidden": "true", class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: '22cf19b3d483415263ddfe88327d8f2d15669a97', 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: 'd1403622e5794ac6eab3ef6d5c84042a87834fd7', "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: 'e59b324faeff2b5a1c5fc801047653472b6842e6', class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge, h("span", { key: 'dddc1c5da6c860979e635e3b8c2bdc14759c4cac', class: "qds-sr-only" }, this.badgeDescription))), this.computedAction !== undefined && (h("qds-icon", { key: '6ed38b58461e6473cc57f25ca1ad33883bf769bc', "aria-hidden": "true", class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: '003c94bb4cda7c904a7f46bdf54f0a76587bd7cd', class: {
                 'qds-focus-ring': true,
                 'qds-icon-only': this.iconOnly,
             }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant })));
@@ -159,7 +159,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
 }, [17, "qds-button", {
         "action": [1],
         "badge": [1],
-        "badgeContext": [1, "badge-context"],
+        "badgeDescription": [1, "badge-description"],
         "iconName": [1, "icon-name"],
         "iconLibrary": [1, "icon-library"],
         "importance": [1],

package/components/qds-button.js.map

@@ -1 +1 @@
-{"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-button:disabled,\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-action {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-container {\n  display: grid;\n  grid-template-areas: 'button';\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: button;\n  isolation: isolate;\n  outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  outline-offset: var(--qds-focus-border-offset);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background-color: initial;\n  border: none;\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  grid-area: button;\n  justify-content: center;\n  outline: none;\n  padding-block: 0;\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: var(--qds-internal-white-space-property, nowrap);\n  width: 100%;\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible ~ .qds-focus-ring {\n    visibility: visible;\n  }\n}\n\n.qds-badge {\n  border-radius: var(--qds-control-rounded-border-radius);\n  font: var(--qds-badge-text);\n  height: var(--qds-badge-height);\n  padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n.qds-sr-only {\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-button {\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-small-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-button {\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-standard-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-button {\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-large-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &.qds-button {\n    border-block-end: var(--qds-control-border-width) solid transparent;\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);\n      color: var(--qds-theme-link-standard-hover);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-hover);\n      }\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);\n      color: var(--qds-theme-link-standard-pressed);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-pressed);\n      }\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='standard'] {\n  color: var(--qds-theme-control-text-standard);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n\n  &.qds-button {\n    border-color: var(--qds-theme-control-border);\n    border-style: solid;\n    border-width: var(--qds-control-border-width)\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n      var(--qds-control-border-width);\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-signature-color-contrast);\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-signature-color-default);\n    color: var(--qds-theme-signature-color-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='destructive'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-action-destructive-contrast);\n    color: var(--qds-theme-feedback-action-destructive-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-feedback-action-destructive-default);\n    color: var(--qds-theme-feedback-action-destructive-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='hero'] {\n  &.qds-button {\n    border-radius: var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-hero-border-radius)\n      );\n    font: var(--qds-control-hero-text);\n    gap: var(--qds-control-hero-gap-internal);\n    padding-block: var(--qds-control-hero-padding-auto-height);\n    white-space: normal;\n\n    &[data-importance='standard'] {\n      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        );\n    }\n\n    &:not([data-importance='subdued']) {\n      padding-inline: var(--qds-control-button-hero-padding-horizontal);\n    }\n\n    &.qds-icon-only {\n      height: var(--qds-control-hero-height);\n      padding: 0;\n      width: var(--qds-control-hero-height);\n    }\n  }\n\n  &.qds-focus-ring {\n    border-radius: max(\n        1px,\n        var(\n          --qds-control-border-radius-top-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-top-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-left,\n          var(--qds-control-hero-border-radius)\n        )\n      );\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-hero-icon-size);\n  }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n  .qds-action {\n    margin-inline-start: auto;\n  }\n\n  &[data-importance='standard'] {\n    background-color: var(--qds-theme-control-input-background);\n  }\n\n  &:not([data-importance='subdued']) {\n    padding-inline: var(--qds-control-input-padding-horizontal);\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  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' | 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the action icon to render.\n   */\n  @Prop() public readonly action?: Action\n\n  /**\n   * The button's badge text.\n   */\n  @Prop() public readonly badge?: string\n\n  /**\n   * Adds accessible text to the badge that will be used by screen readers.\n   *\n   * @example\n   * <qds-button badge=\"2\" badge-context=\"new notifications\"></qds-button>\n   * // This button's badge will be read by screen readers as \"2 new notifications\"\n   */\n  @Prop() public readonly badgeContext?: string\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * The button's variant.\n   */\n  @Prop() public readonly variant?: ButtonVariant\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop()\n  public readonly disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'dropdown-close':\n      case 'next': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedImportance(): Importance | undefined {\n    if (this.variant === 'destructive') return undefined\n\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedSize(): Size | undefined {\n    if (this.variant === 'hero') return undefined\n\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  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (this.buttonType === 'button' || !this.formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n    const ariaDisabled = this.computedDisabled ? 'true' : undefined\n    const disabledTabIndex = Tag === 'a' ? -1 : undefined\n\n    return (\n      <div class=\"qds-container\">\n        <Tag\n          aria-disabled={Tag === 'a' ? ariaDisabled : undefined}\n          class={{\n            'qds-button': true,\n            'qds-icon-only': this.iconOnly,\n          }}\n          data-importance={this.computedImportance}\n          data-size={this.computedSize}\n          data-action={this.computedAction}\n          data-variant={this.variant}\n          disabled={Tag === 'a' ? undefined : this.disabled}\n          download={Tag === 'a' ? this.download : undefined}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n          role={\n            Tag === 'a' && this.download !== undefined ? 'button' : undefined\n          }\n          tabIndex={this.computedDisabled ? disabledTabIndex : this.tabIndex}\n          target={Tag === 'a' ? this.target : undefined}\n          type={Tag === 'a' ? undefined : this.buttonType}\n          value={Tag === 'a' ? undefined : this.value}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {this.text}\n          {this.badge !== undefined && this.badge !== '' && (\n            <div\n              class=\"qds-badge\"\n              data-importance={this.computedImportance}\n              data-variant={this.variant}\n            >\n              {this.badge}\n              <span class=\"qds-sr-only\">{this.badgeContext}</span>\n            </div>\n          )}\n          {this.computedAction !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-action\"\n              data-size={this.computedSize}\n              data-variant={this.variant}\n              library=\"core\"\n              name={this.computedAction}\n            />\n          )}\n        </Tag>\n        <div\n          class={{\n            'qds-focus-ring': true,\n            'qds-icon-only': this.iconOnly,\n          }}\n          data-importance={this.computedImportance}\n          data-size={this.computedSize}\n          data-variant={this.variant}\n        />\n      </div>\n    )\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"],"version":3}
+{"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-button:disabled,\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-action {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-container {\n  display: grid;\n  grid-template-areas: 'button';\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: button;\n  isolation: isolate;\n  outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  outline-offset: var(--qds-focus-border-offset);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background-color: initial;\n  border: none;\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  grid-area: button;\n  justify-content: center;\n  outline: none;\n  padding-block: 0;\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: var(--qds-internal-white-space-property, nowrap);\n  width: 100%;\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible ~ .qds-focus-ring {\n    visibility: visible;\n  }\n}\n\n.qds-badge {\n  border-radius: var(--qds-control-rounded-border-radius);\n  font: var(--qds-badge-text);\n  height: var(--qds-badge-height);\n  padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n.qds-sr-only {\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-button {\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-small-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-button {\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-standard-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-button {\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n\n    &.qds-icon-only {\n      padding-inline: 0;\n      width: var(--qds-control-large-height);\n    }\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &.qds-button {\n    border-block-end: var(--qds-control-border-width) solid transparent;\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);\n      color: var(--qds-theme-link-standard-hover);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-hover);\n      }\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);\n      color: var(--qds-theme-link-standard-pressed);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-pressed);\n      }\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='standard'] {\n  color: var(--qds-theme-control-text-standard);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n\n  &.qds-button {\n    border-color: var(--qds-theme-control-border);\n    border-style: solid;\n    border-width: var(--qds-control-border-width)\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n      var(--qds-control-border-width);\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-signature-color-contrast);\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-signature-color-default);\n    color: var(--qds-theme-signature-color-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='destructive'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-action-destructive-contrast);\n    color: var(--qds-theme-feedback-action-destructive-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-feedback-action-destructive-default);\n    color: var(--qds-theme-feedback-action-destructive-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='hero'] {\n  &.qds-button {\n    border-radius: var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-hero-border-radius)\n      )\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-hero-border-radius)\n      );\n    font: var(--qds-control-hero-text);\n    gap: var(--qds-control-hero-gap-internal);\n    padding-block: var(--qds-control-hero-padding-auto-height);\n    white-space: normal;\n\n    &[data-importance='standard'] {\n      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        );\n    }\n\n    &:not([data-importance='subdued']) {\n      padding-inline: var(--qds-control-button-hero-padding-horizontal);\n    }\n\n    &.qds-icon-only {\n      height: var(--qds-control-hero-height);\n      padding: 0;\n      width: var(--qds-control-hero-height);\n    }\n  }\n\n  &.qds-focus-ring {\n    border-radius: max(\n        1px,\n        var(\n          --qds-control-border-radius-top-left,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-top-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-right,\n          var(--qds-control-hero-border-radius)\n        )\n      )\n      max(\n        1px,\n        var(\n          --qds-control-border-radius-bottom-left,\n          var(--qds-control-hero-border-radius)\n        )\n      );\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-hero-icon-size);\n  }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n  .qds-action {\n    margin-inline-start: auto;\n  }\n\n  &[data-importance='standard'] {\n    background-color: var(--qds-theme-control-input-background);\n  }\n\n  &:not([data-importance='subdued']) {\n    padding-inline: var(--qds-control-input-padding-horizontal);\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  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' | 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the action icon to render.\n   */\n  @Prop() public readonly action?: Action\n\n  /**\n   * The button's badge text.\n   */\n  @Prop() public readonly badge?: string\n\n  /**\n   * Adds accessible text to the badge that will be used by screen readers.\n   *\n   * @example\n   * <qds-button badge=\"2\" badge-description=\"new notifications\"></qds-button>\n   * // This button's badge will be read by screen readers as \"2 new notifications\"\n   */\n  @Prop() public readonly badgeDescription?: string\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * The button's variant.\n   */\n  @Prop() public readonly variant?: ButtonVariant\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop()\n  public readonly disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'dropdown-close':\n      case 'next': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedImportance(): Importance | undefined {\n    if (this.variant === 'destructive') return undefined\n\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedSize(): Size | undefined {\n    if (this.variant === 'hero') return undefined\n\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  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (this.buttonType === 'button' || !this.formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n    const ariaDisabled = this.computedDisabled ? 'true' : undefined\n    const disabledTabIndex = Tag === 'a' ? -1 : undefined\n\n    return (\n      <div class=\"qds-container\">\n        <Tag\n          aria-disabled={Tag === 'a' ? ariaDisabled : undefined}\n          class={{\n            'qds-button': true,\n            'qds-icon-only': this.iconOnly,\n          }}\n          data-importance={this.computedImportance}\n          data-size={this.computedSize}\n          data-action={this.computedAction}\n          data-variant={this.variant}\n          disabled={Tag === 'a' ? undefined : this.disabled}\n          download={Tag === 'a' ? this.download : undefined}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n          role={\n            Tag === 'a' && this.download !== undefined ? 'button' : undefined\n          }\n          tabIndex={this.computedDisabled ? disabledTabIndex : this.tabIndex}\n          target={Tag === 'a' ? this.target : undefined}\n          type={Tag === 'a' ? undefined : this.buttonType}\n          value={Tag === 'a' ? undefined : this.value}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          {this.text}\n          {this.badge !== undefined && this.badge !== '' && (\n            <div\n              class=\"qds-badge\"\n              data-importance={this.computedImportance}\n              data-variant={this.variant}\n            >\n              {this.badge}\n              <span class=\"qds-sr-only\">{this.badgeDescription}</span>\n            </div>\n          )}\n          {this.computedAction !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-action\"\n              data-size={this.computedSize}\n              data-variant={this.variant}\n              library=\"core\"\n              name={this.computedAction}\n            />\n          )}\n        </Tag>\n        <div\n          class={{\n            'qds-focus-ring': true,\n            'qds-icon-only': this.iconOnly,\n          }}\n          data-importance={this.computedImportance}\n          data-size={this.computedSize}\n          data-variant={this.variant}\n        />\n      </div>\n    )\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"],"version":3}

package/components/qds-dialog.js

@@ -64,7 +64,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             await this.show();
     }
     render() {
-        return (h(Host, { key: 'f6c3ff61b4547ede49f35c79d3dd894f92094567' }, h("dialog", { key: 'cb07f633c568124463d047e261e7f0fb41950a43', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: 'bd4bb75121964269d956c8cc612e58bf3d613f0d', class: "qds-content" }, h("slot", { key: '6adf340f99a74f56713ff18035274262081c3041' }))), h("div", { key: '0fb6f1931f0f84f57f1e7ee6e74379e0dad6702d', class: "qds-backdrop" })));
+        return (h(Host, { key: '11ccc6f8475660f3e1c19dc16bf6ad14b266ae2c' }, h("dialog", { key: '655785216b142c13b7745ac97391513a3f88a706', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: '4e59b7ac705f41a048a477912b93eba5c8058c9f', class: "qds-content" }, h("slot", { key: '0c702882966e9e3668ac9bd69798bf8c436d0852' }))), h("div", { key: 'ea5b13ebf7cd353102ce7ca4fa7fb78cde8d3771', class: "qds-backdrop" })));
     }
     async handleSubmit(event) {
         if ((event instanceof SubmitEvent &&

package/components/qds-divider.js

@@ -32,7 +32,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("hr", { key: 'aeb01ee02b77ab18eb33c1bb4bb7ae0115c35ff9', class: {
+        return (h("hr", { key: '712e4907285610bff343c77a85c1dc8b30f6fea1', class: {
                 'qds-divider': true,
                 'qds-vertical': this.vertical,
             }, "aria-hidden": "true", "data-importance": this.computedImportance, ...this.inheritedAttributes }));

package/components/qds-dropdown.js

@@ -162,11 +162,11 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.disconnectReferenceElement();
     }
     render() {
-        return (h(Host, { key: 'b127376d66dbce1654bc31ffc3106938ca9bc25d', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: this.boundEscape, onFocusout: this.boundFocusout, style: {
+        return (h(Host, { key: 'af9a1fb7670f0ea7af5c38eee15eaa546347ad69', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: this.boundEscape, onFocusout: this.boundFocusout, style: {
                 display: this.hostDisplay,
                 position: this.hostPosition,
                 transform: this.hostTransform,
-            } }, h("slot", { key: 'c52c171af501666ac30efb574ddc188fb784ad05' })));
+            } }, h("slot", { key: '878da7ca3d91c9d619707126cf97c15d387d973a' })));
     }
     async handleFocusout(event) {
         if (!(event instanceof FocusEvent))

package/components/qds-form-message.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const formMessageCss = ":host([hidden]){display:none !important}:host{display:inline-block;line-height:0}.qds-form-message{color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-icon-container,.qds-icon-background{display:flex;align-items:center}.qds-icon-background{border-radius:var(--qds-control-rounded-border-radius)}.qds-icon{color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size='small']{font:var(--qds-control-small-text)}.qds-icon-container[data-size='small']{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size='small']{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.qds-inline[data-size='small']{margin-block:var(--qds-control-small-padding-auto-height)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-icon-container[data-size='standard']{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size='standard']{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.qds-inline[data-size='standard']{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size='large']{font:var(--qds-control-large-text)}.qds-icon-container[data-size='large']{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size='large']{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.qds-inline[data-size='large']{margin-block:var(--qds-control-large-padding-auto-height)}.qds-icon-background[data-status='error']{background-color:var(--qds-theme-feedback-result-failure)}.qds-text[data-status='error']{color:var(--qds-theme-feedback-result-failure)}[data-status='info'].qds-icon-background{background-color:var(--qds-theme-feedback-message-informational)}.qds-icon-background[data-status='success']{background-color:var(--qds-theme-feedback-result-success)}.qds-text[data-status='success']{color:var(--qds-theme-feedback-result-success)}[data-status='warning'].qds-icon-background{background-color:var(--qds-theme-feedback-result-partial-success)}";
+const formMessageCss = ":host([hidden]){display:none !important}:host{display:inline-block;line-height:0}.qds-form-message{color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-icon-container,.qds-icon-background{display:flex;align-items:center}.qds-icon-background{border-radius:var(--qds-control-rounded-border-radius)}.qds-icon{color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-size='small']{font:var(--qds-control-small-text)}.qds-icon-container[data-size='small']{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size='small']{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.qds-inline[data-size='small']{margin-block:var(--qds-control-small-padding-auto-height)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-icon-container[data-size='standard']{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size='standard']{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.qds-inline[data-size='standard']{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size='large']{font:var(--qds-control-large-text)}.qds-icon-container[data-size='large']{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size='large']{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.qds-inline[data-size='large']{margin-block:var(--qds-control-large-padding-auto-height)}.qds-icon-background[data-status='error']{background-color:var(--qds-theme-feedback-result-failure)}.qds-text[data-status='error']{color:var(--qds-theme-feedback-result-failure)}[data-status='info'].qds-icon-background{background-color:var(--qds-theme-feedback-message-informational)}.qds-icon-background[data-status='success']{background-color:var(--qds-theme-feedback-result-success)}.qds-text[data-status='success']{color:var(--qds-theme-feedback-result-success)}[data-status='warning'].qds-icon-background{background-color:var(--qds-theme-feedback-result-partial-success)}";
 const QdsFormMessageStyle0 = formMessageCss;
 
 const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends HTMLElement {
@@ -19,6 +19,7 @@ const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends H
         this.inline = false;
         this.size = 'standard';
         this.status = 'error';
+        this.statusDescription = undefined;
         this.text = undefined;
     }
     get computedSize() {
@@ -40,10 +41,10 @@ const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends H
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("span", { key: '31c4d3e03308f8f2191ed352a86d4e8d02fc97a8', class: {
+        return (h("span", { key: '4000137609e970fb0f4460a7690f88631a91c1f6', class: {
                 'qds-form-message': true,
                 'qds-inline': this.inline,
-            }, "data-size": this.computedSize, ...this.inheritedAttributes }, h("div", { key: '3dc15338833d970503112b43003fd5cf5cbf80ec', class: "qds-icon-container", "data-size": this.computedSize }, h("div", { key: 'a05f33f42c7eceecc421d49b45ef45054fca588f', class: "qds-icon-background", "data-size": this.computedSize, "data-status": this.status }, h("qds-icon", { key: 'e106fc9910e2e54ecd9bd15bf07a0621800a1864', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, name: `status-${this.status}`, library: "core" }))), h("span", { key: 'dc4fed309067e90908f4e912ced19520bf813698', class: "qds-text", "data-status": this.computedStatus }, this.text)));
+            }, "data-size": this.computedSize, ...this.inheritedAttributes }, h("div", { key: '7b471b59310ad6874ff0adfaee4db0bc09a058e0', class: "qds-icon-container", "data-size": this.computedSize }, h("div", { key: '7eca3a0f58b6b783ebf26c163ef7eff3e6e9a8cc', class: "qds-icon-background", "data-size": this.computedSize, "data-status": this.status }, h("qds-icon", { key: 'e91db76ca0567bc20d49f1d11a5e259f89559d99', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, name: `status-${this.status}`, library: "core" }), h("span", { key: 'c5dbc6823370d3968b415af482384313b776e819', class: "qds-sr-only" }, this.statusDescription))), h("span", { key: '82436ef74a72edf18fef26db120f73c64552c85e', class: "qds-text", "data-status": this.computedStatus }, this.text)));
     }
     get element() { return this; }
     static get style() { return QdsFormMessageStyle0; }
@@ -51,6 +52,7 @@ const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends H
         "inline": [4],
         "size": [1],
         "status": [1],
+        "statusDescription": [1, "status-description"],
         "text": [1]
     }]);
 function defineCustomElement$1() {

package/components/qds-form-message.js.map

@@ -1 +1 @@
-{"file":"qds-form-message.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,igEAAigE,CAAC;AACzhE,6BAAe,cAAc;;MCuBhB,WAAW;;;;;QA0Bd,wBAAmB,GAAe,EAAE,CAAA;sBAnBF,KAAK;oBAKT,UAAU;sBAKN,OAAO;;;IAWjD,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;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,MAAM,IAAI,OAAO,CAAA;KAC9B;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,YAAY,EAAE,IAAI,CAAC,MAAM;aAC1B,eACU,IAAI,CAAC,YAAY,KAExB,IAAI,CAAC,mBAAmB,IAE5B,4DAAK,KAAK,EAAC,oBAAoB,eAAY,IAAI,CAAC,YAAY,IAC1D,4DACE,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,YAAY,iBACf,IAAI,CAAC,MAAM,IAExB,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,YAAY,EAC5B,IAAI,EAAE,UAAU,IAAI,CAAC,MAAM,EAAE,EAC7B,OAAO,EAAC,MAAM,GACd,CACE,CACF,EACN,6DAAM,KAAK,EAAC,UAAU,iBAAc,IAAI,CAAC,cAAc,IACpD,IAAI,CAAC,IAAI,CACL,CACF,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-message/form-message.css?tag=qds-form-message&encapsulation=shadow","src/components/form-message/form-message.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-form-message {\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n}\n\n.qds-icon-container,\n.qds-icon-background {\n  display: flex;\n  align-items: center;\n}\n\n.qds-icon-background {\n  border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-icon {\n  color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-icon-container {\n    height: var(--qds-control-small-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\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-icon-container {\n    height: var(--qds-control-standard-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\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-icon-container {\n    height: var(--qds-control-large-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n\n[data-status='error'] {\n  &.qds-icon-background {\n    background-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &.qds-text {\n    color: var(--qds-theme-feedback-result-failure);\n  }\n}\n\n[data-status='info'].qds-icon-background {\n  background-color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='success'] {\n  &.qds-icon-background {\n    background-color: var(--qds-theme-feedback-result-success);\n  }\n\n  &.qds-text {\n    color: var(--qds-theme-feedback-result-success);\n  }\n}\n\n[data-status='warning'].qds-icon-background {\n  background-color: var(--qds-theme-feedback-result-partial-success);\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\nexport type Status = 'error' | 'info' | 'success' | 'warning'\n\n/**\n * `<qds-form-message>` elements represent messages for a form field in a user\n * interface.\n *\n * @see https://quartz.se.com/build/components/form-message\n */\n@Component({\n  tag: 'qds-form-message',\n  shadow: true,\n  styleUrl: 'form-message.css',\n})\nexport class FormMessage implements ComponentInterface {\n  /**\n   * Adds vertical margin to the form message 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 form message's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The form message's status.\n   */\n  @Prop() public readonly status?: Status = 'error'\n\n  /**\n   * The form message's text.\n   */\n  @Prop() public readonly text?: string\n\n  @Element() private readonly element!: HTMLQdsFormMessageElement\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  private get computedStatus(): Status {\n    return this.status ?? 'error'\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-form-message': true,\n          'qds-inline': this.inline,\n        }}\n        data-size={this.computedSize}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <div class=\"qds-icon-container\" data-size={this.computedSize}>\n          <div\n            class=\"qds-icon-background\"\n            data-size={this.computedSize}\n            data-status={this.status}\n          >\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.computedSize}\n              name={`status-${this.status}`}\n              library=\"core\"\n            />\n          </div>\n        </div>\n        <span class=\"qds-text\" data-status={this.computedStatus}>\n          {this.text}\n        </span>\n      </span>\n    )\n  }\n}\n"],"version":3}
+{"file":"qds-form-message.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,ioEAAioE,CAAC;AACzpE,6BAAe,cAAc;;MCuBhB,WAAW;;;;;QAmCd,wBAAmB,GAAe,EAAE,CAAA;sBA5BF,KAAK;oBAKT,UAAU;sBAKN,OAAO;;;;IAoBjD,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;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,MAAM,IAAI,OAAO,CAAA;KAC9B;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,YAAY,EAAE,IAAI,CAAC,MAAM;aAC1B,eACU,IAAI,CAAC,YAAY,KAExB,IAAI,CAAC,mBAAmB,IAE5B,4DAAK,KAAK,EAAC,oBAAoB,eAAY,IAAI,CAAC,YAAY,IAC1D,4DACE,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,YAAY,iBACf,IAAI,CAAC,MAAM,IAExB,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,YAAY,EAC5B,IAAI,EAAE,UAAU,IAAI,CAAC,MAAM,EAAE,EAC7B,OAAO,EAAC,MAAM,GACd,EACF,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CACrD,CACF,EACN,6DAAM,KAAK,EAAC,UAAU,iBAAc,IAAI,CAAC,cAAc,IACpD,IAAI,CAAC,IAAI,CACL,CACF,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-message/form-message.css?tag=qds-form-message&encapsulation=shadow","src/components/form-message/form-message.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-form-message {\n  color: var(--qds-theme-control-text-standard);\n  display: inline-flex;\n  gap: var(--qds-text-icon-gap);\n}\n\n.qds-icon-container,\n.qds-icon-background {\n  display: flex;\n  align-items: center;\n}\n\n.qds-icon-background {\n  border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-icon {\n  color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n.qds-sr-only {\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n\n  &.qds-icon-container {\n    height: var(--qds-control-small-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\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-icon-container {\n    height: var(--qds-control-standard-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\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-icon-container {\n    height: var(--qds-control-large-icon-crop-height);\n  }\n\n  &.qds-icon {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n}\n\n[data-status='error'] {\n  &.qds-icon-background {\n    background-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &.qds-text {\n    color: var(--qds-theme-feedback-result-failure);\n  }\n}\n\n[data-status='info'].qds-icon-background {\n  background-color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='success'] {\n  &.qds-icon-background {\n    background-color: var(--qds-theme-feedback-result-success);\n  }\n\n  &.qds-text {\n    color: var(--qds-theme-feedback-result-success);\n  }\n}\n\n[data-status='warning'].qds-icon-background {\n  background-color: var(--qds-theme-feedback-result-partial-success);\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\nexport type Status = 'error' | 'info' | 'success' | 'warning'\n\n/**\n * `<qds-form-message>` elements represent messages for a form field in a user\n * interface.\n *\n * @see https://quartz.se.com/build/components/form-message\n */\n@Component({\n  tag: 'qds-form-message',\n  shadow: true,\n  styleUrl: 'form-message.css',\n})\nexport class FormMessage implements ComponentInterface {\n  /**\n   * Adds vertical margin to the form message 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 form message's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The form message's status.\n   */\n  @Prop() public readonly status?: Status = 'error'\n\n  /**\n   * Adds accessible text to the icon's form message that will be used by screen readers.\n   *\n   * @example\n   * <qds-form-message status-description=\"Error\" text=\"Password is required.\"></qds-form-message>\n   * // This form message will be read by screen readers as \"Error Password is required.\"\n   */\n  @Prop() public readonly statusDescription?: string\n\n  /**\n   * The form message's text.\n   */\n  @Prop() public readonly text?: string\n\n  @Element() private readonly element!: HTMLQdsFormMessageElement\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  private get computedStatus(): Status {\n    return this.status ?? 'error'\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-form-message': true,\n          'qds-inline': this.inline,\n        }}\n        data-size={this.computedSize}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <div class=\"qds-icon-container\" data-size={this.computedSize}>\n          <div\n            class=\"qds-icon-background\"\n            data-size={this.computedSize}\n            data-status={this.status}\n          >\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon\"\n              data-size={this.computedSize}\n              name={`status-${this.status}`}\n              library=\"core\"\n            />\n            <span class=\"qds-sr-only\">{this.statusDescription}</span>\n          </div>\n        </div>\n        <span class=\"qds-text\" data-status={this.computedStatus}>\n          {this.text}\n        </span>\n      </span>\n    )\n  }\n}\n"],"version":3}

package/components/qds-inline-link.js

@@ -61,7 +61,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTM
         this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0');
     }
     render() {
-        return (h("a", { key: 'eaecb7cb5a79b99d99c0f4e88ae5b0fcfe3fb3ef', "aria-disabled": this.disabled ? 'true' : undefined, class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target, ...this.inheritedAttributes }, h("slot", { key: '805fc1a416e792d3dc8eeba52a3b4ea45cf17067' }), h("qds-icon", { key: '4f211301d599559183d3e2c2baac7663246c0d0f', "aria-hidden": "true", class: "qds-external", library: "core", name: "external-link" })));
+        return (h("a", { key: '5f61bda4cc64480547dabc234c036e718079fdb9', "aria-disabled": this.disabled ? 'true' : undefined, class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target, ...this.inheritedAttributes }, h("slot", { key: '2cf9f8a1ff3ca8283d914ac88d32ffaa39410146' }), h("qds-icon", { key: '59cfa377e4a098fc0b4dbf4edf93a4470bbdb472', "aria-hidden": "true", class: "qds-external", library: "core", name: "external-link" })));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }

package/components/qds-input.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, b as invariant, d as pickInputEventAttributes, i as inheritAriaAttributes } from './helpers.js';
 import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './controls.js';
 
-const inputCss = "/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host([hidden]) {\n  /* stylelint-disable-next-line declaration-no-important */\n  display: none !important;\n}\n\n:host {\n  display: inline-block;\n}\n\n.qds-container {\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-input {\n  -webkit-appearance: textfield;\n          appearance: textfield;\n  background-color: var(--qds-theme-control-input-background);\n  border-color: var(--qds-theme-control-border);\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  border-style: solid;\n  border-width: var(--qds-control-border-width)\n    var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n    var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n    var(--qds-control-border-width);\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  grid-area: input;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n}\n\n.qds-input[aria-invalid='true']:not(:focus) {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n.qds-input[type='color'] {\n    -webkit-appearance: none;\n            appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    cursor: pointer;\n  }\n\n.qds-input[type='color']::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n.qds-input[type='color']::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n.qds-input[type='color']::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n.qds-input[type='color']:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n.qds-input[type='color']:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n\n.qds-input {\n\n  @-moz-document url-prefix() {\n    &[type='number'] {\n      appearance: none;\n    }\n  }\n}\n\n.qds-input:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n.qds-input:focus-visible {\n    outline: none;\n  }\n\n.qds-input:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: input;\n  isolation: isolate;\n  outline: var(--qds-control-input-focus-border-width) solid\n    var(--qds-theme-control-input-focus-border);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n}\n\n.qds-input:focus-visible ~ .qds-focus-ring {\n  visibility: visible;\n}\n";
+const inputCss = "/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host([hidden]) {\n  /* stylelint-disable-next-line declaration-no-important */\n  display: none !important;\n}\n\n:host {\n  display: inline-block;\n}\n\n.qds-container {\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-input {\n  -webkit-appearance: textfield;\n          appearance: textfield;\n  background-color: var(--qds-theme-control-input-background);\n  border-color: var(--qds-theme-control-border);\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  border-style: solid;\n  border-width: var(--qds-control-border-width)\n    var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n    var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n    var(--qds-control-border-width);\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  grid-area: input;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  width: 100%;\n}\n\n.qds-input[aria-invalid='true']:not(:focus) {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n.qds-input[type='color'] {\n    -webkit-appearance: none;\n            appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    cursor: pointer;\n  }\n\n.qds-input[type='color']::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n.qds-input[type='color']::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n.qds-input[type='color']::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n.qds-input[type='color']:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n.qds-input[type='color']:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n\n.qds-input {\n\n  @-moz-document url-prefix() {\n    &[type='number'] {\n      appearance: none;\n    }\n  }\n}\n\n.qds-input:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n.qds-input:focus-visible {\n    outline: none;\n  }\n\n.qds-input:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: input;\n  isolation: isolate;\n  outline: var(--qds-control-input-focus-border-width) solid\n    var(--qds-theme-control-input-focus-border);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n}\n\n.qds-input:focus-visible ~ .qds-focus-ring {\n  visibility: visible;\n}\n";
 const QdsInputStyle0 = inputCss;
 
 const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
@@ -240,9 +240,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.valueChanged();
     }
     render() {
-        return (h("div", { key: '9879991bdde4b55e93dbba85d4a69a067246093d', class: "qds-container" }, h("input", { key: 'b7373a9b664ba28fd76c666685b23358dda1150a', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
+        return (h("div", { key: '92350aff9d2fd5cc87be583d4e8d6f3361930b5c', class: "qds-container" }, h("input", { key: 'b2cdc32f2c7ddb448ab0557c1f368007dbb91016', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, tabIndex: this.computedDisabled ? undefined : this.tabIndex, type: this.type, ...this.inheritedAttributes }), h("div", { key: '91c1017c265ccc89aa6a2285e98b7cb28bc70201', class: "qds-focus-ring" })));
+            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, tabIndex: this.computedDisabled ? undefined : this.tabIndex, type: this.type, ...this.inheritedAttributes }), h("div", { key: 'bc0c14fdb87acb0a6640e515a88bf18f861e026d', class: "qds-focus-ring" })));
     }
     defineGetter(p, get) {
         Object.defineProperty(this.element, p, { enumerable: true, get });