@quartzds/core 1.0.0-beta.33 → 1.0.0-beta.34

package/components/index.d.ts

@@ -21,6 +21,8 @@ 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 { NavListItem as QdsNavListItem } from '../dist/types/components/nav-list-item/nav-list-item';
+export { defineCustomElement as defineCustomElementQdsNavListItem } from './qds-nav-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

@@ -16,6 +16,7 @@ export { QdsInlineLink, defineCustomElement as defineCustomElementQdsInlineLink
 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 { QdsNavListItem, defineCustomElement as defineCustomElementQdsNavListItem } from './qds-nav-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/qds-input.js

@@ -29,10 +29,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.onChange = () => {
             this.changeEmitter.emit();
         };
-        this.onClick = (event) => {
-            if (this.computedDisabled)
-                event.stopImmediatePropagation();
-        };
         this.onFocus = (event) => {
             this.focusEmitter.emit(pickFocusEventAttributes(event));
         };
@@ -201,6 +197,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         if (!this.computedDisabled)
             this.internals.setFormValue(this.computedValue);
     }
+    onClick(event) {
+        if (this.computedDisabled)
+            event.stopImmediatePropagation();
+    }
     componentWillLoad() {
         this.defineGetter('form', () => this.internals.form);
         this.defineGetter('willValidate', () => this.internals.willValidate);
@@ -230,9 +230,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.selectionEnd = this.input.selectionEnd;
     }
     render() {
-        return (h("input", { key: '2ad7ec806250d46e45c1b15bbf45534053c92152', "aria-invalid": this.element.matches(':invalid').toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
+        return (h("input", { key: '0dc3596cab76eb33750288fa73a0ca341aa2d7cb', "aria-invalid": this.element.matches(':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, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, type: this.type, ...this.inheritedAttributes }));
+            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 }));
     }
     defineGetter(p, get) {
         Object.defineProperty(this.element, p, { enumerable: true, get });
@@ -287,7 +287,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         "value": [1032],
         "willValidate": [4, "will-validate"],
         "inheritedAttributes": [32]
-    }, undefined, {
+    }, [[0, "click", "onClick"]], {
         "disabled": ["disabledChanged"],
         "selectionDirection": ["selectionDirectionChanged"],
         "selectionEnd": ["selectionEndChanged"],

package/components/qds-input.js.map

@@ -1 +1 @@
-{"file":"qds-input.js","mappings":"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","names":[],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=shadow","src/components/input/input.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-input {\n  appearance: textfield;\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  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  width: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &[type='color'] {\n    appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    &::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: 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  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\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  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  AutoComplete,\n  EnterKeyHint,\n  InputMode,\n  Value,\n} from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week'\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n  tag: 'qds-input',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n  /**\n   * The input's size.\n   *\n   * > **_NOTE:_** The native [`size` HTML attribute][size] is not supported.\n   * CSS `width` should be used instead if this functionality is needed.\n   *\n   * [size]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Only valid for `search`, `tel`, and `text`\n   * inputs. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Provides a hint for a [user agent's][] autocomplete feature. See\n   * [the HTML `autocomplete` attribute][autocomplete] for a complete list of\n   * values and details on how to use `autoComplete`.\n   *\n   * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n   * [autocomplete]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: AutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the input from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`][] element to associate the input 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-input>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-input>` 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   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-input` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n  /**\n   * Defines the greatest value in the range of permitted values. If the\n   * `value` entered into the input exceeds this, the input fails\n   * [constraint validation][]. Only valid for `date`, `datetime-local`,\n   * `month`, `time`, and `week` inputs.\n   *\n   * If this value isn't a valid number, then the input has no maximum value.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the input has\n   * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n   * `text`, and `url` inputs.\n   *\n   * The input will fail [constraint validation][] if the length of the text\n   * entered into the field is greater than `maxlength` UTF-16 code units long.\n   * By default, browsers prevent users from entering more characters than\n   * allowed by the `maxlength` attribute. See [Client-side validation][] for\n   * more information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * Defines the most negative value in the range of permitted values. If the\n   * `value` entered into the input is less than this, the input fails\n   * [constraint validation][]. Only valid for `date`, `datetime-local`,\n   * `month`, `time`, and `week` inputs.\n   *\n   * This value must be less than or equal to the value of the `max` attribute.\n   * If this value isn't a valid number, then the input has no minimum value.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   *\n   * @webnative\n   */\n  @Prop() public readonly min?: number | string\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value smaller than or\n   * equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the input has no minimum\n   * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n   * `url` inputs.\n   *\n   * The input will fail [constraint validation][] if the length of the text\n   * entered into the field is fewer than `minlength` UTF-16 code units long,\n   * preventing form submission. See [Client-side validation][] for more\n   * information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * Specifies if multiple comma-separated email addresses can be entered. Only\n   * valid for `email` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly multiple?: boolean\n\n  /**\n   * The name of the input, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Defines a regular expression that the input's `value` must match in order\n   * for the value to pass [constraint validation][]. It must be a valid\n   * JavaScript regular expression, as used by the [`RegExp`][] type, and as\n   * documented in MDN's [guide on regular expressions][]; the `'u'` flag is\n   * specified when compiling the regular expression, so that the pattern is\n   * treated as a sequence of Unicode code points, instead of as ASCII. No\n   * forward slashes should be specified around the pattern text. Only valid\n   * for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * If the `pattern` is invalid, no regular expression is applied and this\n   * property is ignored. If the pattern is valid and a non-empty value does\n   * not match the pattern, constraint validation will prevent form submission.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [`RegExp`]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp\n   * [guide on regular expressions]: https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions\n   *\n   * @webnative\n   */\n  @Prop() public readonly pattern?: string\n\n  /**\n   * Text that appears in the input when it has no value set. Only valid for\n   * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * A value must be specified for the input before the owning form can be\n   * submitted. Not valid for `color` inputs.\n   *\n   * See [Client-side validation][] and the\n   * [HTML attribute: `required`][required] for more information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [required]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * Get or set the selection direction of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n  /**\n   * Get or set the ending position or offset of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n  /**\n   * Get or set the starting position or offset of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionStart: HTMLInputElement['selectionStart'] = null\n\n  /**\n   * Defines whether the input may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * Specifies the granularity that the `value` must adhere to. Only valid for\n   * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n   *\n   * The value must be a positive number—integer or float—or the special value\n   * `any`, which means no stepping is implied, and any value is allowed\n   * (barring other constraints, such as `min` and `max`).\n   *\n   * If `any` is not explicitly set, valid values for the `number` are the\n   * basis for stepping — the `min` value and increments of the step value, up\n   * to the `max` value, if specified.\n   *\n   * @webnative\n   */\n  @Prop() public readonly step?: number | 'any'\n\n  /**\n   * The type of input to render:\n   *\n   * - `\"date\"`: An input for entering a date (year, month, and day, with no\n   * time). Opens a date picker or numeric wheels for year, month, day when\n   * active in supporting browsers.\n   * - `\"datetime-local\"`: An input for entering a date and time, with no time\n   * zone. Opens a date picker or numeric wheels for date and time components\n   * when active in supporting browsers.\n   * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n   * input, but has validation parameters and relevant keyboard in supporting\n   * browsers and devices with dynamic keyboards.\n   * - `\"month\"`: An input for entering a month and year, with no time zone.\n   * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n   * default validation when supported. Displays a numeric keypad in some\n   * devices with dynamic keypads.\n   * - `\"password\"`: A single-line text input whose value is obscured. Will\n   * alert user if site is not secure.\n   * - `\"search\"`: A single-line text input for entering search strings.\n   * Line-breaks are automatically removed from the input value. May include a\n   * delete icon in supporting browsers that can be used to clear the input.\n   * Displays a search icon instead of enter key on some devices with dynamic\n   * keypads.\n   * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n   * keypad in some devices with dynamic keypads.\n   * - `\"text\"`: A single-line text input. Line-breaks are automatically\n   * removed from the input value.\n   * - `\"time\"`: An input for entering a time value with no time zone.\n   * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n   * has validation parameters and relevant keyboard in supporting browsers and\n   * devices with dynamic keyboards.\n   * - `\"week\"`: An input for entering a date consisting of a week-year number\n   * and a week number with no time zone.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: InputType\n\n  /**\n   * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 input.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * True if `<qds-input>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the input's value is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the input's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInputElement\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  private savedTabindex?: string\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.element.matches(':disabled') || (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 computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n    if (typeof this.value === 'number') return this.value.toString()\n    // eslint-disable-next-line unicorn/no-null\n    return this.value === undefined ? null : this.value\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.computedDisabled) {\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    } else {\n      this.inheritedAttributes = {\n        ...this.inheritedAttributes,\n        tabindex: this.savedTabindex,\n      }\n      this.internals.setFormValue(this.computedValue)\n    }\n  }\n\n  @Watch('selectionDirection')\n  protected selectionDirectionChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionDirection = this.selectionDirection\n  }\n\n  @Watch('selectionEnd')\n  protected selectionEndChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionEnd = this.selectionEnd\n  }\n\n  @Watch('selectionStart')\n  protected selectionStartChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionStart = this.selectionStart\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('max')\n  @Watch('maxLength')\n  @Watch('min')\n  @Watch('minLength')\n  @Watch('pattern')\n  @Watch('required')\n  @Watch('step')\n  @Watch('type')\n  @Watch('value')\n  protected validationChanged(): void {\n    invariant(this.input)\n\n    if (this.input.max !== this.max && this.max !== undefined)\n      this.input.max = this.max.toString()\n    if (this.maxLength !== undefined) this.input.maxLength = this.maxLength\n    if (this.input.min !== this.min && this.min !== undefined)\n      this.input.min = this.min.toString()\n    if (this.minLength !== undefined) this.input.minLength = this.minLength\n    if (this.pattern !== undefined) this.input.pattern = this.pattern\n    this.input.required = this.required ?? false\n    if (this.input.step !== this.step && this.step !== undefined)\n      this.input.step = this.step.toString()\n    if (this.type !== undefined) this.input.type = this.type\n    // eslint-disable-next-line unicorn/no-null\n    if (this.value != null) this.input.value = this.value.toString()\n\n    if (this.input.validity.valid)\n      this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.input)\n    else\n      this.internals.setValidity(\n        this.input.validity,\n        this.input.validationMessage,\n        this.input,\n      )\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (!this.computedDisabled) this.internals.setFormValue(this.computedValue)\n  }\n\n  public componentWillLoad(): void {\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.defineGetter('labels', () => this.getLabels)\n\n    this.defineGetter('select', () => this.select)\n    this.defineGetter('setRangeText', () => this.setRangeText)\n    this.defineGetter('setSelectionRange', () => this.setSelectionRange)\n    this.defineGetter('stepDown', () => this.stepDown)\n    this.defineGetter('stepUp', () => this.stepUp)\n    this.defineGetter('showPicker', () => this.showPicker)\n\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.input)\n\n    this.validationChanged()\n    this.valueChanged()\n    this.selectionDirection = this.input.selectionDirection\n    this.selectionStart = this.input.selectionStart\n    this.selectionEnd = this.input.selectionEnd\n  }\n\n  public render() {\n    return (\n      <input\n        aria-invalid={this.element.matches(':invalid').toString()}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"qds-input\"\n        data-size={this.computedSize}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        inputMode={this.inputmode}\n        max={this.max}\n        maxLength={this.maxLength}\n        min={this.min}\n        minLength={this.minLength}\n        multiple={this.multiple}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        placeholder={this.placeholder}\n        ref={this.ref}\n        spellcheck={this.spellCheck}\n        step={this.step}\n        type={this.type}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) event.stopImmediatePropagation()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.inputEmitter.emit(pickInputEventAttributes(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  private readonly getLabels = (): HTMLInputElement['labels'] => {\n    invariant(this.input)\n\n    return this.input.labels\n  }\n\n  private readonly select: HTMLInputElement['select'] = () => {\n    invariant(this.input)\n\n    this.input.select()\n  }\n\n  private readonly setRangeText = (\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode?: SelectionMode,\n  ): void => {\n    invariant(this.input)\n\n    this.input.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  private readonly setSelectionRange: HTMLInputElement['setSelectionRange'] = (\n    start,\n    end,\n    direction,\n  ) => {\n    invariant(this.input)\n\n    this.input.setSelectionRange(start, end, direction)\n  }\n\n  private readonly stepDown: HTMLInputElement['stepDown'] = (n) => {\n    invariant(this.input)\n\n    this.input.stepDown(n)\n  }\n\n  private readonly stepUp: HTMLInputElement['stepUp'] = (n) => {\n    invariant(this.input)\n\n    this.input.stepUp(n)\n  }\n\n  private readonly showPicker: HTMLInputElement['showPicker'] = () => {\n    invariant(this.input)\n\n    this.input.showPicker()\n  }\n}\n"],"version":3}
+{"file":"qds-input.js","mappings":"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","names":[],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=shadow","src/components/input/input.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-input {\n  appearance: textfield;\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  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  width: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &[type='color'] {\n    appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    &::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: 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  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\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 {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  AutoComplete,\n  EnterKeyHint,\n  InputMode,\n  Value,\n} from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week'\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n  tag: 'qds-input',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n  /**\n   * The input's size.\n   *\n   * > **_NOTE:_** The native [`size` HTML attribute][size] is not supported.\n   * CSS `width` should be used instead if this functionality is needed.\n   *\n   * [size]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Only valid for `search`, `tel`, and `text`\n   * inputs. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Provides a hint for a [user agent's][] autocomplete feature. See\n   * [the HTML `autocomplete` attribute][autocomplete] for a complete list of\n   * values and details on how to use `autoComplete`.\n   *\n   * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n   * [autocomplete]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: AutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the input from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`][] element to associate the input 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-input>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-input>` 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   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-input` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n  /**\n   * Defines the greatest value in the range of permitted values. If the\n   * `value` entered into the input exceeds this, the input fails\n   * [constraint validation][]. Only valid for `date`, `datetime-local`,\n   * `month`, `time`, and `week` inputs.\n   *\n   * If this value isn't a valid number, then the input has no maximum value.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the input has\n   * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n   * `text`, and `url` inputs.\n   *\n   * The input will fail [constraint validation][] if the length of the text\n   * entered into the field is greater than `maxlength` UTF-16 code units long.\n   * By default, browsers prevent users from entering more characters than\n   * allowed by the `maxlength` attribute. See [Client-side validation][] for\n   * more information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * Defines the most negative value in the range of permitted values. If the\n   * `value` entered into the input is less than this, the input fails\n   * [constraint validation][]. Only valid for `date`, `datetime-local`,\n   * `month`, `time`, and `week` inputs.\n   *\n   * This value must be less than or equal to the value of the `max` attribute.\n   * If this value isn't a valid number, then the input has no minimum value.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   *\n   * @webnative\n   */\n  @Prop() public readonly min?: number | string\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value smaller than or\n   * equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the input has no minimum\n   * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n   * `url` inputs.\n   *\n   * The input will fail [constraint validation][] if the length of the text\n   * entered into the field is fewer than `minlength` UTF-16 code units long,\n   * preventing form submission. See [Client-side validation][] for more\n   * information.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * Specifies if multiple comma-separated email addresses can be entered. Only\n   * valid for `email` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly multiple?: boolean\n\n  /**\n   * The name of the input, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Defines a regular expression that the input's `value` must match in order\n   * for the value to pass [constraint validation][]. It must be a valid\n   * JavaScript regular expression, as used by the [`RegExp`][] type, and as\n   * documented in MDN's [guide on regular expressions][]; the `'u'` flag is\n   * specified when compiling the regular expression, so that the pattern is\n   * treated as a sequence of Unicode code points, instead of as ASCII. No\n   * forward slashes should be specified around the pattern text. Only valid\n   * for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * If the `pattern` is invalid, no regular expression is applied and this\n   * property is ignored. If the pattern is valid and a non-empty value does\n   * not match the pattern, constraint validation will prevent form submission.\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   * [`RegExp`]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp\n   * [guide on regular expressions]: https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions\n   *\n   * @webnative\n   */\n  @Prop() public readonly pattern?: string\n\n  /**\n   * Text that appears in the input when it has no value set. Only valid for\n   * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * A value must be specified for the input before the owning form can be\n   * submitted. Not valid for `color` inputs.\n   *\n   * See [Client-side validation][] and the\n   * [HTML attribute: `required`][required] for more information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [required]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * Get or set the selection direction of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n  /**\n   * Get or set the ending position or offset of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n  /**\n   * Get or set the starting position or offset of a text selection.\n   *\n   * > **_NOTE:_** This property has no effect when used as an attribute.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  // eslint-disable-next-line unicorn/no-null\n  public selectionStart: HTMLInputElement['selectionStart'] = null\n\n  /**\n   * Defines whether the input may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * Specifies the granularity that the `value` must adhere to. Only valid for\n   * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n   *\n   * The value must be a positive number—integer or float—or the special value\n   * `any`, which means no stepping is implied, and any value is allowed\n   * (barring other constraints, such as `min` and `max`).\n   *\n   * If `any` is not explicitly set, valid values for the `number` are the\n   * basis for stepping — the `min` value and increments of the step value, up\n   * to the `max` value, if specified.\n   *\n   * @webnative\n   */\n  @Prop() public readonly step?: number | 'any'\n\n  /**\n   * The type of input to render:\n   *\n   * - `\"date\"`: An input for entering a date (year, month, and day, with no\n   * time). Opens a date picker or numeric wheels for year, month, day when\n   * active in supporting browsers.\n   * - `\"datetime-local\"`: An input for entering a date and time, with no time\n   * zone. Opens a date picker or numeric wheels for date and time components\n   * when active in supporting browsers.\n   * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n   * input, but has validation parameters and relevant keyboard in supporting\n   * browsers and devices with dynamic keyboards.\n   * - `\"month\"`: An input for entering a month and year, with no time zone.\n   * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n   * default validation when supported. Displays a numeric keypad in some\n   * devices with dynamic keypads.\n   * - `\"password\"`: A single-line text input whose value is obscured. Will\n   * alert user if site is not secure.\n   * - `\"search\"`: A single-line text input for entering search strings.\n   * Line-breaks are automatically removed from the input value. May include a\n   * delete icon in supporting browsers that can be used to clear the input.\n   * Displays a search icon instead of enter key on some devices with dynamic\n   * keypads.\n   * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n   * keypad in some devices with dynamic keypads.\n   * - `\"text\"`: A single-line text input. Line-breaks are automatically\n   * removed from the input value.\n   * - `\"time\"`: An input for entering a time value with no time zone.\n   * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n   * has validation parameters and relevant keyboard in supporting browsers and\n   * devices with dynamic keyboards.\n   * - `\"week\"`: An input for entering a date consisting of a week-year number\n   * and a week number with no time zone.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: InputType\n\n  /**\n   * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 input.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * True if `<qds-input>` will be validated when the form is submitted; false\n   * otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the input's value is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the input's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInputElement\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  private savedTabindex?: string\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.element.matches(':disabled') || (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 computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n    if (typeof this.value === 'number') return this.value.toString()\n    // eslint-disable-next-line unicorn/no-null\n    return this.value === undefined ? null : this.value\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.computedDisabled) {\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    } else {\n      this.inheritedAttributes = {\n        ...this.inheritedAttributes,\n        tabindex: this.savedTabindex,\n      }\n      this.internals.setFormValue(this.computedValue)\n    }\n  }\n\n  @Watch('selectionDirection')\n  protected selectionDirectionChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionDirection = this.selectionDirection\n  }\n\n  @Watch('selectionEnd')\n  protected selectionEndChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionEnd = this.selectionEnd\n  }\n\n  @Watch('selectionStart')\n  protected selectionStartChanged(): void {\n    invariant(this.input)\n\n    this.input.selectionStart = this.selectionStart\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('max')\n  @Watch('maxLength')\n  @Watch('min')\n  @Watch('minLength')\n  @Watch('pattern')\n  @Watch('required')\n  @Watch('step')\n  @Watch('type')\n  @Watch('value')\n  protected validationChanged(): void {\n    invariant(this.input)\n\n    if (this.input.max !== this.max && this.max !== undefined)\n      this.input.max = this.max.toString()\n    if (this.maxLength !== undefined) this.input.maxLength = this.maxLength\n    if (this.input.min !== this.min && this.min !== undefined)\n      this.input.min = this.min.toString()\n    if (this.minLength !== undefined) this.input.minLength = this.minLength\n    if (this.pattern !== undefined) this.input.pattern = this.pattern\n    this.input.required = this.required ?? false\n    if (this.input.step !== this.step && this.step !== undefined)\n      this.input.step = this.step.toString()\n    if (this.type !== undefined) this.input.type = this.type\n    // eslint-disable-next-line unicorn/no-null\n    if (this.value != null) this.input.value = this.value.toString()\n\n    if (this.input.validity.valid)\n      this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.input)\n    else\n      this.internals.setValidity(\n        this.input.validity,\n        this.input.validationMessage,\n        this.input,\n      )\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (!this.computedDisabled) this.internals.setFormValue(this.computedValue)\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) event.stopImmediatePropagation()\n  }\n\n  public componentWillLoad(): void {\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.defineGetter('labels', () => this.getLabels)\n\n    this.defineGetter('select', () => this.select)\n    this.defineGetter('setRangeText', () => this.setRangeText)\n    this.defineGetter('setSelectionRange', () => this.setSelectionRange)\n    this.defineGetter('stepDown', () => this.stepDown)\n    this.defineGetter('stepUp', () => this.stepUp)\n    this.defineGetter('showPicker', () => this.showPicker)\n\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.input)\n\n    this.validationChanged()\n    this.valueChanged()\n    this.selectionDirection = this.input.selectionDirection\n    this.selectionStart = this.input.selectionStart\n    this.selectionEnd = this.input.selectionEnd\n  }\n\n  public render() {\n    return (\n      <input\n        aria-invalid={this.element.matches(':invalid').toString()}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"qds-input\"\n        data-size={this.computedSize}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        inputMode={this.inputmode}\n        max={this.max}\n        maxLength={this.maxLength}\n        min={this.min}\n        minLength={this.minLength}\n        multiple={this.multiple}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        placeholder={this.placeholder}\n        ref={this.ref}\n        spellcheck={this.spellCheck}\n        step={this.step}\n        type={this.type}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.inputEmitter.emit(pickInputEventAttributes(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  private readonly getLabels = (): HTMLInputElement['labels'] => {\n    invariant(this.input)\n\n    return this.input.labels\n  }\n\n  private readonly select: HTMLInputElement['select'] = () => {\n    invariant(this.input)\n\n    this.input.select()\n  }\n\n  private readonly setRangeText = (\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode?: SelectionMode,\n  ): void => {\n    invariant(this.input)\n\n    this.input.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  private readonly setSelectionRange: HTMLInputElement['setSelectionRange'] = (\n    start,\n    end,\n    direction,\n  ) => {\n    invariant(this.input)\n\n    this.input.setSelectionRange(start, end, direction)\n  }\n\n  private readonly stepDown: HTMLInputElement['stepDown'] = (n) => {\n    invariant(this.input)\n\n    this.input.stepDown(n)\n  }\n\n  private readonly stepUp: HTMLInputElement['stepUp'] = (n) => {\n    invariant(this.input)\n\n    this.input.stepUp(n)\n  }\n\n  private readonly showPicker: HTMLInputElement['showPicker'] = () => {\n    invariant(this.input)\n\n    this.input.showPicker()\n  }\n}\n"],"version":3}

package/components/qds-list-item.js

@@ -17,6 +17,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.__attachShadow();
         this.blurEmitter = createEvent(this, "qdsBlur", 2);
         this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.inheritedAttributes = {};
         this.onBlur = (event) => {
             this.blurEmitter.emit(pickFocusEventAttributes(event));
         };
@@ -33,7 +34,6 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.subtext = undefined;
         this.text = undefined;
         this.draggable = false;
-        this.inheritedAttributes = {};
         this.tabIndex = 0;
     }
     get computedSize() {
@@ -48,6 +48,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
             }
         }
     }
+    onClick(event) {
+        if (this.disabled)
+            event.stopImmediatePropagation();
+    }
     draggableChanged() {
         this.draggable = this.element.draggable;
     }
@@ -63,15 +67,15 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
     }
     render() {
-        return (h("li", { key: '2d1c237fc69b022e85aa0ce7d78d49acb1bbb491', class: {
+        return (h("li", { key: 'e9aa6ab025fbbdc458f5ead030806b0a6c56f135', class: {
                 'qds-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-selected': this.selected,
-            }, ...this.inheritedAttributes }, h("button", { key: '13e317d4f886e988c93e06248902ded07a21a045', class: {
+            }, ...this.inheritedAttributes }, h("button", { key: '1261fcecf598bd17a84946f49dd49e471ea2ea46', 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: '823992fa4a5f0f8c5948d4de1301db46e93aa278', class: "qds-texts" }, h("div", { key: 'b6c02e1858db085e97db88e4b4e68ba95b34f3ed', 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: '654dba46e2d95df0d64ddff81163e172fb3546c2', class: "qds-texts" }, h("div", { key: '3121b06639a97d77983d36db823e24009ee9021a', 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; }
@@ -91,9 +95,8 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         "subtext": [1],
         "text": [1],
         "draggable": [32],
-        "inheritedAttributes": [32],
         "tabIndex": [32]
-    }, undefined, {
+    }, [[0, "click", "onClick"]], {
         "draggable": ["draggableChanged"],
         "tabindex": ["tabindexChanged"]
     }]);

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

@@ -1 +1 @@
-{"file":"qds-list-item.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n  display: flex;\n}\n\n.qds-button,\n.qds-texts {\n  flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n  align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n  color: var(--qds-theme-title);\n}\n\n.qds-button {\n  appearance: none;\n  background: none;\n  border-radius: var(--qds-focus-border-radius);\n  border: none;\n  text-align: initial;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n}\n\n.qds-draggable {\n  color: var(--qds-theme-control-text-standard);\n  justify-content: center;\n}\n\n.qds-list-item {\n  border-block-end: var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n  flex-direction: column;\n}\n\n.qds-subtext {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  color: var(--qds-theme-kicker);\n  order: -1;\n}\n\n[data-size='small'] {\n  &.qds-button {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-small-height);\n    height: var(--qds-control-small-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-small-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-small-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-small-kicker);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-button {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-standard-height);\n    height: var(--qds-control-standard-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-standard-kicker);\n  }\n}\n\n[data-size='large'] {\n  &.qds-button {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-large-height);\n    height: var(--qds-control-large-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-large-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-large-kicker);\n  }\n}\n\n.qds-selected {\n  &.qds-list-item {\n    background-color: var(--qds-theme-interactive-background-selected);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n\n:is(\n    [data-size='small'],\n    [data-size='standard'],\n    [data-size='large']\n  ).qds-draggable {\n  padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n  tag: 'qds-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n  /**\n   * Prevents the list item from being interacted with: it cannot be selected\n   * or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\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   * Whether or not this list item denotes a navigation action.\n   */\n  @Prop() public readonly navigation: boolean = false\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  /**\n   * The list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the list item is selected.\n   */\n  @Prop() public readonly selected: boolean = false\n\n  /**\n   * Text to display for the subtext.\n   */\n  @Prop() public readonly subtext?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: 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  @State() private draggable = false\n\n  @Element() private readonly element!: HTMLQdsListItemElement\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  @State() private tabIndex = 0\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  @Watch('draggable')\n  protected draggableChanged(): void {\n    this.draggable = this.element.draggable\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.draggable = this.element.draggable\n\n    const tabindex = this.element.getAttribute('tabindex') ?? '0'\n    const parsedValue = Number.parseInt(tabindex, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public render() {\n    return (\n      <li\n        class={{\n          'qds-list-item': true,\n          'qds-disabled': this.disabled,\n          'qds-selected': this.selected,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <button\n          class={{\n            'qds-button': true,\n            'qds-draggable': this.draggable,\n            'qds-selected': this.selected,\n          }}\n          data-size={this.computedSize}\n          disabled={this.disabled}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          tabIndex={this.tabIndex}\n          type=\"button\"\n        >\n          {this.draggable && (\n            <div class=\"qds-draggable\">\n              <qds-icon\n                class=\"qds-control-icon\"\n                library=\"core\"\n                name=\"draggable\"\n              />\n            </div>\n          )}\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"qds-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          <div class=\"qds-texts\">\n            <div class=\"qds-text\">{this.text}</div>\n            {this.subtext !== undefined && this.subtext !== '' && (\n              <div class=\"qds-subtext\">{this.subtext}</div>\n            )}\n            {this.kicker !== undefined && this.kicker !== '' && (\n              <div class=\"qds-kicker\">{this.kicker}</div>\n            )}\n          </div>\n          {this.navigation && (\n            <qds-icon\n              class=\"qds-control-icon qds-navigation\"\n              library=\"core\"\n              name=\"navigation\"\n            />\n          )}\n        </button>\n      </li>\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-list-item.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,4xHAA4xH,CAAC;AACjzH,0BAAe,WAAW;;MC6Bb,QAAQ;;;;;;;QAmEX,wBAAmB,GAAe,EAAE,CAAA;QAqG3B,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;wBAzK2C,KAAK;;2BAYH,SAAS;0BAKT,KAAK;;oBAUb,UAAU;wBAKJ,KAAK;;;yBA0BpB,KAAK;wBAEN,CAAC;;IAI7B,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;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,QAAQ;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KACpD;IAGS,gBAAgB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAA;KACxC;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KAC5D;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC9D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAA;QAEvC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QAC7D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KAC5D;IAEM,MAAM;QACX,QACE,2DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,cAAc,EAAE,IAAI,CAAC,QAAQ;gBAC7B,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,KAEG,IAAI,CAAC,mBAAmB,IAE5B,+DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI,CAAC,SAAS;gBAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,eACU,IAAI,CAAC,YAAY,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,eAAe,IACxB,gBACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,WAAW,GAChB,CACE,CACP,EACA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACD,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAO,EACtC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,KAChD,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,EACA,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,KAC9C,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAO,CAC5C,CACG,EACL,IAAI,CAAC,UAAU,KACd,gBACE,KAAK,EAAC,iCAAiC,EACvC,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,YAAY,GACjB,CACH,CACM,CACN,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n  display: flex;\n}\n\n.qds-button,\n.qds-texts {\n  flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n  align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n  color: var(--qds-theme-title);\n}\n\n.qds-button {\n  appearance: none;\n  background: none;\n  border-radius: var(--qds-focus-border-radius);\n  border: none;\n  text-align: initial;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n}\n\n.qds-draggable {\n  color: var(--qds-theme-control-text-standard);\n  justify-content: center;\n}\n\n.qds-list-item {\n  border-block-end: var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n  flex-direction: column;\n}\n\n.qds-subtext {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  color: var(--qds-theme-kicker);\n  order: -1;\n}\n\n[data-size='small'] {\n  &.qds-button {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-small-height);\n    height: var(--qds-control-small-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-small-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-small-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-small-kicker);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-button {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-standard-height);\n    height: var(--qds-control-standard-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-standard-kicker);\n  }\n}\n\n[data-size='large'] {\n  &.qds-button {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  & > .qds-draggable {\n    width: var(--qds-control-large-height);\n    height: var(--qds-control-large-height);\n  }\n\n  & .qds-control-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-large-subtitle);\n  }\n\n  & .qds-kicker {\n    font: var(--qds-list-item-large-kicker);\n  }\n}\n\n.qds-selected {\n  &.qds-list-item {\n    background-color: var(--qds-theme-interactive-background-selected);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n\n:is(\n    [data-size='small'],\n    [data-size='standard'],\n    [data-size='large']\n  ).qds-draggable {\n  padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n  tag: 'qds-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n  /**\n   * Prevents the list item from being interacted with: it cannot be selected\n   * or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\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   * Whether or not this list item denotes a navigation action.\n   */\n  @Prop() public readonly navigation: boolean = false\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  /**\n   * The list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the list item is selected.\n   */\n  @Prop() public readonly selected: boolean = false\n\n  /**\n   * Text to display for the subtext.\n   */\n  @Prop() public readonly subtext?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Emitted when the list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsListItemElement\n\n  @State() private draggable = false\n\n  @State() private tabIndex = 0\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  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('draggable')\n  protected draggableChanged(): void {\n    this.draggable = this.element.draggable\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.draggable = this.element.draggable\n\n    const tabindex = this.element.getAttribute('tabindex') ?? '0'\n    const parsedValue = Number.parseInt(tabindex, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public render() {\n    return (\n      <li\n        class={{\n          'qds-list-item': true,\n          'qds-disabled': this.disabled,\n          'qds-selected': this.selected,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <button\n          class={{\n            'qds-button': true,\n            'qds-draggable': this.draggable,\n            'qds-selected': this.selected,\n          }}\n          data-size={this.computedSize}\n          disabled={this.disabled}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          tabIndex={this.tabIndex}\n          type=\"button\"\n        >\n          {this.draggable && (\n            <div class=\"qds-draggable\">\n              <qds-icon\n                class=\"qds-control-icon\"\n                library=\"core\"\n                name=\"draggable\"\n              />\n            </div>\n          )}\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"qds-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n          <div class=\"qds-texts\">\n            <div class=\"qds-text\">{this.text}</div>\n            {this.subtext !== undefined && this.subtext !== '' && (\n              <div class=\"qds-subtext\">{this.subtext}</div>\n            )}\n            {this.kicker !== undefined && this.kicker !== '' && (\n              <div class=\"qds-kicker\">{this.kicker}</div>\n            )}\n          </div>\n          {this.navigation && (\n            <qds-icon\n              class=\"qds-control-icon qds-navigation\"\n              library=\"core\"\n              name=\"navigation\"\n            />\n          )}\n        </button>\n      </li>\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-nav-list-item.d.ts

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

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

@@ -0,0 +1,136 @@
+/*!
+ * 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 } from './helpers.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const navListItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-button,.qds-nav-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-texts{flex-direction:column}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}.qds-selected.qds-nav-list-item{background-color:var(\n      --qds-theme-navigation-subsection-standard-background\n    )}.qds-selected.qds-nav-list-item::after{background-color:var(--qds-theme-signature-color-default);border-radius:var(--qds-signature-line-connection-cap-radius);content:'';cursor:pointer;margin-right:calc(-1 * var(--qds-signature-line-connection-width) / 2);width:var(--qds-signature-line-connection-width)}.qds-selected .qds-icon{color:var(--qds-theme-signature-color-default)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}";
+const QdsNavListItemStyle0 = navListItemCss;
+
+const NavListItem = /*@__PURE__*/ proxyCustomElement(class NavListItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.inheritedAttributes = {};
+        this.liRef = (li) => {
+            this.li = li;
+        };
+        this.tooltipRef = (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = this.li;
+        };
+        this.onBlur = (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.onFocus = (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.collapsed = false;
+        this.disabled = false;
+        this.iconName = undefined;
+        this.iconLibrary = 'default';
+        this.size = 'standard';
+        this.selected = false;
+        this.subtext = undefined;
+        this.text = undefined;
+        this.tabIndex = 0;
+    }
+    get computedSize() {
+        switch (this.size) {
+            case 'standard':
+            case 'small':
+            case 'large': {
+                return this.size;
+            }
+            default: {
+                return 'standard';
+            }
+        }
+    }
+    get shouldCollapse() {
+        return this.collapsed && this.iconName !== undefined && this.iconName !== '';
+    }
+    onClick(event) {
+        if (this.disabled)
+            event.stopImmediatePropagation();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.element);
+        const tabindex = this.element.getAttribute('tabindex') ?? '0';
+        const parsedValue = Number.parseInt(tabindex, 10);
+        this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
+    }
+    render() {
+        return (h(Host, { key: 'fe1d328b09f241d7756bedc6b1060ff05af25561' }, h("li", { key: '12404e0126690d22b3e79ff7dca328727f111ce5', class: {
+                'qds-nav-list-item': true,
+                'qds-disabled': this.disabled,
+                'qds-selected': this.selected,
+            }, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '9667ca3396a3066574a4cecda51751e6515eae06', 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()))));
+    }
+    renderText() {
+        return (h("div", { class: "qds-texts" }, h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext))));
+    }
+    static get delegatesFocus() { return true; }
+    get element() { return this; }
+    static get watchers() { return {
+        "tabindex": ["tabindexChanged"]
+    }; }
+    static get style() { return QdsNavListItemStyle0; }
+}, [17, "qds-nav-list-item", {
+        "collapsed": [4],
+        "disabled": [4],
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "size": [1],
+        "selected": [4],
+        "subtext": [1],
+        "text": [1],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "tabindex": ["tabindexChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-nav-list-item", "qds-icon", "qds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-nav-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavListItem);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "qds-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsNavListItem = NavListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsNavListItem, defineCustomElement };
+
+//# sourceMappingURL=qds-nav-list-item.js.map

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

@@ -0,0 +1 @@
+{"file":"qds-nav-list-item.js","mappings":"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","names":[],"sources":["src/components/nav-list-item/nav-list-item.css?tag=qds-nav-list-item&encapsulation=shadow","src/components/nav-list-item/nav-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-button,\n.qds-nav-list-item,\n.qds-texts {\n  display: flex;\n}\n\n.qds-button,\n.qds-texts {\n  flex: 1 0;\n}\n\n.qds-icon,\n.qds-text {\n  color: var(--qds-theme-title);\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background: none;\n  border-radius: var(--qds-focus-border-radius);\n  border: none;\n  cursor: pointer;\n  text-align: initial;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n\n  &:not(.qds-selected) {\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-subtext {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-texts {\n  flex-direction: column;\n}\n\n[data-size='small'] {\n  &.qds-button {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-small-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-small-subtitle);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-button {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n}\n\n[data-size='large'] {\n  &.qds-button {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-large-subtitle);\n  }\n}\n\n.qds-selected {\n  &.qds-nav-list-item {\n    background-color: var(\n      --qds-theme-navigation-subsection-standard-background\n    );\n\n    &::after {\n      background-color: var(--qds-theme-signature-color-default);\n      border-radius: var(--qds-signature-line-connection-cap-radius);\n      content: '';\n      cursor: pointer;\n      margin-right: calc(-1 * var(--qds-signature-line-connection-width) / 2);\n      width: var(--qds-signature-line-connection-width);\n    }\n  }\n\n  & .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\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 { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/nav-list-item\n */\n@Component({\n  tag: 'qds-nav-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'nav-list-item.css',\n})\nexport class NavListItem implements ComponentInterface {\n  /**\n   * Displays the navigation list item in a collapsed state without its text.\n   * The text will be displayed in a tooltip instead.\n   *\n   * This property has no effect if the navigation list item does not have an\n   * icon set.\n   */\n  @Prop() public readonly collapsed: boolean = false\n\n  /**\n   * Prevents the navigation list item from being interacted with: it cannot be\n   * selected or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\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 navigation list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the navigation list item is selected.\n   */\n  @Prop() public readonly selected: boolean = false\n\n  /**\n   * Text to display for the subtext.\n   */\n  @Prop() public readonly subtext?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Emitted when the navigation list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the navigation list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsNavListItemElement\n\n  @State() private tabIndex = 0\n\n  private inheritedAttributes: Attributes = {}\n\n  private li?: HTMLLIElement\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 shouldCollapse(): boolean {\n    return this.collapsed && this.iconName !== undefined && this.iconName !== ''\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n\n    const tabindex = this.element.getAttribute('tabindex') ?? '0'\n    const parsedValue = Number.parseInt(tabindex, 10)\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  public render() {\n    return (\n      <Host>\n        <li\n          class={{\n            'qds-nav-list-item': true,\n            'qds-disabled': this.disabled,\n            'qds-selected': this.selected,\n          }}\n          ref={this.liRef}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <button\n            class={{\n              'qds-button': true,\n              'qds-selected': this.selected,\n            }}\n            data-size={this.computedSize}\n            disabled={this.disabled}\n            onBlur={this.onBlur}\n            onFocus={this.onFocus}\n            tabIndex={this.tabIndex}\n            type=\"button\"\n          >\n            {this.iconName !== undefined && this.iconName !== '' && (\n              <qds-icon\n                class=\"qds-icon\"\n                library={this.iconLibrary}\n                name={this.iconName}\n              />\n            )}\n            {!this.shouldCollapse && this.text && this.renderText()}\n          </button>\n        </li>\n        {this.shouldCollapse && this.text && (\n          <qds-tooltip placement=\"right\" ref={this.tooltipRef}>\n            {this.renderText()}\n          </qds-tooltip>\n        )}\n      </Host>\n    )\n  }\n\n  private renderText(): JSX.Element {\n    return (\n      <div class=\"qds-texts\">\n        <div class=\"qds-text\">{this.text}</div>\n        {this.subtext !== undefined && this.subtext !== '' && (\n          <div class=\"qds-subtext\">{this.subtext}</div>\n        )}\n      </div>\n    )\n  }\n\n  private readonly liRef = (li?: HTMLLIElement): void => {\n    this.li = li\n  }\n\n  private readonly tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.li\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-radio.js

@@ -76,10 +76,10 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
     render() {
         return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        h("label", { key: '34e33e177bd991f0e352e976a4f4f78b7825670e', "aria-disabled": this.computedDisabled.toString(), class: {
+        h("label", { key: '90cfdd6f520d6e2f9f6a4d4e57831da148fe3de9', "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize }, h("div", { key: '202f9f703d2008f0e823f012ee31d3382cf33804', class: "qds-container" }, h("input", { key: 'd40bf2d33092626c57ac571d9031ab1347405ae5', checked: this.checked, class: "qds-radio", "data-size": this.computedSize, disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "radio", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '43b3c9f756f51aa2845a0128bf38d769ad745f03', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '1554e12dd69a6b895a37b0701dc4d5ce4c61eba2', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, library: "core", name: "checked" })), this.hasText && (h("qds-label", { size: this.computedSize, text: this.text }))));
+            }, "data-size": this.computedSize }, h("div", { key: '0496b80863119fb6fb67ff5985887a83f3311212', class: "qds-container" }, h("input", { key: '57298cfea17e7fb5fee67bddbaa50cc196e83dc9', checked: this.checked, class: "qds-radio", "data-size": this.computedSize, disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "radio", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: 'dd3b16ae312b561d2ee38195d79a1ddfd4866950', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '74a82600da0720ea6a12748be8e59f017a7e380e', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, library: "core", name: "checked" })), this.hasText && (h("qds-label", { size: this.computedSize, text: this.text }))));
     }
     get element() { return this; }
     static get style() { return QdsRadioStyle0; }