@quartzds/core 1.0.0-beta.91 → 1.0.0-beta.93

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

@@ -1 +1 @@
-{"file":"qds-button.entry.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.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-overflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &[data-size='hero'] {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    white-space: normal;\n  }\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  position: relative;\n  align-items: center;\n  appearance: none;\n\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\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  text-align: center;\n  user-select: none;\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible ~ .qds-focus-ring {\n    visibility: visible;\n  }\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-indicator {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n  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      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      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      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-size='small'],\n[data-size='standard'],\n[data-size='large'] {\n  line-height: normal;\n\n  &.qds-button.qds-icon-only {\n    padding-inline: 0;\n  }\n}\n\n[data-size='hero'] {\n  font: var(--qds-control-hero-text);\n\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    gap: var(--qds-control-hero-gap-internal);\n    padding-block: var(--qds-control-hero-padding-auto-height);\n    padding-inline: var(--qds-control-button-hero-padding-horizontal);\n\n    &.qds-icon-only {\n      height: var(--qds-control-hero-height);\n      padding-inline: 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[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\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\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\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-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\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n[data-importance='emphasized'] {\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\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[data-importance='destructive'] {\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\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n  }\n}\n\n[data-importance='subdued-destructive'] {\n  color: var(--qds-theme-feedback-action-destructive-default);\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-feedback-action-destructive-hover);\n      color: var(--qds-theme-feedback-action-destructive-hover);\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-feedback-action-destructive-pressed);\n      color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n    }\n  }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n  .qds-action {\n    margin-inline-start: auto;\n    transition-duration: 0.3s;\n    transition-property: transform;\n  }\n\n  &[data-importance='standard'] {\n    background-color: var(--qds-theme-control-input-background);\n  }\n\n  &:not([data-importance='subdued'], [data-importance='subdued-destructive']) {\n    padding-inline: var(--qds-control-input-padding-horizontal);\n  }\n}\n\n[data-action='dropdown-close'] .qds-action {\n  transform: rotate(-180deg);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' | 'dropdown' | 'next'\nexport type ButtonImportance =\n  | Importance\n  | 'destructive'\n  | 'subdued-destructive'\nexport type ButtonSize = Size | 'hero'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\n\nconst isCounter = (value: unknown): value is number =>\n  typeof value === 'string'\n    ? !Number.isNaN(Number.parseFloat(value))\n    : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n  value === '' || value === true\n\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  formAssociated: true,\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   * Displays an indicator if `true` or the empty string. Otherwise, displays a\n   * counter badge if a number or string representing a number is used.\n   *\n   * @webnative\n   */\n  @Prop() public readonly badge?: number | string | true\n\n  /**\n   * The indicator or counter badge's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly badgeDescription?: string\n\n  /**\n   * The indicator's status.\n   */\n  @Prop()\n  public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n    'neutral'\n\n  /**\n   * 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?: ButtonImportance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Sets if button is icon only.\n   */\n  @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-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   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * 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   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-button` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\n\n  /**\n   * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string = 'noopener'\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   * The error message that would be shown to the user if the `<qds-button>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-button>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * 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   * True if `<qds-button>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 host!: HTMLQdsButtonElement\n\n  @State() private tabIndex?: number\n\n  @State() private tooltip = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  #button?: HTMLAnchorElement | HTMLButtonElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  get #buttonType(): ButtonType {\n    if (this.type === undefined)\n      return this.internals.form ? 'submit' : 'button'\n    return this.type\n  }\n\n  get #iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return hasIcon && this.iconOnly\n  }\n\n  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  get #computedActionIcon(): Exclude<Action, 'dropdown-close'> | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'next': {\n        return this.action\n      }\n      case 'dropdown-close': {\n        return 'dropdown'\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedImportance(): ButtonImportance {\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued':\n      case 'destructive':\n      case 'subdued-destructive': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedSize(): ButtonSize {\n    switch (this.size) {\n      case 'small':\n      case 'large':\n      case 'hero': {\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.internals.form) return\n    if (this.#buttonType === 'reset') {\n      this.internals.form.reset()\n    } else {\n      this.internals.form.requestSubmit()\n    }\n    event.preventDefault()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    this.internals.ariaLabel = this.text\n\n    if (this.#ro) this.#ro.disconnect()\n    if (!this.#span) return\n\n    this.tooltip = isOverflowing(this.#span)\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'button'\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    this.textChanged()\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n    const disabledTabIndex = Tag === 'a' ? -1 : undefined\n    const hasBadgeProperties =\n      this.badgeDescription !== undefined && this.badge !== undefined\n    const ariaLabel = hasBadgeProperties\n      ? `${this.text} ${this.badge} ${this.badgeDescription}`\n      : this.text\n\n    return (\n      <div class=\"qds-container\">\n        <Tag\n          aria-hidden=\"true\"\n          class={{\n            'qds-button': true,\n            'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n            'qds-icon-only': this.#iconOnly,\n          }}\n          data-importance={this.#computedImportance}\n          data-size={this.#computedSize}\n          data-action={this.#computedAction}\n          disabled={Tag === 'a' ? undefined : this.disabled}\n          download={Tag === 'a' ? this.download : undefined}\n          formAction={this.formAction}\n          formMethod={this.formMethod}\n          formNoValidate={this.formNoValidate}\n          formTarget={this.formTarget}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          ref={this.#buttonRef}\n          rel={Tag === 'a' ? this.rel : undefined}\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          aria-label={this.#iconOnly ? ariaLabel : undefined}\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.#iconOnly && (\n            <span\n              class=\"qds-overflow\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n          )}\n          {isIndicator(this.badge) && (\n            <qds-badge-indicator\n              class=\"qds-indicator\"\n              status={this.badgeIndicatorStatus}\n              description={this.badgeDescription}\n              size={this.#computedSize}\n              strokeRing\n            />\n          )}\n          {isCounter(this.badge) && (\n            <qds-badge-counter\n              class={{\n                'qds-indicator': this.#iconOnly,\n              }}\n              description={this.badgeDescription}\n              importance={this.#computedImportance}\n              size={this.#computedSize}\n              strokeRing\n              value={this.badge}\n            />\n          )}\n          {this.#computedActionIcon !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-action\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name={this.#computedActionIcon}\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        />\n        {this.tooltip && (\n          <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #buttonRef = (\n    button?: HTMLAnchorElement | HTMLButtonElement,\n  ): void => {\n    this.#button = button\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#button\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}
+{"file":"qds-button.entry.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,2iSAA2iS,CAAC;AAC9jS,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;;;;;;;;;;AAgCA,MAAM,SAAS,GAAG,CAAC,KAAc,KAC/B,OAAO,KAAK,KAAK,QAAQ;MACrB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACvC,OAAO,KAAK,KAAK,QAAQ,CAAA;AAE/B,MAAM,WAAW,GAAG,CAAC,KAAc,KACjC,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,IAAI,CAAA;MAiBnB,MAAM;IANnB;;;;;;;;;;;;;;;QA8BkB,yBAAoB,GAClC,SAAS,CAAA;;;;QAYa,gBAAW,GAAW,SAAS,CAAA;;;;QAK/B,eAAU,GAAsB,UAAU,CAAA;;;;QAK1C,SAAI,GAAmB,UAAU,CAAA;;;;QAUjC,aAAQ,GAAY,KAAK,CAAA;;;;;;;;;;;;;;;;;;QAoCzB,SAAI,GAAsC,IAAI,CAAA;;;;;;;;;;;QA8CtD,mBAAc,GAAY,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;QA4B/B,eAAU,GAAuC,OAAO,CAAA;;;;;;;;;;QAmBhD,WAAM,GAC5B,EAAgC,CAAA;;;;;;QAOV,QAAG,GAAY,UAAU,CAAA;;;;;;;;QAsDjC,sBAAiB,GAA0C,EAAE,CAAA;;;;;;;;;QAUrD,aAAQ,GAAiC,WAAW,CAAA;;;;;;;;QAkBpD,iBAAY,GAAqC,KAAK,CAAA;QAkB7D,YAAO,GAAG,KAAK,CAAA;QAIhC,iCAA+C;QAE/C,+BAAuB;QAEvB,6BAAoB;QAqPb,kBAAa,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEzB,mBAAc,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAE1B,sBAAiB,GAA2C,CACjE,KAAK;YAEL,IAAI,KAAK;gBACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,uBAAA,IAAI,sBAAQ,CAAC,CAAA;;gBAChE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;SAChD,CAAA;QAEQ,yBAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,4BAAa,CACpB,MAA8C;YAE9C,uBAAA,IAAI,kBAAW,MAAM,MAAA,CAAA;SACtB,EAAA;QAEQ,0BAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,gBAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,6BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,sBAAQ,CAAA;SAChC,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,IAAI,uBAAA,IAAI,uDAAkB,EAAE;gBAC1B,KAAK,CAAC,wBAAwB,EAAE,CAAA;aACjC;SACF,EAAA;KAKF;IA1NW,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,uDAAkB,EAAE;YAC1B,KAAK,CAAC,wBAAwB,EAAE,CAAA;YAChC,OAAM;SACP;QAED,IAAI,uBAAA,IAAI,iDAAY,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI;YAAE,OAAM;QACjE,IAAI,uBAAA,IAAI,iDAAY,KAAK,OAAO,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAC5B;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;SACpC;QACD,KAAK,CAAC,cAAc,EAAE,CAAA;KACvB;IAGS,eAAe;QACvB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,uBAAA,IAAI,uDAAkB,CAAC,QAAQ,EAAE,CAAA;KAChE;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ;YACX,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW,CAAA;KAC3E;IAGS,WAAW;QACnB,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpC,IAAI,uBAAA,IAAI,kBAAI;YAAE,uBAAA,IAAI,kBAAI,CAAC,UAAU,EAAE,CAAA;QACnC,IAAI,CAAC,uBAAA,IAAI,oBAAM;YAAE,OAAM;QAEvB,MAAM,IAAI,GAAG,uBAAA,IAAI,oBAAM,CAAA;QACvB,QAAQ,CAAC;YACP,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;SACnC,CAAC,CAAA;QACF,uBAAA,IAAI,cAAO,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;SAC/C,CAAC,MAAA,CAAA;QACF,uBAAA,IAAI,kBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,oBAAM,CAAC,CAAA;KAC7B;IAEM,iBAAiB;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAA;QAC9B,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACrD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACrE,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC7D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QACD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAEzD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAA;KAChE;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,kBAAI;YAAE,uBAAA,IAAI,kBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,CAAA;QACpD,MAAM,gBAAgB,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC,GAAG,SAAS,CAAA;QACrD,MAAM,kBAAkB,GACtB,IAAI,CAAC,gBAAgB,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAA;QACjE,MAAM,SAAS,GAAG,kBAAkB;cAChC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE;cACrD,IAAI,CAAC,IAAI,CAAA;QAEb,QACE,4DAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,uBAAA,IAAI,uBAAS,iBAAc,MAAM,IACnE,EAAC,GAAG,oEACU,MAAM,EAClB,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,GAAG,KAAK,GAAG,GAAG,uBAAA,IAAI,uDAAkB,GAAG,KAAK;gBAC5D,eAAe,EAAE,uBAAA,IAAI,+CAAU;aAChC,qBACgB,uBAAA,IAAI,yDAAoB,eAC9B,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,EACjC,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EACjD,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACjD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACzC,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACzC,MAAM,EAAE,uBAAA,IAAI,sBAAQ,EACpB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,GAAG,EAAE,uBAAA,IAAI,yBAAW,EACpB,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,EACvC,QAAQ,EAAE,uBAAA,IAAI,uDAAkB,GAAG,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EACnE,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC7C,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,uBAAA,IAAI,iDAAY,EAChD,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,gBAC/B,uBAAA,IAAI,+CAAU,GAAG,SAAS,GAAG,SAAS,IAEjD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,mDAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,CAAC,uBAAA,IAAI,+CAAU,KACd,6DACE,KAAK,EAAC,cAAc,eACT,uBAAA,IAAI,mDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAS,IAEjB,IAAI,CAAC,IAAI,CACL,CACR,EACA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KACtB,4EACE,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAE,uBAAA,IAAI,mDAAc,EACxB,UAAU,SACV,CACH,EACA,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KACpB,0EACE,KAAK,EAAE;gBACL,eAAe,EAAE,uBAAA,IAAI,+CAAU;aAChC,EACD,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,uBAAA,IAAI,yDAAoB,EACpC,IAAI,EAAE,uBAAA,IAAI,mDAAc,EACxB,UAAU,QACV,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,EACA,uBAAA,IAAI,yDAAoB,KAAK,SAAS,KACrC,gFACc,MAAM,EAClB,KAAK,EAAC,qBAAqB,eAChB,uBAAA,IAAI,mDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,uBAAA,IAAI,yDAAoB,GAC9B,CACH,CACG,EACN,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,eAAe,EAAE,uBAAA,IAAI,+CAAU;aAChC,qBACgB,uBAAA,IAAI,yDAAoB,eAC9B,uBAAA,IAAI,mDAAc,GAC7B,EACD,IAAI,CAAC,OAAO,KACX,mFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,0BAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACG,EACP;KACF;;;;;;;;;;;IAhPC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QACzB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAClD,OAAO,IAAI,CAAC,IAAI,CAAA;AAClB,CAAC;IAGC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;IAEnE,OAAO,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAA;AACjC,CAAC;IAGC,QAAQ,IAAI,CAAC,MAAM;QACjB,KAAK,UAAU,CAAC;QAChB,KAAK,gBAAgB,CAAC;QACtB,KAAK,MAAM,EAAE;YACX,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,MAAM;QACjB,KAAK,UAAU,CAAC;QAChB,KAAK,MAAM,EAAE;YACX,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QACD,KAAK,gBAAgB,EAAE;YACrB,OAAO,UAAU,CAAA;SAClB;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC;IAGC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;AAC/B,CAAC;IAGC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,YAAY,CAAC;QAClB,KAAK,SAAS,CAAC;QACf,KAAK,aAAa,CAAC;QACnB,KAAK,qBAAqB,EAAE;YAC1B,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,CAAC;QACb,KAAK,MAAM,EAAE;YACX,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC,uDA0Na,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;","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.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-overflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &[data-size='hero'] {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    white-space: normal;\n  }\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  position: relative;\n  align-items: center;\n  appearance: none;\n\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\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  text-align: center;\n  user-select: none;\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible ~ .qds-focus-ring {\n    visibility: visible;\n  }\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-indicator {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n  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      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      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      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-size='small'],\n[data-size='standard'],\n[data-size='large'] {\n  line-height: normal;\n\n  &.qds-button.qds-icon-only {\n    padding-inline: 0;\n  }\n}\n\n[data-size='hero'] {\n  font: var(--qds-control-hero-text);\n\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    gap: var(--qds-control-hero-gap-internal);\n    padding-block: var(--qds-control-hero-padding-auto-height);\n    padding-inline: var(--qds-control-button-hero-padding-horizontal);\n\n    &.qds-icon-only {\n      height: var(--qds-control-hero-height);\n      padding-inline: 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[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\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\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\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-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\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n[data-importance='emphasized'] {\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\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[data-importance='destructive'] {\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\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n  }\n}\n\n[data-importance='subdued-destructive'] {\n  color: var(--qds-theme-feedback-action-destructive-default);\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-feedback-action-destructive-hover);\n      color: var(--qds-theme-feedback-action-destructive-hover);\n    }\n\n    &:active {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-feedback-action-destructive-pressed);\n      color: var(--qds-theme-feedback-action-destructive-pressed);\n    }\n\n    &:not(.qds-icon-only) {\n      border-radius: 0;\n    }\n\n    &.qds-icon-only {\n      border: none;\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n        color: var(--qds-theme-feedback-action-destructive-default);\n      }\n    }\n  }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n  .qds-action {\n    margin-inline-start: auto;\n    transition-duration: 0.3s;\n    transition-property: transform;\n  }\n\n  &[data-importance='standard'] {\n    background-color: var(--qds-theme-control-input-background);\n  }\n\n  &:not([data-importance='subdued'], [data-importance='subdued-destructive']) {\n    padding-inline: var(--qds-control-input-padding-horizontal);\n  }\n}\n\n[data-action='dropdown-close'] .qds-action {\n  transform: rotate(-180deg);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' | 'dropdown' | 'next'\nexport type ButtonImportance =\n  | Importance\n  | 'destructive'\n  | 'subdued-destructive'\nexport type ButtonSize = Size | 'hero'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\n\nconst isCounter = (value: unknown): value is number =>\n  typeof value === 'string'\n    ? !Number.isNaN(Number.parseFloat(value))\n    : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n  value === '' || value === true\n\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  formAssociated: true,\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   * Displays an indicator if `true` or the empty string. Otherwise, displays a\n   * counter badge if a number or string representing a number is used.\n   *\n   * @webnative\n   */\n  @Prop() public readonly badge?: number | string | true\n\n  /**\n   * The indicator or counter badge's accessible text that will be used by\n   * screen readers.\n   */\n  @Prop() public readonly badgeDescription?: string\n\n  /**\n   * The indicator's status.\n   */\n  @Prop()\n  public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n    'neutral'\n\n  /**\n   * 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?: ButtonImportance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Sets if button is icon only.\n   */\n  @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-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   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * 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   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-button` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\n\n  /**\n   * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string = 'noopener'\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   * The error message that would be shown to the user if the `<qds-button>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-button>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * 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   * True if `<qds-button>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 host!: HTMLQdsButtonElement\n\n  @State() private tabIndex?: number\n\n  @State() private tooltip = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  #button?: HTMLAnchorElement | HTMLButtonElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  get #buttonType(): ButtonType {\n    if (this.type === undefined)\n      return this.internals.form ? 'submit' : 'button'\n    return this.type\n  }\n\n  get #iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n    return hasIcon && this.iconOnly\n  }\n\n  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  get #computedActionIcon(): Exclude<Action, 'dropdown-close'> | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'next': {\n        return this.action\n      }\n      case 'dropdown-close': {\n        return 'dropdown'\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedImportance(): ButtonImportance {\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued':\n      case 'destructive':\n      case 'subdued-destructive': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedSize(): ButtonSize {\n    switch (this.size) {\n      case 'small':\n      case 'large':\n      case 'hero': {\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.internals.form) return\n    if (this.#buttonType === 'reset') {\n      this.internals.form.reset()\n    } else {\n      this.internals.form.requestSubmit()\n    }\n    event.preventDefault()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    this.internals.ariaLabel = this.text\n\n    if (this.#ro) this.#ro.disconnect()\n    if (!this.#span) return\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'button'\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    this.textChanged()\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n    const disabledTabIndex = Tag === 'a' ? -1 : undefined\n    const hasBadgeProperties =\n      this.badgeDescription !== undefined && this.badge !== undefined\n    const ariaLabel = hasBadgeProperties\n      ? `${this.text} ${this.badge} ${this.badgeDescription}`\n      : this.text\n\n    return (\n      <div class=\"qds-container\" onClick={this.#onClick} aria-hidden=\"true\">\n        <Tag\n          aria-hidden=\"true\"\n          class={{\n            'qds-button': true,\n            'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n            'qds-icon-only': this.#iconOnly,\n          }}\n          data-importance={this.#computedImportance}\n          data-size={this.#computedSize}\n          data-action={this.#computedAction}\n          disabled={Tag === 'a' ? undefined : this.disabled}\n          download={Tag === 'a' ? this.download : undefined}\n          formAction={this.formAction}\n          formMethod={this.formMethod}\n          formNoValidate={this.formNoValidate}\n          formTarget={this.formTarget}\n          href={Tag === 'a' ? this.href : undefined}\n          name={Tag === 'a' ? undefined : this.name}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          ref={this.#buttonRef}\n          rel={Tag === 'a' ? this.rel : undefined}\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          aria-label={this.#iconOnly ? ariaLabel : undefined}\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.#iconOnly && (\n            <span\n              class=\"qds-overflow\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n          )}\n          {isIndicator(this.badge) && (\n            <qds-badge-indicator\n              class=\"qds-indicator\"\n              status={this.badgeIndicatorStatus}\n              description={this.badgeDescription}\n              size={this.#computedSize}\n              strokeRing\n            />\n          )}\n          {isCounter(this.badge) && (\n            <qds-badge-counter\n              class={{\n                'qds-indicator': this.#iconOnly,\n              }}\n              description={this.badgeDescription}\n              importance={this.#computedImportance}\n              size={this.#computedSize}\n              strokeRing\n              value={this.badge}\n            />\n          )}\n          {this.#computedActionIcon !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-action\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name={this.#computedActionIcon}\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        />\n        {this.tooltip && (\n          <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #buttonRef = (\n    button?: HTMLAnchorElement | HTMLButtonElement,\n  ): void => {\n    this.#button = button\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#button\n  }\n\n  readonly #onClick = (event: MouseEvent): void => {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n    }\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}

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

@@ -3,11 +3,11 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-bc9462c1.js';
 import { p as pickFocusEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
 import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
 
-const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:c;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"c\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
+const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:e;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"e\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner{flex:1 1 auto;min-width:0}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
 const QdsCheckboxStyle0 = checkboxCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -179,7 +179,7 @@ const Checkbox = class {
             }, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("div", { key: 'cc97d644310d3abdb01d115dbfe6e9f2a7a1ba30', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }), h("qds-icon", { key: '23fa431abd3bee1a88be51e243d5c7518732825d', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-indeterminate': true,
-            }, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: '2335dd53e9164bb6024a70cfa52137fc4998fbe0', required: this.required, size: this.size, text: this.text }))));
+            }, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: 'c412f04c3558b1e1513c67cc314d624ab83f2b15', class: "qds-label-inner", required: this.required, size: this.size, text: this.text }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

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

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

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, a as readTask, h, d as getElement } from './index-bc9462c1.js';
 import { p as pickFocusEventAttributes, b as inheritAriaAttributes, c as invariant, i as isOverflowing } from './helpers-2e4ca34d.js';
 
 const chipCss = ":host([hidden]){display:none!important}:host{display:block}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-label{display:flex}.qds-container{min-width:0}.qds-target{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;cursor:pointer;display:flex;outline:none;padding:0;pointer-events:auto}.qds-target:disabled{pointer-events:none}.qds-alignment{align-items:center;display:flex}.qds-cursor{cursor:pointer}.qds-icon{flex-shrink:0}.qds-closable-chip,.qds-container{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;justify-content:center;padding-block:0;-webkit-user-select:none;user-select:none}.qds-closable-chip{pointer-events:none}.qds-closable-chip:focus-within{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-container:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-checkbox:active~.qds-container,.qds-closable-chip:has(.qds-target:active),.qds-container.qds-pressed-state{background-color:var(--qds-theme-interactive-background-pressed)}.qds-container.qds-selected-state{background-color:var(--qds-theme-interactive-background-selected)}.qds-checkbox{clip-path:inset(50%);margin:0;position:absolute}.qds-checkbox:focus-visible~.qds-container{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-closable-chip[data-size=small],.qds-container[data-size=small]{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-chip-small-padding-horizontal)}.qds-icon[data-size=small]{--qds-experimental-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-text[data-size=small]{font:var(--qds-control-small-text);line-height:normal}.qds-closable-chip[data-size=standard],.qds-container[data-size=standard]{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-chip-standard-padding-horizontal)}.qds-icon[data-size=standard]{--qds-experimental-icon-click-target-size:var(\n      --qds-control-standard-height\n    );height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-text[data-size=standard]{font:var(--qds-control-standard-text);line-height:normal}.qds-closable-chip[data-size=large],.qds-container[data-size=large]{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-chip-large-padding-horizontal)}.qds-icon[data-size=large]{--qds-experimental-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-text[data-size=large]{font:var(--qds-control-large-text);line-height:normal}";
@@ -177,7 +177,10 @@ const Chip = class {
     }
     componentDidLoad() {
         invariant(__classPrivateFieldGet(this, _Chip_span, "f"));
-        this.tooltip = isOverflowing(__classPrivateFieldGet(this, _Chip_span, "f"));
+        const span = __classPrivateFieldGet(this, _Chip_span, "f");
+        readTask(() => {
+            this.tooltip = isOverflowing(span);
+        });
         __classPrivateFieldSet(this, _Chip_ro, new ResizeObserver(([spanEntry]) => {
             this.tooltip = isOverflowing(spanEntry.target);
         }), "f");
@@ -188,21 +191,21 @@ const Chip = class {
             __classPrivateFieldGet(this, _Chip_ro, "f").disconnect();
     }
     render() {
-        return (h("div", { key: '7f0a1fe641b2e15f3ab3bf3f17970be852da3681', class: "qds-chip", ref: __classPrivateFieldGet(this, _Chip_chipRef, "f") }, __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable' && (h("div", { key: 'c737c3890293d99a77422b024bd918691da1a948', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: {
+        return (h("div", { key: '38e103b1adf48ce498541e48814bfc5201d1bf9d', class: "qds-chip", ref: __classPrivateFieldGet(this, _Chip_chipRef, "f") }, __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable' && (h("div", { key: 'fde779252f3566ee87c9cf80eeccf6304dc5af0e', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,
-            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '17b09b428db0f0fac2a9c81763249b4387ee97ba', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("span", { key: '912867a4c7c1a6b239e21084e36b933dd9266129', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text), h("button", { key: '0dd278717916ffc8fc240e0a9eeef132b64130b1', "aria-label": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_ariaLabel_get), class: "qds-target", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), disabled: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Chip_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? undefined : this.tabIndex, type: "button", ...__classPrivateFieldGet(this, _Chip_inheritedAttributes, "f") }, h("qds-icon", { key: '4b36ddcd922c2c1f1f16a43cf744087ea9f6093e', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "clear" })))), __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable' && (
+            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '71e78c676f85f4cf9a4086ec58f889b923f56231', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("span", { key: '5c63d83cbe0ebc064bbf244a67c798ae91b717da', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text), h("button", { key: 'c063e0d2015317f703decc3c6bc271d1e4758ecb', "aria-label": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_ariaLabel_get), class: "qds-target", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), disabled: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Chip_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? undefined : this.tabIndex, type: "button", ...__classPrivateFieldGet(this, _Chip_inheritedAttributes, "f") }, h("qds-icon", { key: '985982fceb4c44a74aa32bfe289e104ec6ceded2', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "clear" })))), __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable' && (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        h("label", { key: 'b673d4ef5df3661c2ba0e6d36351b60d6cba1cd0', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: "qds-label" }, h("input", { key: '48db37e17d551552900ebf77789be503953bdd18',
+        h("label", { key: 'c21380e3727553860bd5d8ab743ab695e7cbf67e', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: "qds-label" }, h("input", { key: 'f36b570313760fc17d59d3cb7c209c2d4ef6e12a',
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.host.autofocus, checked: this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), disabled: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get), name: this.name, onBlur: __classPrivateFieldGet(this, _Chip_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Chip_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Chip_inheritedAttributes, "f") }), h("div", { key: '87055dd30ca05fdde38070fbfc32551271bf8dcd', class: {
+            autoFocus: this.host.autofocus, checked: this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), disabled: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get), name: this.name, onBlur: __classPrivateFieldGet(this, _Chip_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Chip_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Chip_inheritedAttributes, "f") }), h("div", { key: '2c9fb79145632cfc9c6762a1eb938db6d358d6cc', class: {
                 'qds-container': true,
                 'qds-pressed-state': this.isPressed,
                 'qds-selected-state': this.isSelected,
                 'qds-padding-end': true,
                 'qds-cursor': true,
-            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, (this.checked ?? false) && (h("qds-icon", { key: '9a27f7770c99ce8a54efddad2efe7689abae1b7f', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "checked" })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'bd162591cba44ac9c28fdace2a39bd9904d0dece', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("span", { key: '3df4aaddfd4316f69582818c9ffc163102c8f383', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text)))), this.tooltip && (h("qds-tooltip", { key: '4f19548c13dfb07a5d1e31cfcc453dbefe6efd6d', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Chip_tooltipRef, "f"), trigger: "pointerenter focusin" }, this.text))));
+            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, (this.checked ?? false) && (h("qds-icon", { key: 'b111666a5f461a43c2eacaae8e08e52b62312887', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "checked" })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '104f950ab2b3ccb434eeb5c0db135f547f7eb795', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("span", { key: '05977f456c30b7aa7c947345502c53ccdc06a412', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text)))), this.tooltip && (h("qds-tooltip", { key: '7c4a28ce08c9244a854ce1d26c2c00c402c6713b', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Chip_tooltipRef, "f"), trigger: "pointerenter focusin" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -1 +1 @@
-{"file":"qds-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-label {\n  display: flex;\n}\n\n.qds-container {\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n}\n\n.qds-target {\n  appearance: none;\n  display: flex;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  pointer-events: auto;\n  outline: none;\n\n  &:disabled {\n    pointer-events: none;\n  }\n}\n\n.qds-alignment {\n  display: flex;\n  align-items: center;\n}\n\n.qds-cursor {\n  cursor: pointer;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: 0;\n  user-select: none;\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-rounded-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  background-color: initial;\n  appearance: none;\n  box-sizing: border-box;\n}\n\n.qds-closable-chip {\n  pointer-events: none;\n\n  &:focus-within {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-container:hover {\n  background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n  background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-container.qds-selected-state {\n  background-color: var(--qds-theme-interactive-background-selected);\n}\n\n.qds-checkbox {\n  clip-path: inset(50%);\n  margin: 0;\n  position: absolute;\n\n  &:focus-visible ~ .qds-container {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[data-size='small'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-chip-small-padding-horizontal);\n    gap: var(--qds-control-small-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-small-text);\n    line-height: normal;\n  }\n}\n\n[data-size='standard'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n    gap: var(--qds-control-standard-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-standard-text);\n    line-height: normal;\n  }\n}\n\n[data-size='large'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-chip-large-padding-horizontal);\n    gap: var(--qds-control-large-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-large-text);\n    line-height: normal;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  invariant,\n  isOverflowing,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' | 'selectable'\n\n/**\n * `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n *\n * @see https://quartz.se.com/build/components/chip\n */\n@Component({\n  tag: 'qds-chip',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The chip's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The chip's type.\n   */\n  @Prop() public readonly type?: ChipType = 'selectable'\n\n  /**\n   * The chip's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Sets the selectable chip's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the chip with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-chip>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-chip>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   *an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Prevents the chip from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The name of the chip, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the chip, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value = 'on'\n\n  /**\n   * Emitted when the chip loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip is closed.\n   */\n  @Event({ eventName: 'qdsClose', cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when a change to the selectable chip's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  @Element() private readonly host!: HTMLElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private isPressed = false\n\n  @State() private isSelected = false\n\n  @State() private tabIndex?: number\n\n  @State() private tooltip = false\n\n  #chip?: HTMLDivElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #inheritedAttributes: Attributes = {}\n\n  get #ariaLabel(): string {\n    return `Delete ${this.text} selection`\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedType(): ChipType {\n    switch (this.type) {\n      case 'selectable':\n      case 'closable': {\n        return this.type\n      }\n      default: {\n        return 'selectable'\n      }\n    }\n  }\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    if (this.#computedType === 'selectable') {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Listen('keydown')\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (event.key === ' ') {\n      this.isPressed = true\n      event.preventDefault()\n    } else if (event.key === 'Enter' && this.internals.form) {\n      this.internals.form.requestSubmit()\n      event.preventDefault()\n    }\n  }\n\n  @Listen('keyup')\n  protected handleKeyUp(event: KeyboardEvent): void {\n    if (event.key !== ' ') return\n\n    this.isPressed = false\n    if (this.#computedType === 'closable') this.closeEmitter.emit()\n    else {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.isSelected = this.#computedChecked\n    this.internals.setFormValue(\n      this.#computedChecked && !this.#computedDisabled\n        ? this.#computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n    // eslint-disable-next-line unicorn/no-null\n    else this.internals.setFormValue(null)\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.valueChanged()\n\n    Object.defineProperty(this.host, 'form', {\n      enumerable: true,\n      get: () => this.internals.form,\n    })\n\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#span)\n\n    this.tooltip = isOverflowing(this.#span)\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    return (\n      <div class=\"qds-chip\" ref={this.#chipRef}>\n        {this.#computedType === 'closable' && (\n          <div\n            aria-disabled={this.#computedDisabled ? 'true' : undefined}\n            class={{\n              'qds-container': true,\n              'qds-closable-chip': true,\n              'qds-pressed-state': this.isPressed,\n            }}\n            data-size={this.#computedSize}\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            <span\n              class=\"qds-text\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n            <button\n              aria-label={this.#ariaLabel}\n              class=\"qds-target\"\n              data-size={this.#computedSize}\n              disabled={this.#computedDisabled}\n              onClick={this.#onIconClick}\n              tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n              type=\"button\"\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...this.#inheritedAttributes}\n            >\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name=\"clear\"\n              />\n            </button>\n          </div>\n        )}\n        {this.#computedType === 'selectable' && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label\n            aria-disabled={this.#computedDisabled ? 'true' : undefined}\n            class=\"qds-label\"\n          >\n            <input\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={this.host.autofocus}\n              checked={this.checked}\n              class=\"qds-checkbox\"\n              data-size={this.#computedSize}\n              disabled={this.#computedDisabled}\n              name={this.name}\n              onBlur={this.#onBlur}\n              onFocus={this.#onFocus}\n              tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n              type=\"checkbox\"\n              value={this.value ?? undefined}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...this.#inheritedAttributes}\n            />\n            <div\n              class={{\n                'qds-container': true,\n                'qds-pressed-state': this.isPressed,\n                'qds-selected-state': this.isSelected,\n                'qds-padding-end': true,\n                'qds-cursor': true,\n              }}\n              data-size={this.#computedSize}\n            >\n              {(this.checked ?? false) && (\n                <qds-icon\n                  aria-hidden=\"true\"\n                  class=\"qds-icon\"\n                  data-size={this.#computedSize}\n                  library=\"core\"\n                  name=\"checked\"\n                />\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\n              <span\n                class=\"qds-text\"\n                data-size={this.#computedSize}\n                ref={this.#spanRef}\n              >\n                {this.text}\n              </span>\n            </div>\n          </label>\n        )}\n        {this.tooltip && (\n          <qds-tooltip\n            aria-hidden=\"true\"\n            ref={this.#tooltipRef}\n            trigger=\"pointerenter focusin\"\n          >\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  readonly #onIconClick = (event: MouseEvent): void => {\n    if (!event.defaultPrevented && this.#computedType === 'closable')\n      this.closeEmitter.emit()\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #chipRef = (chip?: HTMLDivElement): void => {\n    this.#chip = chip\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#chip\n  }\n}\n"],"version":3}
+{"file":"qds-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-label {\n  display: flex;\n}\n\n.qds-container {\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n}\n\n.qds-target {\n  appearance: none;\n  display: flex;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  pointer-events: auto;\n  outline: none;\n\n  &:disabled {\n    pointer-events: none;\n  }\n}\n\n.qds-alignment {\n  display: flex;\n  align-items: center;\n}\n\n.qds-cursor {\n  cursor: pointer;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: 0;\n  user-select: none;\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-rounded-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  background-color: initial;\n  appearance: none;\n  box-sizing: border-box;\n}\n\n.qds-closable-chip {\n  pointer-events: none;\n\n  &:focus-within {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-container:hover {\n  background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n  background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-container.qds-selected-state {\n  background-color: var(--qds-theme-interactive-background-selected);\n}\n\n.qds-checkbox {\n  clip-path: inset(50%);\n  margin: 0;\n  position: absolute;\n\n  &:focus-visible ~ .qds-container {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[data-size='small'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-chip-small-padding-horizontal);\n    gap: var(--qds-control-small-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-small-text);\n    line-height: normal;\n  }\n}\n\n[data-size='standard'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n    gap: var(--qds-control-standard-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-standard-text);\n    line-height: normal;\n  }\n}\n\n[data-size='large'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-chip-large-padding-horizontal);\n    gap: var(--qds-control-large-gap-internal);\n  }\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-large-text);\n    line-height: normal;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  invariant,\n  isOverflowing,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' | 'selectable'\n\n/**\n * `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n *\n * @see https://quartz.se.com/build/components/chip\n */\n@Component({\n  tag: 'qds-chip',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The chip's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The chip's type.\n   */\n  @Prop() public readonly type?: ChipType = 'selectable'\n\n  /**\n   * The chip's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Sets the selectable chip's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the chip with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-chip>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-chip>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   *an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Prevents the chip from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The name of the chip, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the chip, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value = 'on'\n\n  /**\n   * Emitted when the chip loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip is closed.\n   */\n  @Event({ eventName: 'qdsClose', cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when a change to the selectable chip's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  @Element() private readonly host!: HTMLElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private isPressed = false\n\n  @State() private isSelected = false\n\n  @State() private tabIndex?: number\n\n  @State() private tooltip = false\n\n  #chip?: HTMLDivElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #inheritedAttributes: Attributes = {}\n\n  get #ariaLabel(): string {\n    return `Delete ${this.text} selection`\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedType(): ChipType {\n    switch (this.type) {\n      case 'selectable':\n      case 'closable': {\n        return this.type\n      }\n      default: {\n        return 'selectable'\n      }\n    }\n  }\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    if (this.#computedType === 'selectable') {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Listen('keydown')\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (event.key === ' ') {\n      this.isPressed = true\n      event.preventDefault()\n    } else if (event.key === 'Enter' && this.internals.form) {\n      this.internals.form.requestSubmit()\n      event.preventDefault()\n    }\n  }\n\n  @Listen('keyup')\n  protected handleKeyUp(event: KeyboardEvent): void {\n    if (event.key !== ' ') return\n\n    this.isPressed = false\n    if (this.#computedType === 'closable') this.closeEmitter.emit()\n    else {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.isSelected = this.#computedChecked\n    this.internals.setFormValue(\n      this.#computedChecked && !this.#computedDisabled\n        ? this.#computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n    // eslint-disable-next-line unicorn/no-null\n    else this.internals.setFormValue(null)\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.valueChanged()\n\n    Object.defineProperty(this.host, 'form', {\n      enumerable: true,\n      get: () => this.internals.form,\n    })\n\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#span)\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isOverflowing(span)\n    })\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isOverflowing(spanEntry.target)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    return (\n      <div class=\"qds-chip\" ref={this.#chipRef}>\n        {this.#computedType === 'closable' && (\n          <div\n            aria-disabled={this.#computedDisabled ? 'true' : undefined}\n            class={{\n              'qds-container': true,\n              'qds-closable-chip': true,\n              'qds-pressed-state': this.isPressed,\n            }}\n            data-size={this.#computedSize}\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            <span\n              class=\"qds-text\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n            <button\n              aria-label={this.#ariaLabel}\n              class=\"qds-target\"\n              data-size={this.#computedSize}\n              disabled={this.#computedDisabled}\n              onClick={this.#onIconClick}\n              tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n              type=\"button\"\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...this.#inheritedAttributes}\n            >\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name=\"clear\"\n              />\n            </button>\n          </div>\n        )}\n        {this.#computedType === 'selectable' && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label\n            aria-disabled={this.#computedDisabled ? 'true' : undefined}\n            class=\"qds-label\"\n          >\n            <input\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={this.host.autofocus}\n              checked={this.checked}\n              class=\"qds-checkbox\"\n              data-size={this.#computedSize}\n              disabled={this.#computedDisabled}\n              name={this.name}\n              onBlur={this.#onBlur}\n              onFocus={this.#onFocus}\n              tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n              type=\"checkbox\"\n              value={this.value ?? undefined}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...this.#inheritedAttributes}\n            />\n            <div\n              class={{\n                'qds-container': true,\n                'qds-pressed-state': this.isPressed,\n                'qds-selected-state': this.isSelected,\n                'qds-padding-end': true,\n                'qds-cursor': true,\n              }}\n              data-size={this.#computedSize}\n            >\n              {(this.checked ?? false) && (\n                <qds-icon\n                  aria-hidden=\"true\"\n                  class=\"qds-icon\"\n                  data-size={this.#computedSize}\n                  library=\"core\"\n                  name=\"checked\"\n                />\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\n              <span\n                class=\"qds-text\"\n                data-size={this.#computedSize}\n                ref={this.#spanRef}\n              >\n                {this.text}\n              </span>\n            </div>\n          </label>\n        )}\n        {this.tooltip && (\n          <qds-tooltip\n            aria-hidden=\"true\"\n            ref={this.#tooltipRef}\n            trigger=\"pointerenter focusin\"\n          >\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  readonly #onIconClick = (event: MouseEvent): void => {\n    if (!event.defaultPrevented && this.#computedType === 'closable')\n      this.closeEmitter.emit()\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #chipRef = (chip?: HTMLDivElement): void => {\n    this.#chip = chip\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#chip\n  }\n}\n"],"version":3}

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

@@ -3,10 +3,10 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-bc9462c1.js';
 import { c as invariant, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
 
-const dialogCss = ":host([hidden]){display:none!important}:host{display:none;height:-moz-fit-content;height:fit-content;inset:0;position:fixed;width:-moz-fit-content;width:fit-content}:host([open]){display:block}.qds-dialog{background-color:var(--qds-theme-popup-background);border:none;border-radius:var(--qds-popup-border-radius);box-shadow:var(--qds-theme-popup-elevation);height:inherit;padding:0;width:inherit}.qds-dialog::backdrop{background:initial}.qds-dialog[open]~.qds-backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.qds-content{align-items:flex-start;display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);height:calc(100% - var(--qds-popup-padding)*2);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
+const dialogCss = ":host([hidden]){display:none!important}:host{display:none;height:-moz-fit-content;height:fit-content;inset:0;position:fixed;width:-moz-fit-content;width:fit-content}:host([open]){display:block}.qds-dialog{background-color:var(--qds-theme-popup-background);border:var(--qds-popup-border-width) solid var(--qds-theme-popup-border);border-radius:var(--qds-popup-border-radius);box-shadow:var(--qds-theme-popup-elevation);height:inherit;padding:0;width:inherit}.qds-dialog::backdrop{background:initial}.qds-dialog[open]~.qds-backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.qds-content{align-items:flex-start;display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);height:calc(100% - var(--qds-popup-padding)*2);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
 const QdsDialogStyle0 = dialogCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -80,7 +80,7 @@ const Dialog = class {
             this.show();
     }
     render() {
-        return (h(Host, { key: '29346ced1f939c79bd29ceda3567ef44a6e7fbae' }, h("dialog", { key: '694af8b162d1a54331b2fd252ea5c64db0444cfe', class: "qds-dialog", ref: __classPrivateFieldGet(this, _Dialog_ref, "f"), onCancel: __classPrivateFieldGet(this, _Dialog_onCancel, "f"), onClose: __classPrivateFieldGet(this, _Dialog_onClose, "f"), onSubmit: __classPrivateFieldGet(this, _Dialog_onSubmit, "f"), ...__classPrivateFieldGet(this, _Dialog_inheritedAttributes, "f") }, h("div", { key: '673df9f7738f0b4268fabc8cfd933d4fb425b062', class: "qds-content" }, h("slot", { key: '210ec0fd8c8951cd71f72c5f7f947a49e71900de' }))), h("div", { key: '50a645e89b9e692d4905cec55bd8a07337e4272d', class: "qds-backdrop" })));
+        return (h(Host, { key: 'df8850784f9ba96adf154cac3f8ca82070aa5e19' }, h("dialog", { key: '681f32ad65a07972c1e08dc7acde4e80c26df7f1', class: "qds-dialog", ref: __classPrivateFieldGet(this, _Dialog_ref, "f"), onCancel: __classPrivateFieldGet(this, _Dialog_onCancel, "f"), onClose: __classPrivateFieldGet(this, _Dialog_onClose, "f"), onSubmit: __classPrivateFieldGet(this, _Dialog_onSubmit, "f"), ...__classPrivateFieldGet(this, _Dialog_inheritedAttributes, "f") }, h("div", { key: 'aecfea14411b0873b7655c9df69ca7cba0f7b4f7', class: "qds-content" }, h("slot", { key: '161f6424d230f2deda000ef79267caa05a5dbab3' }))), h("div", { key: '805010898bcd1df5a9b6e52f13f24e9abb87df5d', class: "qds-backdrop" })));
     }
     show() {
         invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));

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

@@ -1 +1 @@
-{"file":"qds-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,yuCAAyuC,CAAC;AAC5vC,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;;;;;;;;;;MAmBa,MAAM;IALnB;;;;;;;;;QAWiD,SAAI,GAAG,KAAK,CAAA;QAmB3D,sCAAmC,EAAE,EAAA;QAErC,iCAA2B;QAkDlB,sBAAO,CAAC,MAA0B;YACzC,uBAAA,IAAI,kBAAW,MAAM,MAAA,CAAA;SACtB,EAAA;QAEQ,2BAAY,CAAC,KAAY;YAChC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;SACvE,EAAA;QAEQ,0BAAW;YAClB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;YACxB,IAAI,CAAC,IAAI,GAAG,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;SAC9B,EAAA;QAEQ,2BAAY,CAAC,KAAY;YAChC,IACE,CAAC,KAAK,YAAY,WAAW;iBAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;qBAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;wBAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;iBAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;oBACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;gBACA,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,IAAI,CAAC,KAAK,EAAE,CAAA;aACb;SACF,EAAA;KACF;IA3EW,WAAW;QACnB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;;YACrB,IAAI,CAAC,KAAK,EAAE,CAAA;KAClB;IAEM,iBAAiB;QACtB,uBAAA,IAAI,+BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,gBAAgB;QACrB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;KAC3B;IAEM,MAAM;QACX,QACE,EAAC,IAAI,uDACH,+DACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,uBAAA,IAAI,mBAAK,EACd,QAAQ,EAAE,uBAAA,IAAI,wBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,QAAQ,EAAE,uBAAA,IAAI,wBAAU,KAEpB,uBAAA,IAAI,mCAAqB,IAE7B,4DAAK,KAAK,EAAC,aAAa,IACtB,8DAAQ,CACJ,CACC,EACT,4DAAK,KAAK,EAAC,cAAc,GAAG,CACvB,EACR;KACF;IAEM,IAAI;QACT,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,SAAS,EAAE,CAAA;QACxB,IAAI,CAAC,IAAI,GAAG,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;KAC9B;IAEM,KAAK;QACV,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,KAAK,EAAE,CAAA;KACrB;;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.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: none;\n  position: fixed;\n  inset: 0;\n  width: fit-content;\n  height: fit-content;\n}\n\n:host([open]) {\n  display: block;\n}\n\n.qds-dialog {\n  background-color: var(--qds-theme-popup-background);\n  border-radius: var(--qds-popup-border-radius);\n  border: none;\n  box-shadow: var(--qds-theme-popup-elevation);\n  height: inherit;\n  padding: 0;\n  width: inherit;\n\n  &::backdrop {\n    background: initial;\n  }\n\n  &[open] ~ .qds-backdrop {\n    backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n    background-color: var(--qds-theme-popup-overlay-background);\n    inset: 0;\n    opacity: var(--qds-theme-popup-overlay-opacity);\n    position: fixed;\n  }\n}\n\n.qds-content {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-popup-gap-children-related);\n  padding: var(--qds-popup-padding);\n  height: calc(100% - 2 * var(--qds-popup-padding));\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\n\n/**\n * The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n *\n * @see https://quartz.se.com/build/components/dialog\n */\n@Component({\n  tag: 'qds-dialog',\n  shadow: true,\n  styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute\n   * to show and hide the dialog, or you can use the `show()` and `close()`\n   * methods and this attribute will reflect the dialog’s open state.\n   */\n  @Prop({ mutable: true, reflect: true }) public open = false\n\n  @Element() private readonly host!: HTMLElement\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * currently open dialog. The browser fires this event when the user presses\n   * the `Esc` key.\n   *\n   * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are fired.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /** Emitted when the dialog has been closed. */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  #inheritedAttributes: Attributes = {}\n\n  #dialog?: HTMLDialogElement\n\n  @Watch('open')\n  protected openChanged(): void {\n    if (this.open) this.show()\n    else this.close()\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public componentDidLoad(): void {\n    if (this.open) this.show()\n  }\n\n  public render() {\n    return (\n      <Host>\n        <dialog\n          class=\"qds-dialog\"\n          ref={this.#ref}\n          onCancel={this.#onCancel}\n          onClose={this.#onClose}\n          onSubmit={this.#onSubmit}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        >\n          <div class=\"qds-content\">\n            <slot />\n          </div>\n        </dialog>\n        <div class=\"qds-backdrop\" />\n      </Host>\n    )\n  }\n\n  public show(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.showModal()\n    this.open = this.#dialog.open\n  }\n\n  public close(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.close()\n  }\n\n  readonly #ref = (dialog?: HTMLDialogElement): void => {\n    this.#dialog = dialog\n  }\n\n  readonly #onCancel = (event: Event): void => {\n    if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n  }\n\n  readonly #onClose = (): void => {\n    invariant(this.#dialog)\n\n    this.closeEmitter.emit()\n    this.open = this.#dialog.open\n  }\n\n  readonly #onSubmit = (event: Event): void => {\n    if (\n      (event instanceof SubmitEvent &&\n        (event.submitter instanceof HTMLButtonElement ||\n          (event.submitter instanceof HTMLInputElement &&\n            event.submitter.formMethod === 'dialog'))) ||\n      (event.target instanceof HTMLFormElement &&\n        event.target.method === 'dialog')\n    ) {\n      event.preventDefault()\n      this.close()\n    }\n  }\n}\n"],"version":3}
+{"file":"qds-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,syCAAsyC,CAAC;AACzzC,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;;;;;;;;;;MAmBa,MAAM;IALnB;;;;;;;;;QAWiD,SAAI,GAAG,KAAK,CAAA;QAmB3D,sCAAmC,EAAE,EAAA;QAErC,iCAA2B;QAkDlB,sBAAO,CAAC,MAA0B;YACzC,uBAAA,IAAI,kBAAW,MAAM,MAAA,CAAA;SACtB,EAAA;QAEQ,2BAAY,CAAC,KAAY;YAChC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;SACvE,EAAA;QAEQ,0BAAW;YAClB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;YACxB,IAAI,CAAC,IAAI,GAAG,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;SAC9B,EAAA;QAEQ,2BAAY,CAAC,KAAY;YAChC,IACE,CAAC,KAAK,YAAY,WAAW;iBAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;qBAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;wBAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;iBAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;oBACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;gBACA,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,IAAI,CAAC,KAAK,EAAE,CAAA;aACb;SACF,EAAA;KACF;IA3EW,WAAW;QACnB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;;YACrB,IAAI,CAAC,KAAK,EAAE,CAAA;KAClB;IAEM,iBAAiB;QACtB,uBAAA,IAAI,+BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,gBAAgB;QACrB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;KAC3B;IAEM,MAAM;QACX,QACE,EAAC,IAAI,uDACH,+DACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,uBAAA,IAAI,mBAAK,EACd,QAAQ,EAAE,uBAAA,IAAI,wBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,QAAQ,EAAE,uBAAA,IAAI,wBAAU,KAEpB,uBAAA,IAAI,mCAAqB,IAE7B,4DAAK,KAAK,EAAC,aAAa,IACtB,8DAAQ,CACJ,CACC,EACT,4DAAK,KAAK,EAAC,cAAc,GAAG,CACvB,EACR;KACF;IAEM,IAAI;QACT,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,SAAS,EAAE,CAAA;QACxB,IAAI,CAAC,IAAI,GAAG,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;KAC9B;IAEM,KAAK;QACV,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,KAAK,EAAE,CAAA;KACrB;;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.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: none;\n  position: fixed;\n  inset: 0;\n  width: fit-content;\n  height: fit-content;\n}\n\n:host([open]) {\n  display: block;\n}\n\n.qds-dialog {\n  background-color: var(--qds-theme-popup-background);\n  border-radius: var(--qds-popup-border-radius);\n  border: var(--qds-popup-border-width) solid var(--qds-theme-popup-border);\n  box-shadow: var(--qds-theme-popup-elevation);\n  height: inherit;\n  padding: 0;\n  width: inherit;\n\n  &::backdrop {\n    background: initial;\n  }\n\n  &[open] ~ .qds-backdrop {\n    backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n    background-color: var(--qds-theme-popup-overlay-background);\n    inset: 0;\n    opacity: var(--qds-theme-popup-overlay-opacity);\n    position: fixed;\n  }\n}\n\n.qds-content {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-popup-gap-children-related);\n  padding: var(--qds-popup-padding);\n  height: calc(100% - 2 * var(--qds-popup-padding));\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\n\n/**\n * The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n *\n * @see https://quartz.se.com/build/components/dialog\n */\n@Component({\n  tag: 'qds-dialog',\n  shadow: true,\n  styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute\n   * to show and hide the dialog, or you can use the `show()` and `close()`\n   * methods and this attribute will reflect the dialog’s open state.\n   */\n  @Prop({ mutable: true, reflect: true }) public open = false\n\n  @Element() private readonly host!: HTMLElement\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * currently open dialog. The browser fires this event when the user presses\n   * the `Esc` key.\n   *\n   * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are fired.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /** Emitted when the dialog has been closed. */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  #inheritedAttributes: Attributes = {}\n\n  #dialog?: HTMLDialogElement\n\n  @Watch('open')\n  protected openChanged(): void {\n    if (this.open) this.show()\n    else this.close()\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n  }\n\n  public componentDidLoad(): void {\n    if (this.open) this.show()\n  }\n\n  public render() {\n    return (\n      <Host>\n        <dialog\n          class=\"qds-dialog\"\n          ref={this.#ref}\n          onCancel={this.#onCancel}\n          onClose={this.#onClose}\n          onSubmit={this.#onSubmit}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        >\n          <div class=\"qds-content\">\n            <slot />\n          </div>\n        </dialog>\n        <div class=\"qds-backdrop\" />\n      </Host>\n    )\n  }\n\n  public show(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.showModal()\n    this.open = this.#dialog.open\n  }\n\n  public close(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.close()\n  }\n\n  readonly #ref = (dialog?: HTMLDialogElement): void => {\n    this.#dialog = dialog\n  }\n\n  readonly #onCancel = (event: Event): void => {\n    if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n  }\n\n  readonly #onClose = (): void => {\n    invariant(this.#dialog)\n\n    this.closeEmitter.emit()\n    this.open = this.#dialog.open\n  }\n\n  readonly #onSubmit = (event: Event): void => {\n    if (\n      (event instanceof SubmitEvent &&\n        (event.submitter instanceof HTMLButtonElement ||\n          (event.submitter instanceof HTMLInputElement &&\n            event.submitter.formMethod === 'dialog'))) ||\n      (event.target instanceof HTMLFormElement &&\n        event.target.method === 'dialog')\n    ) {\n      event.preventDefault()\n      this.close()\n    }\n  }\n}\n"],"version":3}