@quartzds/core 1.0.0-beta.49 → 1.0.0-beta.50

package/components/checkbox.js

@@ -147,15 +147,15 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     render() {
         return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        h("label", { key: '51b4490c588e94b899f25e4d989b53a1b843f696', "aria-disabled": this.computedDisabled.toString(), class: {
+        h("label", { key: 'c609f771294bca531975797d0d21fbce193dc138', "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": this.computedSize }, h("div", { key: '26c716cb00691426e339f0a64019013cccfc5020', class: "qds-container" }, h("input", { key: '5e0f5dc230b56fe3668697828c229de35555b60b',
+            }, "data-size": this.computedSize }, h("div", { key: '943b612e74a43dfdc77d6584007721ca48e8ee0d', class: "qds-container" }, h("input", { key: '854762b8a06308356691234b14df858110e92fc6',
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: '7a593295e2da79540f1b6cb1a54f448519ddd6e4', "aria-hidden": "true", class: {
+            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: '1e8c9ad20ffe3dab2b9220465db25e2ce0b46d7c', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-checked': true,
-            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: 'a0c788af92242e023e78372b0fb6c5d2fd66215f', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '279a028cd8506e2b7047a3be6ed631a47f639c7d', "aria-hidden": "true", class: {
+            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: 'acff6e42e64ba70d8575c653f8870f6085606e7d', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '340e56e96df9343803430c1811e5609eb6e01dbb', "aria-hidden": "true", class: {
                 'qds-icon': true,
                 'qds-indeterminate': true,
             }, "data-size": this.computedSize, library: "core", name: "indeterminate" })), this.hasText && (h("qds-label", { required: this.required, size: this.size, text: this.text }))));

package/components/icon.js

@@ -171,7 +171,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         await this.setIcon();
     }
     render() {
-        return (h("div", { key: '23d93a6d9eb2a154db09631f15c176706922f83e', class: "qds-container" }, h("span", { key: '85e1b458cb76a609585cf90eea93cdf8e8d5f9c0', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: '7bc147c5cbff4959a5409e24083fbc8d46140605', class: "qds-click-target" })));
+        return (h("div", { key: '3576e675de1f4e040c4e940affaf9ce6997985a3', class: "qds-container" }, h("span", { key: '4b130b6e2d50e63e17df66fc9f3dc243457403e3', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'b591c1935e6c1c2325fad315f76954062a439bae', class: "qds-click-target" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/index.d.ts

@@ -1,4 +1,6 @@
 /* qds custom elements */
+export { QdsBreadcrumbItem as QdsBreadcrumbItem } from '../dist/types/components/breadcrumb-item/breadcrumb-item';
+export { defineCustomElement as defineCustomElementQdsBreadcrumbItem } from './qds-breadcrumb-item';
 export { Button as QdsButton } from '../dist/types/components/button/button';
 export { defineCustomElement as defineCustomElementQdsButton } from './qds-button';
 export { Checkbox as QdsCheckbox } from '../dist/types/components/checkbox/checkbox';

package/components/index.js

@@ -5,6 +5,7 @@
  */
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { r as registerIconLibrary, u as unregisterIconLibrary } from './icon.js';
+export { QdsBreadcrumbItem, defineCustomElement as defineCustomElementQdsBreadcrumbItem } from './qds-breadcrumb-item.js';
 export { QdsButton, defineCustomElement as defineCustomElementQdsButton } from './qds-button.js';
 export { QdsCheckbox, defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox.js';
 export { QdsChip, defineCustomElement as defineCustomElementQdsChip } from './qds-chip.js';

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;IAC3C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;IAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;IAEpC,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAA;IAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;SAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;UACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;IAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,SAAS,KAAK,SAAS;QAAE,OAAM;IAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAClD,IAAI,cAAc,KAAK,SAAS;QAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;IAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAID;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;IAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;IAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;IAC3C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;IAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;IAEpC,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAA;IAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;SAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;UACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;IAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,SAAS,KAAK,SAAS;QAAE,OAAM;IAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;IAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAClD,IAAI,cAAc,KAAK,SAAS;QAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;IAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAID;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;IAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;IAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}

package/components/label.js

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

package/components/qds-breadcrumb-item.d.ts

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

package/components/qds-breadcrumb-item.js

@@ -0,0 +1,55 @@
+/*!
+ * SPDX-FileCopyrightText: © 2024 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+const breadcrumbItemCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-anchor,.qds-breadcrumb-item{color:var(--qds-theme-control-text-standard)}.qds-breadcrumb-item{font:var(--qds-control-standard-text);display:inline-flex;height:var(--qds-control-standard-height);align-items:center;gap:var(--qds-control-standard-gap-siblings-related);flex-shrink:0;list-style:none}.qds-anchor{-webkit-text-decoration:none;text-decoration:none}.qds-anchor:hover{-webkit-text-decoration:underline;text-decoration:underline}.qds-anchor:focus-visible{outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset);border-radius:var(--qds-focus-border-radius)}";
+const QdsBreadcrumbItemStyle0 = breadcrumbItemCss;
+
+const QdsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class QdsBreadcrumbItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.text = undefined;
+        this.href = undefined;
+        this.hreflang = undefined;
+        this.referrerPolicy = undefined;
+        this.rel = undefined;
+        this.target = undefined;
+    }
+    render() {
+        return (h("li", { key: 'c9f6f9b7131257c405aef668550acd2beeb77df5', class: "qds-breadcrumb-item" }, this.href === undefined ? (this.text) : (h(Fragment, null, h("a", { class: "qds-anchor", href: this.href, hrefLang: this.hreflang, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target }, this.text), h("span", { "aria-hidden": "true" }, "/")))));
+    }
+    static get delegatesFocus() { return true; }
+    static get style() { return QdsBreadcrumbItemStyle0; }
+}, [17, "qds-breadcrumb-item", {
+        "text": [1],
+        "href": [1],
+        "hreflang": [1],
+        "referrerPolicy": [1, "referrerpolicy"],
+        "rel": [1],
+        "target": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-breadcrumb-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, QdsBreadcrumbItem$1);
+            }
+            break;
+    } });
+}
+
+const QdsBreadcrumbItem = QdsBreadcrumbItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsBreadcrumbItem, defineCustomElement };
+
+//# sourceMappingURL=qds-breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"file":"qds-breadcrumb-item.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,6rBAA6rB,CAAC;AACxtB,gCAAe,iBAAiB;;MCanBA,mBAAiB;;;;;;;;;;;;IAkJrB,MAAM;QACX,QACE,2DAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,IAAI,KAAK,SAAS,IACtB,IAAI,CAAC,IAAI,KAET,kBACE,SACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACR,EACJ,2BAAkB,MAAM,QAAS,CAChC,CACJ,CACE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["QdsBreadcrumbItem"],"sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-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: inline-block;\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-breadcrumb-item {\n  font: var(--qds-control-standard-text);\n  display: inline-flex;\n  height: var(--qds-control-standard-height);\n  align-items: center;\n  gap: var(--qds-control-standard-gap-siblings-related);\n  flex-shrink: 0;\n  list-style: none;\n}\n\n.qds-anchor {\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n    outline-offset: var(--qds-focus-border-offset);\n    border-radius: var(--qds-focus-border-radius);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Component, Fragment, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n@Component({\n  tag: 'qds-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem {\n  /**\n   * The breadcrumb item's text.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<BreadcrumbTarget, string>\n\n  public render() {\n    return (\n      <li class=\"qds-breadcrumb-item\">\n        {this.href === undefined ? (\n          this.text\n        ) : (\n          <>\n            <a\n              class=\"qds-anchor\"\n              href={this.href}\n              hrefLang={this.hreflang}\n              referrerPolicy={this.referrerPolicy}\n              rel={this.rel}\n              target={this.target}\n            >\n              {this.text}\n            </a>\n            <span aria-hidden=\"true\">/</span>\n          </>\n        )}\n      </li>\n    )\n  }\n}\n"],"version":3}

package/components/qds-button.js

@@ -136,10 +136,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     }
     render() {
         const Tag = this.href === undefined ? 'button' : 'a';
-        return (h("div", { key: 'a4e21a38ce15a8447c131548ed138e12aeaadc7a', class: "qds-container" }, h(Tag, { key: '69355be42b1a237ee8f8505265e5f11dbfaf3555', "aria-disabled": Tag === 'a' ? this.computedDisabled.toString() : undefined, class: {
+        return (h("div", { key: '973eb3edebecf0255600ea759c50a9b58fc7d3a5', class: "qds-container" }, h(Tag, { key: '75fddf7053219bac65fce340ec8c2e6d36a579cd', "aria-disabled": Tag === 'a' ? this.computedDisabled.toString() : undefined, class: {
                 'qds-button': true,
                 'qds-icon-only': this.iconOnly,
-            }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-action": this.computedAction, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: '77c728b01c628aa25669036ad098c50d52b1ecf3', class: {
+            }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-action": this.computedAction, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon qds-action", "data-size": this.computedSize, "data-variant": this.variant, library: "core", name: this.computedAction }))), h("div", { key: 'f2823aefd79a9b733a788fa78d45b1decdbc5810', class: {
                 'qds-focus-ring': true,
                 'qds-icon-only': this.iconOnly,
             }, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant })));

package/components/qds-chip.js

@@ -168,7 +168,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         };
     }
     render() {
-        return (h(Host, { key: '0b70be2da3eab325be44a2cc2bf2834f28649c8e' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (h(Host, { key: 'b41569e72b63cccdcd7cbd7afe46dbfb44e4d85a' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,

package/components/qds-dialog.js

@@ -64,7 +64,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             await this.show();
     }
     render() {
-        return (h(Host, { key: 'f7fe844eee08bab3f860f74f90aa332bceaa8aff' }, h("dialog", { key: 'f3abbd6f4f1caba8333d231deea5b554fb977afa', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: '003073aba8a84c716f8f4aba37458a5fc6a77b95', class: "qds-content" }, h("slot", { key: 'ed76054f1e001ee56b5bc47e18a632d4538b0845' }))), h("div", { key: '6825a831c157062fdb690d11984ae36268ca04a3', class: "qds-backdrop" })));
+        return (h(Host, { key: '7d07a3fdc9f4dc636002e42b9b6521ea2dd085e7' }, h("dialog", { key: 'c3da154d75bfd33943a1e24ff98ada2bbd149bb8', class: "qds-dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, h("div", { key: '31100f771a31af479892c1df9def008e552306e0', class: "qds-content" }, h("slot", { key: '5b3ef98d2292429a2b8337af38a1cd0735f5a2e9' }))), h("div", { key: '11597e0e5d3eae815713ea74788bdc01527b1b8d', class: "qds-backdrop" })));
     }
     async handleSubmit(event) {
         if ((event instanceof SubmitEvent &&

package/components/qds-divider.js

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

package/components/qds-dropdown.js

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

package/components/qds-form-message.js

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

package/components/qds-inline-link.js

@@ -59,7 +59,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTM
         };
     }
     render() {
-        return (h("a", { key: '4c632f0b686cc00e25082262631bec15e7e050ed', "aria-disabled": this.disabled.toString(), class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", { key: 'c9f510d5ba33ebcadd80cf6094221ff63fd92605' }), h("qds-icon", { key: 'd31557a647194826d9570b1beb26d8029b209d77', class: "qds-external", library: "core", name: "external-link" })));
+        return (h("a", { key: '633f672e292a14c391963bec353f157fe859309d', "aria-disabled": this.disabled.toString(), class: "qds-inline-link", "data-importance": this.computedImportance, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", { key: '71f1fdf8e3f7b4d71062d9546163d7f18d40e74c' }), h("qds-icon", { key: '49cffac6b902b8d5e510ac110071afacf92c5ed2', class: "qds-external", library: "core", name: "external-link" })));
     }
     static get delegatesFocus() { return true; }
     get element() { return this; }

package/components/qds-input.js

@@ -54,6 +54,18 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             invariant(this.input);
             this.input.select();
         };
+        this.getSelectionDirection = () => {
+            invariant(this.input);
+            return this.input.selectionDirection;
+        };
+        this.getSelectionStart = () => {
+            invariant(this.input);
+            return this.input.selectionStart;
+        };
+        this.getSelectionEnd = () => {
+            invariant(this.input);
+            return this.input.selectionEnd;
+        };
         this.setRangeText = (replacement, start, end, selectionMode) => {
             invariant(this.input);
             this.input.setRangeText(replacement, start, end, selectionMode);
@@ -225,6 +237,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.defineGetter('setCustomValidity', () => this.setCustomValidity);
         this.defineGetter('labels', () => this.getLabels);
         this.defineGetter('select', () => this.select);
+        this.defineGetter('selectionDirection', this.getSelectionDirection);
+        this.defineGetter('selectionStart', this.getSelectionStart);
+        this.defineGetter('selectionEnd', this.getSelectionEnd);
         this.defineGetter('setRangeText', () => this.setRangeText);
         this.defineGetter('setSelectionRange', () => this.setSelectionRange);
         this.defineGetter('stepDown', () => this.stepDown);
@@ -239,14 +254,11 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         invariant(this.input);
         this.validationChanged();
         this.valueChanged();
-        this.selectionDirection = this.input.selectionDirection;
-        this.selectionStart = this.input.selectionStart;
-        this.selectionEnd = this.input.selectionEnd;
     }
     render() {
-        return (h("div", { key: '5357bff41a786f85b7af91c4737cc04cb4c7dbdc', class: "qds-container" }, h("input", { key: '345e2958da2827a7ba09aea3edb3e003390dc655', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
+        return (h("div", { key: '105253ac5317fcbe6297aa985317d7a871756077', class: "qds-container" }, h("input", { key: '8a943d2bdd6fb12415093c546ca6b4933fbb6d99', "aria-invalid": this.invalid.toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, type: this.type, ...this.inheritedAttributes }), h("div", { key: 'caf883d83a874e63c4e60e3b7df42fc0249e915f', class: "qds-focus-ring" })));
+            autoFocus: this.autoFocus, class: "qds-input", "data-size": this.computedSize, disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, spellcheck: this.spellCheck, step: this.step, type: this.type, ...this.inheritedAttributes }), h("div", { key: '639141c3751b935a2b154ffbf90a0d1b51941deb', class: "qds-focus-ring" })));
     }
     defineGetter(p, get) {
         Object.defineProperty(this.element, p, { enumerable: true, get });

package/components/qds-input.js.map

@@ -1 +1 @@
-{"file":"qds-input.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,qhHAAqhH,CAAC;AACviH,uBAAe,QAAQ;;MCoEV,KAAK;;;;;;;;;;QA2mBC,QAAG,GAAG,CAAC,KAAwB;YAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;SACnB,CAAA;QAEgB,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,aAAQ,GAAG;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;YAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;QAMgB,kBAAa,GAAsC,MAClE,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEf,mBAAc,GAAuC,MACpE,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAEhB,sBAAiB,GAA0C,CAC1E,KAAK;YAEL,IAAI,KAAK;gBAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;;gBACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;YAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAA;SACvB,CAAA;QAEgB,cAAS,GAAG;YAC3B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;SACzB,CAAA;QAEgB,WAAM,GAA+B;YACpD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;SACpB,CAAA;QAEgB,iBAAY,GAAG,CAC9B,WAAmB,EACnB,KAAa,EACb,GAAW,EACX,aAA6B;YAE7B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,CAAC,CAAA;YAE/D,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;gBACxB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;aAC1B;SACF,CAAA;QAEgB,sBAAiB,GAA0C,CAC1E,KAAK,EACL,GAAG,EACH,SAAS;YAET,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAA;SACpD,CAAA;QAEgB,aAAQ,GAAiC,CAAC,CAAC;YAC1D,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;SACvB,CAAA;QAEgB,WAAM,GAA+B,CAAC,CAAC;YACtD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;SACrB,CAAA;QAEgB,eAAU,GAAmC;YAC5D,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAA;SACxB,CAAA;oBAlsBqC,UAAU;;;;;;oBAuFkB,IAAI;;sBAqBT,IAAI;;;;;;;;;;kCA2IG,IAAI;4BAWhB,IAAI;8BAWA,IAAI;;;;iCAuEW,EAAE;wBAUZ,WAAW;;4BAgBH,KAAK;mCA8B3B,EAAE;uBAE1B,KAAK;;IAMhC,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAA;KACrE;IAED,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;IAED,IAAY,aAAa;QACvB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;;QAEhE,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAA;KACpD;IAGS,eAAe;QACvB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAA;YACtD,IAAI,CAAC,mBAAmB,GAAG;gBACzB,GAAG,IAAI,CAAC,mBAAmB;gBAC3B,QAAQ,EAAE,SAAS;aACpB,CAAA;;YAED,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;SAClC;aAAM;YACL,IAAI,CAAC,mBAAmB,GAAG;gBACzB,GAAG,IAAI,CAAC,mBAAmB;gBAC3B,QAAQ,EAAE,IAAI,CAAC,aAAa;aAC7B,CAAA;YACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;SAChD;KACF;IAGS,yBAAyB;QACjC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,CAAC,KAAK,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAA;KACxD;IAGS,mBAAmB;QAC3B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;KAC5C;IAGS,qBAAqB;QAC7B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAA;KAChD;IAGS,eAAe,CAAC,QAAgB;QACxC,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAA;;YAEtD,IAAI,CAAC,mBAAmB,GAAG;gBACzB,GAAG,IAAI,CAAC,mBAAmB;gBAC3B,QAAQ,EAAE,QAAQ;aACnB,CAAA;KACJ;IAWS,iBAAiB;QACzB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YACvD,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACtC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QACvE,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YACvD,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACtC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QACvE,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QACjE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;QAC5C,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;QACxC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;;QAExD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;YAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEhE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QACrC,IAAI,KAAK;YAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;;YAE1E,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,EACnB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAC5B,IAAI,CAAC,KAAK,CACX,CAAA;QACH,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAA;KACtB;IAGS,YAAY;QACpB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;KAC5E;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,gBAAgB;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KAC5D;IAGS,aAAa,CAAC,KAAoB;QAC1C,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,KAAK,CAAC,wBAAwB,EAAE,CAAA;YAChC,OAAM;SACP;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;YAChD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;YACnC,KAAK,CAAC,cAAc,EAAE,CAAA;SACvB;KACF;IAEM,iBAAiB;QACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACpD,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACpE,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC5D,IAAI,CAAC,YAAY,CACf,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QACD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,CAAA;QAC5D,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAA;QAC9D,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,CAAA;QAEpE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,CAAA;QAEjD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,CAAA;QAC1D,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,CAAA;QACpE,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAA;QAClD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAA;QAEtD,IAAI,CAAC,mBAAmB,GAAG;YACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;YACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;SACjD,CAAA;KACF;IAEM,gBAAgB;QACrB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QACxB,IAAI,CAAC,YAAY,EAAE,CAAA;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAA;QACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAA;QAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAA;KAC5C;IAEM,MAAM;QACX,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8EACgB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EACrC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY;;YAE/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,WAAW,eACN,IAAI,CAAC,YAAY,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,KAEX,IAAI,CAAC,mBAAmB,GAC5B,EACF,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC1B,EACP;KACF;IAyBO,YAAY,CAAC,CAAc,EAAE,GAAkB;QACrD,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;KAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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-container {\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-input {\n  appearance: textfield;\n  background-color: var(--qds-theme-control-input-background);\n  border-color: var(--qds-theme-control-border);\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  border-style: solid;\n  border-width: var(--qds-control-border-width)\n    var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n    var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n    var(--qds-control-border-width);\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  grid-area: input;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\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: none;\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: input;\n  isolation: isolate;\n  outline: var(--qds-control-input-focus-border-width) solid\n    var(--qds-theme-control-input-focus-border);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\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\n.qds-input:focus-visible ~ .qds-focus-ring {\n  visibility: visible;\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  @State() private invalid = false\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    const { valid } = this.input.validity\n    if (valid) 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    this.invalid = !valid\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  @Listen('keydown')\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (event.key === 'Enter' && this.internals.form) {\n      this.internals.form.requestSubmit()\n      event.preventDefault()\n    }\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      <div class=\"qds-container\">\n        <input\n          aria-invalid={this.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        <div class=\"qds-focus-ring\" />\n      </div>\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    this.invalid = !!error\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-container {\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-input {\n  appearance: textfield;\n  background-color: var(--qds-theme-control-input-background);\n  border-color: var(--qds-theme-control-border);\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  border-style: solid;\n  border-width: var(--qds-control-border-width)\n    var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n    var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n    var(--qds-control-border-width);\n  box-sizing: border-box;\n  color: var(--qds-theme-control-text-standard);\n  grid-area: input;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\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: none;\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: input;\n  isolation: isolate;\n  outline: var(--qds-control-input-focus-border-width) solid\n    var(--qds-theme-control-input-focus-border);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\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\n.qds-input:focus-visible ~ .qds-focus-ring {\n  visibility: visible;\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  @State() private invalid = false\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    const { valid } = this.input.validity\n    if (valid) 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    this.invalid = !valid\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  @Listen('keydown')\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (event.key === 'Enter' && this.internals.form) {\n      this.internals.form.requestSubmit()\n      event.preventDefault()\n    }\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('selectionDirection', this.getSelectionDirection)\n    this.defineGetter('selectionStart', this.getSelectionStart)\n    this.defineGetter('selectionEnd', this.getSelectionEnd)\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  }\n\n  public render() {\n    return (\n      <div class=\"qds-container\">\n        <input\n          aria-invalid={this.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        <div class=\"qds-focus-ring\" />\n      </div>\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    this.invalid = !!error\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 getSelectionDirection: () => HTMLInputElement['selectionDirection'] =\n    () => {\n      invariant(this.input)\n\n      return this.input.selectionDirection\n    }\n\n  private readonly getSelectionStart: () => HTMLInputElement['selectionStart'] =\n    () => {\n      invariant(this.input)\n\n      return this.input.selectionStart\n    }\n\n  private readonly getSelectionEnd: () => HTMLInputElement['selectionEnd'] =\n    () => {\n      invariant(this.input)\n\n      return this.input.selectionEnd\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

@@ -127,7 +127,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         return (
         /* eslint-disable jsx-a11y/label-has-associated-control */
         // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        h("li", { key: '32c74777d6af2c9e6fce67edd77794ef79932611', class: {
+        h("li", { key: '46083fca2566f92f38db72de2b0d38e8316f5732', class: {
                 'qds-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-divider': this.computedDivider === undefined,
@@ -136,10 +136,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
                 'qds-checked': this.computedChecked,
             }, "data-size": this.computedSize, role: "listitem" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).
             ,
-            ...this.inheritedAttributes }, this.computedListAction === 'multiselect' && (h("qds-checkbox", { checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1 })), this.computedListAction === 'reorder' && (h("qds-icon", { class: "qds-icon qds-list-action", library: "core", name: this.computedListAction })), h("div", { key: 'bba730672323760fe8f88ae59e187c1d6cde67b9', class: {
+            ...this.inheritedAttributes }, this.computedListAction === 'multiselect' && (h("qds-checkbox", { checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1 })), this.computedListAction === 'reorder' && (h("qds-icon", { class: "qds-icon qds-list-action", library: "core", name: this.computedListAction })), h("div", { key: '3af5fdd6488c248b225098872fa3f50aa4c59d05', class: {
                 'qds-indented-content': true,
                 'qds-divider': this.computedDivider === 'indent',
-            } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), h("label", { key: '8b802efd34a160788f30bd73d0b13293592fa26b', class: "qds-texts" }, h("input", { key: '704e60663e6341926ac70ea657a941c4ba346e4c', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (h("div", { class: "qds-kicker" }, this.kicker)), h("div", { key: '5761f9b8120868f6ba3c575b7ec9da74d94241d3', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { class: "qds-subtitle" }, this.subtitle))), this.computedDestination !== undefined && (h("qds-icon", { class: "qds-icon qds-destination", library: "core", name: this.computedDestination }))))
+            } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), h("label", { key: '2b54c42257dc4994281d0a3f09f02c68ba40236f', class: "qds-texts" }, h("input", { key: '9e5a1b47121a48cc03b40bec626dd589a1636247', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (h("div", { class: "qds-kicker" }, this.kicker)), h("div", { key: 'bf0f019dc2d81badf5c9d15c73e62954a393c13c', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { class: "qds-subtitle" }, this.subtitle))), this.computedDestination !== undefined && (h("qds-icon", { class: "qds-icon qds-destination", library: "core", name: this.computedDestination }))))
         /* eslint-enable jsx-a11y/label-has-associated-control */
         );
     }

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

@@ -73,11 +73,11 @@ const NavListItem = /*@__PURE__*/ proxyCustomElement(class NavListItem extends H
         this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
     }
     render() {
-        return (h(Host, { key: 'c5074d88e074d7f587f9c31c3b165f5bba04bfd9' }, h("li", { key: '5025ae331be27dedb48a02538c1524391525b282', class: {
+        return (h(Host, { key: '6df73e7f693ed26ef5530b8a594261ba4f7e6196' }, h("li", { key: '5d772cec18e087eccfee5aac068dd0462975718d', class: {
                 'qds-nav-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-selected': this.selected,
-            }, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: 'b86e464773e056c8b3f5dbb280913390746c7edf', class: {
+            }, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '2d912acc125dc252d3c6f6c0f514009b0a8a5b35', 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()))));