@quartzds/core 1.0.0-beta.43 → 1.0.0-beta.44

package/components/icon.js

@@ -39,6 +39,7 @@ const icons = {
     indeterminate: indeterminateSvg,
     navigation: navigationSvg,
     next: nextSvg,
+    close: statusErrorSvg,
     'status-error': statusErrorSvg,
     'status-info': statusInfoSvg,
     'status-success': checkedSvg,
@@ -109,7 +110,7 @@ const requestIcon = async (url) => {
     return iconFileData;
 };
 
-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 iconCss = ":host([hidden]){display:none !important}:host{display:inline-block;height:1em;width:1em}.qds-container{position:relative}.qds-icon-wrapper{display:contents}svg{display:block;fill:currentcolor;height:100%;width:100%}.qds-click-target{height:var(--qds-icon-click-target-size);left:calc(-1 * (var(--qds-icon-click-target-size) - 100%) / 2);position:absolute;top:calc(-1 * (var(--qds-icon-click-target-size) - 100%) / 2);width:var(--qds-icon-click-target-size)}";
 const QdsIconStyle0 = iconCss;
 
 let parser;
@@ -170,7 +171,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         await this.setIcon();
     }
     render() {
-        return h("span", { key: '2560e66057e3fba1523c65ab383e62e963e20621', class: "qds-wrapper", innerHTML: this.svg });
+        return (h("div", { key: '28eb1a5f4cd12e7f24bb5408eeeacaac86079320', class: "qds-container" }, h("span", { key: '4143990a4734e6892df3630236773f0e11b66934', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: '39cd4f18ace6212dd49b16f995fd1385201ae184', class: "qds-click-target" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/icon.js.map

@@ -1 +1 @@
-{"file":"icon.js","mappings":"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","names":["checked","draggable","dropdown","dropdownClose","externalLink","indeterminate","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/dropdown-close.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 7 0 0 0-.16-.36 9.4 9.4 0 0 0-1.06-1.87c-.23-.3-.43-.48-.59-.57l.46-.88c.36.18.67.5.92.84a8.6 8.6 0 0 1 .98 1.65\" 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 6m8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 6M6 18a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 18m0-6a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 12m8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 12m0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 18\"/></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.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=\"m.85 14.855 8.67-8.67a.7.7 0 0 1 .97 0l8.66 8.67.7-.7-8.66-8.66c-.65-.66-1.72-.66-2.37 0l-8.67 8.66z\" 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.08zM0 3h11.05v1.02H1.03v14.95h15V8.53h1.02V20H0z\" 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 10H6V9h8z\" 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-.97\" 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-.97\" 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-.7z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M9 4h2.41v2.15H9zm.13 12.51V7.97h2.18v8.54z\"/></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.87zm-.58 1.34h2.52v2.48H8.74z\"/></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 dropdownClose from '@quartzds/generic-icons-core/dist/dropdown-close.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  checked,\n  draggable,\n  dropdown,\n  'dropdown-close': dropdownClose,\n  'external-link': externalLink,\n  indeterminate,\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}
+{"file":"icon.js","mappings":"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","names":["checked","draggable","dropdown","dropdownClose","externalLink","indeterminate","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/dropdown-close.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 7 0 0 0-.16-.36 9.4 9.4 0 0 0-1.06-1.87c-.23-.3-.43-.48-.59-.57l.46-.88c.36.18.67.5.92.84a8.6 8.6 0 0 1 .98 1.65\" 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 6m8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 6M6 18a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 18m0-6a2 2 0 1 0 .001-3.999A2 2 0 0 0 6 12m8 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 12m0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 14 18\"/></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.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=\"m.85 14.855 8.67-8.67a.7.7 0 0 1 .97 0l8.66 8.67.7-.7-8.66-8.66c-.65-.66-1.72-.66-2.37 0l-8.67 8.66z\" 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.08zM0 3h11.05v1.02H1.03v14.95h15V8.53h1.02V20H0z\" 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 10H6V9h8z\" 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-.97\" 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-.97\" 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-.7z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M9 4h2.41v2.15H9zm.13 12.51V7.97h2.18v8.54z\"/></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.87zm-.58 1.34h2.52v2.48H8.74z\"/></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 dropdownClose from '@quartzds/generic-icons-core/dist/dropdown-close.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  checked,\n  draggable,\n  dropdown,\n  'dropdown-close': dropdownClose,\n  'external-link': externalLink,\n  indeterminate,\n  navigation,\n  next,\n  close: statusError,\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  display: inline-block;\n  height: 1em;\n  width: 1em;\n}\n\n.qds-container {\n  position: relative;\n}\n\n.qds-icon-wrapper {\n  display: contents;\n}\n\nsvg {\n  display: block;\n  fill: currentcolor;\n  height: 100%;\n  width: 100%;\n}\n\n.qds-click-target {\n  height: var(--qds-icon-click-target-size);\n  left: calc(-1 * (var(--qds-icon-click-target-size) - 100%) / 2);\n  position: absolute;\n  top: calc(-1 * (var(--qds-icon-click-target-size) - 100%) / 2);\n  width: var(--qds-icon-click-target-size);\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 (\n      <div class=\"qds-container\">\n        <span class=\"qds-icon-wrapper\" innerHTML={this.svg} />\n        <div class=\"qds-click-target\" />\n      </div>\n    )\n  }\n}\n"],"version":3}

package/components/index.d.ts

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

package/components/index.js

@@ -7,6 +7,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 export { r as registerIconLibrary, u as unregisterIconLibrary } from './icon.js';
 export { QdsButton, defineCustomElement as defineCustomElementQdsButton } from './qds-button.js';
 export { QdsCheckbox, defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox.js';
+export { QdsChip, defineCustomElement as defineCustomElementQdsChip } from './qds-chip.js';
 export { QdsDialog, defineCustomElement as defineCustomElementQdsDialog } from './qds-dialog.js';
 export { QdsDivider, defineCustomElement as defineCustomElementQdsDivider } from './qds-divider.js';
 export { QdsDropdown, defineCustomElement as defineCustomElementQdsDropdown } from './qds-dropdown.js';

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

@@ -36,7 +36,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("span", { key: 'b882c3999893dbc68e083eb302320b547a9c1caa', class: {
+        return (h("span", { key: '6ffca86718674dbfaa917f1e4d0620f4398ab569', class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
             }, "data-size": this.computedSize, ...this.inheritedAttributes }, this.required && h("span", { class: "qds-required" }, "*"), this.text));

package/components/qds-chip.d.ts

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

package/components/qds-chip.js

@@ -0,0 +1,243 @@
+/*!
+ * SPDX-FileCopyrightText: © 2024 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes, a as inheritAttributes } from './helpers.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const chipCss = ":host([hidden]){display:none !important}:host{display:inline-block;line-height:0}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-target{-webkit-appearance:none;appearance:none;display:flex;border:none;padding:0;background-color:transparent;color:inherit;cursor:pointer;pointer-events:auto}.qds-target:disabled{pointer-events:none}.qds-alignment{display:flex;align-items:center}.qds-cursor{cursor:pointer}.qds-icon{flex-shrink:0}.qds-closable-chip,.qds-container{display:inline-flex;align-items:center;justify-content:center;padding-block:0;-webkit-user-select:none;user-select:none;white-space:nowrap;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);color:var(--qds-theme-control-text-standard);background-color:initial;-webkit-appearance:none;appearance:none}.qds-closable-chip{pointer-events:none}.qds-closable-chip:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-container:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-checkbox:active~.qds-container,.qds-closable-chip:has(.qds-target:active),.qds-container.qds-pressed-state{background-color:var(--qds-theme-interactive-background-pressed)}.qds-checkbox{-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;position:absolute;white-space:nowrap}.qds-checkbox:focus-visible~.qds-container{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-closable-chip[data-size='small'],.qds-container[data-size='small']{height:var(--qds-control-small-height);padding-inline:var(--qds-control-chip-small-padding-horizontal);gap:var(--qds-control-small-gap-internal)}.qds-icon[data-size='small']{--qds-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-text[data-size='small']{font:var(--qds-control-small-text)}.qds-closable-chip[data-size='standard'],.qds-container[data-size='standard']{height:var(--qds-control-standard-height);padding-inline:var(--qds-control-chip-standard-padding-horizontal);gap:var(--qds-control-standard-gap-internal)}.qds-icon[data-size='standard']{--qds-icon-click-target-size:var(--qds-control-standard-height);height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-text[data-size='standard']{font:var(--qds-control-standard-text)}.qds-closable-chip[data-size='large'],.qds-container[data-size='large']{height:var(--qds-control-large-height);padding-inline:var(--qds-control-chip-large-padding-horizontal);gap:var(--qds-control-large-gap-internal)}.qds-icon[data-size='large']{--qds-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-text[data-size='large']{font:var(--qds-control-large-text)}";
+const QdsChipStyle0 = chipCss;
+
+const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.closeEmitter = createEvent(this, "qdsClose", 6);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.internals = this.attachInternals();
+        this.inheritedAttributes = {};
+        this.close = () => {
+            this.closeEmitter.emit();
+        };
+        this.onIconClick = (event) => {
+            if (!event.defaultPrevented && this.computedType === 'closable')
+                this.close();
+        };
+        this.onFocus = (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.onBlur = (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.iconName = undefined;
+        this.iconLibrary = 'default';
+        this.size = 'standard';
+        this.type = 'selectable';
+        this.text = undefined;
+        this.checked = undefined;
+        this.form = undefined;
+        this.disabled = undefined;
+        this.name = undefined;
+        this.autoFocus = undefined;
+        this.value = 'on';
+        this.isPressed = false;
+    }
+    get computedDisabled() {
+        return this.disabled ?? false;
+    }
+    get computedSize() {
+        switch (this.size) {
+            case 'standard':
+            case 'small':
+            case 'large': {
+                return this.size;
+            }
+            default: {
+                return 'standard';
+            }
+        }
+    }
+    get computedType() {
+        switch (this.type) {
+            case 'selectable':
+            case 'closable': {
+                return this.type;
+            }
+            default: {
+                return 'selectable';
+            }
+        }
+    }
+    get computedTabIndex() {
+        const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex ?? '0', 10);
+        return Number.isNaN(parsedValue) ? 0 : parsedValue;
+    }
+    get computedChecked() {
+        return this.checked ?? false;
+    }
+    get computedValue() {
+        // eslint-disable-next-line unicorn/no-null
+        return this.value == null ? null : this.value.toString();
+    }
+    onClick(event) {
+        if (this.computedDisabled) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.preventDefault();
+        if (this.computedType === 'selectable') {
+            this.checked = !this.computedChecked;
+            this.changeEmitter.emit();
+        }
+    }
+    handleKeyDown(event) {
+        if (this.computedDisabled) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (event.key === ' ') {
+            this.isPressed = true;
+            event.preventDefault();
+        }
+        else if (event.key === 'Enter') {
+            if (this.internals.form) {
+                this.internals.form.requestSubmit();
+                event.preventDefault();
+            }
+            if (this.computedType === 'closable')
+                this.closeEmitter.emit();
+        }
+    }
+    handleKeyUp(event) {
+        if (event.key !== ' ')
+            return;
+        this.isPressed = false;
+        if (this.computedType === 'closable')
+            this.closeEmitter.emit();
+        else
+            this.changeEmitter.emit();
+    }
+    checkedChanged() {
+        this.internals.setFormValue(this.computedChecked && !this.computedDisabled
+            ? this.computedValue
+            : // eslint-disable-next-line unicorn/no-null
+                null);
+    }
+    disabledChanged() {
+        if (this.computedChecked && !this.computedDisabled) {
+            this.inheritedAttributes = {
+                ...this.inheritedAttributes,
+                tabindex: this.savedTabindex,
+            };
+            this.internals.setFormValue(this.computedValue);
+        }
+        else {
+            this.savedTabindex = this.inheritedAttributes.tabindex;
+            this.inheritedAttributes = {
+                ...this.inheritedAttributes,
+                tabindex: undefined,
+            };
+            // eslint-disable-next-line unicorn/no-null
+            this.internals.setFormValue(null);
+        }
+    }
+    tabindexChanged(newValue) {
+        if (this.computedDisabled)
+            this.savedTabindex = newValue;
+        else
+            this.inheritedAttributes = {
+                ...this.inheritedAttributes,
+                tabindex: newValue,
+            };
+    }
+    valueChanged() {
+        if (this.computedChecked && !this.computedDisabled)
+            this.internals.setFormValue(this.computedValue);
+    }
+    componentWillLoad() {
+        this.valueChanged();
+        Object.defineProperty(this.element, 'form', {
+            enumerable: true,
+            get: () => this.internals.form,
+        });
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.element),
+            ...inheritAttributes(this.element, ['tabindex']),
+        };
+    }
+    render() {
+        return (h(Host, { key: '8898971924de5e4a864a86ae3ccd0d110fcb7347' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+                'qds-container': true,
+                'qds-closable-chip': true,
+                'qds-pressed-state': this.isPressed,
+            }, "data-size": this.computedSize, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), h("span", { class: "qds-text", "data-size": this.computedSize }, this.text), h("button", { "aria-label": "close", class: "qds-target", "data-size": this.computedSize, disabled: this.computedDisabled, onClick: this.onIconClick, tabIndex: this.computedDisabled ? -1 : -1, type: "button", ...this.inheritedAttributes }, h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: "core", name: "close" })))), this.computedType === 'selectable' && (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        h("label", { "aria-disabled": this.computedDisabled.toString() }, h("input", {
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.autoFocus, checked: this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, form: this.form, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
+        }), h("div", { class: {
+                'qds-container': true,
+                'qds-pressed-state': this.isPressed,
+                'qds-padding-end': true,
+                'qds-cursor': true,
+            }, "data-size": this.computedSize }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), h("span", { class: "qds-text", "data-size": this.computedSize }, this.text), (this.checked ?? false) && (h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, library: "core", name: "checked" })))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get element() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return QdsChipStyle0; }
+}, [81, "qds-chip", {
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "size": [1],
+        "type": [1],
+        "text": [1],
+        "checked": [1028],
+        "form": [1],
+        "disabled": [4],
+        "name": [1],
+        "autoFocus": [4, "autofocus"],
+        "value": [8],
+        "isPressed": [32]
+    }, [[0, "click", "onClick"], [0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-chip", "qds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-chip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Chip);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsChip, defineCustomElement };
+
+//# sourceMappingURL=qds-chip.js.map

package/components/qds-chip.js.map

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

package/components/qds-dialog.js

@@ -64,7 +64,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             await this.show();
     }
     render() {
-        return (h(Host, { key: '1f5d7996afd098ba3c3db6dd1ca5148e392b13d3' }, h("dialog", { key: '62b0bf1ed85cffb2b8c20ca4b92d3b8b802d459c', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: 'c144355e1b08371e970e378510d8c6d370ad3aea', class: "qds-content" }, h("slot", { key: '1ea9772a91959b72cff38a740ef4e16eda0b10f9' }))), h("div", { key: 'bbd3fde91ac0d01d93a1067eaef27cbc8f0c2248', class: "qds-backdrop" })));
+        return (h(Host, { key: '6c07f0d511c79f8bc9d1c9e230c44471e6655eaa' }, h("dialog", { key: '9e3c3ce9fa270664c3281aec28dc1a0507146063', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: '60dded49326a06648ad8098efcaa52e29bcfe64b', class: "qds-content" }, h("slot", { key: 'b356237b1f9943e0151f582d58532ab3c126b01d' }))), h("div", { key: 'e4f3284dd1b72ef89517eaa0de36efe65d42588d', class: "qds-backdrop" })));
     }
     async handleSubmit(event) {
         if ((event instanceof SubmitEvent &&

package/components/qds-divider.js

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

package/components/qds-dropdown.js

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

package/components/qds-form-message.js

@@ -40,10 +40,10 @@ const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends H
         this.inheritedAttributes = inheritAriaAttributes(this.element);
     }
     render() {
-        return (h("span", { key: '6b634984cd3f4ed3ca09ecce1f05a569fb38201d', class: {
+        return (h("span", { key: 'ab7bccd8c944fe6f9e78b10e5528191daa4ab53d', class: {
                 'qds-form-message': true,
                 'qds-inline': this.inline,
-            }, "data-size": this.computedSize, ...this.inheritedAttributes }, h("div", { key: '4bfcbd4a6a2f6775b8720ec9104492490c68f192', class: "qds-icon-container", "data-size": this.computedSize }, h("div", { key: '37e13931960421d1603f11fa867e2305b14475d9', class: "qds-icon-background", "data-size": this.computedSize, "data-status": this.status }, h("qds-icon", { key: '5c594b0039482afb986f9d6d88da81455e112b9e', class: "qds-icon", "data-size": this.computedSize, name: `status-${this.status}`, library: "core" }))), h("span", { key: 'ad85768d668c36ddff08d06e11ab0789e8dd5da6', class: "qds-text", "data-status": this.computedStatus }, this.text)));
+            }, "data-size": this.computedSize, ...this.inheritedAttributes }, h("div", { key: '5035aa7a2f4c3ee1d0ec542e1fed7156b38b961f', class: "qds-icon-container", "data-size": this.computedSize }, h("div", { key: 'cb4ce6f302f655edf8544121a433e0b7cba90a08', class: "qds-icon-background", "data-size": this.computedSize, "data-status": this.status }, h("qds-icon", { key: '312158bb8a6b2c80b44bc9a8573a7175615b3244', class: "qds-icon", "data-size": this.computedSize, name: `status-${this.status}`, library: "core" }))), h("span", { key: '3bdb4d0c9b7f2be5372b531f0d0131f731fd035c', class: "qds-text", "data-status": this.computedStatus }, this.text)));
     }
     get element() { return this; }
     static get style() { return QdsFormMessageStyle0; }

package/components/qds-inline-link.js

@@ -59,7 +59,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTM
         };
     }
     render() {
-        return (h("a", { key: 'cad1edcca7c22fe41f3d6a1428d59527e458278d', "aria-disabled": this.disabled.toString(), class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", { key: '42e54b814965fbaa50f6c1427eb96011305a83f8' }), h("qds-icon", { key: 'd9acaf816c495e9318ecf0c85bb2842cbe87b461', class: "qds-external", library: "core", name: "external-link" })));
+        return (h("a", { key: '647e435a33996594a3f5bd330e8940f022e232c5', "aria-disabled": this.disabled.toString(), class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", { key: 'd5d7a3888dbe9344b4833dd48bd8dfdbb15134a7' }), h("qds-icon", { key: '7b6a9fb18c93e02dd2834de8efae0ab570043d9b', class: "qds-external", library: "core", name: "external-link" })));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }

package/components/qds-input.js

@@ -244,9 +244,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.selectionEnd = this.input.selectionEnd;
     }
     render() {
-        return (h("div", { key: '517a7e1dd7962e69d4455a4b4c48058f261f8ceb', class: "qds-container" }, h("input", { key: '66048db2a09511129a7ab29a4e5c4ea93c268be1', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
+        return (h("div", { key: '5357bff41a786f85b7af91c4737cc04cb4c7dbdc', class: "qds-container" }, h("input", { key: '345e2958da2827a7ba09aea3edb3e003390dc655', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, type: this.type, ...this.inheritedAttributes }), h("div", { key: '13dadee7d78e28d40bb71ea00ee60ffa816af18a', class: "qds-focus-ring" })));
+            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, type: this.type, ...this.inheritedAttributes }), h("div", { key: 'caf883d83a874e63c4e60e3b7df42fc0249e915f', class: "qds-focus-ring" })));
     }
     defineGetter(p, get) {
         Object.defineProperty(this.element, p, { enumerable: true, get });

package/components/qds-list-item.js

@@ -67,15 +67,15 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
     }
     render() {
-        return (h("li", { key: '9d3c541a6aeff5a7b010d59ba3605b0026bf08b5', class: {
+        return (h("li", { key: 'b20795ed88464d141f847f6129715d4d5c5792d9', class: {
                 'qds-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-selected': this.selected,
-            }, ...this.inheritedAttributes }, h("button", { key: '7525e76011e15eb76f488db43243ae11ab3ad3d3', class: {
+            }, ...this.inheritedAttributes }, h("button", { key: 'a2cf98d90a13e708ffdfa442c20cd5d2f67d4cfa', class: {
                 'qds-button': true,
                 'qds-draggable': this.draggable,
                 'qds-selected': this.selected,
-            }, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.draggable && (h("div", { class: "qds-draggable" }, h("qds-icon", { class: "qds-control-icon", library: "core", name: "draggable" }))), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("div", { key: '776d18c9d66f82b39e0946988200d8030f659681', class: "qds-texts" }, h("div", { key: '0f9ec37b67564218f56ee5051d07b28084a0e68b', class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext)), this.kicker !== undefined && this.kicker !== '' && (h("div", { class: "qds-kicker" }, this.kicker))), this.navigation && (h("qds-icon", { class: "qds-control-icon qds-navigation", library: "core", name: "navigation" })))));
+            }, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.draggable && (h("div", { class: "qds-draggable" }, h("qds-icon", { class: "qds-control-icon", library: "core", name: "draggable" }))), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("div", { key: '1c11728778a78fc5ddca1725f5d63f2762e0d419', class: "qds-texts" }, h("div", { key: '6d44c2bce65143fb6f030da0c2e80676504554a7', class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext)), this.kicker !== undefined && this.kicker !== '' && (h("div", { class: "qds-kicker" }, this.kicker))), this.navigation && (h("qds-icon", { class: "qds-control-icon qds-navigation", library: "core", name: "navigation" })))));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }

package/components/qds-nav-list-item.js

@@ -73,11 +73,11 @@ const NavListItem = /*@__PURE__*/ proxyCustomElement(class NavListItem extends H
         this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
     }
     render() {
-        return (h(Host, { key: 'b43c94585fb8093ad6917b476552cc00e85fb349' }, h("li", { key: '91b1b6a25e70fe0dd7b65aa2390e5695c45ab8f7', class: {
+        return (h(Host, { key: '5d4db7d598100e8a899d8d73b26acbd296e78bc5' }, h("li", { key: '1eae3293c5408b89529799cb75b41ce67e01060c', class: {
                 'qds-nav-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-selected': this.selected,
-            }, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '244832cbca7a042da3b7703e3121548dd521134e', class: {
+            }, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '4998baf9f281e0aa3e64e5771fbede97ec19f67d', class: {
                 'qds-button': true,
                 'qds-selected': this.selected,
             }, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !this.shouldCollapse && this.text && this.renderText())), this.shouldCollapse && this.text && (h("qds-tooltip", { placement: "right", ref: this.tooltipRef }, this.renderText()))));