@material/web 1.0.0-pre.13 → 1.0.0-pre.14

package/textfield/{lib → internal}/text-field.js

@@ -43,28 +43,28 @@ export class TextField extends LitElement {
      * Gets or sets the direction in which selection occurred.
      */
     get selectionDirection() {
-        return this.getInput().selectionDirection;
+        return this.getInputOrTextarea().selectionDirection;
     }
     set selectionDirection(value) {
-        this.getInput().selectionDirection = value;
+        this.getInputOrTextarea().selectionDirection = value;
     }
     /**
      * Gets or sets the end position or offset of a text selection.
      */
     get selectionEnd() {
-        return this.getInput().selectionEnd;
+        return this.getInputOrTextarea().selectionEnd;
     }
     set selectionEnd(value) {
-        this.getInput().selectionEnd = value;
+        this.getInputOrTextarea().selectionEnd = value;
     }
     /**
      * Gets or sets the starting position or offset of a text selection.
      */
     get selectionStart() {
-        return this.getInput().selectionStart;
+        return this.getInputOrTextarea().selectionStart;
     }
     set selectionStart(value) {
-        this.getInput().selectionStart = value;
+        this.getInputOrTextarea().selectionStart = value;
     }
     /**
      * Returns the native validation error message that would be displayed upon
@@ -73,7 +73,7 @@ export class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
      */
     get validationMessage() {
-        return this.getInput().validationMessage;
+        return this.getInputOrTextarea().validationMessage;
     }
     /**
      * Returns a ValidityState object that represents the validity states of the
@@ -82,27 +82,43 @@ export class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
      */
     get validity() {
-        return this.getInput().validity;
+        return this.getInputOrTextarea().validity;
     }
     /**
      * The text field's value as a number.
      */
     get valueAsNumber() {
-        return this.getInput().valueAsNumber;
+        const input = this.getInput();
+        if (!input) {
+            return NaN;
+        }
+        return input.valueAsNumber;
     }
     set valueAsNumber(value) {
-        this.getInput().valueAsNumber = value;
-        this.value = this.getInput().value;
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.valueAsNumber = value;
+        this.value = input.value;
     }
     /**
      * The text field's value as a Date.
      */
     get valueAsDate() {
-        return this.getInput().valueAsDate;
+        const input = this.getInput();
+        if (!input) {
+            return null;
+        }
+        return input.valueAsDate;
     }
     set valueAsDate(value) {
-        this.getInput().valueAsDate = value;
-        this.value = this.getInput().value;
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.valueAsDate = value;
+        this.value = input.value;
     }
     /**
      * Returns whether an element will successfully validate based on forms
@@ -111,7 +127,7 @@ export class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate
      */
     get willValidate() {
-        return this.getInput().willValidate;
+        return this.getInputOrTextarea().willValidate;
     }
     get hasError() {
         return this.error || this.nativeError;
@@ -166,6 +182,11 @@ export class TextField extends LitElement {
          * LTR notation for fractions.
          */
         this.textDirection = '';
+        /**
+         * The number of rows to display for a `type="textarea"` text field.
+         * Defaults to 2.
+         */
+        this.rows = 2;
         // <input> properties
         /**
          * Defines the greatest value in the range of permitted values.
@@ -299,7 +320,7 @@ export class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
      */
     select() {
-        this.getInput().select();
+        this.getInputOrTextarea().select();
     }
     /**
      * Sets the text field's native validation error message. This is used to
@@ -313,13 +334,13 @@ export class TextField extends LitElement {
      * @param error The error message to display.
      */
     setCustomValidity(error) {
-        this.getInput().setCustomValidity(error);
+        this.getInputOrTextarea().setCustomValidity(error);
     }
     setRangeText(...args) {
         // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
         // Use spread syntax and type casting to ensure correct usage.
-        this.getInput().setRangeText(...args);
-        this.value = this.getInput().value;
+        this.getInputOrTextarea().setRangeText(...args);
+        this.value = this.getInputOrTextarea().value;
     }
     /**
      * Sets the start and end positions of a selection in the text field.
@@ -331,7 +352,7 @@ export class TextField extends LitElement {
      * @param direction The direction in which the selection is performed.
      */
     setSelectionRange(start, end, direction) {
-        this.getInput().setSelectionRange(start, end, direction);
+        this.getInputOrTextarea().setSelectionRange(start, end, direction);
     }
     /**
      * Decrements the value of a numeric type text field by `step` or `n` `step`
@@ -343,6 +364,9 @@ export class TextField extends LitElement {
      */
     stepDown(stepDecrement) {
         const input = this.getInput();
+        if (!input) {
+            return;
+        }
         input.stepDown(stepDecrement);
         this.value = input.value;
     }
@@ -356,6 +380,9 @@ export class TextField extends LitElement {
      */
     stepUp(stepIncrement) {
         const input = this.getInput();
+        if (!input) {
+            return;
+        }
         input.stepUp(stepIncrement);
         this.value = input.value;
     }
@@ -380,6 +407,7 @@ export class TextField extends LitElement {
         const classes = {
             'disabled': this.disabled,
             'error': !this.disabled && this.hasError,
+            'textarea': this.type === 'textarea',
         };
         return html `
        <span class="text-field ${classMap(classes)}">
@@ -391,7 +419,7 @@ export class TextField extends LitElement {
         // Keep changedProperties arg so that subclasses may call it
         // If a property such as `type` changes and causes the internal <input>
         // value to change without dispatching an event, re-sync it.
-        const value = this.getInput().value;
+        const value = this.getInputOrTextarea().value;
         this.internals.setFormValue(value);
         if (this.value !== value) {
             // Note this is typically inefficient in updated() since it schedules
@@ -401,27 +429,25 @@ export class TextField extends LitElement {
         }
     }
     renderField() {
-        const prefix = this.renderPrefix();
-        const suffix = this.renderSuffix();
-        const input = this.renderInput();
         return staticHtml `<${this.fieldTag}
       class="field"
+      count=${this.value.length}
       ?disabled=${this.disabled}
       ?error=${this.hasError}
+      error-text=${this.getErrorText()}
       ?focused=${this.focused}
       ?has-end=${this.hasTrailingIcon}
       ?has-start=${this.hasLeadingIcon}
       label=${this.label}
+      max=${this.maxLength}
       ?populated=${!!this.value}
       ?required=${this.required}
       supporting-text=${this.supportingText}
-      error-text=${this.getErrorText()}
-      count=${this.value.length}
-      max=${this.maxLength}
     >
       ${this.renderLeadingIcon()}
-      ${prefix}${input}${suffix}
+      ${this.renderInputOrTextarea()}
       ${this.renderTrailingIcon()}
+      <div id="description" slot="aria-describedby"></div>
     </${this.fieldTag}>`;
     }
     renderLeadingIcon() {
@@ -438,33 +464,62 @@ export class TextField extends LitElement {
        </span>
      `;
     }
-    renderInput() {
+    renderInputOrTextarea() {
         const style = { direction: this.textDirection };
+        const ariaLabel = this.ariaLabel || this.label || nothing;
+        if (this.type === 'textarea') {
+            return html `
+        <textarea
+          class="input"
+          style=${styleMap(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          ?disabled=${this.disabled}
+          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}
+          minlength=${this.minLength > -1 ? this.minLength : nothing}
+          placeholder=${this.placeholder || nothing}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          rows=${this.rows}
+          .value=${live(this.value)}
+          @change=${this.redispatchEvent}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent}
+        ></textarea>
+      `;
+        }
+        const prefix = this.renderPrefix();
+        const suffix = this.renderSuffix();
         // TODO(b/243805848): remove `as unknown as number` once lit analyzer is
         // fixed
         return html `
-      <input
-        style=${styleMap(style)}
-        aria-describedby="description"
-        aria-invalid=${this.hasError}
-        aria-label=${this.ariaLabel || this.label || nothing}
-        ?disabled=${this.disabled}
-        max=${(this.max || nothing)}
-        maxlength=${this.maxLength > -1 ? this.maxLength : nothing}
-        min=${(this.min || nothing)}
-        minlength=${this.minLength > -1 ? this.minLength : nothing}
-        pattern=${this.pattern || nothing}
-        placeholder=${this.placeholder || nothing}
-        ?readonly=${this.readOnly}
-        ?required=${this.required}
-        step=${(this.step || nothing)}
-        type=${this.type}
-        .value=${live(this.value)}
-        @change=${this.redispatchEvent}
-        @input=${this.handleInput}
-        @select=${this.redispatchEvent}
-      >
-      <div id="description" slot="aria-describedby"></div>
+      <div class="input-wrapper">
+        ${prefix}
+        <input
+          class="input"
+          style=${styleMap(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          ?disabled=${this.disabled}
+          max=${(this.max || nothing)}
+          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}
+          min=${(this.min || nothing)}
+          minlength=${this.minLength > -1 ? this.minLength : nothing}
+          pattern=${this.pattern || nothing}
+          placeholder=${this.placeholder || nothing}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          step=${(this.step || nothing)}
+          type=${this.type}
+          .value=${live(this.value)}
+          @change=${this.redispatchEvent}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent}
+        >
+        ${suffix}
+      </div>
     `;
     }
     renderPrefix() {
@@ -504,8 +559,8 @@ export class TextField extends LitElement {
     redispatchEvent(event) {
         redispatchEvent(this, event);
     }
-    getInput() {
-        if (!this.input) {
+    getInputOrTextarea() {
+        if (!this.inputOrTextarea) {
             // If the input is not yet defined, synchronously render.
             // e.g.
             // const textField = document.createElement('md-outlined-text-field');
@@ -520,10 +575,16 @@ export class TextField extends LitElement {
             // before interacting with input APIs that depend on them.
             this.scheduleUpdate();
         }
-        return this.input;
+        return this.inputOrTextarea;
+    }
+    getInput() {
+        if (this.type === 'textarea') {
+            return null;
+        }
+        return this.getInputOrTextarea();
     }
     checkValidityAndDispatch() {
-        const valid = this.getInput().checkValidity();
+        const valid = this.getInputOrTextarea().checkValidity();
         let canceled = false;
         if (!valid) {
             canceled = !this.dispatchEvent(new Event('invalid', { cancelable: true }));
@@ -587,6 +648,9 @@ __decorate([
 __decorate([
     property({ attribute: 'text-direction' })
 ], TextField.prototype, "textDirection", void 0);
+__decorate([
+    property({ type: Number })
+], TextField.prototype, "rows", void 0);
 __decorate([
     property()
 ], TextField.prototype, "max", void 0);
@@ -627,8 +691,8 @@ __decorate([
     state()
 ], TextField.prototype, "nativeErrorText", void 0);
 __decorate([
-    query('input')
-], TextField.prototype, "input", void 0);
+    query('.input')
+], TextField.prototype, "inputOrTextarea", void 0);
 __decorate([
     query('.field')
 ], TextField.prototype, "field", void 0);

package/textfield/internal/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["text-field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {live} from 'lit/directives/live.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/internal/field.js';\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\nimport {stringConverter} from '../../internal/controller/string-converter.js';\n\n/**\n * Input types that are compatible with the text field.\n */\nexport type TextFieldType =\n    'email'|'number'|'password'|'search'|'tel'|'text'|'url'|'textarea';\n\n/**\n * Input types that are not fully supported for the text field.\n */\nexport type UnsupportedTextFieldType =\n    'color'|'date'|'datetime-local'|'file'|'month'|'time'|'week';\n\n/**\n * Input types that are incompatible with the text field.\n */\nexport type InvalidTextFieldType =\n    'button'|'checkbox'|'hidden'|'image'|'radio'|'range'|'reset'|'submit';\n\n/**\n * A text field component.\n */\nexport abstract class TextField extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /** @nocollapse  */\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * Calling `reportValidity()` will automatically update `error`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * Calling `reportValidity()` will automatically update `errorText` to the\n   * native `validationMessage`.\n   */\n  @property({attribute: 'error-text'}) errorText = '';\n  @property() label = '';\n  @property({type: Boolean, reflect: true}) required = false;\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({attribute: 'prefix-text'}) prefixText = '';\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({attribute: 'suffix-text'}) suffixText = '';\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon'})\n  hasLeadingIcon = false;\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon'})\n  hasTrailingIcon = false;\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({attribute: 'text-direction'}) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({type: Number}) rows = 2;\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  // <input> properties\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({type: Number}) maxLength = -1;\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({type: Number}) minLength = -1;\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n  @property({reflect: true, converter: stringConverter}) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({type: Boolean, reflect: true}) readOnly = false;\n\n  /**\n   * Gets or sets the direction in which selection occurred.\n   */\n  get selectionDirection() {\n    return this.getInputOrTextarea().selectionDirection;\n  }\n  set selectionDirection(value: 'forward'|'backward'|'none'|null) {\n    this.getInputOrTextarea().selectionDirection = value;\n  }\n\n  /**\n   * Gets or sets the end position or offset of a text selection.\n   */\n  get selectionEnd() {\n    return this.getInputOrTextarea().selectionEnd;\n  }\n  set selectionEnd(value: number|null) {\n    this.getInputOrTextarea().selectionEnd = value;\n  }\n\n  /**\n   * Gets or sets the starting position or offset of a text selection.\n   */\n  get selectionStart() {\n    return this.getInputOrTextarea().selectionStart;\n  }\n  set selectionStart(value: number|null) {\n    this.getInputOrTextarea().selectionStart = value;\n  }\n\n  /**\n   * Returns or sets the element's step attribute, which works with min and max\n   * to limit the increments at which a numeric or date-time value can be set.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @property() step = '';\n\n  @property({reflect: true})\n  type: TextFieldType|UnsupportedTextFieldType = 'text';\n\n  /**\n   * Returns the native validation error message that would be displayed upon\n   * calling `reportValidity()`.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage\n   */\n  get validationMessage() {\n    return this.getInputOrTextarea().validationMessage;\n  }\n\n  /**\n   * Returns a ValidityState object that represents the validity states of the\n   * text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity\n   */\n  get validity() {\n    return this.getInputOrTextarea().validity;\n  }\n\n  /**\n   * The text field's value as a number.\n   */\n  get valueAsNumber() {\n    const input = this.getInput();\n    if (!input) {\n      return NaN;\n    }\n\n    return input.valueAsNumber;\n  }\n  set valueAsNumber(value: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsNumber = value;\n    this.value = input.value;\n  }\n\n  /**\n   * The text field's value as a Date.\n   */\n  get valueAsDate() {\n    const input = this.getInput();\n    if (!input) {\n      return null;\n    }\n\n    return input.valueAsDate;\n  }\n  set valueAsDate(value: Date|null) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsDate = value;\n    this.value = input.value;\n  }\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate\n   */\n  get willValidate() {\n    return this.getInputOrTextarea().willValidate;\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Returns true when the text field has been interacted with. Native\n   * validation errors only display in response to user interactions.\n   */\n  @state() private dirty = false;\n  @state() private focused = false;\n  /**\n   * Whether or not a native error has been reported via `reportValidity()`.\n   */\n  @state() private nativeError = false;\n  /**\n   * The validation message displayed from a native error via\n   * `reportValidity()`.\n   */\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  @query('.input')\n  private readonly inputOrTextarea?: HTMLInputElement|HTMLTextAreaElement|null;\n  @query('.field') private readonly field?: Field|null;\n  @queryAssignedElements({slot: 'leadingicon'})\n  private readonly leadingIcons!: Element[];\n  @queryAssignedElements({slot: 'trailingicon'})\n  private readonly trailingIcons!: Element[];\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.focus);\n      this.addEventListener('focusin', this.handleFocusin);\n      this.addEventListener('focusout', this.handleFocusout);\n    }\n  }\n\n  /**\n   * Checks the text field's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n   *\n   * @return true if the text field is valid, or false if not.\n   */\n  checkValidity() {\n    const {valid} = this.checkValidityAndDispatch();\n    return valid;\n  }\n\n  /**\n   * Focuses the text field's input text.\n   */\n  override focus() {\n    if (this.disabled || this.matches(':focus-within')) {\n      // Don't shift focus from an element within the text field, like an icon\n      // button, to the input when focus is requested.\n      return;\n    }\n\n    super.focus();\n  }\n\n  /**\n   * Checks the text field's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * This method will display or clear an error text message equal to the text\n   * field's `validationMessage`, unless the invalid event is canceled.\n   *\n   * Use `setCustomValidity()` to customize the `validationMessage`.\n   *\n   * This method can also be used to re-announce error messages to screen\n   * readers.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n   *\n   * @return true if the text field is valid, or false if not.\n   */\n  reportValidity() {\n    const {valid, canceled} = this.checkValidityAndDispatch();\n    if (!canceled) {\n      const prevMessage = this.getErrorText();\n      this.nativeError = !valid;\n      this.nativeErrorText = this.validationMessage;\n\n      if (prevMessage === this.getErrorText()) {\n        this.field?.reannounceError();\n      }\n    }\n\n    return valid;\n  }\n\n  /**\n   * Selects all the text in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n   */\n  select() {\n    this.getInputOrTextarea().select();\n  }\n\n  /**\n   * Sets the text field's native validation error message. This is used to\n   * customize `validationMessage`.\n   *\n   * When the error is not an empty string, the text field is considered invalid\n   * and `validity.customError` will be true.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display.\n   */\n  setCustomValidity(error: string) {\n    this.getInputOrTextarea().setCustomValidity(error);\n  }\n\n  /**\n   * Replaces a range of text with a new string.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText\n   */\n  setRangeText(replacement: string): void;\n  setRangeText(\n      replacement: string, start: number, end: number,\n      selectionMode?: SelectionMode): void;\n  setRangeText(...args: unknown[]) {\n    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.\n    // Use spread syntax and type casting to ensure correct usage.\n    this.getInputOrTextarea().setRangeText(\n        ...args as Parameters<HTMLInputElement['setRangeText']>);\n    this.value = this.getInputOrTextarea().value;\n  }\n\n  /**\n   * Sets the start and end positions of a selection in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n   *\n   * @param start The offset into the text field for the start of the selection.\n   * @param end The offset into the text field for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  setSelectionRange(\n      start: number|null, end: number|null,\n      direction?: 'forward'|'backward'|'none') {\n    this.getInputOrTextarea().setSelectionRange(start, end, direction);\n  }\n\n  /**\n   * Decrements the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown\n   *\n   * @param stepDecrement The number of steps to decrement, defaults to 1.\n   */\n  stepDown(stepDecrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepDown(stepDecrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Increments the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp\n   *\n   * @param stepIncrement The number of steps to increment, defaults to 1.\n   */\n  stepUp(stepIncrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepUp(stepIncrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Reset the text field to its default value.\n   */\n  reset() {\n    this.dirty = false;\n    this.value = this.getAttribute('value') ?? '';\n    this.nativeError = false;\n    this.nativeErrorText = '';\n  }\n\n  override attributeChangedCallback(\n      attribute: string, newValue: string|null, oldValue: string|null) {\n    if (attribute === 'value' && this.dirty) {\n      // After user input, changing the value attribute no longer updates the\n      // text field's value (until reset). This matches native <input> behavior.\n      return;\n    }\n\n    super.attributeChangedCallback(attribute, newValue, oldValue);\n  }\n\n  protected override render() {\n    const classes = {\n      'disabled': this.disabled,\n      'error': !this.disabled && this.hasError,\n      'textarea': this.type === 'textarea',\n    };\n\n    return html`\n       <span class=\"text-field ${classMap(classes)}\">\n         ${this.renderField()}\n       </span>\n     `;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    // Keep changedProperties arg so that subclasses may call it\n\n    // If a property such as `type` changes and causes the internal <input>\n    // value to change without dispatching an event, re-sync it.\n    const value = this.getInputOrTextarea().value;\n    this.internals.setFormValue(value);\n    if (this.value !== value) {\n      // Note this is typically inefficient in updated() since it schedules\n      // another update. However, it is needed for the <input> to fully render\n      // before checking its value.\n      this.value = value;\n    }\n  }\n\n  private renderField() {\n    return staticHtml`<${this.fieldTag}\n      class=\"field\"\n      count=${this.value.length}\n      ?disabled=${this.disabled}\n      ?error=${this.hasError}\n      error-text=${this.getErrorText()}\n      ?focused=${this.focused}\n      ?has-end=${this.hasTrailingIcon}\n      ?has-start=${this.hasLeadingIcon}\n      label=${this.label}\n      max=${this.maxLength}\n      ?populated=${!!this.value}\n      ?required=${this.required}\n      supporting-text=${this.supportingText}\n    >\n      ${this.renderLeadingIcon()}\n      ${this.renderInputOrTextarea()}\n      ${this.renderTrailingIcon()}\n      <div id=\"description\" slot=\"aria-describedby\"></div>\n    </${this.fieldTag}>`;\n  }\n\n  private renderLeadingIcon() {\n    return html`\n       <span class=\"icon leading\" slot=\"start\">\n         <slot name=\"leadingicon\" @slotchange=${this.handleIconChange}></slot>\n       </span>\n     `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n       <span class=\"icon trailing\" slot=\"end\">\n         <slot name=\"trailingicon\" @slotchange=${this.handleIconChange}></slot>\n       </span>\n     `;\n  }\n\n  private renderInputOrTextarea() {\n    const style = {direction: this.textDirection};\n    const ariaLabel =\n        (this as ARIAMixinStrict).ariaLabel || this.label || nothing;\n\n    if (this.type === 'textarea') {\n      return html`\n        <textarea\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          ?disabled=${this.disabled}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          rows=${this.rows}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent}\n        ></textarea>\n      `;\n    }\n\n    const prefix = this.renderPrefix();\n    const suffix = this.renderSuffix();\n\n    // TODO(b/243805848): remove `as unknown as number` once lit analyzer is\n    // fixed\n    return html`\n      <div class=\"input-wrapper\">\n        ${prefix}\n        <input\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          ?disabled=${this.disabled}\n          max=${(this.max || nothing) as unknown as number}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          min=${(this.min || nothing) as unknown as number}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          pattern=${this.pattern || nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          step=${(this.step || nothing) as unknown as number}\n          type=${this.type}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent}\n        >\n        ${suffix}\n      </div>\n    `;\n  }\n\n  private renderPrefix() {\n    return this.renderAffix(this.prefixText, /* isSuffix */ false);\n  }\n\n  private renderSuffix() {\n    return this.renderAffix(this.suffixText, /* isSuffix */ true);\n  }\n\n  private renderAffix(text: string, isSuffix: boolean) {\n    if (!text) {\n      return nothing;\n    }\n\n    const classes = {\n      'suffix': isSuffix,\n      'prefix': !isSuffix,\n    };\n\n    return html`<span class=\"${classMap(classes)}\">${text}</span>`;\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private handleFocusin() {\n    this.focused = true;\n  }\n\n  private handleFocusout() {\n    if (this.matches(':focus-within')) {\n      // Changing focus to another child within the text field, like a button\n      return;\n    }\n\n    this.focused = false;\n  }\n\n  private handleInput(event: InputEvent) {\n    this.dirty = true;\n    this.value = (event.target as HTMLInputElement).value;\n    this.redispatchEvent(event);\n  }\n\n  private redispatchEvent(event: Event) {\n    redispatchEvent(this, event);\n  }\n\n  private getInputOrTextarea() {\n    if (!this.inputOrTextarea) {\n      // If the input is not yet defined, synchronously render.\n      // e.g.\n      // const textField = document.createElement('md-outlined-text-field');\n      // document.body.appendChild(textField);\n      // textField.focus(); // synchronously render\n      this.connectedCallback();\n      this.scheduleUpdate();\n    }\n\n    if (this.isUpdatePending) {\n      // If there are pending updates, synchronously perform them. This ensures\n      // that constraint validation properties (like `required`) are synced\n      // before interacting with input APIs that depend on them.\n      this.scheduleUpdate();\n    }\n\n    return this.inputOrTextarea!;\n  }\n\n  private getInput() {\n    if (this.type === 'textarea') {\n      return null;\n    }\n\n    return this.getInputOrTextarea() as HTMLInputElement;\n  }\n\n  private checkValidityAndDispatch() {\n    const valid = this.getInputOrTextarea().checkValidity();\n    let canceled = false;\n    if (!valid) {\n      canceled = !this.dispatchEvent(new Event('invalid', {cancelable: true}));\n    }\n\n    return {valid, canceled};\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n    this.hasTrailingIcon = this.trailingIcons.length > 0;\n  }\n\n  /** @private */\n  formResetCallback() {\n    this.reset();\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n}\n"]}

package/textfield/outlined-text-field.d.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../field/outlined-field.js';
-import { OutlinedTextField } from './lib/outlined-text-field.js';
-export { TextFieldType } from './lib/text-field.js';
+import { OutlinedTextField } from './internal/outlined-text-field.js';
+export { TextFieldType } from './internal/text-field.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-outlined-text-field': MdOutlinedTextField;

package/textfield/outlined-text-field.js

@@ -7,10 +7,10 @@ import { __decorate } from "tslib";
 import '../field/outlined-field.js';
 import { customElement } from 'lit/decorators.js';
 import { literal } from 'lit/static-html.js';
-import { styles as outlinedForcedColorsStyles } from './lib/outlined-forced-colors-styles.css.js';
-import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
-import { OutlinedTextField } from './lib/outlined-text-field.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { styles as outlinedForcedColorsStyles } from './internal/outlined-forced-colors-styles.css.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { OutlinedTextField } from './internal/outlined-text-field.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * TODO(b/228525797): Add docs
  * @final

package/textfield/outlined-text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-text-field.js","sourceRoot":"","sources":["outlined-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,4CAA4C,CAAC;AAChG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAUlE;;;;GAIG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAIuB,aAAQ,GAAG,OAAO,CAAA,mBAAmB,CAAC;IACpE,CAAC;;AAJiB,0BAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,0BAA0B,CAAC,CAAC;AAFpD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAK/B;SALY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/outlined-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as outlinedForcedColorsStyles} from './lib/outlined-forced-colors-styles.css.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {OutlinedTextField} from './lib/outlined-text-field.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {TextFieldType} from './lib/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-text-field': MdOutlinedTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-text-field')\nexport class MdOutlinedTextField extends OutlinedTextField {\n  static override styles =\n      [sharedStyles, outlinedStyles, outlinedForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-outlined-field`;\n}\n"]}
+{"version":3,"file":"outlined-text-field.js","sourceRoot":"","sources":["outlined-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,iDAAiD,CAAC;AACrG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,iBAAiB,EAAC,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAIuB,aAAQ,GAAG,OAAO,CAAA,mBAAmB,CAAC;IACpE,CAAC;;AAJiB,0BAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,0BAA0B,CAAC,CAAC;AAFpD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAK/B;SALY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/outlined-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as outlinedForcedColorsStyles} from './internal/outlined-forced-colors-styles.css.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {OutlinedTextField} from './internal/outlined-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-text-field': MdOutlinedTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-text-field')\nexport class MdOutlinedTextField extends OutlinedTextField {\n  static override styles =\n      [sharedStyles, outlinedStyles, outlinedForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-outlined-field`;\n}\n"]}

package/tokens/_md-comp-checkbox.scss

@@ -15,11 +15,30 @@ $supported-tokens: (
   // go/keep-sorted start
   'container-shape',
   'container-size',
+  'disabled-container-opacity',
+  'disabled-outline-color',
+  'disabled-outline-width',
+  'error-focus-outline-color',
+  'error-hover-outline-color',
   'error-hover-state-layer-color',
   'error-hover-state-layer-opacity',
+  'error-outline-color',
+  'error-pressed-outline-color',
   'error-pressed-state-layer-color',
   'error-pressed-state-layer-opacity',
+  'focus-outline-color',
+  'focus-outline-width',
+  'hover-outline-color',
+  'hover-outline-width',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
   'icon-size',
+  'outline-color',
+  'outline-width',
+  'pressed-outline-color',
+  'pressed-outline-width',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
   'selected-container-color',
   'selected-disabled-container-color',
   'selected-disabled-container-opacity',
@@ -45,25 +64,6 @@ $supported-tokens: (
   'selected-pressed-state-layer-opacity',
   'state-layer-shape',
   'state-layer-size',
-  'unselected-disabled-container-opacity',
-  'unselected-disabled-outline-color',
-  'unselected-disabled-outline-width',
-  'unselected-error-focus-outline-color',
-  'unselected-error-hover-outline-color',
-  'unselected-error-outline-color',
-  'unselected-error-pressed-outline-color',
-  'unselected-focus-outline-color',
-  'unselected-focus-outline-width',
-  'unselected-hover-outline-color',
-  'unselected-hover-outline-width',
-  'unselected-hover-state-layer-color',
-  'unselected-hover-state-layer-opacity',
-  'unselected-outline-color',
-  'unselected-outline-width',
-  'unselected-pressed-outline-color',
-  'unselected-pressed-outline-width',
-  'unselected-pressed-state-layer-color',
-  'unselected-pressed-state-layer-opacity',
   // go/keep-sorted end
 );
 
@@ -71,6 +71,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'error-focus-state-layer-color',
   'error-focus-state-layer-opacity',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
   'selected-disabled-container-outline-width',
   'selected-focus-outline-width',
   'selected-focus-state-layer-color',
@@ -78,8 +80,6 @@ $unsupported-tokens: (
   'selected-hover-outline-width',
   'selected-outline-width',
   'selected-pressed-outline-width',
-  'unselected-focus-state-layer-color',
-  'unselected-focus-state-layer-opacity',
   // go/keep-sorted end
 );
 
@@ -93,7 +93,31 @@ $_default: (
   $tokens: values.validate(
     md-comp-checkbox.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove default "unselected" prefix (b/292244480)
+      'unselected-disabled-container-opacity': 'disabled-container-opacity',
+      'unselected-disabled-outline-color': 'disabled-outline-color',
+      'unselected-disabled-outline-width': 'disabled-outline-width',
+      'unselected-error-focus-outline-color': 'error-focus-outline-color',
+      'unselected-error-hover-outline-color': 'error-hover-outline-color',
+      'unselected-error-outline-color': 'error-outline-color',
+      'unselected-error-pressed-outline-color': 'error-pressed-outline-color',
+      'unselected-focus-outline-color': 'focus-outline-color',
+      'unselected-focus-outline-width': 'focus-outline-width',
+      'unselected-hover-outline-color': 'hover-outline-color',
+      'unselected-hover-outline-width': 'hover-outline-width',
+      'unselected-hover-state-layer-color': 'hover-state-layer-color',
+      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',
+      'unselected-outline-color': 'outline-color',
+      'unselected-outline-width': 'outline-width',
+      'unselected-pressed-outline-color': 'pressed-outline-color',
+      'unselected-pressed-outline-width': 'pressed-outline-width',
+      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',
+      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',
+      'unselected-focus-state-layer-color': 'focus-state-layer-color',
+      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity'
+    )
   );
 
   @return $tokens;

package/tokens/_md-comp-filled-field.scss

@@ -19,9 +19,8 @@ $supported-tokens: (
   // go/keep-sorted start
   'active-indicator-color',
   'active-indicator-height',
+  'bottom-space',
   'container-color',
-  'container-padding-horizontal',
-  'container-padding-vertical',
   'container-shape',
   'content-color',
   'content-type',
@@ -81,12 +80,17 @@ $supported-tokens: (
   'label-text-populated-size',
   'label-text-type',
   'leading-content-color',
+  'leading-space',
   'supporting-text-color',
-  'supporting-text-padding',
-  'supporting-text-padding-top',
+  'supporting-text-leading-space',
+  'supporting-text-top-space',
+  'supporting-text-trailing-space',
   'supporting-text-type',
+  'top-space',
   'trailing-content-color',
-  'with-label-container-padding-vertical',
+  'trailing-space',
+  'with-label-bottom-space',
+  'with-label-top-space',
   // go/keep-sorted end
 );
 
@@ -107,9 +111,8 @@ $_default: (
     // go/keep-sorted start
     'active-indicator-color': map.get($text-field, 'active-indicator-color'),
     'active-indicator-height': map.get($text-field, 'active-indicator-height'),
+    'bottom-space': if($exclude-hardcoded-values, null, 16px),
     'container-color': map.get($text-field, 'container-color'),
-    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
-    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-type': map.get($text-field, 'input-text-type'),
@@ -213,13 +216,17 @@ $_default: (
       map.get($text-field, 'label-text-populated-size'),
     'label-text-type': map.get($text-field, 'label-text-type'),
     'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'leading-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-color': map.get($text-field, 'supporting-text-color'),
-    'supporting-text-padding': if($exclude-hardcoded-values, null, 16px),
-    'supporting-text-padding-top': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),
+    'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'top-space': if($exclude-hardcoded-values, null, 16px),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
-    'with-label-container-padding-vertical':
-      if($exclude-hardcoded-values, null, 8px),
+    'trailing-space': if($exclude-hardcoded-values, null, 16px),
+    'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
+    'with-label-top-space': if($exclude-hardcoded-values, null, 8px),
     // go/keep-sorted end
   );