@spectrum-web-components/textfield 0.42.2 → 0.42.4

package/custom-elements.json

@@ -264,7 +264,7 @@
               "kind": "field",
               "name": "autocomplete",
               "type": {
-                "text": "| HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
+                "text": "| 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
               },
               "privacy": "public",
               "description": "What form of assistance should be provided when attempting to supply a value to the form control",
@@ -615,7 +615,7 @@
             {
               "name": "autocomplete",
               "type": {
-                "text": "| HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
+                "text": "| 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
               },
               "description": "What form of assistance should be provided when attempting to supply a value to the form control",
               "fieldName": "autocomplete"
@@ -977,7 +977,7 @@
               "kind": "field",
               "name": "autocomplete",
               "type": {
-                "text": "| HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
+                "text": "| 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
               },
               "privacy": "public",
               "description": "What form of assistance should be provided when attempting to supply a value to the form control",
@@ -1443,7 +1443,7 @@
             {
               "name": "autocomplete",
               "type": {
-                "text": "| HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
+                "text": "| 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'] | undefined"
               },
               "description": "What form of assistance should be provided when attempting to supply a value to the form control",
               "fieldName": "autocomplete",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/textfield",
-    "version": "0.42.2",
+    "version": "0.42.4",
     "publishConfig": {
         "access": "public"
     },
@@ -57,15 +57,15 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.42.2",
-        "@spectrum-web-components/help-text": "^0.42.2",
-        "@spectrum-web-components/icon": "^0.42.2",
-        "@spectrum-web-components/icons-ui": "^0.42.2",
-        "@spectrum-web-components/icons-workflow": "^0.42.2",
-        "@spectrum-web-components/shared": "^0.42.2"
+        "@spectrum-web-components/base": "^0.42.4",
+        "@spectrum-web-components/help-text": "^0.42.4",
+        "@spectrum-web-components/icon": "^0.42.4",
+        "@spectrum-web-components/icons-ui": "^0.42.4",
+        "@spectrum-web-components/icons-workflow": "^0.42.4",
+        "@spectrum-web-components/shared": "^0.42.4"
     },
     "devDependencies": {
-        "@spectrum-css/textfield": "^6.1.6"
+        "@spectrum-css/textfield": "^7.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -73,5 +73,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "e19af30387032608baaa88c6a17c2ee50103a7c5"
+    "gitHead": "4924ffd06681ced537edaed873a9ce8b42cf155c"
 }

package/src/Textfield.d.ts

@@ -3,7 +3,7 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 declare const textfieldTypes: readonly ["text", "url", "tel", "email", "password"];
-export declare type TextfieldType = typeof textfieldTypes[number];
+export type TextfieldType = typeof textfieldTypes[number];
 declare const TextfieldBase_base: typeof Focusable & {
     new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
     prototype: import("@spectrum-web-components/base").SizedElementInterface;
@@ -100,7 +100,7 @@ export declare class TextfieldBase extends TextfieldBase_base {
     /**
      * What form of assistance should be provided when attempting to supply a value to the form control
      */
-    autocomplete?: HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'];
+    autocomplete?: 'list' | 'none' | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'];
     get focusElement(): HTMLInputElement | HTMLTextAreaElement;
     /**
      * Sets the start and end positions of the current selection.

package/src/Textfield.dev.js

@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 import {
@@ -152,11 +151,11 @@ export class TextfieldBase extends ManageHelpText(
   get displayValue() {
     return this.value.toString();
   }
+  // prettier-ignore
   get renderMultiline() {
     return html`
             ${this.multiline && this.grows && this.rows === -1 ? html`
-                      <div id="sizer" class="input" aria-hidden="true">
-                          ${this.value}&#8203;
+                      <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
                       </div>
                   ` : nothing}
             <!-- @ts-ignore -->

package/src/Textfield.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Textfield.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n    SizedMixin(Focusable, {\n        noDefaultSize: true,\n    })\n) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @state()\n    protected appliedLabel?: string;\n\n    /**\n     * A regular expression outlining the keys that will be allowed to update the value of the form control.\n     */\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    /**\n     * @private\n     */\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input:not(#sizer)')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    /**\n     * Whether the `value` held by the form control is invalid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    /**\n     * A string applied via `aria-label` to the form control when a user visible label is not provided.\n     */\n    @property()\n    public label = '';\n\n    /**\n     * Name of the form control.\n     */\n    @property({ type: String, reflect: true })\n    public name: string | undefined;\n\n    /**\n     * Text that appears in the form control when it has no value set\n     */\n    @property()\n    public placeholder = '';\n\n    @state()\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    /**\n     * @private\n     * This binding allows for invalid value for `type` to still be reflected to the DOM\n     */\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    /**\n     * Pattern the `value` must match to be valid\n     */\n    @property()\n    public pattern?: string;\n\n    /**\n     * Whether a form control delivered with the `multiline` attribute will change size\n     * vertically to accomodate longer input\n     */\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    /**\n     * Defines the maximum string length that the user can enter\n     */\n    @property({ type: Number })\n    public maxlength = -1;\n\n    /**\n     * Defines the minimum string length that the user can enter\n     */\n    @property({ type: Number })\n    public minlength = -1;\n\n    /**\n     * Whether the form control should accept a value longer than one line\n     */\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    /**\n     * Whether a user can interact with the value of the form control\n     */\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    /**\n     * The specific number of rows the form control should provide in the user interface\n     */\n    @property({ type: Number })\n    public rows = -1;\n\n    /**\n     * Whether the `value` held by the form control is valid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    /**\n     * The value held by the form control\n     */\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    /**\n     * Whether to display the form control with no visible background\n     */\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    /**\n     * Whether the form control will be found to be invalid when it holds no `value`\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    /**\n     * What form of assistance should be provided when attempting to supply a value to the form control\n     */\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(_event: Event): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(_event: FocusEvent): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.multiline && this.grows && this.rows === -1\n                ? html`\n                      <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">\n                          ${this.value}&#8203;\n                      </div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                name=${ifDefined(this.name || undefined)}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                title=${this.invalid ? '' : nothing}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                name=${ifDefined(this.name || undefined)}\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                title=${this.invalid ? '' : nothing}\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length >= this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n    SizedMixin(Focusable, {\n        noDefaultSize: true,\n    })\n) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @state()\n    protected appliedLabel?: string;\n\n    /**\n     * A regular expression outlining the keys that will be allowed to update the value of the form control.\n     */\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    /**\n     * @private\n     */\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input:not(#sizer)')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    /**\n     * Whether the `value` held by the form control is invalid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    /**\n     * A string applied via `aria-label` to the form control when a user visible label is not provided.\n     */\n    @property()\n    public label = '';\n\n    /**\n     * Name of the form control.\n     */\n    @property({ type: String, reflect: true })\n    public name: string | undefined;\n\n    /**\n     * Text that appears in the form control when it has no value set\n     */\n    @property()\n    public placeholder = '';\n\n    @state()\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    /**\n     * @private\n     * This binding allows for invalid value for `type` to still be reflected to the DOM\n     */\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    /**\n     * Pattern the `value` must match to be valid\n     */\n    @property()\n    public pattern?: string;\n\n    /**\n     * Whether a form control delivered with the `multiline` attribute will change size\n     * vertically to accomodate longer input\n     */\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    /**\n     * Defines the maximum string length that the user can enter\n     */\n    @property({ type: Number })\n    public maxlength = -1;\n\n    /**\n     * Defines the minimum string length that the user can enter\n     */\n    @property({ type: Number })\n    public minlength = -1;\n\n    /**\n     * Whether the form control should accept a value longer than one line\n     */\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    /**\n     * Whether a user can interact with the value of the form control\n     */\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    /**\n     * The specific number of rows the form control should provide in the user interface\n     */\n    @property({ type: Number })\n    public rows = -1;\n\n    /**\n     * Whether the `value` held by the form control is valid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    /**\n     * The value held by the form control\n     */\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    /**\n     * Whether to display the form control with no visible background\n     */\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    /**\n     * Whether the form control will be found to be invalid when it holds no `value`\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    /**\n     * What form of assistance should be provided when attempting to supply a value to the form control\n     */\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(_event: Event): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(_event: FocusEvent): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    // prettier-ignore\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.multiline && this.grows && this.rows === -1\n                ? html`\n                      <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">${this.value}&#8203;\n                      </div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                name=${ifDefined(this.name || undefined)}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                title=${this.invalid ? '' : nothing}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                name=${ifDefined(this.name || undefined)}\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                title=${this.invalid ? '' : nothing}\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length >= this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/Textfield.js

@@ -7,8 +7,7 @@
                 ></sp-icon-checkmark100>
             `:o}get displayValue(){return this.value.toString()}get renderMultiline(){return s`
             ${this.multiline&&this.grows&&this.rows===-1?s`
-                      <div id="sizer" class="input" aria-hidden="true">
-                          ${this.value}&#8203;
+                      <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
                       </div>
                   `:o}
             <!-- @ts-ignore -->

package/src/Textfield.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Textfield.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n    SizedMixin(Focusable, {\n        noDefaultSize: true,\n    })\n) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @state()\n    protected appliedLabel?: string;\n\n    /**\n     * A regular expression outlining the keys that will be allowed to update the value of the form control.\n     */\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    /**\n     * @private\n     */\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input:not(#sizer)')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    /**\n     * Whether the `value` held by the form control is invalid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    /**\n     * A string applied via `aria-label` to the form control when a user visible label is not provided.\n     */\n    @property()\n    public label = '';\n\n    /**\n     * Name of the form control.\n     */\n    @property({ type: String, reflect: true })\n    public name: string | undefined;\n\n    /**\n     * Text that appears in the form control when it has no value set\n     */\n    @property()\n    public placeholder = '';\n\n    @state()\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    /**\n     * @private\n     * This binding allows for invalid value for `type` to still be reflected to the DOM\n     */\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    /**\n     * Pattern the `value` must match to be valid\n     */\n    @property()\n    public pattern?: string;\n\n    /**\n     * Whether a form control delivered with the `multiline` attribute will change size\n     * vertically to accomodate longer input\n     */\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    /**\n     * Defines the maximum string length that the user can enter\n     */\n    @property({ type: Number })\n    public maxlength = -1;\n\n    /**\n     * Defines the minimum string length that the user can enter\n     */\n    @property({ type: Number })\n    public minlength = -1;\n\n    /**\n     * Whether the form control should accept a value longer than one line\n     */\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    /**\n     * Whether a user can interact with the value of the form control\n     */\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    /**\n     * The specific number of rows the form control should provide in the user interface\n     */\n    @property({ type: Number })\n    public rows = -1;\n\n    /**\n     * Whether the `value` held by the form control is valid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    /**\n     * The value held by the form control\n     */\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    /**\n     * Whether to display the form control with no visible background\n     */\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    /**\n     * Whether the form control will be found to be invalid when it holds no `value`\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    /**\n     * What form of assistance should be provided when attempting to supply a value to the form control\n     */\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(_event: Event): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(_event: FocusEvent): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.multiline && this.grows && this.rows === -1\n                ? html`\n                      <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">\n                          ${this.value}&#8203;\n                      </div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                name=${ifDefined(this.name || undefined)}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                title=${this.invalid ? '' : nothing}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                name=${ifDefined(this.name || undefined)}\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                title=${this.invalid ? '' : nothing}\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length >= this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n    SizedMixin(Focusable, {\n        noDefaultSize: true,\n    })\n) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @state()\n    protected appliedLabel?: string;\n\n    /**\n     * A regular expression outlining the keys that will be allowed to update the value of the form control.\n     */\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    /**\n     * @private\n     */\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input:not(#sizer)')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    /**\n     * Whether the `value` held by the form control is invalid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    /**\n     * A string applied via `aria-label` to the form control when a user visible label is not provided.\n     */\n    @property()\n    public label = '';\n\n    /**\n     * Name of the form control.\n     */\n    @property({ type: String, reflect: true })\n    public name: string | undefined;\n\n    /**\n     * Text that appears in the form control when it has no value set\n     */\n    @property()\n    public placeholder = '';\n\n    @state()\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    /**\n     * @private\n     * This binding allows for invalid value for `type` to still be reflected to the DOM\n     */\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    /**\n     * Pattern the `value` must match to be valid\n     */\n    @property()\n    public pattern?: string;\n\n    /**\n     * Whether a form control delivered with the `multiline` attribute will change size\n     * vertically to accomodate longer input\n     */\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    /**\n     * Defines the maximum string length that the user can enter\n     */\n    @property({ type: Number })\n    public maxlength = -1;\n\n    /**\n     * Defines the minimum string length that the user can enter\n     */\n    @property({ type: Number })\n    public minlength = -1;\n\n    /**\n     * Whether the form control should accept a value longer than one line\n     */\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    /**\n     * Whether a user can interact with the value of the form control\n     */\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    /**\n     * The specific number of rows the form control should provide in the user interface\n     */\n    @property({ type: Number })\n    public rows = -1;\n\n    /**\n     * Whether the `value` held by the form control is valid.\n     */\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    /**\n     * The value held by the form control\n     */\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    /**\n     * Whether to display the form control with no visible background\n     */\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    /**\n     * Whether the form control will be found to be invalid when it holds no `value`\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    /**\n     * What form of assistance should be provided when attempting to supply a value to the form control\n     */\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | 'list'\n        | 'none'\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(_event: Event): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(_event: FocusEvent): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    // prettier-ignore\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.multiline && this.grows && this.rows === -1\n                ? html`\n                      <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">${this.value}&#8203;\n                      </div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                name=${ifDefined(this.name || undefined)}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                title=${this.invalid ? '' : nothing}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                name=${ifDefined(this.name || undefined)}\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label ||\n                this.appliedLabel ||\n                this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                title=${this.invalid ? '' : nothing}\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length >= this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"],
+  "mappings": "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",
   "names": ["html", "nothing", "SizedMixin", "ifDefined", "live", "property", "query", "state", "ManageHelpText", "Focusable", "textfieldStyles", "checkmarkStyles", "textfieldTypes", "val", "prev", "_a", "t", "value", "oldValue", "selectionStart", "selectionEnd", "selectionDirection", "_event", "nextSelectStart", "changedProperties", "validity", "__decorateClass"]
 }

package/src/spectrum-textfield.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-    :host{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);--spectrum-texfield-animation-duration:var(--spectrum-animation-duration-100);--spectrum-textfield-width:240px;--spectrum-textfield-min-width:var(--spectrum-text-field-minimum-width-multiplier);--spectrum-textfield-corner-radius:var(--spectrum-corner-radius-100);--spectrum-textfield-height:var(--spectrum-component-height-100);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-100);--spectrum-textfield-spacing-inline-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-textfield-spacing-block-start:var(--spectrum-component-top-to-text-100);--spectrum-textfield-spacing-block-end:var(--spectrum-component-bottom-to-text-100);--spectrum-textfield-spacing-block-quiet:var(--spectrum-field-edge-to-border-quiet);--spectrum-textfield-label-spacing-block:var(--spectrum-field-label-to-component);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-100);--spectrum-textfield-helptext-spacing-block:var(--spectrum-help-text-to-component);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-100);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-100);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--spectrum-field-edge-to-alert-icon-quiet);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--spectrum-field-edge-to-validation-icon-quiet);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-medium);--spectrum-textfield-font-family:var(--spectrum-sans-font-family-stack);--spectrum-textfield-font-weight:var(--spectrum-regular-font-weight);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-100);--spectrum-textfield-character-count-font-family:var(--spectrum-sans-font-family-stack);--spectrum-textfield-character-count-font-weight:var(--spectrum-regular-font-weight);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-inline:var(--spectrum-spacing-200);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-inline-side:var(--spectrum-side-label-character-count-to-field);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-medium);--spectrum-textfield-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-textfield-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-textfield-background-color:var(--spectrum-gray-50);--spectrum-textfield-text-color-default:var(--spectrum-neutral-content-color-default);--spectrum-textfield-text-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-textfield-text-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-textfield-text-color-focus-hover:var(--spectrum-neutral-content-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-textfield-text-color-readonly:var(--spectrum-neutral-content-color-default);--spectrum-textfield-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-textfield-border-color-disabled:var(--spectrum-disabled-border-color);--spectrum-textfield-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-textfield-border-color-invalid-default:var(--spectrum-negative-border-color-default);--spectrum-textfield-border-color-invalid-hover:var(--spectrum-negative-border-color-hover);--spectrum-textfield-border-color-invalid-focus:var(--spectrum-negative-border-color-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--spectrum-negative-border-color-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-textfield-icon-color-invalid:var(--spectrum-negative-visual-color);--spectrum-textfield-text-color-invalid:var(--spectrum-neutral-content-color-default);--spectrum-textfield-text-color-valid:var(--spectrum-neutral-content-color-default);--spectrum-textfield-icon-color-valid:var(--spectrum-positive-visual-color);--spectrum-textfield-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--spectrum-text-area-minimum-width);--spectrum-text-area-min-block-size:var(--spectrum-text-area-minimum-height);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-100)}:host([size=s]){--spectrum-textfield-height:var(--spectrum-component-height-75);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-100);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-75);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-75);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-75);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-small);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-small);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-small);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-small);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-small);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-small);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-small);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-small);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-75)}:host{--spectrum-textfield-height:var(--spectrum-component-height-100);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-100);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-100);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-100);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-100);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-medium);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-medium);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-medium);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-medium);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-100)}:host([size=l]){--spectrum-textfield-height:var(--spectrum-component-height-200);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-200);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-200);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-200);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-200);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-large);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-large);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-large);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-large);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-large);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-large);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-100);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-100);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-large);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-large);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-textfield-height:var(--spectrum-component-height-300);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-300);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-200);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-300);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-300);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-extra-large);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-extra-large);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-extra-large);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-200);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-200);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-extra-large);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-extra-large);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-300)}#textfield{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));text-indent:0;-moz-appearance:textfield;text-overflow:ellipsis;grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:"";block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));inline-size:100%;position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([valid]) #textfield .icon,:host([invalid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;inline-size:auto;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));text-indent:0;vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width))solid var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:textfield;outline:none;grid-area:2/1/auto/span 2;inline-size:100%;margin:0}.input::-ms-clear{block-size:0;inline-size:0}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(zh)::placeholder,.input:lang(ko)::placeholder{font-style:normal}.input:lang(ja)::-moz-placeholder,.input:lang(zh)::-moz-placeholder,.input:lang(ko)::-moz-placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)));color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([focused]) .input{outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid][focused]) .input,:host([invalid]:focus) .input,:host([invalid]) .input:focus{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid][focused]) .input,:host([invalid]) .input:focus-visible{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}:host([disabled]) #textfield .input,.input:disabled{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));-webkit-text-fill-color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));resize:none;opacity:1;border-color:#0000}:host([disabled]) #textfield .input::placeholder,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));resize:none;background-color:#0000;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([quiet][disabled]) .input::placeholder,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield .input,.input:read-only{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:#0000;border-color:#0000;outline:none}:host([readonly]) #textfield .input::placeholder,.input:read-only::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:#0000}@media (hover:hover){#textfield:hover .input::placeholder,.input:hover::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)));color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover,:host([invalid]) .input:focus:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input::placeholder,:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}#textfield:hover .input,.input:hover{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)));color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([invalid]:hover) .input,:host([invalid]) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));-webkit-text-fill-color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([readonly]) #textfield:hover .input{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:#0000;border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:#0000}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .icon,.spectrum-Textfield--sideLabel .input{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-spectrum-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-spectrum-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-spectrum-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-spectrum-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-spectrum-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-spectrum-textfield-border-width)}
+    :host{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);--spectrum-texfield-animation-duration:var(--spectrum-animation-duration-100);--spectrum-textfield-width:240px;--spectrum-textfield-min-width:var(--spectrum-text-field-minimum-width-multiplier);--spectrum-textfield-corner-radius:var(--spectrum-corner-radius-100);--spectrum-textfield-height:var(--spectrum-component-height-100);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-100);--spectrum-textfield-spacing-inline-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-textfield-spacing-block-start:var(--spectrum-component-top-to-text-100);--spectrum-textfield-spacing-block-end:var(--spectrum-component-bottom-to-text-100);--spectrum-textfield-spacing-block-quiet:var(--spectrum-field-edge-to-border-quiet);--spectrum-textfield-label-spacing-block:var(--spectrum-field-label-to-component);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-100);--spectrum-textfield-helptext-spacing-block:var(--spectrum-help-text-to-component);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-100);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-100);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--spectrum-field-edge-to-alert-icon-quiet);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--spectrum-field-edge-to-validation-icon-quiet);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-medium);--spectrum-textfield-font-family:var(--spectrum-sans-font-family-stack);--spectrum-textfield-font-weight:var(--spectrum-regular-font-weight);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-100);--spectrum-textfield-character-count-font-family:var(--spectrum-sans-font-family-stack);--spectrum-textfield-character-count-font-weight:var(--spectrum-regular-font-weight);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-inline:var(--spectrum-spacing-200);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-inline-side:var(--spectrum-side-label-character-count-to-field);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-medium);--spectrum-textfield-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-textfield-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-textfield-background-color:var(--spectrum-gray-50);--spectrum-textfield-text-color-default:var(--spectrum-neutral-content-color-default);--spectrum-textfield-text-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-textfield-text-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-textfield-text-color-focus-hover:var(--spectrum-neutral-content-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-textfield-text-color-readonly:var(--spectrum-neutral-content-color-default);--spectrum-textfield-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-textfield-border-color-disabled:var(--spectrum-disabled-border-color);--spectrum-textfield-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-textfield-border-color-invalid-default:var(--spectrum-negative-border-color-default);--spectrum-textfield-border-color-invalid-hover:var(--spectrum-negative-border-color-hover);--spectrum-textfield-border-color-invalid-focus:var(--spectrum-negative-border-color-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--spectrum-negative-border-color-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-textfield-icon-color-invalid:var(--spectrum-negative-visual-color);--spectrum-textfield-text-color-invalid:var(--spectrum-neutral-content-color-default);--spectrum-textfield-text-color-valid:var(--spectrum-neutral-content-color-default);--spectrum-textfield-icon-color-valid:var(--spectrum-positive-visual-color);--spectrum-textfield-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--spectrum-text-area-minimum-width);--spectrum-text-area-min-block-size:var(--spectrum-text-area-minimum-height);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-100)}:host([size=s]){--spectrum-textfield-height:var(--spectrum-component-height-75);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-100);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-75);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-75);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-75);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-small);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-small);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-small);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-small);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-small);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-small);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-small);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-small);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-75)}:host{--spectrum-textfield-height:var(--spectrum-component-height-100);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-100);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-100);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-100);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-100);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-medium);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-medium);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-medium);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-75);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-75);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-medium);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-medium);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-100)}:host([size=l]){--spectrum-textfield-height:var(--spectrum-component-height-200);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-200);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-200);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-200);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-200);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-large);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-large);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-large);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-large);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-large);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-large);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-100);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-100);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-large);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-large);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-textfield-height:var(--spectrum-component-height-300);--spectrum-textfield-label-spacing-block-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-textfield-label-spacing-inline-side-label:var(--spectrum-spacing-200);--spectrum-textfield-placeholder-font-size:var(--spectrum-font-size-300);--spectrum-textfield-spacing-inline:var(--spectrum-component-edge-to-text-200);--spectrum-textfield-icon-size-invalid:var(--spectrum-workflow-icon-size-300);--spectrum-textfield-icon-size-valid:var(--spectrum-checkmark-icon-size-300);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--spectrum-field-edge-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-inline-end-valid:var(--spectrum-field-edge-to-validation-icon-extra-large);--spectrum-textfield-icon-spacing-block-invalid:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-block-valid:var(--spectrum-field-top-to-validation-icon-extra-large);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-textfield-icon-spacing-inline-start-valid:var(--spectrum-field-text-to-validation-icon-extra-large);--spectrum-textfield-character-count-font-size:var(--spectrum-font-size-200);--spectrum-textfield-character-count-spacing-block:var(--spectrum-component-bottom-to-text-200);--spectrum-textfield-character-count-spacing-block-quiet:var(--spectrum-character-count-to-field-quiet-extra-large);--spectrum-textfield-character-count-spacing-block-side:var(--spectrum-side-label-character-count-top-margin-extra-large);--spectrum-text-area-min-block-size-quiet:var(--spectrum-component-height-300)}#textfield{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));text-indent:0;appearance:textfield;text-overflow:ellipsis;grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:"";block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));inline-size:100%;position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([invalid]) #textfield .icon,:host([valid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;inline-size:auto;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));text-indent:0;vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width))solid var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;appearance:textfield;outline:none;grid-area:2/1/auto/span 2;inline-size:100%;margin:0}.input::-ms-clear{block-size:0;inline-size:0}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}.input:lang(ja)::-moz-placeholder,.input:lang(ko)::-moz-placeholder,.input:lang(zh)::-moz-placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)));color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)));outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}.input:disabled,:host([disabled]) #textfield .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));-webkit-text-fill-color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));resize:none;opacity:1;border-color:#0000}.input:disabled::placeholder,:host([disabled]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]) .input::placeholder,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}.input:read-only,:host([readonly]) #textfield .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}@media (hover:hover){.input:hover,#textfield:hover .input{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)));color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}.input:hover::placeholder,#textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)))}:host([focused]) .input:hover,:host([focused]) .input:hover::placeholder,.input:focus:hover,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid]) .input:hover,:host([invalid]:hover) .input{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));-webkit-text-fill-color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));resize:none;opacity:1;border-color:#0000}:host([disabled]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield:hover .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .input,.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-spectrum-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-spectrum-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-spectrum-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-spectrum-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-spectrum-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-spectrum-textfield-border-width)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-textfield.css.dev.js.map