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

package/components/qds-input.js

@@ -3,16 +3,16 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-2806fee1.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-50f85f75.js';
 import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, i as inheritAriaAttributes } from './p-8abba29b.js';
 import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
-import { d as defineCustomElement$6 } from './p-3c48ff53.js';
-import { d as defineCustomElement$5 } from './p-fed0d11f.js';
-import { d as defineCustomElement$4 } from './p-adefd438.js';
-import { d as defineCustomElement$3 } from './p-ba880369.js';
-import { d as defineCustomElement$2 } from './p-c80f112a.js';
+import { d as defineCustomElement$6 } from './p-e22dd76d.js';
+import { d as defineCustomElement$5 } from './p-5570cc30.js';
+import { d as defineCustomElement$4 } from './p-b6c04008.js';
+import { d as defineCustomElement$3 } from './p-72c09714.js';
+import { d as defineCustomElement$2 } from './p-70d12c72.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
@@ -34,7 +34,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 = /*@__PURE__*/ proxyCustomElement(class Input extends H {
     constructor() {
         super();
@@ -148,6 +148,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
          * @webnative
          */
         this.willValidate = false;
+        this.isPasswordVisible = false;
         _Input_inheritedAttributes.set(this, {});
         _Input_input.set(this, void 0);
         this.checkValidity = () => this.internals.checkValidity();
@@ -201,6 +202,11 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
             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");
         });
@@ -285,8 +291,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         __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();
@@ -330,20 +335,22 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         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; }
@@ -395,7 +402,8 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         "validity": [16],
         "value": [1032],
         "willValidate": [4, "will-validate"],
-        "tabIndex": [32]
+        "tabIndex": [32],
+        "isPasswordVisible": [32]
     }, [[0, "click", "onClick"], [0, "keydown", "onKeydown"]], {
         "disabled": ["disabledChanged"],
         "selectionDirection": ["selectionDirectionChanged"],
@@ -412,9 +420,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         "type": ["validationChanged"],
         "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':
@@ -452,7 +464,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/components/qds-input.js.map

@@ -1 +1 @@
-{"file":"qds-input.js","mappings":"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","names":[],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n@-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.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,uiUAAuiU,CAAC;AACzjU,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;QAwC7D,sBAAiB,GAAG,KAAK,CAAA;QAE1C,qCAAmC,EAAE,EAAA;QAErC,+BAAyB;QA0UlB,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,0CAA4B;YACnC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;YACtB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAA;YAEhD,uBAAA,IAAI,oBAAO,CAAC,IAAI,GAAG,uBAAA,IAAI,iDAAc,CAAA;SACtC,EAAA;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;IAvXW,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,uBAAA,IAAI,oBAAO,CAAC,IAAI,GAAG,uBAAA,IAAI,iDAAc,CAAA;;QAGrC,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;gBAC7B,sBAAsB,EACpB,IAAI,CAAC,IAAI,KAAK,UAAU;qBACvB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;aACnD,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,uBAAA,IAAI,iDAAc,KAEpB,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,uBAAA,IAAI,qDAAkB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,uBAAA,IAAI,sDAAmB,GAC7B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArUC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAA;AACnE,CAAC;IAOC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;QAC1B,OAAO,IAAI,CAAC,iBAAiB;cACzB,qBAAqB;cACrB,qBAAqB,CAAA;IAE3B,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,EAAE,UAAU,CAAC,CAAC,QAAQ,CACtE,IAAI,CAAC,IAAI,CACV,EACF;AACH,CAAC;IAGC,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU;UAC3B,uBAAA,IAAI,uCAA0B;UAC9B,IAAI,CAAC,UAAU,CAAA;AACrB,CAAC;IAGC,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,iBAAiB;UACrD,MAAM;WACL,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,CAAA;AAC3B,CAAC;IAGC,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU;UAC3B,IAAI,CAAC,iBAAiB;cACpB,eAAe;cACf,eAAe;WAChB,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;AACvB,CAAC,qDAuXa,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  &.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}

package/components/qds-label.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { L as Label, d as defineCustomElement$1 } from './p-a020ece3.js';
+import { L as Label, d as defineCustomElement$1 } from './p-b5608061.js';
 
 const QdsLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/components/qds-list-item.js

@@ -3,12 +3,12 @@
  * 
  * SPDX-License-Identifier: Apache-2.0
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-2806fee1.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-50f85f75.js';
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './p-8abba29b.js';
-import { d as defineCustomElement$5 } from './p-688c90f6.js';
-import { d as defineCustomElement$4 } from './p-ba880369.js';
-import { d as defineCustomElement$3 } from './p-a020ece3.js';
-import { d as defineCustomElement$2 } from './p-c80f112a.js';
+import { d as defineCustomElement$5 } from './p-9ffb4b49.js';
+import { d as defineCustomElement$4 } from './p-72c09714.js';
+import { d as defineCustomElement$3 } from './p-b5608061.js';
+import { d as defineCustomElement$2 } from './p-70d12c72.js';
 
 const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;box-sizing:border-box;display:flex}.qds-list-action{pointer-events:none}.qds-indented-content{align-self:stretch;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-divider{border-block-end:var(--qds-list-border-width) solid var(--qds-theme-divider-standard)}.qds-icon{color:var(--qds-theme-text-standard)}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker)}.qds-list-item[data-size=small]{gap:var(--qds-list-item-small-gap-internal);padding-inline-start:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline-end:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{font-size:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-list-item-small-subtitle)}.qds-list-item[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);padding-inline-start:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline-end:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{font-size:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-list-item-standard-subtitle)}.qds-list-item[data-size=large]{gap:var(--qds-list-item-large-gap-internal);padding-inline-start:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline-end:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{font-size:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle{font:var(--qds-list-item-large-subtitle)}.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-list-item:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-list-item:has(input:focus-visible){outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size=small] .qds-title{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-title{font:var(--qds-list-item-large-title-emphasized)}:host(:last-of-type) .qds-divider{border-block-end:none}";
 const QdsListItemStyle0 = listItemCss;
@@ -92,10 +92,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends H {
                 'qds-checked': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedChecked_get),
             }, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get), role: "listitem" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).
             ,
-            ...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: '66b8c8d52826ea1b040677510c1ea25743f8b0e2', checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1 })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (h("qds-icon", { key: '3604e1d5a72df42062c7c5a03a05a9a1707cfadd', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) })), h("div", { key: '99cd3e6336faf58bd79eb3c7a6667a6a287d64a4', class: {
+            ...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: 'e009fe7c14014db5e9b15a193b72c6f772a89211', checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1, text: this.text, checkboxOnly: true })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (h("qds-icon", { key: '9067a11441139fe1f72f9c3e0eff6303e3075b94', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) })), h("div", { key: '509559713f04a4e512457c6e67f07726a9d8d71d', class: {
                 'qds-indented-content': true,
                 'qds-divider': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDivider_get) === 'indent',
-            } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '8daf63c28a4d387196dcc3b1cb60a8b4f0afdc56', "aria-hidden": "true", class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), h("label", { key: 'abd654bb49b8c2ed41233e4ebab6270d50da1da0', class: "qds-texts" }, h("input", { key: 'd7ce19ddee65f6a40bd0f2823fa84afdc7925857', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (h("div", { key: '0824029326ce58e80aa5b1f144b1827178c277f9', class: "qds-kicker" }, this.kicker)), h("div", { key: '2049720eabea49046fa13db72429fb1d574b125b', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { key: '9420a3edf55cea66b3432f64143b6676ce370a95', class: "qds-subtitle" }, this.subtitle))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (h("qds-icon", { key: '49afdc79bd2d18dac611bda6ebd72a8c8704382e', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))))
+            } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'df33c08dae14a2f1c96739f42f5a31a7102ff2d5', "aria-hidden": "true", class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), h("label", { key: '89b9b7abd196959444aa9a90dbab084e8fd619cb', class: "qds-texts" }, h("input", { key: '8653a0496fc8cedd98ae0b136573ddf9735dfa36', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (h("div", { key: '6551cfbecc9b5a7089a555f593ee00ea8bc5dd44', class: "qds-kicker" }, this.kicker)), h("div", { key: 'b3cf789a107852128c6e6d1b097c49f00b1c862c', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { key: '7765860d7e5d3615dc27d9e454956734ec53ac06', class: "qds-subtitle" }, this.subtitle))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (h("qds-icon", { key: '3d9a3f7b24f9629d09e2bd8cf0839c0f44f1aa38', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))))
         /* eslint-enable jsx-a11y/label-has-associated-control */
         );
     }