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

package/components/index.d.ts

@@ -3,6 +3,8 @@ export { Button as QdsButton } from '../dist/types/components/button/button';
 export { defineCustomElement as defineCustomElementQdsButton } from './qds-button';
 export { Checkbox as QdsCheckbox } from '../dist/types/components/checkbox/checkbox';
 export { defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox';
+export { Dialog as QdsDialog } from '../dist/types/components/dialog/dialog';
+export { defineCustomElement as defineCustomElementQdsDialog } from './qds-dialog';
 export { Divider as QdsDivider } from '../dist/types/components/divider/divider';
 export { defineCustomElement as defineCustomElementQdsDivider } from './qds-divider';
 export { Dropdown as QdsDropdown } from '../dist/types/components/dropdown/dropdown';

package/components/index.js

@@ -7,6 +7,7 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
 export { r as registerIconLibrary, u as unregisterIconLibrary } from './icon.js';
 export { QdsButton, defineCustomElement as defineCustomElementQdsButton } from './qds-button.js';
 export { QdsCheckbox, defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox.js';
+export { QdsDialog, defineCustomElement as defineCustomElementQdsDialog } from './qds-dialog.js';
 export { QdsDivider, defineCustomElement as defineCustomElementQdsDivider } from './qds-divider.js';
 export { QdsDropdown, defineCustomElement as defineCustomElementQdsDropdown } from './qds-dropdown.js';
 export { QdsFormMessage, defineCustomElement as defineCustomElementQdsFormMessage } from './qds-form-message.js';

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;EAC3C,IAAI,KAAK,KAAK,SAAS;IAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;EAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;IAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;EAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;EAEpC,IAAI,CAAC,SAAS;IAAE,OAAO,SAAS,CAAA;EAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;KAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;EAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;EACtC,IAAI,SAAS,KAAK,SAAS;IAAE,OAAM;EAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;EAClD,IAAI,cAAc,KAAK,SAAS;IAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAKD;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;EAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;EAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\n// eslint-disable-next-line @typescript-eslint/no-type-alias\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;EAC3C,IAAI,KAAK,KAAK,SAAS;IAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;EAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;IAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;EAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;EAEpC,IAAI,CAAC,SAAS;IAAE,OAAO,SAAS,CAAA;EAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;KAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;EAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;EACtC,IAAI,SAAS,KAAK,SAAS;IAAE,OAAM;EAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;EAClD,IAAI,cAAc,KAAK,SAAS;IAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAKD;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;EAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;EAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\n// eslint-disable-next-line @typescript-eslint/no-type-alias\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}

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":"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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 = 'dialog' | '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][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<ButtonTarget, string> = '_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}

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;

package/components/qds-dialog.js

@@ -0,0 +1,108 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as ignorePromise, a as invariant, i as inheritAriaAttributes } from './helpers.js';
+
+const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:none;position:fixed;inset:0}:host([open]){display:block}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.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}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);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 Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.cancelEmitter = createEvent(this, "qdsCancel", 1);
+    this.closeEmitter = createEvent(this, "qdsClose", 0);
+    this.inheritedAttributes = {};
+    this.boundSubmit = (event) => {
+      ignorePromise(this.handleSubmit(event));
+    };
+    this.onCancel = (event) => {
+      if (this.cancelEmitter.emit().defaultPrevented)
+        event.preventDefault();
+    };
+    this.onClose = () => {
+      invariant(this.dialog);
+      this.closeEmitter.emit();
+      this.open = this.dialog.open;
+    };
+    this.ref = (dialog) => {
+      this.dialog = dialog;
+    };
+    this.open = false;
+  }
+  /**
+   * Displays the dialog over the top of any other dialogs that might be
+   * present. Everything outside of the dialog is [inert][] with interactions
+   * outside of the dialog being blocked.
+   *
+   * [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert
+   */
+  async show() {
+    invariant(this.dialog);
+    this.dialog.showModal();
+    this.open = this.dialog.open;
+  }
+  /**
+   * Closes the dialog.
+   */
+  async close() {
+    invariant(this.dialog);
+    this.dialog.close();
+  }
+  async openChanged() {
+    await (this.open ? this.show() : this.close());
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.element);
+  }
+  async componentDidLoad() {
+    if (this.open)
+      await this.show();
+  }
+  render() {
+    return (h(Host, null, h("dialog", { class: "dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { class: "content" }, h("slot", null))), h("div", { class: "backdrop" })));
+  }
+  async handleSubmit(event) {
+    if ((event instanceof SubmitEvent &&
+      (event.submitter instanceof HTMLButtonElement ||
+        (event.submitter instanceof HTMLInputElement &&
+          event.submitter.formMethod === 'dialog'))) ||
+      (event.target instanceof HTMLFormElement &&
+        event.target.method === 'dialog')) {
+      event.preventDefault();
+      await this.close();
+    }
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
+  static get style() { return dialogCss; }
+}, [1, "qds-dialog", {
+    "open": [1540],
+    "show": [64],
+    "close": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-dialog"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-dialog":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Dialog);
+      }
+      break;
+  } });
+}
+
+const QdsDialog = Dialog;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsDialog, defineCustomElement };
+
+//# sourceMappingURL=qds-dialog.js.map

package/components/qds-dialog.js.map

@@ -0,0 +1 @@
+{"file":"qds-dialog.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,8uCAA8uC;;MC8BnvC,MAAM;;;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1C,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACC,EACT,WAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.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: none;\n  position: fixed;\n  inset: 0;\n}\n\n:host([open]) {\n  display: block;\n}\n\n.dialog {\n  border-radius: var(--qds-popup-border-radius);\n  border: none;\n  box-shadow: var(--qds-theme-popup-elevation);\n  padding: 0;\n\n  &::backdrop {\n    background: initial;\n  }\n\n  &[open] ~ .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.content {\n  align-items: flex-start;\n  background-color: var(--qds-theme-popup-background);\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-popup-gap-children-related);\n  padding: 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: © 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  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, 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 element!: HTMLQdsDialogElement\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({\n    eventName: 'qdsClose',\n    bubbles: false,\n    cancelable: false,\n    composed: false,\n  })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  private inheritedAttributes: Attributes = {}\n\n  private dialog?: HTMLDialogElement\n\n  /**\n   * Displays the dialog over the top of any other dialogs that might be\n   * present. Everything outside of the dialog is [inert][] with interactions\n   * outside of the dialog being blocked.\n   *\n   * [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n   */\n  @Method()\n  public async show(): Promise<void> {\n    invariant(this.dialog)\n\n    this.dialog.showModal()\n    this.open = this.dialog.open\n  }\n\n  /**\n   * Closes the dialog.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    invariant(this.dialog)\n\n    this.dialog.close()\n  }\n\n  @Watch('open')\n  protected async openChanged(): Promise<void> {\n    await (this.open ? this.show() : this.close())\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public async componentDidLoad(): Promise<void> {\n    if (this.open) await this.show()\n  }\n\n  public render() {\n    return (\n      <Host>\n        <dialog\n          class=\"dialog\"\n          ref={this.ref}\n          onSubmit={this.boundSubmit}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <div class=\"content\">\n            <slot />\n          </div>\n        </dialog>\n        <div class=\"backdrop\" />\n      </Host>\n    )\n  }\n\n  private async handleSubmit(event: Event): Promise<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      await this.close()\n    }\n  }\n\n  private readonly boundSubmit = (event: Event): void => {\n    ignorePromise(this.handleSubmit(event))\n  }\n\n  private readonly onCancel = (event: Event): void => {\n    if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n  }\n\n  private readonly onClose = (): void => {\n    invariant(this.dialog)\n\n    this.closeEmitter.emit()\n    this.open = this.dialog.open\n  }\n\n  private readonly ref = (dialog?: HTMLDialogElement): void => {\n    this.dialog = dialog\n  }\n}\n"],"version":3}

package/components/qds-dropdown.js

@@ -19,7 +19,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     this.closeEmitter = createEvent(this, "qdsClose", 2);
     this.open = false;
     this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(event));
+      ignorePromise(this.handleFocusout(event));
     };
     this.boundEscape = (event) => {
       ignorePromise(this.handleEscape(event));
@@ -167,7 +167,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         transform: this.hostTransform,
       } }, h("slot", null)));
   }
-  async handleFocusOut(event) {
+  async handleFocusout(event) {
     if (!(event instanceof FocusEvent))
       return;
     const { relatedTarget } = event;

package/components/qds-dropdown.js.map

@@ -1 +1 @@
-{"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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  background: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  display: inline-block;\n  left: 0;\n  top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n  tag: 'qds-dropdown',\n  shadow: true,\n  styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the dropdown from being shown by user interaction. The dropdown\n   * can still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the dropdown relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'bottom-start'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the dropdown. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * current open dropdown by pressing the `Esc` key.\n   *\n   * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are emitted.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsDropdownElement\n\n  @State() private hostAriaLabelledBy?: string\n\n  @State() private hostDisplay?: string\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  private cleanup?: () => void\n\n  private middleware?: Middleware[]\n\n  private referenceElement?: ReferenceElement\n\n  private open = false\n\n  /**\n   * Show the dropdown.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'true')\n      this.referenceElement.setAttribute('aria-controls', this.element.id)\n    }\n\n    this.open = true\n    this.hostDisplay = undefined\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the dropdown.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'false')\n      this.referenceElement.removeAttribute('aria-controls')\n    }\n\n    this.open = false\n    this.hostDisplay = 'none'\n    if (this.cleanup) this.cleanup()\n\n    this.closeEmitter.emit()\n  }\n\n  /**\n   * Update the dropdown's middleware and position.\n   */\n  @Method()\n  public async update(): Promise<void> {\n    await this.updateMiddleware()\n  }\n\n  @Listen('click', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    if (!this.open) return\n\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.setAttribute('aria-expanded', 'false')\n    this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focusout', this.boundFocusout)\n    this.referenceElement.addEventListener('keydown', this.boundEscape)\n    if (this.element.role === 'menu') {\n      this.referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n      this.hostAriaLabelledBy = this.referenceElement.id\n    }\n  }\n\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  private async updateMiddleware(): Promise<void> {\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis:\n          propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n    await this.updatePosition()\n  }\n\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.hostDisplay = 'none'\n    this.element.role ??= 'menu'\n    this.element.id ||= `qds-dropdown-${autoIncrementingId}`\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n    await this.updateMiddleware()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        aria-labelledby={this.hostAriaLabelledBy}\n        onKeyDown={this.boundEscape}\n        onFocusout={this.boundFocusout}\n        style={{\n          display: this.hostDisplay,\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n      </Host>\n    )\n  }\n\n  private async handleFocusOut(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusOut(event))\n  }\n\n  private async handleEscape(event: Event): Promise<void> {\n    if (\n      !(event instanceof KeyboardEvent) ||\n      event.key !== 'Escape' ||\n      (event.target !== this.referenceElement &&\n        event.target instanceof globalThis.Element &&\n        event.target.closest('qds-dropdown') !== this.element)\n    )\n      return\n\n    const cancelEvent = this.cancelEmitter.emit()\n    if (cancelEvent.defaultPrevented) return\n\n    await this.close()\n    if (\n      this.referenceElement instanceof globalThis.HTMLElement ||\n      this.referenceElement instanceof globalThis.SVGElement\n    )\n      this.referenceElement.focus()\n  }\n\n  private readonly boundEscape = (event: Event): void => {\n    ignorePromise(this.handleEscape(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    this.hostAriaLabelledBy = undefined\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener('keydown', this.boundEscape)\n    this.referenceElement.removeAttribute('aria-expanded')\n    this.referenceElement.removeAttribute('aria-controls')\n  }\n}\n"],"version":3}
+{"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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  background: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  display: inline-block;\n  left: 0;\n  top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n  tag: 'qds-dropdown',\n  shadow: true,\n  styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the dropdown from being shown by user interaction. The dropdown\n   * can still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the dropdown relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'bottom-start'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the dropdown. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * current open dropdown by pressing the `Esc` key.\n   *\n   * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are emitted.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsDropdownElement\n\n  @State() private hostAriaLabelledBy?: string\n\n  @State() private hostDisplay?: string\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  private cleanup?: () => void\n\n  private middleware?: Middleware[]\n\n  private referenceElement?: ReferenceElement\n\n  private open = false\n\n  /**\n   * Show the dropdown.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'true')\n      this.referenceElement.setAttribute('aria-controls', this.element.id)\n    }\n\n    this.open = true\n    this.hostDisplay = undefined\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the dropdown.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'false')\n      this.referenceElement.removeAttribute('aria-controls')\n    }\n\n    this.open = false\n    this.hostDisplay = 'none'\n    if (this.cleanup) this.cleanup()\n\n    this.closeEmitter.emit()\n  }\n\n  /**\n   * Update the dropdown's middleware and position.\n   */\n  @Method()\n  public async update(): Promise<void> {\n    await this.updateMiddleware()\n  }\n\n  @Listen('click', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    if (!this.open) return\n\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.setAttribute('aria-expanded', 'false')\n    this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focusout', this.boundFocusout)\n    this.referenceElement.addEventListener('keydown', this.boundEscape)\n    if (this.element.role === 'menu') {\n      this.referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n      this.hostAriaLabelledBy = this.referenceElement.id\n    }\n  }\n\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  private async updateMiddleware(): Promise<void> {\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis:\n          propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n    await this.updatePosition()\n  }\n\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.hostDisplay = 'none'\n    this.element.role ??= 'menu'\n    this.element.id ||= `qds-dropdown-${autoIncrementingId}`\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n    await this.updateMiddleware()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        aria-labelledby={this.hostAriaLabelledBy}\n        onKeyDown={this.boundEscape}\n        onFocusout={this.boundFocusout}\n        style={{\n          display: this.hostDisplay,\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n      </Host>\n    )\n  }\n\n  private async handleFocusout(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusout(event))\n  }\n\n  private async handleEscape(event: Event): Promise<void> {\n    if (\n      !(event instanceof KeyboardEvent) ||\n      event.key !== 'Escape' ||\n      (event.target !== this.referenceElement &&\n        event.target instanceof globalThis.Element &&\n        event.target.closest('qds-dropdown') !== this.element)\n    )\n      return\n\n    const cancelEvent = this.cancelEmitter.emit()\n    if (cancelEvent.defaultPrevented) return\n\n    await this.close()\n    if (\n      this.referenceElement instanceof globalThis.HTMLElement ||\n      this.referenceElement instanceof globalThis.SVGElement\n    )\n      this.referenceElement.focus()\n  }\n\n  private readonly boundEscape = (event: Event): void => {\n    ignorePromise(this.handleEscape(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    this.hostAriaLabelledBy = undefined\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener('keydown', this.boundEscape)\n    this.referenceElement.removeAttribute('aria-expanded')\n    this.referenceElement.removeAttribute('aria-controls')\n  }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -11,7 +11,7 @@ const index = require('./index-d181f952.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return index.bootstrapLazy([["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox.cjs",[[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"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-form-message.cjs",[[1,"qds-form-message",{"inline":[4],"size":[513],"status":[1],"text":[513]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  return index.bootstrapLazy([["qds-checkbox.cjs",[[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"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-form-message.cjs",[[1,"qds-form-message",{"inline":[4],"size":[513],"status":[1],"text":[513]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dialog.cjs",[[1,"qds-dialog",{"open":[1540],"show":[64],"close":[64]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]],["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1 +1 @@
-{"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"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.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"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 = 'dialog' | '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][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<ButtonTarget, string> = '_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}