@quartzds/core 1.0.0-beta.30 → 1.0.0-beta.32

package/components/icon.js

@@ -8,12 +8,16 @@ import { i as inheritAriaAttributes } from './helpers.js';
 
 const checkedSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im04LjEzIDEyLjk3IDQuNzYtNy4yNC44NC41NC01Ljc5IDguOC0uMzUtLjg4di0uMDFsLS4wMS0uMDJhNy4wOCA3LjA4IDAgMCAwLS4xNi0uMzYgOS4zNSA5LjM1IDAgMCAwLTEuMDYtMS44N2MtLjIzLS4zLS40My0uNDgtLjU5LS41N2wuNDYtLjg4Yy4zNi4xOC42Ny41LjkyLjg0YTguNjIgOC42MiAwIDAgMSAuOTggMS42NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
 
+const draggableSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNiA2YTIgMiAwIDEgMCAuMDAxLTMuOTk5QTIgMiAwIDAgMCA2IDZ6bTggMGEyIDIgMCAxIDAgLjAwMS0zLjk5OUEyIDIgMCAwIDAgMTQgNnpNNiAxOGEyIDIgMCAxIDAgLjAwMS0zLjk5OUEyIDIgMCAwIDAgNiAxOHptMC02YTIgMiAwIDEgMCAuMDAxLTMuOTk5QTIgMiAwIDAgMCA2IDEyem04IDBhMiAyIDAgMSAwIC4wMDEtMy45OTlBMiAyIDAgMCAwIDE0IDEyem0wIDZhMiAyIDAgMSAwIC4wMDEtMy45OTlBMiAyIDAgMCAwIDE0IDE4eiIvPjwvc3ZnPg==';
+
 const dropdownSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0uODUgNSA4LjY3IDguNjdjLjI3LjI2LjcuMjYuOTcgMEwxOS4xNSA1bC43LjctOC42NiA4LjY2Yy0uNjUuNjYtMS43Mi42Ni0yLjM3IDBMLjE1IDUuN2wuNy0uN1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
 
 const externalLinkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4xNiAwSDIwdjYuNzJoLTEuMDNWMS43NmwtNi40NiA2LjQ2LS43My0uNzMgNi40Ni02LjQ2aC01LjA4VjBaTTAgM2gxMS4wNXYxLjAySDEuMDN2MTQuOTVoMTVWOC41M2gxLjAyVjIwSDBWM1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
 
 const indeterminateSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCAxMEg2VjloOHYxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';
 
+const navigationSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42NiA5LjUxIDUgLjg1bC43LS43IDguNjYgOC42NmMuNjYuNjUuNjYgMS43MiAwIDIuMzdMNS43IDE5Ljg1bC0uNy0uNyA4LjY2LTguNjdhLjY4LjY4IDAgMCAwIDAtLjk3WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';
+
 const nextSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42NiA5LjUxIDUgLjg1bC43LS43IDguNjYgOC42NmMuNjYuNjUuNjYgMS43MiAwIDIuMzdMNS43IDE5Ljg1bC0uNy0uNyA4LjY2LTguNjdhLjY4LjY4IDAgMCAwIDAtLjk3WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';
 
 const statusErrorSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im05Ljg3IDkuMiAzLjItMy4yLjcxLjctMy4yIDMuMjEgMy4yIDMuMi0uNzEuNy0zLjItMy4yLTMuMTYgMy4xNi0uNy0uN0w5LjE2IDkuOSA2IDYuNzRsLjctLjdMOS44NyA5LjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=';
@@ -25,10 +29,12 @@ const statusWarningSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 const icons = {
     /* eslint-disable @typescript-eslint/naming-convention */
+    draggable: draggableSvg,
     'external-link': externalLinkSvg,
     checked: checkedSvg,
     indeterminate: indeterminateSvg,
     dropdown: dropdownSvg,
+    navigation: navigationSvg,
     next: nextSvg,
     'status-error': statusErrorSvg,
     'status-info': statusInfoSvg,
@@ -101,6 +107,7 @@ const requestIcon = async (url) => {
 };
 
 const iconCss = ":host([hidden]){display:none !important}:host{contain:strict;display:inline-block;height:1em;width:1em}.qds-wrapper{display:contents}svg{display:block;fill:currentcolor;height:100%;width:100%}";
+const QdsIconStyle0 = iconCss;
 
 let parser;
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
@@ -160,14 +167,14 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         await this.setIcon();
     }
     render() {
-        return h("span", { class: "qds-wrapper", innerHTML: this.svg });
+        return h("span", { key: '592bfa37691915dff3c7283248d059b9014147a8', class: "qds-wrapper", innerHTML: this.svg });
     }
     get element() { return this; }
     static get watchers() { return {
         "name": ["setIcon"],
         "library": ["setIcon"]
     }; }
-    static get style() { return iconCss; }
+    static get style() { return QdsIconStyle0; }
 }, [1, "qds-icon", {
         "name": [1],
         "library": [1],

package/components/icon.js.map

@@ -1 +1 @@
-{"file":"icon.js","mappings":"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","names":["externalLink","checked","indeterminate","dropdown","next","statusError","statusInfo","statusWarning","defaultLibrary"],"sources":["../../node_modules/@quartzds/generic-icons-core/dist/checked.svg","../../node_modules/@quartzds/generic-icons-core/dist/dropdown.svg","../../node_modules/@quartzds/generic-icons-core/dist/external-link.svg","../../node_modules/@quartzds/generic-icons-core/dist/indeterminate.svg","../../node_modules/@quartzds/generic-icons-core/dist/next.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-error.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-info.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-warning.svg","src/components/icon/core-library.ts","src/components/icon/default-library.ts","src/components/icon/library.ts","src/components/icon/request.ts","src/components/icon/icon.css?tag=qds-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m8.13 12.97 4.76-7.24.84.54-5.79 8.8-.35-.88v-.01l-.01-.02a7.08 7.08 0 0 0-.16-.36 9.35 9.35 0 0 0-1.06-1.87c-.23-.3-.43-.48-.59-.57l.46-.88c.36.18.67.5.92.84a8.62 8.62 0 0 1 .98 1.65Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m.85 5 8.67 8.67c.27.26.7.26.97 0L19.15 5l.7.7-8.66 8.66c-.65.66-1.72.66-2.37 0L.15 5.7l.7-.7Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.16 0H20v6.72h-1.03V1.76l-6.46 6.46-.73-.73 6.46-6.46h-5.08V0ZM0 3h11.05v1.02H1.03v14.95h15V8.53h1.02V20H0V3Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 10H6V9h8v1Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.66 9.51 5 .85l.7-.7 8.66 8.66c.66.65.66 1.72 0 2.37L5.7 19.85l-.7-.7 8.66-8.67a.68.68 0 0 0 0-.97Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m9.87 9.2 3.2-3.2.71.7-3.2 3.21 3.2 3.2-.71.7-3.2-3.2-3.16 3.16-.7-.7L9.16 9.9 6 6.74l.7-.7L9.87 9.2Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M9 4h2.41v2.15H9V4Zm.13 12.51V7.97h2.18v8.54H9.13Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"m9.32 12.54-.7-8.89 2.77.02-.7 8.87H9.32Zm-.58 1.34h2.52v2.48H8.74v-2.48Z\"/></svg>","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\n// FIXME: TypeScript and Webpack can resolve exports from the package.json\n// `exports` field but Rollup can't. `@quartzds/generic-icons-core/*.svg`\n// _should_ work but it doesn't.\n/* eslint-disable import/no-unresolved */\nimport checked from '@quartzds/generic-icons-core/dist/checked.svg'\nimport dropdown from '@quartzds/generic-icons-core/dist/dropdown.svg'\nimport externalLink from '@quartzds/generic-icons-core/dist/external-link.svg'\nimport indeterminate from '@quartzds/generic-icons-core/dist/indeterminate.svg'\nimport next from '@quartzds/generic-icons-core/dist/next.svg'\nimport statusError from '@quartzds/generic-icons-core/dist/status-error.svg'\nimport statusInfo from '@quartzds/generic-icons-core/dist/status-info.svg'\nimport statusWarning from '@quartzds/generic-icons-core/dist/status-warning.svg'\n\n/* eslint-enable import/no-unresolved */\nimport type { IconLibrary } from './library'\n\nconst icons: Record<string, string | undefined> = {\n  /* eslint-disable @typescript-eslint/naming-convention */\n  'external-link': externalLink,\n  checked,\n  indeterminate,\n  dropdown,\n  next,\n  'status-error': statusError,\n  'status-info': statusInfo,\n  'status-success': checked,\n  'status-warning': statusWarning,\n  /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nconst coreLibrary: IconLibrary = {\n  name: 'core',\n  resolver: (name) => icons[name] ?? '',\n}\n\nexport default coreLibrary\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getAssetPath } from '@stencil/core'\n\nimport type { IconLibrary } from './library'\n\nconst library: IconLibrary = {\n  name: 'default',\n  resolver: (name) => getAssetPath(`icons/${name}.svg`),\n}\n\nexport default library\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Except } from 'type-fest'\n\nimport coreLibrary from './core-library'\nimport defaultLibrary from './default-library'\n\nexport type IconLibraryResolver = (name: string) => string\nexport interface IconLibrary {\n  name: string\n  resolver: IconLibraryResolver\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, coreLibrary]\n\n/**\n * Returns a library from the registry.\n */\nexport const getIconLibrary = (name: string): IconLibrary | undefined =>\n  registry.find((library) => library.name === name)\n\n/**\n * Removes an icon library from the registry.\n */\nexport const unregisterIconLibrary = (name: string): void => {\n  registry = registry.filter((library) => library.name !== name)\n}\n\n/**\n * Adds an icon library to the registry or overrides an existing one.\n */\nexport const registerIconLibrary = (\n  name: string,\n  options: Except<IconLibrary, 'name'>,\n): void => {\n  unregisterIconLibrary(name)\n  registry.push({\n    name,\n    ...options,\n  })\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\ninterface Request {\n  ok: boolean\n  data: string\n}\n\ninterface IconRequestOk {\n  ok: true\n  data: string\n}\n\ninterface IconRequestError {\n  ok: false\n  data: undefined\n}\n\ntype IconRequest = IconRequestError | IconRequestOk\n\ninterface IconRequestUnknown {\n  ok: boolean\n  data?: string\n}\n\nconst request = async (source: string): Promise<Request> => {\n  const response = await fetch(source, { mode: 'cors' })\n  return {\n    ok: response.ok,\n    data: await response.text(),\n  }\n}\n\nconst cachedIconRequests = new Map<string, IconRequest>()\n\nconst requestIcon = async (url: string): Promise<IconRequest> => {\n  const cachedIconRequest = cachedIconRequests.get(url)\n  if (cachedIconRequest) return cachedIconRequest\n\n  const fileData = await request(url)\n  const iconFileData: IconRequestUnknown = {\n    ok: fileData.ok,\n  }\n  if (fileData.ok) {\n    const div = document.createElement('div')\n    div.innerHTML = fileData.data\n    const child = div.firstElementChild\n    iconFileData.data =\n      child?.tagName.toLowerCase() === 'svg' ? child.outerHTML : ''\n  }\n\n  cachedIconRequests.set(url, iconFileData as IconRequest)\n  return iconFileData as IconRequest\n}\n\nexport default requestIcon\n","/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  contain: strict;\n  display: inline-block;\n  height: 1em;\n  width: 1em;\n}\n\n.qds-wrapper {\n  display: contents;\n}\n\nsvg {\n  display: block;\n  fill: currentcolor;\n  height: 100%;\n  width: 100%;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport { getIconLibrary } from './library'\nimport requestIcon from './request'\n\nlet parser: DOMParser | undefined\n\n/**\n * @experimental\n */\n@Component({\n  tag: 'qds-icon',\n  shadow: true,\n  styleUrl: 'icon.css',\n})\nexport class Icon implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly name!: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly library: string = 'default'\n\n  /**\n   * Emitted when the icon has loaded.\n   */\n  @Event({ eventName: 'qdsLoad', cancelable: false })\n  private readonly loadEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the icon fails to load due to an error.\n   */\n  @Event({ eventName: 'qdsError', cancelable: false })\n  private readonly errorEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsIconElement\n\n  @State() private svg = ''\n\n  private inheritedAttributes: Attributes = {}\n\n  @Watch('name')\n  @Watch('library')\n  private async setIcon(): Promise<void> {\n    if (!this.name) return\n\n    const library = getIconLibrary(this.library)\n    if (!library) return\n\n    const url = library.resolver(this.name)\n    if (!url) {\n      this.svg = ''\n      return\n    }\n\n    try {\n      const request = await requestIcon(url)\n      if (!request.ok) {\n        this.svg = ''\n        this.errorEmitter.emit()\n        return\n      }\n\n      // Create an instance of the DOM parser. We do it here instead of at the\n      // top-level to support SSR while maintaining a single parser instance\n      // for optimal performance.\n      parser ||= new DOMParser()\n      const document = parser.parseFromString(request.data, 'text/html')\n      const svgElement = document.body.querySelector('svg')\n      if (svgElement === null) {\n        this.svg = ''\n        this.errorEmitter.emit()\n      } else {\n        for (const [key, value] of Object.entries(this.inheritedAttributes))\n          if (value !== undefined) svgElement.setAttribute(key, value)\n        this.svg = svgElement.outerHTML\n        this.loadEmitter.emit()\n      }\n    } catch {\n      this.errorEmitter.emit()\n    }\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    await this.setIcon()\n  }\n\n  public render() {\n    return <span class=\"qds-wrapper\" innerHTML={this.svg} />\n  }\n}\n"],"version":3}
+{"file":"icon.js","mappings":"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","names":["draggable","externalLink","checked","indeterminate","dropdown","navigation","next","statusError","statusInfo","statusWarning","defaultLibrary"],"sources":["../../node_modules/@quartzds/generic-icons-core/dist/checked.svg","../../node_modules/@quartzds/generic-icons-core/dist/draggable.svg","../../node_modules/@quartzds/generic-icons-core/dist/dropdown.svg","../../node_modules/@quartzds/generic-icons-core/dist/external-link.svg","../../node_modules/@quartzds/generic-icons-core/dist/indeterminate.svg","../../node_modules/@quartzds/generic-icons-core/dist/navigation.svg","../../node_modules/@quartzds/generic-icons-core/dist/next.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-error.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-info.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-warning.svg","src/components/icon/core-library.ts","src/components/icon/default-library.ts","src/components/icon/library.ts","src/components/icon/request.ts","src/components/icon/icon.css?tag=qds-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m8.13 12.97 4.76-7.24.84.54-5.79 8.8-.35-.88v-.01l-.01-.02a7.08 7.08 0 0 0-.16-.36 9.35 9.35 0 0 0-1.06-1.87c-.23-.3-.43-.48-.59-.57l.46-.88c.36.18.67.5.92.84a8.62 8.62 0 0 1 .98 1.65Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M6 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 6zm8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 6zM6 18a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 18zm0-6a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 12zm8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 12zm0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 18z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m.85 5 8.67 8.67c.27.26.7.26.97 0L19.15 5l.7.7-8.66 8.66c-.65.66-1.72.66-2.37 0L.15 5.7l.7-.7Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.16 0H20v6.72h-1.03V1.76l-6.46 6.46-.73-.73 6.46-6.46h-5.08V0ZM0 3h11.05v1.02H1.03v14.95h15V8.53h1.02V20H0V3Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 10H6V9h8v1Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.66 9.51 5 .85l.7-.7 8.66 8.66c.66.65.66 1.72 0 2.37L5.7 19.85l-.7-.7 8.66-8.67a.68.68 0 0 0 0-.97Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.66 9.51 5 .85l.7-.7 8.66 8.66c.66.65.66 1.72 0 2.37L5.7 19.85l-.7-.7 8.66-8.67a.68.68 0 0 0 0-.97Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m9.87 9.2 3.2-3.2.71.7-3.2 3.21 3.2 3.2-.71.7-3.2-3.2-3.16 3.16-.7-.7L9.16 9.9 6 6.74l.7-.7L9.87 9.2Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M9 4h2.41v2.15H9V4Zm.13 12.51V7.97h2.18v8.54H9.13Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"m9.32 12.54-.7-8.89 2.77.02-.7 8.87H9.32Zm-.58 1.34h2.52v2.48H8.74v-2.48Z\"/></svg>","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\n// FIXME: TypeScript and Webpack can resolve exports from the package.json\n// `exports` field but Rollup can't. `@quartzds/generic-icons-core/*.svg`\n// _should_ work but it doesn't.\n/* eslint-disable import/no-unresolved */\nimport checked from '@quartzds/generic-icons-core/dist/checked.svg'\nimport draggable from '@quartzds/generic-icons-core/dist/draggable.svg'\nimport dropdown from '@quartzds/generic-icons-core/dist/dropdown.svg'\nimport externalLink from '@quartzds/generic-icons-core/dist/external-link.svg'\nimport indeterminate from '@quartzds/generic-icons-core/dist/indeterminate.svg'\nimport navigation from '@quartzds/generic-icons-core/dist/navigation.svg'\nimport next from '@quartzds/generic-icons-core/dist/next.svg'\nimport statusError from '@quartzds/generic-icons-core/dist/status-error.svg'\nimport statusInfo from '@quartzds/generic-icons-core/dist/status-info.svg'\nimport statusWarning from '@quartzds/generic-icons-core/dist/status-warning.svg'\n\n/* eslint-enable import/no-unresolved */\nimport type { IconLibrary } from './library'\n\nconst icons: Record<string, string | undefined> = {\n  /* eslint-disable @typescript-eslint/naming-convention */\n  draggable,\n  'external-link': externalLink,\n  checked,\n  indeterminate,\n  dropdown,\n  navigation,\n  next,\n  'status-error': statusError,\n  'status-info': statusInfo,\n  'status-success': checked,\n  'status-warning': statusWarning,\n  /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nconst coreLibrary: IconLibrary = {\n  name: 'core',\n  resolver: (name) => icons[name] ?? '',\n}\n\nexport default coreLibrary\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getAssetPath } from '@stencil/core'\n\nimport type { IconLibrary } from './library'\n\nconst library: IconLibrary = {\n  name: 'default',\n  resolver: (name) => getAssetPath(`icons/${name}.svg`),\n}\n\nexport default library\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Except } from 'type-fest'\n\nimport coreLibrary from './core-library'\nimport defaultLibrary from './default-library'\n\nexport type IconLibraryResolver = (name: string) => string\nexport interface IconLibrary {\n  name: string\n  resolver: IconLibraryResolver\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, coreLibrary]\n\n/**\n * Returns a library from the registry.\n */\nexport const getIconLibrary = (name: string): IconLibrary | undefined =>\n  registry.find((library) => library.name === name)\n\n/**\n * Removes an icon library from the registry.\n */\nexport const unregisterIconLibrary = (name: string): void => {\n  registry = registry.filter((library) => library.name !== name)\n}\n\n/**\n * Adds an icon library to the registry or overrides an existing one.\n */\nexport const registerIconLibrary = (\n  name: string,\n  options: Except<IconLibrary, 'name'>,\n): void => {\n  unregisterIconLibrary(name)\n  registry.push({\n    name,\n    ...options,\n  })\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\ninterface Request {\n  ok: boolean\n  data: string\n}\n\ninterface IconRequestOk {\n  ok: true\n  data: string\n}\n\ninterface IconRequestError {\n  ok: false\n  data: undefined\n}\n\ntype IconRequest = IconRequestError | IconRequestOk\n\ninterface IconRequestUnknown {\n  ok: boolean\n  data?: string\n}\n\nconst request = async (source: string): Promise<Request> => {\n  const response = await fetch(source, { mode: 'cors' })\n  return {\n    ok: response.ok,\n    data: await response.text(),\n  }\n}\n\nconst cachedIconRequests = new Map<string, IconRequest>()\n\nconst requestIcon = async (url: string): Promise<IconRequest> => {\n  const cachedIconRequest = cachedIconRequests.get(url)\n  if (cachedIconRequest) return cachedIconRequest\n\n  const fileData = await request(url)\n  const iconFileData: IconRequestUnknown = {\n    ok: fileData.ok,\n  }\n  if (fileData.ok) {\n    const div = document.createElement('div')\n    div.innerHTML = fileData.data\n    const child = div.firstElementChild\n    iconFileData.data =\n      child?.tagName.toLowerCase() === 'svg' ? child.outerHTML : ''\n  }\n\n  cachedIconRequests.set(url, iconFileData as IconRequest)\n  return iconFileData as IconRequest\n}\n\nexport default requestIcon\n","/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  contain: strict;\n  display: inline-block;\n  height: 1em;\n  width: 1em;\n}\n\n.qds-wrapper {\n  display: contents;\n}\n\nsvg {\n  display: block;\n  fill: currentcolor;\n  height: 100%;\n  width: 100%;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport { getIconLibrary } from './library'\nimport requestIcon from './request'\n\nlet parser: DOMParser | undefined\n\n/**\n * @experimental\n */\n@Component({\n  tag: 'qds-icon',\n  shadow: true,\n  styleUrl: 'icon.css',\n})\nexport class Icon implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly name!: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly library: string = 'default'\n\n  /**\n   * Emitted when the icon has loaded.\n   */\n  @Event({ eventName: 'qdsLoad', cancelable: false })\n  private readonly loadEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the icon fails to load due to an error.\n   */\n  @Event({ eventName: 'qdsError', cancelable: false })\n  private readonly errorEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsIconElement\n\n  @State() private svg = ''\n\n  private inheritedAttributes: Attributes = {}\n\n  @Watch('name')\n  @Watch('library')\n  private async setIcon(): Promise<void> {\n    if (!this.name) return\n\n    const library = getIconLibrary(this.library)\n    if (!library) return\n\n    const url = library.resolver(this.name)\n    if (!url) {\n      this.svg = ''\n      return\n    }\n\n    try {\n      const request = await requestIcon(url)\n      if (!request.ok) {\n        this.svg = ''\n        this.errorEmitter.emit()\n        return\n      }\n\n      // Create an instance of the DOM parser. We do it here instead of at the\n      // top-level to support SSR while maintaining a single parser instance\n      // for optimal performance.\n      parser ||= new DOMParser()\n      const document = parser.parseFromString(request.data, 'text/html')\n      const svgElement = document.body.querySelector('svg')\n      if (svgElement === null) {\n        this.svg = ''\n        this.errorEmitter.emit()\n      } else {\n        for (const [key, value] of Object.entries(this.inheritedAttributes))\n          if (value !== undefined) svgElement.setAttribute(key, value)\n        this.svg = svgElement.outerHTML\n        this.loadEmitter.emit()\n      }\n    } catch {\n      this.errorEmitter.emit()\n    }\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    await this.setIcon()\n  }\n\n  public render() {\n    return <span class=\"qds-wrapper\" innerHTML={this.svg} />\n  }\n}\n"],"version":3}

package/components/index.d.ts

@@ -19,6 +19,8 @@ export { Input as QdsInput } from '../dist/types/components/input/input';
 export { defineCustomElement as defineCustomElementQdsInput } from './qds-input';
 export { Label as QdsLabel } from '../dist/types/components/label/label';
 export { defineCustomElement as defineCustomElementQdsLabel } from './qds-label';
+export { ListItem as QdsListItem } from '../dist/types/components/list-item/list-item';
+export { defineCustomElement as defineCustomElementQdsListItem } from './qds-list-item';
 export { Radio as QdsRadio } from '../dist/types/components/radio/radio';
 export { defineCustomElement as defineCustomElementQdsRadio } from './qds-radio';
 export { Select as QdsSelect } from '../dist/types/components/select/select';

package/components/index.js

@@ -15,6 +15,7 @@ export { QdsIcon, defineCustomElement as defineCustomElementQdsIcon } from './qd
 export { QdsInlineLink, defineCustomElement as defineCustomElementQdsInlineLink } from './qds-inline-link.js';
 export { QdsInput, defineCustomElement as defineCustomElementQdsInput } from './qds-input.js';
 export { QdsLabel, defineCustomElement as defineCustomElementQdsLabel } from './qds-label.js';
+export { QdsListItem, defineCustomElement as defineCustomElementQdsListItem } from './qds-list-item.js';
 export { QdsRadio, defineCustomElement as defineCustomElementQdsRadio } from './qds-radio.js';
 export { QdsSelect, defineCustomElement as defineCustomElementQdsSelect } from './qds-select.js';
 export { QdsStandaloneLink, defineCustomElement as defineCustomElementQdsStandaloneLink } from './qds-standalone-link.js';

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;IAC3C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;IAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;IAEpC,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAA;IAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;SAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;UACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;IAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,SAAS,KAAK,SAAS;QAAE,OAAM;IAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAClD,IAAI,cAAc,KAAK,SAAS;QAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;IAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAID;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;IAEzB,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;IAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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\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;IAC3C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;IAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;IAEpC,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAA;IAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;SAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;UACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;IAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,SAAS,KAAK,SAAS;QAAE,OAAM;IAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAClD,IAAI,cAAc,KAAK,SAAS;QAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;IAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAID;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;IAEzB,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;IAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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\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/label.js

@@ -7,6 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { i as inheritAriaAttributes } from './helpers.js';
 
 const labelCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-inline[data-size='small']{margin-block:var(--qds-control-small-padding-auto-height)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-inline[data-size='standard']{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size='large']{font:var(--qds-control-large-text)}.qds-inline[data-size='large']{margin-block:var(--qds-control-large-padding-auto-height)}";
+const QdsLabelStyle0 = labelCss;
 
 const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     constructor() {
@@ -35,13 +36,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("span", { class: {
+        return (h("span", { key: '3ac0fee06b2170fcb701e43a9b9d6ba86476be44', class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
             }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { class: "qds-required" }, "*"), this.text));
     }
     get element() { return this; }
-    static get style() { return labelCss; }
+    static get style() { return QdsLabelStyle0; }
 }, [1, "qds-label", {
         "inline": [4],
         "required": [4],

package/components/label.js.map

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

package/components/qds-button.js

@@ -8,6 +8,7 @@ import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './hel
 import { d as defineCustomElement$2 } from './icon.js';
 
 const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
+const QdsButtonStyle0 = buttonCss;
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
     constructor() {
@@ -106,8 +107,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     }
     onClick(event) {
         if (this.computedDisabled) {
-            event.preventDefault();
-            event.stopPropagation();
+            event.stopImmediatePropagation();
+            return;
         }
         if (this.buttonType === 'button' || !this.formElement)
             return;
@@ -134,14 +135,14 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     }
     render() {
         const Tag = this.href === undefined ? 'button' : 'a';
-        return (h(Tag, { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (h(Tag, { key: '9dcddb1e442cb2305de879c4c7eef2749617a1c0', "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-button': true,
                 'qds-icon-only': this.iconOnly,
             }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, "data-variant": this.variant, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon", library: "core", name: this.computedAction }))));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }
-    static get style() { return buttonCss; }
+    static get style() { return QdsButtonStyle0; }
 }, [17, "qds-button", {
         "action": [1],
         "badge": [1],

package/components/qds-button.js.map

@@ -1 +1 @@
-{"file":"qds-button.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,y2MAAy2M;;MCgC92M,MAAM;;;;;;;QAiOT,wBAAmB,GAAe,EAAE,CAAA;QAgK3B,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;;;;2BAlX6C,SAAS;0BAKL,UAAU;oBAKtB,UAAU;;;;;;;;8BAyFN,KAAK;0BA4BkB,OAAO;;;;;;;IA+ExE,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;cAC9C,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;cACvC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;KACjC;IAED,IAAY,UAAU;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAA;QAC1E,OAAO,IAAI,CAAC,IAAI,CAAA;KACjB;IAED,IAAY,QAAQ;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QACnE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;QAE9D,OAAO,OAAO,IAAI,UAAU,CAAA;KAC7B;IAED,IAAY,cAAc;QACxB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,EAAE;gBACX,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YACD,SAAS;gBACP,OAAO,SAAS,CAAA;aACjB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;KAC9B;IAED,IAAY,kBAAkB;QAC5B,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa;YAAE,OAAO,SAAS,CAAA;QAEpD,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,YAAY,CAAC;YAClB,KAAK,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC,UAAU,CAAA;aACvB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,YAAY;QACtB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO,SAAS,CAAA;QAE7C,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO,EAAE;gBACZ,OAAO,IAAI,CAAC,IAAI,CAAA;aACjB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,IAAI,GAAG,EACxC,EAAE,CACH,CAAA;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KACnD;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAM;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAA;QACjC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACxD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3D,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAC1E,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAC1E,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAA;QAC/C,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QACvC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;QAEjC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QACnC,UAAU,CAAC,KAAK,EAAE,CAAA;QAClB,UAAU,CAAC,MAAM,EAAE,CAAA;KACpB;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,CAAA;QAEpD,QACE,EAAC,GAAG,qBACa,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAC/C,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,qBACgB,IAAI,CAAC,kBAAkB,eAC7B,IAAI,CAAC,YAAY,kBACd,IAAI,CAAC,OAAO,EAC1B,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EACjD,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACjD,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACzC,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACzC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,qBAAqB,GAAG,SAAS,EACpD,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,EACxC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAC5D,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC7C,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAC/C,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,KAEvC,IAAI,CAAC,mBAAmB,IAE3B,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,YAAY,kBACd,IAAI,CAAC,OAAO,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,KAC5C,WACE,KAAK,EAAC,WAAW,qBACA,IAAI,CAAC,kBAAkB,kBAC1B,IAAI,CAAC,OAAO,IAEzB,IAAI,CAAC,KAAK,CACP,CACP,EACA,IAAI,CAAC,cAAc,KAAK,SAAS,KAChC,gBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,CAAC,cAAc,GACzB,CACH,CACG,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background-color: initial;\n  border: none;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding-block: 0;\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: nowrap;\n  width: 100%;\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.qds-badge {\n  border-radius: var(--qds-control-rounded-border-radius);\n  font: var(--qds-badge-text);\n  height: var(--qds-badge-height);\n  padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[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\n  &.qds-button {\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-small-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-button {\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-standard-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-button {\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-large-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n  &.qds-button {\n    border-radius: var(--qds-control-border-radius);\n  }\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &.qds-icon-only {\n    color: var(--qds-theme-control-text-standard);\n  }\n\n  &.qds-button {\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);\n      color: var(--qds-theme-link-standard-hover);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-hover);\n      }\n\n      &.qds-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-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);\n      color: var(--qds-theme-link-standard-pressed);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-pressed);\n      }\n\n      &.qds-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\n[data-importance='standard'] {\n  color: var(--qds-theme-control-text-standard);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n\n  &.qds-button {\n    border: var(--qds-control-border-width) solid\n      var(--qds-theme-control-border);\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-signature-color-contrast);\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-signature-color-default);\n    color: var(--qds-theme-signature-color-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='destructive'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-action-destructive-contrast);\n    color: var(--qds-theme-feedback-action-destructive-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-feedback-action-destructive-default);\n    color: var(--qds-theme-feedback-action-destructive-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='hero'] {\n  &.qds-button {\n    border-radius: var(--qds-control-hero-border-radius);\n    font: var(--qds-control-hero-text);\n    gap: var(--qds-control-hero-gap-internal);\n    height: var(--qds-control-hero-height);\n  }\n\n  &.qds-button:not([data-importance='subdued']) {\n    padding-inline: var(--qds-control-button-hero-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-hero-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-hero-icon-size);\n  }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n  &.qds-icon-only {\n    padding-inline: 0;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the action icon to render.\n   */\n  @Prop() public readonly action?: Action\n\n  /**\n   * The button's badge text.\n   */\n  @Prop() public readonly badge?: string\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * The button's variant.\n   */\n  @Prop() public readonly variant?: ButtonVariant\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop()\n  public readonly disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'next': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedImportance(): Importance | undefined {\n    if (this.variant === 'destructive') return undefined\n\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedSize(): Size | undefined {\n    if (this.variant === 'hero') return undefined\n\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(\n      this.inheritedAttributes.tabindex ?? '0',\n      10,\n    )\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\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  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.toString()}\n        class={{\n          'qds-button': true,\n          'qds-icon-only': this.iconOnly,\n        }}\n        data-importance={this.computedImportance}\n        data-size={this.computedSize}\n        data-variant={this.variant}\n        disabled={Tag === 'a' ? undefined : this.disabled}\n        download={Tag === 'a' ? this.download : undefined}\n        href={Tag === 'a' ? this.href : undefined}\n        name={Tag === 'a' ? undefined : this.name}\n        onBlur={this.onBlur}\n        onFocus={this.onFocus}\n        rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n        role={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=\"qds-icon\"\n            data-size={this.computedSize}\n            data-variant={this.variant}\n            library={this.iconLibrary}\n            name={this.iconName}\n          />\n        )}\n        {this.text}\n        {this.badge !== undefined && this.badge !== '' && (\n          <div\n            class=\"qds-badge\"\n            data-importance={this.computedImportance}\n            data-variant={this.variant}\n          >\n            {this.badge}\n          </div>\n        )}\n        {this.computedAction !== undefined && (\n          <qds-icon\n            class=\"qds-icon\"\n            library=\"core\"\n            name={this.computedAction}\n          />\n        )}\n      </Tag>\n    )\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background-color: initial;\n  border: none;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding-block: 0;\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: nowrap;\n  width: 100%;\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.qds-badge {\n  border-radius: var(--qds-control-rounded-border-radius);\n  font: var(--qds-badge-text);\n  height: var(--qds-badge-height);\n  padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[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\n  &.qds-button {\n    gap: var(--qds-control-small-gap-internal);\n    height: var(--qds-control-small-height);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-small-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n\n  &.qds-button {\n    gap: var(--qds-control-standard-gap-internal);\n    height: var(--qds-control-standard-height);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-standard-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n\n  &.qds-button {\n    gap: var(--qds-control-large-gap-internal);\n    height: var(--qds-control-large-height);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-large-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n  &.qds-button {\n    border-radius: var(--qds-control-border-radius);\n  }\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-informational);\n    color: var(--qds-theme-feedback-message-informational-contrast);\n  }\n\n  &.qds-icon-only {\n    color: var(--qds-theme-control-text-standard);\n  }\n\n  &.qds-button {\n    padding-inline: 0;\n\n    &:hover {\n      border-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);\n      color: var(--qds-theme-link-standard-hover);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-hover);\n      }\n\n      &.qds-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-block-end: var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);\n      color: var(--qds-theme-link-standard-pressed);\n\n      .qds-badge {\n        background-color: var(--qds-theme-link-standard-pressed);\n      }\n\n      &.qds-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\n[data-importance='standard'] {\n  color: var(--qds-theme-control-text-standard);\n\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-message-neutral);\n    color: var(--qds-theme-feedback-message-neutral-contrast);\n  }\n\n  &.qds-button {\n    border: var(--qds-control-border-width) solid\n      var(--qds-theme-control-border);\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n}\n\n[data-importance='emphasized'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-signature-color-contrast);\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-signature-color-default);\n    color: var(--qds-theme-signature-color-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-signature-color-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='destructive'] {\n  &.qds-badge {\n    background-color: var(--qds-theme-feedback-action-destructive-contrast);\n    color: var(--qds-theme-feedback-action-destructive-default);\n  }\n\n  &.qds-button {\n    background-color: var(--qds-theme-feedback-action-destructive-default);\n    color: var(--qds-theme-feedback-action-destructive-contrast);\n\n    &:hover {\n      background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-hover);\n      }\n    }\n\n    &:active {\n      background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n      .qds-badge {\n        color: var(--qds-theme-feedback-action-destructive-pressed);\n      }\n    }\n  }\n}\n\n[data-variant='hero'] {\n  &.qds-button {\n    border-radius: var(--qds-control-hero-border-radius);\n    font: var(--qds-control-hero-text);\n    gap: var(--qds-control-hero-gap-internal);\n    height: var(--qds-control-hero-height);\n  }\n\n  &.qds-button:not([data-importance='subdued']) {\n    padding-inline: var(--qds-control-button-hero-padding-horizontal);\n  }\n\n  &.qds-icon-only {\n    width: var(--qds-control-hero-height);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-hero-icon-size);\n  }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n  &.qds-icon-only {\n    padding-inline: 0;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n  tag: 'qds-button',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n  /**\n   * The name of the action icon to render.\n   */\n  @Prop() public readonly action?: Action\n\n  /**\n   * The button's badge text.\n   */\n  @Prop() public readonly badge?: string\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * The button's variant.\n   */\n  @Prop() public readonly variant?: ButtonVariant\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop()\n  public readonly disabled?: boolean\n\n  /**\n   * Tells the browser to download the linked file as this filename. Only used\n   * when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: string\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the button with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<button>` is associated with\n   * its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<button>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * The URL that processes the information submitted by the button. Overrides\n   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n   * attribute of the button's form owner. Does nothing if there is no form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n  /**\n   * If the button is a submit button (it's inside/associated with a `<form>`\n   * and doesn't have `type=\"button\"`), this attribute specifies the\n   * [HTTP method][] used to submit the form, or `dialog` which won't submit\n   * the form. Possible values:\n   *\n   * - `get`: The form data are appended to the form's action URL, with a ? as\n   * a separator, and the resulting URL is sent to the server. Use this method\n   * when the form has no side effects, like search forms.\n   * - `post`: The data from the form are included in the body of the HTTP\n   * request when sent to the server. Use when the form contains information\n   * that shouldn't be public, like login credentials.\n   * - `dialog`: Close the dialog box in which the button finds itself, if any,\n   * and do not submit the button's form owner.\n   *\n   * If specified, this attribute overrides the `method` attribute of the\n   * button's form owner.\n   *\n   * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n  /**\n   * If the button is a submit button, this attribute specifies that the form\n   * is not to be\n   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n   * when it is submitted. If this attribute is specified, it overrides the\n   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n   * attribute of the button's form owner.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formnovalidate' })\n  public readonly formNoValidate: boolean = false\n\n  /**\n   * If the button is a submit button, this attribute is an author-defined name\n   * or standardized, underscore-prefixed keyword indicating where to display\n   * the response from submitting the form. This is the `name` of, or keyword\n   * for, a browsing context (a tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n   * If this attribute is specified, it overrides the\n   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n   * attribute of the button's form owner. The following keywords have special\n   * meanings:\n   *\n   * - `_blank`: Load the response into a new unnamed browsing context — usually\n   * a new tab or window, depending on the user's browser settings.\n   * - `_parent`: Load the response into the parent browsing context of the\n   * current one. If there is no parent, this option behaves the same way as\n   * `_self`.\n   * - `_self`: Load the response into the same browsing context as the current\n   * one.\n   * - `_top`: Load the response into the top-level browsing context (that is,\n   * the browsing context that is an ancestor of the current one, and has no\n   * parent). If there is no parent, this option behaves the same way as\n   * `_self`.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'formtarget' })\n  public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n  /**\n   * When set, the underlying button will be rendered as an `<a>` with this\n   * `href` instead of a `<button>`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * The name of the button, submitted as a pair with the button's `value` as\n   * part of the form data, when that button is used to submit the form.\n   * Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n  /**\n   * The type of button.\n   *\n   * `button`: The button has no default behavior, and does nothing when\n   * pressed by default. It can have client-side scripts listen to the\n   * element's events, which are triggered when the events occur.\n   *\n   * `submit`: The button submits the form data to the server. This is the\n   * default if the attribute is not specified for buttons associated with a\n   * `<form>`, or if the attribute is an empty or invalid value.\n   *\n   * `reset`: The button resets all the controls to their initial values.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: ButtonType\n\n  /**\n   * Defines the value associated with the button's `name` when it's submitted\n   * with the form data. This value is passed to the server in params when the\n   * form is submitted using this button. Ignored when `href` is set.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: string\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsButtonElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get formElement(): HTMLElement | null {\n    return this.form !== undefined && this.form !== ''\n      ? document.querySelector(`#${this.form}`)\n      : this.element.closest('form')\n  }\n\n  private get buttonType(): ButtonType {\n    if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n    return this.type\n  }\n\n  private get iconOnly(): boolean {\n    const hasIcon = this.iconName !== undefined && this.iconName !== ''\n    const hasNoLabel = this.text === undefined || this.text === ''\n\n    return hasIcon && hasNoLabel\n  }\n\n  private get computedAction(): Action | undefined {\n    switch (this.action) {\n      case 'dropdown':\n      case 'next': {\n        return this.action\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedImportance(): Importance | undefined {\n    if (this.variant === 'destructive') return undefined\n\n    switch (this.importance) {\n      case 'emphasized':\n      case 'subdued': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedSize(): Size | undefined {\n    if (this.variant === 'hero') return undefined\n\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(\n      this.inheritedAttributes.tabindex ?? '0',\n      10,\n    )\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (this.buttonType === 'button' || !this.formElement) return\n    event.preventDefault()\n\n    const fakeButton = document.createElement('button')\n    fakeButton.type = this.buttonType\n    if (this.name !== undefined) fakeButton.name = this.name\n    if (this.value !== undefined) fakeButton.value = this.value\n    if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n    if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n    fakeButton.formNoValidate = this.formNoValidate\n    fakeButton.formTarget = this.formTarget\n    fakeButton.style.display = 'none'\n\n    this.formElement.append(fakeButton)\n    fakeButton.click()\n    fakeButton.remove()\n  }\n\n  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.toString()}\n        class={{\n          'qds-button': true,\n          'qds-icon-only': this.iconOnly,\n        }}\n        data-importance={this.computedImportance}\n        data-size={this.computedSize}\n        data-variant={this.variant}\n        disabled={Tag === 'a' ? undefined : this.disabled}\n        download={Tag === 'a' ? this.download : undefined}\n        href={Tag === 'a' ? this.href : undefined}\n        name={Tag === 'a' ? undefined : this.name}\n        onBlur={this.onBlur}\n        onFocus={this.onFocus}\n        rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n        role={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=\"qds-icon\"\n            data-size={this.computedSize}\n            data-variant={this.variant}\n            library={this.iconLibrary}\n            name={this.iconName}\n          />\n        )}\n        {this.text}\n        {this.badge !== undefined && this.badge !== '' && (\n          <div\n            class=\"qds-badge\"\n            data-importance={this.computedImportance}\n            data-variant={this.variant}\n          >\n            {this.badge}\n          </div>\n        )}\n        {this.computedAction !== undefined && (\n          <qds-icon\n            class=\"qds-icon\"\n            library=\"core\"\n            name={this.computedAction}\n          />\n        )}\n      </Tag>\n    )\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}

package/components/qds-checkbox.js

@@ -10,6 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './label.js';
 
 const checkboxCss = ":host([hidden]){display:none !important}:host{display:inline-block;line-height:0}.qds-checkbox,.qds-box,.qds-icon{grid-area:checkbox;place-self:center}.qds-icon,.qds-box{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{display:grid;align-self:flex-start;grid-template-areas:'checkbox'}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:hover~.qds-box,.qds-checkbox:active~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size='small']{width:var(--qds-control-toggle-box-small-size);height:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size='small']{width:var(--qds-control-toggle-indicator-small-size);height:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size='small']{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size='small']{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size='standard']{width:var(--qds-control-toggle-box-standard-size);height:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size='standard']{width:var(--qds-control-toggle-indicator-standard-size);height:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size='standard']{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size='standard']{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size='large']{width:var(--qds-control-toggle-box-large-size);height:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size='large']{width:var(--qds-control-toggle-indicator-large-size);height:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size='large']{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size='large']{gap:var(--qds-control-large-gap-siblings-related)}";
+const QdsCheckboxStyle0 = checkboxCss;
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
     constructor() {
@@ -83,8 +84,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         return ((this.text !== undefined && this.text !== '') || this.required === true);
     }
     onClick(event) {
-        if (this.computedDisabled)
+        if (this.computedDisabled) {
+            event.stopImmediatePropagation();
             return;
+        }
         event.preventDefault();
         this.checked = this.computedIndeterminate ? true : !this.computedChecked;
         this.changeEmitter.emit();
@@ -144,16 +147,15 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     render() {
         return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        h("label", { "aria-disabled": this.computedDisabled.toString(), class: {
+        h("label", { key: 'ef29852daf0e5ccec3ed22af0ce97c8683239a11', "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize }, h("div", { class: "qds-container" }, h("input", {
+            }, "data-size": this.computedSize }, h("div", { key: 'b8423d8eaa8dab5f880770e48001350559e5f9b7', class: "qds-container" }, h("input", { key: 'bf8c6ad4717bffb1de27e741587203c07912ab1b',
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", ...this.inheritedAttributes
-        }), h("qds-icon", { "aria-hidden": "true", class: {
+            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: '92da0b70e5eb0ac6e56c59cab72252cb971b8c3c', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-checked': true,
-            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { "aria-hidden": "true", class: {
+            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: '1c989e04d0a27978553e87b9b7b037c2e99e2c00', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '2a537455449bc2f57276d83083900a5c748e03e7', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-indeterminate': true,
             }, "data-size": this.computedSize, library: "core", name: "indeterminate" })), this.hasText && (h("qds-label", { required: this.required, size: this.size, text: this.text }))));
@@ -170,7 +172,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "tabindex": ["tabindexChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return checkboxCss; }
+    static get style() { return QdsCheckboxStyle0; }
 }, [81, "qds-checkbox", {
         "inline": [4],
         "size": [1],

package/components/qds-checkbox.js.map

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