@quartzds/core 1.0.0-beta.8 → 1.0.0-beta.81

package/components/qds-button.js.map

@@ -1 +1 @@
-{"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.button {\n  appearance: none;\n  background-color: initial;\n  border: none;\n  padding-block: 0;\n  align-items: center;\n  border-radius: var(--qds-control-border-radius);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--qds-control-button-gap-internal);\n  justify-content: center;\n  padding-inline: var(--qds-control-button-padding-horizontal);\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: nowrap;\n  width: 100%;\n\n  &.icon-only {\n    padding-inline: 0;\n  }\n\n  &:any-link {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n\n  &.icon-only {\n    width: var(--qds-control-small-height);\n  }\n\n  &.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  height: var(--qds-control-standard-height);\n\n  &.icon-only {\n    width: var(--qds-control-standard-height);\n  }\n\n  &.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  height: var(--qds-control-large-height);\n\n  &.icon-only {\n    width: var(--qds-control-large-height);\n  }\n\n  &.icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  border: var(--qds-control-border-width) solid transparent;\n  color: var(--qds-theme-link-default);\n\n  &.icon-only {\n    color: var(--qds-theme-control-text-standard);\n  }\n\n  &:hover {\n    border: var(--qds-control-border-width) solid var(--qds-theme-link-default);\n\n    &.icon-only {\n      background-color: var(--qds-theme-interactive-background-hover);\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n    }\n  }\n\n  &:active {\n    border: var(--qds-control-border-width) solid var(--qds-theme-link-pressed);\n    color: var(--qds-theme-link-pressed);\n\n    &.icon-only {\n      background-color: var(--qds-theme-interactive-background-pressed);\n      border: none;\n      color: var(--qds-theme-control-text-standard);\n    }\n  }\n}\n\n[data-importance='standard'] {\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\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[data-importance='emphasized'] {\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[data-importance='destructive'] {\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","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\n\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type Importance = 'destructive' | 'emphasized' | 'standard' | 'subdued'\nexport type ButtonSize = 'large' | 'small' | 'standard'\nexport type FormMethod = 'get' | 'post'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop({ reflect: true }) public readonly size: ButtonSize = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to\n   * submit 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   *\n   * If specified, this attribute overrides the method attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10)\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    const Tag = this.href === undefined ? 'button' : 'a'\n\n    return (\n      <Tag\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          button: true,\n          'icon-only': this.iconOnly,\n        }}\n        data-importance={this.importance}\n        data-size={this.size}\n        disabled={Tag === 'a' ? undefined : this.disabled}\n        download={Tag === 'a' ? this.download : undefined}\n        href={Tag === 'a' ? this.href : undefined}\n        name={Tag === 'a' ? undefined : this.name}\n        onBlur={this.onBlur}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n        role={Tag === 'a' ? 'button' : undefined}\n        tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n        target={Tag === 'a' ? this.target : undefined}\n        type={Tag === 'a' ? undefined : this.buttonType}\n        value={Tag === 'a' ? undefined : this.value}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.iconName !== undefined && this.iconName !== '' && (\n          <qds-icon\n            class=\"icon\"\n            data-size={this.size}\n            library={this.iconLibrary}\n            name={this.iconName}\n          />\n        )}\n        {this.text}\n      </Tag>\n    )\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    if (this.buttonType === 'button' || !this.formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-button.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/qds-checkbox.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface QdsCheckbox extends Components.QdsCheckbox, HTMLElement {}
 export const QdsCheckbox: {
-  prototype: QdsCheckbox;
-  new (): QdsCheckbox;
+    prototype: QdsCheckbox;
+    new (): QdsCheckbox;
 };
 /**
  * Used to define this component and all nested components recursively.

package/components/qds-checkbox.js

@@ -1,152 +1,9 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as pickFocusEventAttributes, a as invariant, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './label.js';
-
-const checkboxCss = ".sc-qds-checkbox-h{box-sizing:border-box}[hidden].sc-qds-checkbox-h{display:none !important}.sc-qds-checkbox-h *.sc-qds-checkbox,.sc-qds-checkbox-h *.sc-qds-checkbox::before,.sc-qds-checkbox-h *.sc-qds-checkbox::after{box-sizing:inherit}.sc-qds-checkbox-h{display:inline-block;line-height:0}.icon.sc-qds-checkbox{display:none;color:var(--qds-theme-signature-color-contrast);inset-inline-start:0;pointer-events:none;position:absolute}.label.sc-qds-checkbox{cursor:pointer;display:inline-flex;position:relative}.checkbox.sc-qds-checkbox{align-items:center;-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.checkbox.sc-qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.checkbox.sc-qds-checkbox::before{content:'';height:10px;position:absolute;width:10px}.checkbox.sc-qds-checkbox:hover::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:active::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-pressed)}.checkbox.sc-qds-checkbox:checked~.checked.sc-qds-checkbox,.checkbox.sc-qds-checkbox:indeterminate~.indeterminate.sc-qds-checkbox{display:inline-block}.checkbox.sc-qds-checkbox:checked,.checkbox.sc-qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.checkbox.sc-qds-checkbox:checked:hover,.checkbox.sc-qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:checked:active,.checkbox.sc-qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true'].sc-qds-checkbox{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-checkbox,.checkbox[data-size='small'].sc-qds-checkbox{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-checkbox{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-checkbox{gap:var(--qds-control-small-gap-siblings-related)}.icon[data-size='standard'].sc-qds-checkbox,.checkbox[data-size='standard'].sc-qds-checkbox{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-checkbox{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-checkbox{gap:var(--qds-control-standard-gap-siblings-related)}.icon[data-size='large'].sc-qds-checkbox,.checkbox[data-size='large'].sc-qds-checkbox{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-checkbox{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-checkbox{gap:var(--qds-control-large-gap-siblings-related)}";
-
-let autoIncrementingId = 1;
-const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.blurEmitter = createEvent(this, "qdsBlur", 2);
-    this.changeEmitter = createEvent(this, "qdsChange", 6);
-    this.focusEmitter = createEvent(this, "qdsFocus", 2);
-    this.inheritedAttributes = {};
-    this.ref = (checkbox) => {
-      this.input = checkbox;
-    };
-    this.onBlur = (event) => {
-      this.blurEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.onFocus = (event) => {
-      this.focusEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.inline = false;
-    this.size = 'standard';
-    this.text = undefined;
-    this.autoFocus = undefined;
-    this.checked = undefined;
-    this.disabled = undefined;
-    this.form = undefined;
-    this.indeterminate = undefined;
-    this.name = `qds-checkbox-${autoIncrementingId}`;
-    this.required = undefined;
-    this.value = undefined;
-  }
-  get computedDisabled() {
-    return this.disabled ?? false;
-  }
-  get computedIndeterminate() {
-    return this.indeterminate ?? false;
-  }
-  get hasText() {
-    return ((this.text !== undefined && this.text !== '') || this.required === true);
-  }
-  /**
-   * Returns whether a form will validate this checkbox when it is submitted
-   * without having to submit it.
-   */
-  async checkValidity() {
-    invariant(this.input);
-    return this.input.checkValidity();
-  }
-  /**
-   * Returns true if the checkbox's value passes validity checks; otherwise,
-   * returns false, and (if the event isn't canceled) reports the problem to
-   * the user.
-   */
-  async reportValidity() {
-    invariant(this.input);
-    return this.input.reportValidity();
-  }
-  /**
-   * Sets a custom validity message for the checkbox. If this message is not the
-   * empty string, then the checkbox is considered invalid.
-   */
-  async setCustomValidity(message) {
-    invariant(this.input);
-    this.input.setCustomValidity(message);
-  }
-  onClick(event) {
-    if (this.computedDisabled)
-      return;
-    event.preventDefault();
-    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false);
-    this.changeEmitter.emit();
-    this.indeterminate = false;
-  }
-  componentWillLoad() {
-    autoIncrementingId += 1;
-    this.inheritedAttributes = {
-      ...inheritAriaAttributes(this.element),
-      ...inheritAttributes(this.element, ['tabindex']),
-    };
-  }
-  render() {
-    return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    h("label", { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
-        inline: this.inline,
-        label: true,
-      }, "data-size": this.size }, h("input", {
-      // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "checkbox", "data-size": this.size, disabled: this.disabled, form: this.form, indeterminate: this.indeterminate, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
-    }), h("qds-icon", { "aria-hidden": "true", class: {
-        icon: true,
-        checked: true,
-      }, "data-size": this.size, library: "core", name: "checked" }), h("qds-icon", { "aria-hidden": "true", class: {
-        icon: true,
-        indeterminate: true,
-      }, "data-size": this.size, library: "core", name: "indeterminate" }), this.hasText && (h("qds-label", { required: this.required, size: this.size, text: this.text }))));
-  }
-  get element() { return this; }
-  static get style() { return checkboxCss; }
-}, [2, "qds-checkbox", {
-    "inline": [4],
-    "size": [513],
-    "text": [1537],
-    "autoFocus": [4, "autofocus"],
-    "checked": [1540],
-    "disabled": [1540],
-    "form": [1],
-    "indeterminate": [1540],
-    "name": [1],
-    "required": [4],
-    "value": [1032],
-    "checkValidity": [64],
-    "reportValidity": [64],
-    "setCustomValidity": [64]
-  }, [[0, "click", "onClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["qds-checkbox", "qds-icon", "qds-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "qds-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Checkbox);
-      }
-      break;
-    case "qds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "qds-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { C as Checkbox, d as defineCustomElement$1 } from './p-f85b490c.js';
 
 const QdsCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

package/components/qds-checkbox.js.map

@@ -1 +1 @@
-{"file":"qds-checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.icon {\n  display: none;\n  color: var(--qds-theme-signature-color-contrast);\n  inset-inline-start: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.label {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n}\n\n.checkbox {\n  align-items: center;\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  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\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  &::before {\n    content: '';\n    height: 10px;\n    position: absolute;\n    width: 10px;\n  }\n\n  &:hover::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n  }\n\n  &:active::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .checked,\n  &:indeterminate ~ .indeterminate {\n    display: inline-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  &:is(.icon, .checkbox) {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Method,\n  Prop,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type CheckboxValue = number | string | null\nexport type CheckboxSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\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  scoped: 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({ reflect: true }) public readonly size: CheckboxSize = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: 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({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the checkbox 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-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property 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   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represents 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, reflect: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data. An\n   * incrementing ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-checkbox-${autoIncrementingId}`\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 value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: CheckboxValue\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\n    )\n  }\n\n  /**\n   * Returns whether a form will validate this checkbox when it is submitted\n   * without having to submit it.\n   */\n  @Method()\n  public async checkValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.checkValidity()\n  }\n\n  /**\n   * Returns true if the checkbox's value passes validity checks; otherwise,\n   * returns false, and (if the event isn't canceled) reports the problem to\n   * the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.reportValidity()\n  }\n\n  /**\n   * Sets a custom validity message for the checkbox. If this message is not the\n   * empty string, then the checkbox is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.input)\n\n    this.input.setCustomValidity(message)\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) return\n\n    event.preventDefault()\n\n    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false)\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          inline: this.inline,\n          label: true,\n        }}\n        data-size={this.size}\n      >\n        <input\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.computedIndeterminate ? false : this.checked}\n          class=\"checkbox\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          ref={this.ref}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value ?? 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            icon: true,\n            checked: true,\n          }}\n          data-size={this.size}\n          library=\"core\"\n          name=\"checked\"\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class={{\n            icon: true,\n            indeterminate: true,\n          }}\n          data-size={this.size}\n          library=\"core\"\n          name=\"indeterminate\"\n        />\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-checkbox.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/qds-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface QdsChip extends Components.QdsChip, HTMLElement {}
+export const QdsChip: {
+    prototype: QdsChip;
+    new (): QdsChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/qds-chip.js

@@ -0,0 +1,271 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-7b04d43e.js';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes, b as invariant, c as isOverflowing } from './p-4141d6ed.js';
+import { d as defineCustomElement$3 } from './p-82461767.js';
+import { d as defineCustomElement$2 } from './p-f5ba28ff.js';
+
+const chipCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-text{line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-chip,.qds-container,.qds-label{width:inherit}.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-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)}.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)}.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)}";
+const QdsChipStyle0 = chipCss;
+
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Chip_instances, _Chip_chip, _Chip_span, _Chip_ro, _Chip_inheritedAttributes, _Chip_ariaLabel_get, _Chip_computedDisabled_get, _Chip_computedSize_get, _Chip_computedType_get, _Chip_computedChecked_get, _Chip_computedValue_get, _Chip_onIconClick, _Chip_onFocus, _Chip_onBlur, _Chip_chipRef, _Chip_spanRef, _Chip_tooltipRef;
+const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.closeEmitter = createEvent(this, "qdsClose", 6);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.internals = this.attachInternals();
+        _Chip_instances.add(this);
+        _Chip_chip.set(this, void 0);
+        _Chip_span.set(this, void 0);
+        _Chip_ro.set(this, void 0);
+        _Chip_inheritedAttributes.set(this, {});
+        _Chip_onIconClick.set(this, (event) => {
+            if (!event.defaultPrevented && __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable')
+                this.closeEmitter.emit();
+        });
+        _Chip_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Chip_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Chip_chipRef.set(this, (chip) => {
+            __classPrivateFieldSet(this, _Chip_chip, chip, "f");
+        });
+        _Chip_spanRef.set(this, (span) => {
+            __classPrivateFieldSet(this, _Chip_span, span, "f");
+        });
+        _Chip_tooltipRef.set(this, (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = __classPrivateFieldGet(this, _Chip_chip, "f");
+        });
+        this.iconName = undefined;
+        this.iconLibrary = 'default';
+        this.size = 'standard';
+        this.type = 'selectable';
+        this.text = undefined;
+        this.checked = undefined;
+        this.form = null;
+        this.disabled = undefined;
+        this.name = undefined;
+        this.autoFocus = undefined;
+        this.value = 'on';
+        this.isPressed = false;
+        this.tabIndex = undefined;
+        this.tooltip = false;
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.preventDefault();
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.checked = !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get);
+            this.changeEmitter.emit();
+        }
+    }
+    handleKeyDown(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (event.key === ' ') {
+            this.isPressed = true;
+            event.preventDefault();
+        }
+        else if (event.key === 'Enter' && this.internals.form) {
+            this.internals.form.requestSubmit();
+            event.preventDefault();
+        }
+    }
+    handleKeyUp(event) {
+        if (event.key !== ' ')
+            return;
+        this.isPressed = false;
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable')
+            this.closeEmitter.emit();
+        else {
+            this.checked = !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get);
+            this.changeEmitter.emit();
+        }
+    }
+    checkedChanged() {
+        this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)
+            ? __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get)
+            : // eslint-disable-next-line unicorn/no-null
+                null);
+    }
+    disabledChanged() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+            this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get));
+        // eslint-disable-next-line unicorn/no-null
+        else
+            this.internals.setFormValue(null);
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    valueChanged() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+            this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get));
+    }
+    componentWillLoad() {
+        this.valueChanged();
+        Object.defineProperty(this.host, 'form', {
+            enumerable: true,
+            get: () => this.internals.form,
+        });
+        __classPrivateFieldSet(this, _Chip_inheritedAttributes, inheritAriaAttributes(this.host), "f");
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    componentDidLoad() {
+        invariant(__classPrivateFieldGet(this, _Chip_span, "f"));
+        this.tooltip = isOverflowing(__classPrivateFieldGet(this, _Chip_span, "f"));
+        __classPrivateFieldSet(this, _Chip_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = isOverflowing(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _Chip_ro, "f").observe(__classPrivateFieldGet(this, _Chip_span, "f"));
+    }
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _Chip_ro, "f"))
+            __classPrivateFieldGet(this, _Chip_ro, "f").disconnect();
+    }
+    render() {
+        return (h("div", { key: '36bff2d84c6aeb06723dc30e1a73a076a52977fc', class: "qds-chip", ref: __classPrivateFieldGet(this, _Chip_chipRef, "f") }, __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable' && (h("div", { key: 'de70281e480160344cbdbf68ed160bbd48f96c72', "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: 'fe5034ee25491fbc2c4559ee30b99c28892752cb', "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: '52817dbe0485d35bbc1deac180ad7838ab6b96a9', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text), h("button", { key: '4b98b907e796a956f376de928525a5ecfe4b81a6', "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: '7278efa67ca1e5a4986ab35502607bd39007bc34', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "close" })))), __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable' && (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        h("label", { key: 'e4caf1fc6a0cc37e608872d97b79362d9f768e39', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: "qds-label" }, h("input", { key: 'a831e5c0925a926a2328b896db2c8d64b79c6def',
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.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: '5bdda2f36b950df4a641e04027f9abd494697fbc', class: {
+                'qds-container': true,
+                'qds-pressed-state': this.isPressed,
+                'qds-padding-end': true,
+                'qds-cursor': true,
+            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'ecfcfdf0f0f14c54bed742bf661c96e42e68921d', "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: '28ec8f7e9b576cd095794a8d9e9d59bc20cab5a3', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text), (this.checked ?? false) && (h("qds-icon", { key: '6c201c01a488eb74ed3ed208f158f9c3901e0c55', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "checked" }))))), this.tooltip && (h("qds-tooltip", { key: '9bac5d85e452cfade627116476f3713239741fd2', ref: __classPrivateFieldGet(this, _Chip_tooltipRef, "f"), trigger: "pointerenter focusin" }, this.text))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return QdsChipStyle0; }
+}, [81, "qds-chip", {
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "size": [1],
+        "type": [1],
+        "text": [1],
+        "checked": [1028],
+        "form": [1],
+        "disabled": [4],
+        "name": [1],
+        "autoFocus": [4, "autofocus"],
+        "value": [8],
+        "isPressed": [32],
+        "tabIndex": [32],
+        "tooltip": [32]
+    }, [[0, "click", "onClick"], [0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }]);
+_Chip_chip = new WeakMap(), _Chip_span = new WeakMap(), _Chip_ro = new WeakMap(), _Chip_inheritedAttributes = new WeakMap(), _Chip_onIconClick = new WeakMap(), _Chip_onFocus = new WeakMap(), _Chip_onBlur = new WeakMap(), _Chip_chipRef = new WeakMap(), _Chip_spanRef = new WeakMap(), _Chip_tooltipRef = new WeakMap(), _Chip_instances = new WeakSet(), _Chip_ariaLabel_get = function _Chip_ariaLabel_get() {
+    return `Delete ${this.text} selection`;
+}, _Chip_computedDisabled_get = function _Chip_computedDisabled_get() {
+    return this.disabled ?? false;
+}, _Chip_computedSize_get = function _Chip_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Chip_computedType_get = function _Chip_computedType_get() {
+    switch (this.type) {
+        case 'selectable':
+        case 'closable': {
+            return this.type;
+        }
+        default: {
+            return 'selectable';
+        }
+    }
+}, _Chip_computedChecked_get = function _Chip_computedChecked_get() {
+    return this.checked ?? false;
+}, _Chip_computedValue_get = function _Chip_computedValue_get() {
+    // eslint-disable-next-line unicorn/no-null
+    return this.value == null ? null : this.value.toString();
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-chip", "qds-icon", "qds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-chip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Chip);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "qds-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsChip, defineCustomElement };
+
+//# sourceMappingURL=qds-chip.js.map

package/components/qds-chip.js.map

@@ -0,0 +1 @@
+{"file":"qds-chip.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: inline-block;\n  line-height: 0;\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-text {\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-chip,\n.qds-container,\n.qds-label {\n  width: inherit;\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-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  }\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  }\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  }\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   * Specify whether the chip should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\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!: HTMLQdsChipElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private isPressed = 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.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=\"close\"\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.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-padding-end': true,\n                'qds-cursor': true,\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              {(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            </div>\n          </label>\n        )}\n        {this.tooltip && (\n          <qds-tooltip ref={this.#tooltipRef} trigger=\"pointerenter focusin\">\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/components/qds-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface QdsDialog extends Components.QdsDialog, HTMLElement {}
+export const QdsDialog: {
+    prototype: QdsDialog;
+    new (): QdsDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;