@quartzds/core 1.0.0-beta.91 → 1.0.0-beta.92

package/dist/esm/qds-divider.entry.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, h } from './index-b1d6acd2.js';
+import { r as registerInstance, h } from './index-bc9462c1.js';
 import { a as attachInternals } from './helpers-2e4ca34d.js';
 
 const dividerCss = ":host([hidden]){display:none!important}:host{display:block}.qds-divider{border:none;height:var(--qds-control-border-width);margin:0;width:100%}.qds-vertical{height:100%;width:var(--qds-control-border-width)}[data-importance=standard]{background-color:var(--qds-theme-divider-standard)}[data-importance=emphasized]{background-color:var(--qds-theme-divider-emphasized)}[data-importance=subdued]{background-color:var(--qds-theme-divider-subdued)}";
@@ -44,7 +44,7 @@ const Divider = class {
         this.verticalChanged();
     }
     render() {
-        return (h("hr", { key: '5391bfd56f5a2244bc9c9941fef808ed86a181d5', class: {
+        return (h("hr", { key: '94c7922480ed8aff5973dec5a5ffa5a9586c7d3a', class: {
                 'qds-divider': true,
                 'qds-vertical': this.vertical,
             }, "aria-hidden": "true", "data-importance": __classPrivateFieldGet(this, _Divider_instances, "a", _Divider_computedImportance_get) }));

package/dist/esm/qds-dropdown.entry.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-bc9462c1.js';
 import { o as offset, f as flip, s as shift, l as limitShift, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-61986f35.js';
 import { r as resolveTarget, d as propertyToPx, e as roundByDPR, f as ignorePromise } from './helpers-2e4ca34d.js';
 
@@ -184,11 +184,11 @@ const Dropdown = class {
         __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
     }
     render() {
-        return (h(Host, { key: 'c192187f4fbe9fa2e166cb86b435c45c9d6d2a26', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"), onFocusout: __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"), style: {
+        return (h(Host, { key: 'b6482f2301362787df929ced74c873328d62d4e3', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"), onFocusout: __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"), style: {
                 display: this.hostDisplay,
                 position: this.hostPosition,
                 transform: this.hostTransform,
-            } }, h("slot", { key: '41a6332566fe8e7e935f8f638367c3f0d9571cbe' })));
+            } }, h("slot", { key: '428c9e2feffecf27c5da62afcac6da87f035fa39' })));
     }
     show() {
         if (__classPrivateFieldGet(this, _Dropdown_open, "f"))

package/dist/esm/qds-form-message.entry.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, h, d as getElement } from './index-bc9462c1.js';
 import { b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
 
 const formMessageCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-form-message{color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-icon-background,.qds-icon-container{align-items:center;display:flex}.qds-icon-background{border-radius:var(--qds-control-rounded-border-radius)}.qds-icon{color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-size=small]{font:var(--qds-control-small-text)}.qds-icon-container[data-size=small]{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-icon-container[data-size=standard]{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-icon-container[data-size=large]{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-icon-background[data-status=error]{background-color:var(--qds-theme-feedback-result-failure)}.qds-text[data-status=error]{color:var(--qds-theme-feedback-result-failure)}[data-status=info].qds-icon-background{background-color:var(--qds-theme-feedback-message-informational)}.qds-icon-background[data-status=success]{background-color:var(--qds-theme-feedback-result-success)}.qds-text[data-status=success]{color:var(--qds-theme-feedback-result-success)}[data-status=warning].qds-icon-background{background-color:var(--qds-theme-feedback-result-partial-success)}";
@@ -54,10 +54,10 @@ const FormMessage = class {
         __classPrivateFieldSet(this, _FormMessage_inheritedAttributes, inheritAriaAttributes(this.host), "f");
     }
     render() {
-        return (h("span", { key: '4ef649d8c5a28d6e7fdd40701808c7e11c5f5d1b', class: {
+        return (h("span", { key: 'aeb311865eb9da355ea37a1b521094dd2c06c0d8', class: {
                 'qds-form-message': true,
                 'qds-inline': this.inline,
-            }, "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), ...__classPrivateFieldGet(this, _FormMessage_inheritedAttributes, "f") }, h("div", { key: '5b4c24c3212a1be080b984b7980ae9007b0d4058', class: "qds-icon-container", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get) }, h("div", { key: '4ad9113efb96a0a838e1d7c7e74c696a1fd39d10', class: "qds-icon-background", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), "data-status": this.status }, h("qds-icon", { key: '20d176ec6474585c36c6357931f047e6dd49b352', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), name: `status-${this.status}`, library: "core" }), h("span", { key: 'e3e573bede77a2c328fa954fbe6897624b4743c8', class: "qds-sr-only" }, this.statusDescription))), h("span", { key: '90f50abc3abd90e5e33bff33ec9530696a62a8e8', class: "qds-text", "data-status": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedStatus_get) }, this.text)));
+            }, "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), ...__classPrivateFieldGet(this, _FormMessage_inheritedAttributes, "f") }, h("div", { key: '6491c3777546e3bed953d9da85423ac67bfb3135', class: "qds-icon-container", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get) }, h("div", { key: 'ed683b8f1f1b84f39743f18e53ba442cda9e2996', class: "qds-icon-background", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), "data-status": this.status }, h("qds-icon", { key: 'e004a19a36d721158a7ddf861ee90b69b18a5060', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), name: `status-${this.status}`, library: "core" }), h("span", { key: '4d607a5ed476d9de870083a3ff17e0060187c6af', class: "qds-sr-only" }, this.statusDescription))), h("span", { key: 'c5bc5b5590d77aa4639dcb2f6729fb2624b22925', class: "qds-text", "data-status": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedStatus_get) }, this.text)));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/qds-icon.entry.js

@@ -3,9 +3,9 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-bc9462c1.js';
 import { b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
-import { g as getIconLibrary } from './library-2e5458af.js';
+import { g as getIconLibrary } from './library-52ae166a.js';
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
@@ -116,7 +116,7 @@ const Icon = class {
         await this.setIcon();
     }
     render() {
-        return (h("div", { key: '70a230b844d56b3c3546fe243c71e8ab93847aca', class: "qds-container" }, h("span", { key: '88b003880fb54fd138cfad5c670030cb9f4cfdc4', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: 'e0e911ad95b588c5676be368f39d82c0511e966e', class: "qds-click-target" })));
+        return (h("div", { key: 'b3221eb14c7e0bcc6516b6d486429755186eaf60', class: "qds-container" }, h("span", { key: '36e1438b3525387f1fc9f75aff7c648433f47cf0', class: "qds-icon-wrapper", innerHTML: this.svg }), h("div", { key: '8eb2b41ce0e33002aff177902c851dc2604fd16a', class: "qds-click-target" })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/qds-inline-link.entry.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-bc9462c1.js';
 import { a as attachInternals, p as pickFocusEventAttributes, g as determineLinkIcon } from './helpers-2e4ca34d.js';
 
 const inlineLinkCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-icon{flex-shrink:0;height:1.25em;width:1.25em}.qds-inline-link{align-items:center;border-radius:var(--qds-focus-border-radius);display:inline-flex;gap:var(--qds-text-icon-gap);max-width:inherit;width:inherit}.qds-inline-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}";
@@ -78,10 +78,10 @@ const InlineLink = class {
         __classPrivateFieldGet(this, _InlineLink_internals, "f").ariaLabel = this.host.textContent;
     }
     render() {
-        return (h("a", { key: 'f839676a41fc544de59e0863b1f01090648a6e40', "aria-hidden": "true", class: {
+        return (h("a", { key: '593d9b45039467c0de9bd9daecb548472858b834', "aria-hidden": "true", class: {
                 'qds-inline-link': true,
                 'qds-disabled': this.disabled,
-            }, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'e2046cd8ec2aaaf2b4b367d4e3321098fa7d6a8e', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("span", { key: '88079c1b08b6e56ae578f73e392330e313db02bc', class: "qds-text" }, h("slot", { key: 'fd9c072da3e2364a6233b8ad1cc7f50e43684d61', onSlotchange: __classPrivateFieldGet(this, _InlineLink_onSlotchange, "f") })), this.linkIcon && (h("qds-icon", { key: 'bb1bf6c08631539894bbef5c9b87c675d94c853d', class: "qds-icon", library: "core", name: this.linkIcon }))));
+            }, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '8fd5a5c068c3d5f2cb5d40f0e7ff67454bd4178c', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("span", { key: '1e12f58546ea74ac4676f1c9565f3f99a14115b5', class: "qds-text" }, h("slot", { key: 'fac69d2d273b598e7c7c5ff22b10d90dc7d13892', onSlotchange: __classPrivateFieldGet(this, _InlineLink_onSlotchange, "f") })), this.linkIcon && (h("qds-icon", { key: '17798d667b2deb5724695ad158cf960784b939b2', class: "qds-icon", library: "core", name: this.linkIcon }))));
     }
     static get delegatesFocus() { return true; }
     get host() { return getElement(this); }

package/dist/esm/qds-input.entry.js

@@ -3,11 +3,11 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-bc9462c1.js';
 import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
 import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
 
-const inputCss = ":host([hidden]){display:none!important}:host{display:inline-block}@-moz-document url-prefix(){[type=date]~.qds-icon-container,[type=datetime-local]~.qds-icon-container,[type=month]~.qds-icon-container,[type=time]~.qds-icon-container,[type=week]~.qds-icon-container{display:none}}.qds-container,.qds-input{max-width:inherit;width:inherit}.qds-container{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:\"a\"}.qds-icon{--qds-theme-interactive-background-hover:none;--qds-theme-interactive-background-pressed:none;--qds-control-small-height:var(--qds-control-small-icon-size);flex-shrink:0}.qds-icon-container,.qds-input{grid-area:a}.qds-icon-container{align-items:center;display:flex;justify-content:center;justify-self:end;padding-inline-end:var(--qds-control-input-padding-horizontal)}.qds-icon-container.no-padding{padding-inline-end:0}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:a;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-control-input-focus-border-width) solid var(--qds-theme-control-input-focus-border);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}[data-size=small]{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.qds-icon[data-size=small]{--qds-experimental-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small]~.qds-icon-container{gap:var(--qds-control-small-gap-internal);margin-inline-start:var(--qds-control-small-gap-internal)}[data-size=small][type=date],[data-size=small][type=datetime-local],[data-size=small][type=email],[data-size=small][type=month],[data-size=small][type=tel],[data-size=small][type=time],[data-size=small][type=url],[data-size=small][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-small-height))}[data-size=small][type=file]::file-selector-button{font:var(--qds-control-small-text);height:var(--qds-control-small-height);margin-inline-end:var(--qds-control-small-gap-siblings-related);padding-inline:var(--qds-control-button-small-padding-horizontal)}[data-size=small][type=number]::-webkit-inner-spin-button,[data-size=small][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-small-gap-internal)}[data-size=small][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-small-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-small-gap-internal))}[data-size=standard]{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{--qds-experimental-icon-click-target-size:var(\n      --qds-control-standard-height\n    );height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard]~.qds-icon-container{gap:var(--qds-control-standard-gap-internal);margin-inline-start:var(--qds-control-standard-gap-internal)}[data-size=standard][type=date],[data-size=standard][type=datetime-local],[data-size=standard][type=email],[data-size=standard][type=month],[data-size=standard][type=tel],[data-size=standard][type=time],[data-size=standard][type=url],[data-size=standard][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-height))}[data-size=standard][type=file]::file-selector-button{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height);margin-inline-end:var(--qds-control-standard-gap-siblings-related);padding-inline:var(--qds-control-button-standard-padding-horizontal)}[data-size=standard][type=number]::-webkit-inner-spin-button,[data-size=standard][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-standard-gap-internal)}[data-size=standard][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-standard-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-gap-internal))}[data-size=large]{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.qds-icon[data-size=large]{--qds-experimental-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large]~.qds-icon-container{gap:var(--qds-control-large-gap-internal);margin-inline-start:var(--qds-control-large-gap-internal)}[data-size=large][type=date],[data-size=large][type=datetime-local],[data-size=large][type=email],[data-size=large][type=month],[data-size=large][type=tel],[data-size=large][type=time],[data-size=large][type=url],[data-size=large][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-large-height))}[data-size=large][type=file]::file-selector-button{font:var(--qds-control-large-text);height:var(--qds-control-large-height);margin-inline-end:var(--qds-control-large-gap-siblings-related);padding-inline:var(--qds-control-button-large-padding-horizontal)}[data-size=large][type=number]::-webkit-inner-spin-button,[data-size=large][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-large-gap-internal)}[data-size=large][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-large-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-large-gap-internal))}.qds-input{-webkit-appearance:textfield;appearance:textfield;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);box-sizing:border-box;color:var(--qds-theme-control-text-standard);grid-area:a;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input.qds-hide~.qds-icon-container{display:none}.qds-input:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input:focus-visible{outline:none}.qds-input:focus-visible~.qds-focus-ring{visibility:visible}.qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-input:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-input::-webkit-search-cancel-button,.qds-input:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week])::-webkit-calendar-picker-indicator{cursor:pointer;display:none}.qds-input[type=file]{padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=file]::file-selector-button{background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard)}.qds-input[type=file]::file-selector-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=file]::file-selector-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input[type=color],.qds-input[type=number],.qds-input[type=password],.qds-input[type=text]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]{-webkit-appearance:none;appearance:none;cursor:pointer;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qds-input[type=color]::-webkit-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]::-moz-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=color]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.qds-search-padding[data-size=large],.qds-input.qds-search-padding[data-size=small],.qds-input.qds-search-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-input-padding-horizontal))}.qds-input[data-size=large][type=file],.qds-input[data-size=small][type=file],.qds-input[data-size=standard][type=file]{height:auto}.qds-input.qds-padding[data-size=large],.qds-input.qds-padding[data-size=small],.qds-input.qds-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[data-size=large],.qds-input[data-size=small],.qds-input[data-size=standard]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline-end:var(--qds-control-input-padding-horizontal)}}}.qds-input{@-moz-document url-prefix(){&[type=number]{appearance:none}}}";
+const inputCss = ":host([hidden]){display:none!important}:host{display:inline-block}@-moz-document url-prefix(){[type=date]~.qds-icon-container,[type=datetime-local]~.qds-icon-container,[type=month]~.qds-icon-container,[type=time]~.qds-icon-container,[type=week]~.qds-icon-container{display:none}}.qds-container,.qds-input{max-width:inherit;width:inherit}.qds-container{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:\"c\"}.qds-icon{--qds-theme-interactive-background-hover:none;--qds-theme-interactive-background-pressed:none;--qds-control-small-height:var(--qds-control-small-icon-size);flex-shrink:0}.qds-icon-container,.qds-input{grid-area:c}.qds-icon-container{align-items:center;display:flex;justify-content:center;justify-self:end;padding-inline-end:var(--qds-control-input-padding-horizontal)}.qds-icon-container.no-padding{padding-inline-end:0}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:c;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-control-input-focus-border-width) solid var(--qds-theme-control-input-focus-border);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}[data-size=small]{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.qds-icon[data-size=small]{--qds-experimental-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small]~.qds-icon-container{gap:var(--qds-control-small-gap-internal);margin-inline-start:var(--qds-control-small-gap-internal)}.qds-password-padding[data-size=small],[data-size=small][type=date],[data-size=small][type=datetime-local],[data-size=small][type=email],[data-size=small][type=month],[data-size=small][type=tel],[data-size=small][type=time],[data-size=small][type=url],[data-size=small][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-small-height))}[data-size=small][type=file]::file-selector-button{font:var(--qds-control-small-text);height:var(--qds-control-small-height);margin-inline-end:var(--qds-control-small-gap-siblings-related);padding-inline:var(--qds-control-button-small-padding-horizontal)}[data-size=small][type=number]::-webkit-inner-spin-button,[data-size=small][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-small-gap-internal)}[data-size=small][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-small-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-small-gap-internal))}[data-size=standard]{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{--qds-experimental-icon-click-target-size:var(\n      --qds-control-standard-height\n    );height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard]~.qds-icon-container{gap:var(--qds-control-standard-gap-internal);margin-inline-start:var(--qds-control-standard-gap-internal)}.qds-password-padding[data-size=standard],[data-size=standard][type=date],[data-size=standard][type=datetime-local],[data-size=standard][type=email],[data-size=standard][type=month],[data-size=standard][type=tel],[data-size=standard][type=time],[data-size=standard][type=url],[data-size=standard][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-height))}[data-size=standard][type=file]::file-selector-button{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height);margin-inline-end:var(--qds-control-standard-gap-siblings-related);padding-inline:var(--qds-control-button-standard-padding-horizontal)}[data-size=standard][type=number]::-webkit-inner-spin-button,[data-size=standard][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-standard-gap-internal)}[data-size=standard][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-standard-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-gap-internal))}[data-size=large]{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.qds-icon[data-size=large]{--qds-experimental-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large]~.qds-icon-container{gap:var(--qds-control-large-gap-internal);margin-inline-start:var(--qds-control-large-gap-internal)}.qds-password-padding[data-size=large],[data-size=large][type=date],[data-size=large][type=datetime-local],[data-size=large][type=email],[data-size=large][type=month],[data-size=large][type=tel],[data-size=large][type=time],[data-size=large][type=url],[data-size=large][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-large-height))}[data-size=large][type=file]::file-selector-button{font:var(--qds-control-large-text);height:var(--qds-control-large-height);margin-inline-end:var(--qds-control-large-gap-siblings-related);padding-inline:var(--qds-control-button-large-padding-horizontal)}[data-size=large][type=number]::-webkit-inner-spin-button,[data-size=large][type=number]::-webkit-outer-spin-button{margin-inline-start:var(--qds-control-large-gap-internal)}[data-size=large][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-large-icon-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-large-gap-internal))}.qds-input{-webkit-appearance:textfield;appearance:textfield;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);box-sizing:border-box;color:var(--qds-theme-control-text-standard);grid-area:c;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input.qds-hide~.qds-icon-container{display:none}.qds-input:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input:focus-visible{outline:none}.qds-input:focus-visible~.qds-focus-ring{visibility:visible}.qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-input:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-input::-webkit-search-cancel-button,.qds-input:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week])::-webkit-calendar-picker-indicator{cursor:pointer;display:none}.qds-input[type=file]{padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=file]::file-selector-button{background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard)}.qds-input[type=file]::file-selector-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=file]::file-selector-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input[type=color],.qds-input[type=number]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]{-webkit-appearance:none;appearance:none;cursor:pointer;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qds-input[type=color]::-webkit-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]::-moz-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=color]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.qds-search-padding[data-size=large],.qds-input.qds-search-padding[data-size=small],.qds-input.qds-search-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-input-padding-horizontal))}.qds-input[data-size=large][type=file],.qds-input[data-size=small][type=file],.qds-input[data-size=standard][type=file]{height:auto}.qds-input.qds-padding[data-size=large],.qds-input.qds-padding[data-size=small],.qds-input.qds-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[data-size=large],.qds-input[data-size=small],.qds-input[data-size=standard]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline-end:var(--qds-control-input-padding-horizontal)}}}.qds-input{@-moz-document url-prefix(){&[type=number]{appearance:none}}}";
 const QdsInputStyle0 = inputCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -29,7 +29,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Input_instances, _Input_inheritedAttributes, _Input_input, _Input_computedDisabled_get, _Input_computedIconName_get, _Input_computedSize_get, _Input_computedValue_get, _Input_hasIcon_get, _Input_hasInteractiveIcon_get, _Input_ref, _Input_getFiles, _Input_onBlur, _Input_onCancel, _Input_onChange, _Input_onClear, _Input_onFocus, _Input_onInput, _Input_defineGetter;
+var _Input_instances, _Input_inheritedAttributes, _Input_input, _Input_computedDisabled_get, _Input_computedIconName_get, _Input_computedSize_get, _Input_computedValue_get, _Input_hasIcon_get, _Input_hasInteractiveIcon_get, _Input_iconClickHandler_get, _Input_computedType_get, _Input_computedAriaLabel_get, _Input_togglePasswordVisibility, _Input_ref, _Input_getFiles, _Input_onBlur, _Input_onCancel, _Input_onChange, _Input_onClear, _Input_onFocus, _Input_onInput, _Input_defineGetter;
 const Input = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -147,6 +147,7 @@ const Input = class {
          * @webnative
          */
         this.willValidate = false;
+        this.isPasswordVisible = false;
         _Input_inheritedAttributes.set(this, {});
         _Input_input.set(this, void 0);
         this.checkValidity = () => this.internals.checkValidity();
@@ -200,6 +201,11 @@ const Input = class {
             invariant(__classPrivateFieldGet(this, _Input_input, "f"));
             __classPrivateFieldGet(this, _Input_input, "f").showPicker();
         };
+        _Input_togglePasswordVisibility.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _Input_input, "f"));
+            this.isPasswordVisible = !this.isPasswordVisible;
+            __classPrivateFieldGet(this, _Input_input, "f").type = __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get);
+        });
         _Input_ref.set(this, (input) => {
             __classPrivateFieldSet(this, _Input_input, input, "f");
         });
@@ -284,8 +290,7 @@ const Input = class {
         __classPrivateFieldGet(this, _Input_input, "f").required = this.required ?? false;
         if (__classPrivateFieldGet(this, _Input_input, "f").step !== this.step && this.step !== undefined)
             __classPrivateFieldGet(this, _Input_input, "f").step = this.step.toString();
-        if (this.type !== undefined)
-            __classPrivateFieldGet(this, _Input_input, "f").type = this.type;
+        __classPrivateFieldGet(this, _Input_input, "f").type = __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get);
         // eslint-disable-next-line unicorn/no-null
         if (this.type !== 'file' && this.value != null)
             __classPrivateFieldGet(this, _Input_input, "f").value = this.value.toString();
@@ -329,20 +334,22 @@ const Input = class {
         const shouldShowSearchIcon = isSearchType && this.noIcon === false;
         const shouldHideIcon = !isSearchType && this.noIcon === true;
         const shouldRemoveSearchPadding = isSearchType && this.noIcon === true;
-        return (h("div", { key: '1896729930a4fad1d75e2ecb44fd73c450a046e9', class: "qds-container" }, h("input", { key: '496c8f82b467f762e869b4f9730806231f7cd6ad', accept: this.accept, autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
+        return (h("div", { key: '5336ee36ce01859982ca1c5af230dcea3200d57e', class: "qds-container" }, h("input", { key: 'efc9f03bb3de1eb85e2b8abf42be5024918ae58e', accept: this.accept, autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: this.host.autofocus, capture: this.capture, class: {
                 'qds-search-padding': shouldRemoveSearchPadding,
                 'qds-input': true,
                 'qds-hide': shouldHideIcon,
                 'qds-padding': shouldHideIcon,
-            }, "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), 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: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: this.type, ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), h("div", { key: '4fb72502435349071f8c43222f51b34ede2151b9', class: "qds-focus-ring" }), __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) && (h("div", { key: '3ee0c7c55a1bb74eb802db9e11786d799c39bf52', class: {
+                'qds-password-padding': this.type === 'password' ||
+                    (this.isPasswordVisible && this.type === 'text'),
+            }, "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), 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: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get), ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), h("div", { key: 'a6ef2b4ac99c8f749d250d64fb2926c49f1171e7', class: "qds-focus-ring" }), __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) && (h("div", { key: '35cc748463e4ecb3e570dbaee66fb79c6c9c16a1', class: {
                 'qds-icon-container': true,
                 'no-padding': shouldRemoveSearchPadding,
-            } }, shouldShowClearButton && (h("qds-button", { key: 'ebb601275245ac08328e30a4b37f1c14f4b41ea0', class: {
+            } }, shouldShowClearButton && (h("qds-button", { key: '44897869098ae7b6af2481cf70cae3a0c5f50483', class: {
                 'qds-icon': true,
                 'qds-hide': !hasValue,
-            }, disabled: this.disabled, iconLibrary: "core", iconName: "clear", iconOnly: true, importance: "subdued", onClick: __classPrivateFieldGet(this, _Input_onClear, "f"), size: "small", text: "clear input" })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasIcon_get) && (h("qds-icon", { key: 'e343dcff629da268d611ee78a7a8ee90f957aa11', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasInteractiveIcon_get) && (h("qds-button", { key: '4963e7f006cc65254da5d52a2570aea71cf7048a', class: "qds-icon", disabled: this.disabled, iconLibrary: "core", iconName: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), iconOnly: true, importance: "subdued", onClick: this.showPicker, size: "small", text: this.type ?? '' })), shouldShowSearchIcon ? (h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) })) : (h("div", null))))));
+            }, disabled: this.disabled, iconLibrary: "core", iconName: "clear", iconOnly: true, importance: "subdued", onClick: __classPrivateFieldGet(this, _Input_onClear, "f"), size: "small", text: "clear input" })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasIcon_get) && (h("qds-icon", { key: 'd95ee02b5ffd10d2252781658ad48cb3770310e7', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasInteractiveIcon_get) && (h("qds-button", { key: '068999de69e003f3998e296f268ff730b5e38573', class: "qds-icon", disabled: this.disabled, iconLibrary: "core", iconName: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), iconOnly: true, importance: "subdued", onClick: __classPrivateFieldGet(this, _Input_instances, "a", _Input_iconClickHandler_get), size: "small", text: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedAriaLabel_get) })), shouldShowSearchIcon ? (h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) })) : (h("div", null))))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -364,9 +371,13 @@ const Input = class {
         "value": ["validationChanged", "valueChanged"]
     }; }
 };
-_Input_inheritedAttributes = new WeakMap(), _Input_input = new WeakMap(), _Input_ref = new WeakMap(), _Input_getFiles = new WeakMap(), _Input_onBlur = new WeakMap(), _Input_onCancel = new WeakMap(), _Input_onChange = new WeakMap(), _Input_onClear = new WeakMap(), _Input_onFocus = new WeakMap(), _Input_onInput = new WeakMap(), _Input_instances = new WeakSet(), _Input_computedDisabled_get = function _Input_computedDisabled_get() {
+_Input_inheritedAttributes = new WeakMap(), _Input_input = new WeakMap(), _Input_togglePasswordVisibility = new WeakMap(), _Input_ref = new WeakMap(), _Input_getFiles = new WeakMap(), _Input_onBlur = new WeakMap(), _Input_onCancel = new WeakMap(), _Input_onChange = new WeakMap(), _Input_onClear = new WeakMap(), _Input_onFocus = new WeakMap(), _Input_onInput = new WeakMap(), _Input_instances = new WeakSet(), _Input_computedDisabled_get = function _Input_computedDisabled_get() {
     return this.host.matches(':disabled') || (this.disabled ?? false);
 }, _Input_computedIconName_get = function _Input_computedIconName_get() {
+    if (this.type === 'password')
+        return this.isPasswordVisible
+            ? 'input-password-hide'
+            : 'input-password-show';
     switch (this.type) {
         case 'date':
         case 'datetime-local':
@@ -404,7 +415,21 @@ _Input_inheritedAttributes = new WeakMap(), _Input_input = new WeakMap(), _Input
         ['email', 'tel', 'url'].includes(this.type));
 }, _Input_hasInteractiveIcon_get = function _Input_hasInteractiveIcon_get() {
     return (typeof this.type === 'string' &&
-        ['month', 'time', 'date', 'datetime-local', 'week'].includes(this.type));
+        ['month', 'time', 'date', 'datetime-local', 'week', 'password'].includes(this.type));
+}, _Input_iconClickHandler_get = function _Input_iconClickHandler_get() {
+    return this.type === 'password'
+        ? __classPrivateFieldGet(this, _Input_togglePasswordVisibility, "f")
+        : this.showPicker;
+}, _Input_computedType_get = function _Input_computedType_get() {
+    return this.type === 'password' && this.isPasswordVisible
+        ? 'text'
+        : (this.type ?? 'text');
+}, _Input_computedAriaLabel_get = function _Input_computedAriaLabel_get() {
+    return this.type === 'password'
+        ? this.isPasswordVisible
+            ? 'Hide password'
+            : 'Show password'
+        : (this.type ?? '');
 }, _Input_defineGetter = function _Input_defineGetter(p, get) {
     Object.defineProperty(this.host, p, { enumerable: true, get });
 };

package/dist/esm/qds-input.entry.js.map

@@ -1 +1 @@
-{"file":"qds-input.entry.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,+9TAA+9T,CAAC;AACj/T,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA+Da,KAAK;IANlB;;;;;;;;;;;;;;;;;;;;;QAa0B,WAAM,GAAa,KAAK,CAAA;;;;;;;;;QAUxB,SAAI,GAAU,UAAU,CAAA;;;;;;;;QA0FxB,UAAK,GAA8B,IAAI,CAAA;;;;;;;;;;;;;;;;;;QAmBvC,SAAI,GAAsC,IAAI,CAAA;;;;;;;;;;QAoB9C,WAAM,GAC5B,EAAgC,CAAA;;;;;;;;QA8I3B,uBAAkB,GAA2C,IAAI,CAAA;;;;;;;;QAWjE,iBAAY,GAAqC,IAAI,CAAA;;;;;;;;QAWrD,mBAAc,GAAuC,IAAI,CAAA;;;;;;;;QAgEhD,sBAAiB,GAA0C,EAAE,CAAA;;;;;;;;;QAUrD,aAAQ,GAAiC,WAAW,CAAA;;;;;;;;QAgBpD,iBAAY,GAAqC,KAAK,CAAA;QAwC9E,qCAAmC,EAAE,EAAA;QAErC,+BAAyB;QAuSlB,kBAAa,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEzB,mBAAc,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAE1B,sBAAiB,GAA0C,CAAC,KAAK;YACtE,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;YACpC,IAAI,KAAK;gBACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,uBAAA,IAAI,oBAAO,CAAC,CAAA;;gBAC/D,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;SAChD,CAAA;QAEM,WAAM,GAA+B;YAC1C,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,MAAM,EAAE,CAAA;SACrB,CAAA;QAEM,0BAAqB,GAC1B;YACE,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,OAAO,uBAAA,IAAI,oBAAO,CAAC,kBAAkB,CAAA;SACtC,CAAA;QAEI,sBAAiB,GAA6C;YACnE,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,OAAO,uBAAA,IAAI,oBAAO,CAAC,cAAc,CAAA;SAClC,CAAA;QAEM,oBAAe,GAA2C;YAC/D,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,OAAO,uBAAA,IAAI,oBAAO,CAAC,YAAY,CAAA;SAChC,CAAA;QAEM,iBAAY,GAAG,CACpB,WAAmB,EACnB,KAAa,EACb,GAAW,EACX,aAA6B;YAE7B,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,CAAC,CAAA;YAEhE,IAAI,IAAI,CAAC,KAAK,KAAK,uBAAA,IAAI,oBAAO,CAAC,KAAK,EAAE;gBACpC,IAAI,CAAC,KAAK,GAAG,uBAAA,IAAI,oBAAO,CAAC,KAAK,CAAA;gBAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;gBACxB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;aAC1B;SACF,CAAA;QAEM,sBAAiB,GAA0C,CAChE,KAAK,EACL,GAAG,EACH,SAAS;YAET,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAA;SACrD,CAAA;QAEM,aAAQ,GAAiC,CAAC,CAAC;YAChD,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;SACxB,CAAA;QAEM,WAAM,GAA+B,CAAC,CAAC;YAC5C,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;SACtB,CAAA;QAEM,eAAU,GAAmC;YAClD,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,UAAU,EAAE,CAAA;SACzB,CAAA;QAEQ,qBAAO,CAAC,KAAwB;YACvC,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,0BAA6C;YACpD,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,OAAO,uBAAA,IAAI,oBAAO,CAAC,KAAK,CAAA;SACzB,EAAA;QAEQ,wBAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,0BAAY;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,EAAA;QAEQ,0BAAY;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,EAAA;QAEQ,yBAAW;YAClB,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,uBAAA,IAAI,oBAAO,CAAC,KAAK,GAAG,EAAE,CAAA;YACtB,uBAAA,IAAI,sBAAS,MAAb,IAAI,EAAU,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC,CAAA;SACvE,EAAA;QAEQ,yBAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,yBAAW,CAAC,KAAiB;YACpC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YAEtB,IAAI,CAAC,KAAK,GAAG,uBAAA,IAAI,oBAAO,CAAC,KAAK,CAAA;YAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;KAKF;IA5WW,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,qDAAkB;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KAC7D;IAGS,SAAS,CAAC,KAAoB;QACtC,IAAI,uBAAA,IAAI,qDAAkB,EAAE;YAC1B,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;IAGS,eAAe;QACvB,IAAI,uBAAA,IAAI,qDAAkB;;YAExB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;;YAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,kDAAe,CAAC,CAAA;KACtD;IAGS,yBAAyB;QACjC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;QAEtB,uBAAA,IAAI,oBAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAA;KACzD;IAGS,mBAAmB;QAC3B,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;QAEtB,uBAAA,IAAI,oBAAO,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;KAC7C;IAGS,qBAAqB;QAC7B,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;QAEtB,uBAAA,IAAI,oBAAO,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAA;KACjD;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ;YACX,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW,CAAA;KAC3E;IAWS,iBAAiB;QACzB,IAAI,CAAC,uBAAA,IAAI,oBAAO;YAAE,OAAM;QAExB,IAAI,uBAAA,IAAI,oBAAO,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YACxD,uBAAA,IAAI,oBAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACvC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,uBAAA,IAAI,oBAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QACxE,IAAI,uBAAA,IAAI,oBAAO,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YACxD,uBAAA,IAAI,oBAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACvC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,uBAAA,IAAI,oBAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QACxE,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,uBAAA,IAAI,oBAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAClE,uBAAA,IAAI,oBAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;QAC7C,IAAI,uBAAA,IAAI,oBAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAC3D,uBAAA,IAAI,oBAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;QACzC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,uBAAA,IAAI,oBAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;;QAEzD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;YAC5C,uBAAA,IAAI,oBAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QAE3C,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAA,IAAI,oBAAO,CAAC,QAAQ,CAAA;QACtC,IAAI,KAAK;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAA,IAAI,oBAAO,CAAC,CAAA;;YAElE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,uBAAA,IAAI,oBAAO,CAAC,QAAQ,EACpB,uBAAA,IAAI,oBAAO,CAAC,iBAAiB,EAC7B,uBAAA,IAAI,oBAAO,CACZ,CAAA;KACJ;IAGS,YAAY;QACpB,IAAI,CAAC,uBAAA,IAAI,qDAAkB;YACzB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,kDAAe,CAAC,CAAA;KACnD;IAEM,iBAAiB;QACtB,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACrD,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACrE,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC7D,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QACD,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EAAe,OAAO,EAAE,uBAAA,IAAI,uBAAU,CAAC,CAAA;QAC3C,uBAAA,IAAI,6CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAEzD,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;QAC5D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAA;KAChE;IAEM,gBAAgB;QACrB,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;QAEtB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QACxB,IAAI,CAAC,YAAY,EAAE,CAAA;;;;QAInB,uBAAA,IAAI,oBAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,uBAAU,CAAC,CAAA;KACvD;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,oBAAO;YAAE,uBAAA,IAAI,oBAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,uBAAA,IAAI,uBAAU,CAAC,CAAA;KAC3E;IAEM,MAAM;QACX,MAAM,QAAQ,GACZ,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAA;QACtE,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAA;QAC3C,MAAM,qBAAqB,GAAG,YAAY,IAAI,QAAQ,CAAA;QACtD,MAAM,oBAAoB,GAAG,YAAY,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,CAAA;QAClE,MAAM,cAAc,GAAG,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAA;QAC5D,MAAM,yBAAyB,GAAG,YAAY,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAA;QAEtE,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EACxC,YAAY,EAAE,IAAI,CAAC,YAAY;;YAE/B,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE;gBACL,oBAAoB,EAAE,yBAAyB;gBAC/C,WAAW,EAAE,IAAI;gBACjB,UAAU,EAAE,cAAc;gBAC1B,aAAa,EAAE,cAAc;aAC9B,eACU,uBAAA,IAAI,iDAAc,EAC7B,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,uBAAA,IAAI,qBAAQ,EACpB,QAAQ,EAAE,uBAAA,IAAI,uBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,sBAAS,EACtB,OAAO,EAAE,uBAAA,IAAI,sBAAS,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,uBAAA,IAAI,kBAAK,EACd,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,uBAAA,IAAI,qDAAkB,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5D,IAAI,EAAE,IAAI,CAAC,IAAI,KAEX,uBAAA,IAAI,kCAAqB,GAC7B,EACF,4DAAK,KAAK,EAAC,gBAAgB,GAAG,EAC7B,uBAAA,IAAI,qDAAkB,KACrB,4DACE,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,YAAY,EAAE,yBAAyB;aACxC,IAEA,qBAAqB,KACpB,mEACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,CAAC,QAAQ;aACtB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAC,MAAM,EAClB,QAAQ,EAAC,OAAO,EAChB,QAAQ,QACR,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,uBAAA,IAAI,sBAAS,EACtB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,aAAa,GAClB,CACH,EACA,uBAAA,IAAI,4CAAS,KACZ,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,iDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,uBAAA,IAAI,qDAAkB,GAC5B,CACH,EACA,uBAAA,IAAI,uDAAoB,KACvB,mEACE,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAC,MAAM,EAClB,QAAQ,EAAE,uBAAA,IAAI,qDAAkB,EAChC,QAAQ,QACR,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GACrB,CACH,EACA,oBAAoB,IACnB,+BACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,iDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,uBAAA,IAAI,qDAAkB,GAC5B,KAEF,cAAO,CACR,CACG,CACP,CACG,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;IAlSC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAA;AACnE,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,MAAM,CAAC;QACZ,KAAK,gBAAgB,CAAC;QACtB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,CAAC;QACb,KAAK,QAAQ,CAAC;QACd,KAAK,KAAK,CAAC;QACX,KAAK,MAAM,CAAC;QACZ,KAAK,KAAK,CAAC;QACX,KAAK,MAAM,EAAE;YACX,OAAO,SAAS,IAAI,CAAC,IAAI,EAAE,CAAA;SAC5B;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;;IAEhE,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAA;AACrD,CAAC;IAGC,QACE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC7B,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAC5C;AACH,CAAC;IAGC,QACE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC7B,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EACxE;AACH,CAAC,qDA4Wa,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;","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@-moz-document url-prefix() {\n  [type='date'],\n  [type='datetime-local'],\n  [type='month'],\n  [type='time'],\n  [type='week'] {\n    ~ .qds-icon-container {\n      display: none;\n    }\n  }\n}\n\n.qds-container,\n.qds-input {\n  max-width: inherit;\n  width: inherit;\n}\n\n.qds-container {\n  align-content: flex-start;\n  align-items: center;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-icon {\n  --qds-theme-interactive-background-hover: none;\n  --qds-theme-interactive-background-pressed: none;\n  --qds-control-small-height: var(--qds-control-small-icon-size);\n\n  flex-shrink: 0;\n}\n\n.qds-input,\n.qds-icon-container {\n  grid-area: input;\n}\n\n.qds-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-self: end;\n  padding-inline-end: var(--qds-control-input-padding-horizontal);\n\n  &.no-padding {\n    padding-inline-end: 0;\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  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-small-gap-internal);\n    margin-inline-start: var(--qds-control-small-gap-internal);\n  }\n\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-small-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-small-text);\n    height: var(--qds-control-small-height);\n    margin-inline-end: var(--qds-control-small-gap-siblings-related);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n  }\n\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    margin-inline-start: var(--qds-control-small-gap-internal);\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-small-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-small-gap-internal)\n      );\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-standard-gap-internal);\n    margin-inline-start: var(--qds-control-standard-gap-internal);\n  }\n\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-standard-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-standard-text);\n    height: var(--qds-control-standard-height);\n    margin-inline-end: var(--qds-control-standard-gap-siblings-related);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n  }\n\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    margin-inline-start: var(--qds-control-standard-gap-internal);\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-standard-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-standard-gap-internal)\n      );\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-large-gap-internal);\n    margin-inline-start: var(--qds-control-large-gap-internal);\n  }\n\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-large-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-large-text);\n    height: var(--qds-control-large-height);\n    margin-inline-end: var(--qds-control-large-gap-siblings-related);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n  }\n\n  &[type='number'] {\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      margin-inline-start: var(--qds-control-large-gap-internal);\n    }\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-large-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-large-gap-internal)\n      );\n  }\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  &.qds-hide ~ .qds-icon-container {\n    display: none;\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n\n    ~ .qds-focus-ring {\n      visibility: visible;\n    }\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n\n  &:not(:focus):user-invalid {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &:is(\n      [type='date'],\n      [type='datetime-local'],\n      [type='month'],\n      [type='time'],\n      [type='week']\n    )::-webkit-calendar-picker-indicator,\n  &::-webkit-search-cancel-button {\n    cursor: pointer;\n    display: none;\n  }\n\n  &[type='file'] {\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::file-selector-button {\n      background-color: transparent;\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n      color: var(--qds-theme-control-text-standard);\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n\n  &[type='text'],\n  &[type='password'],\n  &[type='color'],\n  &[type='number'] {\n    padding-inline: var(--qds-control-input-padding-horizontal);\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  &[data-size='small'],\n  &[data-size='standard'],\n  &[data-size='large'] {\n    &.qds-search-padding {\n      padding-inline: var(--qds-control-input-padding-horizontal)\n        calc(\n          var(--qds-control-small-height) +\n            var(--qds-control-input-padding-horizontal)\n        );\n    }\n\n    &[type='file'] {\n      height: initial;\n    }\n\n    &.qds-padding {\n      padding-inline: var(--qds-control-input-padding-horizontal);\n    }\n\n    @-moz-document url-prefix() {\n      &[type='date'],\n      &[type='datetime-local'],\n      &[type='month'],\n      &[type='week'],\n      &[type='time'] {\n        padding-inline-end: var(--qds-control-input-padding-horizontal);\n      }\n    }\n  }\n\n  @-moz-document url-prefix() {\n    &[type='number'] {\n      appearance: none;\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type Capture = '' | 'environment' | 'user'\n\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'file'\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   * Hide the input type's icon.\n   *\n   * > **_NOTE:_** Due to browser limitations, the icon may not be hidden in\n   * all browsers.\n   */\n  @Prop() public readonly noIcon?: boolean = false\n\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   * Defines the file types the `file` type input should accept. This is a\n   * comma-separated list of [unique file type specifiers][]. Because a given\n   * file type may be identified in more than one manner, it's useful to\n   * provide a thorough set of type specifiers when you files of a given format\n   * are needed.\n   *\n   * For instance, there are a number of ways Microsoft Word files can be\n   * identified, so a site that accepts Word files might use a `<qds-input>`\n   * like this:\n   *\n   * @example\n   * <qds-input\n   *   type=\"file\"\n   *   accept=\".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n   * ></qds-input>\n   *\n   * [unique file type specifiers]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file#unique_file_type_specifiers\n   *\n   * @webnative\n   */\n  @Prop() public readonly accept?: string\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   * Specifies that a new file should be captured and which device should be\n   * used to capture that new media of the type defined by `accept`.\n   *\n   * Values include `user`, `environment`, and `''`:\n   *\n   * - `user`: The user-facing camera and/or microphone should be used.\n   * - `environment`: The outward-facing camera and/or microphone should be\n   * used.\n   * - `''`: The implementation-specific capture state.\n   *\n   * @webnative\n   */\n  @Prop() public readonly capture?: Capture\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   * Returns a file list for a `file` type input.\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly files: HTMLInputElement['files'] = null\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  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\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   * For `email` inputs, specifies if multiple comma-separated email addresses\n   * can be entered. For `file` inputs, specifies if the user is allowed to\n   * select more than one file.\n   *\n   * Only valid for `email` or `file` 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   * 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-input>`\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-input>`.\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 the user cancels the file picker via the <kbd>Esc</kbd> key\n   * or the cancel button and when the user re-selects the same files that were\n   * previously selected.\n   */\n  @Event({ eventName: 'qdsCancel', cancelable: false })\n  private readonly cancelEmitter!: EventEmitter<void>\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 host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  #inheritedAttributes: Attributes = {}\n\n  #input?: HTMLInputElement\n\n  get #computedDisabled(): boolean {\n    return this.host.matches(':disabled') || (this.disabled ?? false)\n  }\n\n  get #computedIconName(): `input-${InputType}` | undefined {\n    switch (this.type) {\n      case 'date':\n      case 'datetime-local':\n      case 'email':\n      case 'month':\n      case 'search':\n      case 'tel':\n      case 'time':\n      case 'url':\n      case 'week': {\n        return `input-${this.type}`\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  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  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  get #hasIcon(): boolean {\n    return (\n      typeof this.type === 'string' &&\n      ['email', 'tel', 'url'].includes(this.type)\n    )\n  }\n\n  get #hasInteractiveIcon(): boolean {\n    return (\n      typeof this.type === 'string' &&\n      ['month', 'time', 'date', 'datetime-local', 'week'].includes(this.type)\n    )\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) event.stopImmediatePropagation()\n  }\n\n  @Listen('keydown')\n  protected onKeydown(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  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedDisabled)\n      // eslint-disable-next-line unicorn/no-null\n      this.internals.setFormValue(null)\n    else this.internals.setFormValue(this.#computedValue)\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    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\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    if (!this.#input) return\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.type !== 'file' && this.value != null)\n      this.#input.value = this.value.toString()\n\n    const { valid } = this.#input.validity\n    if (valid)\n      this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#input)\n    else\n      this.internals.setValidity(\n        this.#input.validity,\n        this.#input.validationMessage,\n        this.#input,\n      )\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (!this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('files', this.#getFiles)\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#input)\n\n    this.validationChanged()\n    this.valueChanged()\n    // FIXME: This event is supported by the native `<input>` element but not\n    // recognized by Stencil's type definitions, so it needs to be manually\n    // bound here.\n    this.#input.addEventListener('cancel', this.#onCancel)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#input) this.#input.removeEventListener('cancel', this.#onCancel)\n  }\n\n  public render() {\n    const hasValue =\n      this.value !== null && this.value !== undefined && this.value !== ''\n    const isSearchType = this.type === 'search'\n    const shouldShowClearButton = isSearchType && hasValue\n    const shouldShowSearchIcon = isSearchType && this.noIcon === false\n    const shouldHideIcon = !isSearchType && this.noIcon === true\n    const shouldRemoveSearchPadding = isSearchType && this.noIcon === true\n\n    return (\n      <div class=\"qds-container\">\n        <input\n          accept={this.accept}\n          autoCapitalize={this.host.autocapitalize}\n          autoComplete={this.autoComplete}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.host.autofocus}\n          capture={this.capture}\n          class={{\n            'qds-search-padding': shouldRemoveSearchPadding,\n            'qds-input': true,\n            'qds-hide': shouldHideIcon,\n            'qds-padding': shouldHideIcon,\n          }}\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.host.spellcheck}\n          step={this.step}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\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        {this.#computedIconName && (\n          <div\n            class={{\n              'qds-icon-container': true,\n              'no-padding': shouldRemoveSearchPadding,\n            }}\n          >\n            {shouldShowClearButton && (\n              <qds-button\n                class={{\n                  'qds-icon': true,\n                  'qds-hide': !hasValue,\n                }}\n                disabled={this.disabled}\n                iconLibrary=\"core\"\n                iconName=\"clear\"\n                iconOnly\n                importance=\"subdued\"\n                onClick={this.#onClear}\n                size=\"small\"\n                text=\"clear input\"\n              />\n            )}\n            {this.#hasIcon && (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name={this.#computedIconName}\n              />\n            )}\n            {this.#hasInteractiveIcon && (\n              <qds-button\n                class=\"qds-icon\"\n                disabled={this.disabled}\n                iconLibrary=\"core\"\n                iconName={this.#computedIconName}\n                iconOnly\n                importance=\"subdued\"\n                onClick={this.showPicker}\n                size=\"small\"\n                text={this.type ?? ''}\n              />\n            )}\n            {shouldShowSearchIcon ? (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name={this.#computedIconName}\n              />\n            ) : (\n              <div />\n            )}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n    invariant(this.#input)\n\n    this.#input.setCustomValidity(error)\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#input)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  public select: HTMLInputElement['select'] = () => {\n    invariant(this.#input)\n\n    this.#input.select()\n  }\n\n  public getSelectionDirection: () => HTMLInputElement['selectionDirection'] =\n    () => {\n      invariant(this.#input)\n\n      return this.#input.selectionDirection\n    }\n\n  public getSelectionStart: () => HTMLInputElement['selectionStart'] = () => {\n    invariant(this.#input)\n\n    return this.#input.selectionStart\n  }\n\n  public getSelectionEnd: () => HTMLInputElement['selectionEnd'] = () => {\n    invariant(this.#input)\n\n    return this.#input.selectionEnd\n  }\n\n  public 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  public 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  public stepDown: HTMLInputElement['stepDown'] = (n) => {\n    invariant(this.#input)\n\n    this.#input.stepDown(n)\n  }\n\n  public stepUp: HTMLInputElement['stepUp'] = (n) => {\n    invariant(this.#input)\n\n    this.#input.stepUp(n)\n  }\n\n  public showPicker: HTMLInputElement['showPicker'] = () => {\n    invariant(this.#input)\n\n    this.#input.showPicker()\n  }\n\n  readonly #ref = (input?: HTMLInputElement): void => {\n    this.#input = input\n  }\n\n  readonly #getFiles: () => HTMLInputElement['files'] = () => {\n    invariant(this.#input)\n\n    return this.#input.files\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onCancel = (): void => {\n    this.cancelEmitter.emit()\n  }\n\n  readonly #onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  readonly #onClear = (): void => {\n    invariant(this.#input)\n\n    this.#input.value = ''\n    this.#onInput(new InputEvent('input', { inputType: 'deleteContent' }))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  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  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}
+{"file":"qds-input.entry.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@-moz-document url-prefix() {\n  [type='date'],\n  [type='datetime-local'],\n  [type='month'],\n  [type='time'],\n  [type='week'] {\n    ~ .qds-icon-container {\n      display: none;\n    }\n  }\n}\n\n.qds-container,\n.qds-input {\n  max-width: inherit;\n  width: inherit;\n}\n\n.qds-container {\n  align-content: flex-start;\n  align-items: center;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-areas: 'input';\n}\n\n.qds-icon {\n  --qds-theme-interactive-background-hover: none;\n  --qds-theme-interactive-background-pressed: none;\n  --qds-control-small-height: var(--qds-control-small-icon-size);\n\n  flex-shrink: 0;\n}\n\n.qds-input,\n.qds-icon-container {\n  grid-area: input;\n}\n\n.qds-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-self: end;\n  padding-inline-end: var(--qds-control-input-padding-horizontal);\n\n  &.no-padding {\n    padding-inline-end: 0;\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  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-small-gap-internal);\n    margin-inline-start: var(--qds-control-small-gap-internal);\n  }\n\n  &.qds-password-padding,\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-small-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-small-text);\n    height: var(--qds-control-small-height);\n    margin-inline-end: var(--qds-control-small-gap-siblings-related);\n    padding-inline: var(--qds-control-button-small-padding-horizontal);\n  }\n\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    margin-inline-start: var(--qds-control-small-gap-internal);\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-small-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-small-gap-internal)\n      );\n  }\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(\n      --qds-control-standard-height\n    );\n\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-standard-gap-internal);\n    margin-inline-start: var(--qds-control-standard-gap-internal);\n  }\n\n  &.qds-password-padding,\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-standard-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-standard-text);\n    height: var(--qds-control-standard-height);\n    margin-inline-end: var(--qds-control-standard-gap-siblings-related);\n    padding-inline: var(--qds-control-button-standard-padding-horizontal);\n  }\n\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    margin-inline-start: var(--qds-control-standard-gap-internal);\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-standard-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-standard-gap-internal)\n      );\n  }\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n\n  &.qds-icon {\n    --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  & ~ .qds-icon-container {\n    gap: var(--qds-control-large-gap-internal);\n    margin-inline-start: var(--qds-control-large-gap-internal);\n  }\n\n  &.qds-password-padding,\n  &[type='date'],\n  &[type='datetime-local'],\n  &[type='email'],\n  &[type='month'],\n  &[type='time'],\n  &[type='url'],\n  &[type='tel'],\n  &[type='week'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-large-height)\n      );\n  }\n\n  &[type='file']::file-selector-button {\n    font: var(--qds-control-large-text);\n    height: var(--qds-control-large-height);\n    margin-inline-end: var(--qds-control-large-gap-siblings-related);\n    padding-inline: var(--qds-control-button-large-padding-horizontal);\n  }\n\n  &[type='number'] {\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      margin-inline-start: var(--qds-control-large-gap-internal);\n    }\n  }\n\n  &[type='search'] {\n    padding-inline: var(--qds-control-input-padding-horizontal)\n      calc(\n        var(--qds-control-small-height) + var(--qds-control-large-icon-size) +\n          var(--qds-control-input-padding-horizontal) +\n          var(--qds-control-large-gap-internal)\n      );\n  }\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  &.qds-hide ~ .qds-icon-container {\n    display: none;\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n\n    ~ .qds-focus-ring {\n      visibility: visible;\n    }\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n\n  &:not(:focus):user-invalid {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &:is(\n      [type='date'],\n      [type='datetime-local'],\n      [type='month'],\n      [type='time'],\n      [type='week']\n    )::-webkit-calendar-picker-indicator,\n  &::-webkit-search-cancel-button {\n    cursor: pointer;\n    display: none;\n  }\n\n  &[type='file'] {\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::file-selector-button {\n      background-color: transparent;\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n      color: var(--qds-theme-control-text-standard);\n\n      &:hover {\n        background-color: var(--qds-theme-interactive-background-hover);\n      }\n\n      &:active {\n        background-color: var(--qds-theme-interactive-background-pressed);\n      }\n    }\n  }\n\n  &[type='color'],\n  &[type='number'] {\n    padding-inline: var(--qds-control-input-padding-horizontal);\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  &[data-size='small'],\n  &[data-size='standard'],\n  &[data-size='large'] {\n    &.qds-search-padding {\n      padding-inline: var(--qds-control-input-padding-horizontal)\n        calc(\n          var(--qds-control-small-height) +\n            var(--qds-control-input-padding-horizontal)\n        );\n    }\n\n    &[type='file'] {\n      height: initial;\n    }\n\n    &.qds-padding {\n      padding-inline: var(--qds-control-input-padding-horizontal);\n    }\n\n    @-moz-document url-prefix() {\n      &[type='date'],\n      &[type='datetime-local'],\n      &[type='month'],\n      &[type='week'],\n      &[type='time'] {\n        padding-inline-end: var(--qds-control-input-padding-horizontal);\n      }\n    }\n  }\n\n  @-moz-document url-prefix() {\n    &[type='number'] {\n      appearance: none;\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type Capture = '' | 'environment' | 'user'\n\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'file'\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   * Hide the input type's icon.\n   *\n   * > **_NOTE:_** Due to browser limitations, the icon may not be hidden in\n   * all browsers.\n   */\n  @Prop() public readonly noIcon?: boolean = false\n\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   * Defines the file types the `file` type input should accept. This is a\n   * comma-separated list of [unique file type specifiers][]. Because a given\n   * file type may be identified in more than one manner, it's useful to\n   * provide a thorough set of type specifiers when you files of a given format\n   * are needed.\n   *\n   * For instance, there are a number of ways Microsoft Word files can be\n   * identified, so a site that accepts Word files might use a `<qds-input>`\n   * like this:\n   *\n   * @example\n   * <qds-input\n   *   type=\"file\"\n   *   accept=\".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n   * ></qds-input>\n   *\n   * [unique file type specifiers]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file#unique_file_type_specifiers\n   *\n   * @webnative\n   */\n  @Prop() public readonly accept?: string\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   * Specifies that a new file should be captured and which device should be\n   * used to capture that new media of the type defined by `accept`.\n   *\n   * Values include `user`, `environment`, and `''`:\n   *\n   * - `user`: The user-facing camera and/or microphone should be used.\n   * - `environment`: The outward-facing camera and/or microphone should be\n   * used.\n   * - `''`: The implementation-specific capture state.\n   *\n   * @webnative\n   */\n  @Prop() public readonly capture?: Capture\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   * Returns a file list for a `file` type input.\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly files: HTMLInputElement['files'] = null\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  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\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   * For `email` inputs, specifies if multiple comma-separated email addresses\n   * can be entered. For `file` inputs, specifies if the user is allowed to\n   * select more than one file.\n   *\n   * Only valid for `email` or `file` 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   * 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-input>`\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-input>`.\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 the user cancels the file picker via the <kbd>Esc</kbd> key\n   * or the cancel button and when the user re-selects the same files that were\n   * previously selected.\n   */\n  @Event({ eventName: 'qdsCancel', cancelable: false })\n  private readonly cancelEmitter!: EventEmitter<void>\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 host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  @State() private isPasswordVisible = false\n\n  #inheritedAttributes: Attributes = {}\n\n  #input?: HTMLInputElement\n\n  get #computedDisabled(): boolean {\n    return this.host.matches(':disabled') || (this.disabled ?? false)\n  }\n\n  get #computedIconName():\n    | `input-${InputType}`\n    | `input-password-hide`\n    | `input-password-show`\n    | undefined {\n    if (this.type === 'password')\n      return this.isPasswordVisible\n        ? 'input-password-hide'\n        : 'input-password-show'\n\n    switch (this.type) {\n      case 'date':\n      case 'datetime-local':\n      case 'email':\n      case 'month':\n      case 'search':\n      case 'tel':\n      case 'time':\n      case 'url':\n      case 'week': {\n        return `input-${this.type}`\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  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  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  get #hasIcon(): boolean {\n    return (\n      typeof this.type === 'string' &&\n      ['email', 'tel', 'url'].includes(this.type)\n    )\n  }\n\n  get #hasInteractiveIcon(): boolean {\n    return (\n      typeof this.type === 'string' &&\n      ['month', 'time', 'date', 'datetime-local', 'week', 'password'].includes(\n        this.type,\n      )\n    )\n  }\n\n  get #iconClickHandler(): () => void {\n    return this.type === 'password'\n      ? this.#togglePasswordVisibility\n      : this.showPicker\n  }\n\n  get #computedType(): InputType {\n    return this.type === 'password' && this.isPasswordVisible\n      ? 'text'\n      : (this.type ?? 'text')\n  }\n\n  get #computedAriaLabel(): string {\n    return this.type === 'password'\n      ? this.isPasswordVisible\n        ? 'Hide password'\n        : 'Show password'\n      : (this.type ?? '')\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) event.stopImmediatePropagation()\n  }\n\n  @Listen('keydown')\n  protected onKeydown(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  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedDisabled)\n      // eslint-disable-next-line unicorn/no-null\n      this.internals.setFormValue(null)\n    else this.internals.setFormValue(this.#computedValue)\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    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\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    if (!this.#input) return\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    this.#input.type = this.#computedType\n\n    // eslint-disable-next-line unicorn/no-null\n    if (this.type !== 'file' && this.value != null)\n      this.#input.value = this.value.toString()\n\n    const { valid } = this.#input.validity\n    if (valid)\n      this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#input)\n    else\n      this.internals.setValidity(\n        this.#input.validity,\n        this.#input.validationMessage,\n        this.#input,\n      )\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (!this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n  }\n\n  public componentWillLoad(): void {\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('files', this.#getFiles)\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#input)\n\n    this.validationChanged()\n    this.valueChanged()\n    // FIXME: This event is supported by the native `<input>` element but not\n    // recognized by Stencil's type definitions, so it needs to be manually\n    // bound here.\n    this.#input.addEventListener('cancel', this.#onCancel)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#input) this.#input.removeEventListener('cancel', this.#onCancel)\n  }\n\n  public render() {\n    const hasValue =\n      this.value !== null && this.value !== undefined && this.value !== ''\n    const isSearchType = this.type === 'search'\n    const shouldShowClearButton = isSearchType && hasValue\n    const shouldShowSearchIcon = isSearchType && this.noIcon === false\n    const shouldHideIcon = !isSearchType && this.noIcon === true\n    const shouldRemoveSearchPadding = isSearchType && this.noIcon === true\n\n    return (\n      <div class=\"qds-container\">\n        <input\n          accept={this.accept}\n          autoCapitalize={this.host.autocapitalize}\n          autoComplete={this.autoComplete}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.host.autofocus}\n          capture={this.capture}\n          class={{\n            'qds-search-padding': shouldRemoveSearchPadding,\n            'qds-input': true,\n            'qds-hide': shouldHideIcon,\n            'qds-padding': shouldHideIcon,\n            'qds-password-padding':\n              this.type === 'password' ||\n              (this.isPasswordVisible && this.type === 'text'),\n          }}\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.host.spellcheck}\n          step={this.step}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n          type={this.#computedType}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        />\n        <div class=\"qds-focus-ring\" />\n        {this.#computedIconName && (\n          <div\n            class={{\n              'qds-icon-container': true,\n              'no-padding': shouldRemoveSearchPadding,\n            }}\n          >\n            {shouldShowClearButton && (\n              <qds-button\n                class={{\n                  'qds-icon': true,\n                  'qds-hide': !hasValue,\n                }}\n                disabled={this.disabled}\n                iconLibrary=\"core\"\n                iconName=\"clear\"\n                iconOnly\n                importance=\"subdued\"\n                onClick={this.#onClear}\n                size=\"small\"\n                text=\"clear input\"\n              />\n            )}\n            {this.#hasIcon && (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name={this.#computedIconName}\n              />\n            )}\n            {this.#hasInteractiveIcon && (\n              <qds-button\n                class=\"qds-icon\"\n                disabled={this.disabled}\n                iconLibrary=\"core\"\n                iconName={this.#computedIconName}\n                iconOnly\n                importance=\"subdued\"\n                onClick={this.#iconClickHandler}\n                size=\"small\"\n                text={this.#computedAriaLabel}\n              />\n            )}\n            {shouldShowSearchIcon ? (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name={this.#computedIconName}\n              />\n            ) : (\n              <div />\n            )}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n    invariant(this.#input)\n\n    this.#input.setCustomValidity(error)\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#input)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  public select: HTMLInputElement['select'] = () => {\n    invariant(this.#input)\n\n    this.#input.select()\n  }\n\n  public getSelectionDirection: () => HTMLInputElement['selectionDirection'] =\n    () => {\n      invariant(this.#input)\n\n      return this.#input.selectionDirection\n    }\n\n  public getSelectionStart: () => HTMLInputElement['selectionStart'] = () => {\n    invariant(this.#input)\n\n    return this.#input.selectionStart\n  }\n\n  public getSelectionEnd: () => HTMLInputElement['selectionEnd'] = () => {\n    invariant(this.#input)\n\n    return this.#input.selectionEnd\n  }\n\n  public 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  public 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  public stepDown: HTMLInputElement['stepDown'] = (n) => {\n    invariant(this.#input)\n\n    this.#input.stepDown(n)\n  }\n\n  public stepUp: HTMLInputElement['stepUp'] = (n) => {\n    invariant(this.#input)\n\n    this.#input.stepUp(n)\n  }\n\n  public showPicker: HTMLInputElement['showPicker'] = () => {\n    invariant(this.#input)\n\n    this.#input.showPicker()\n  }\n\n  readonly #togglePasswordVisibility = (): void => {\n    invariant(this.#input)\n    this.isPasswordVisible = !this.isPasswordVisible\n\n    this.#input.type = this.#computedType\n  }\n\n  readonly #ref = (input?: HTMLInputElement): void => {\n    this.#input = input\n  }\n\n  readonly #getFiles: () => HTMLInputElement['files'] = () => {\n    invariant(this.#input)\n\n    return this.#input.files\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onCancel = (): void => {\n    this.cancelEmitter.emit()\n  }\n\n  readonly #onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  readonly #onClear = (): void => {\n    invariant(this.#input)\n\n    this.#input.value = ''\n    this.#onInput(new InputEvent('input', { inputType: 'deleteContent' }))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  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  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}