@material/web 1.0.0-pre.1 → 1.0.0-pre.3

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

@@ -3,15 +3,16 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../field/outlined-field.js';
+import { literal } from 'lit/static-html.js';
 import { TextField } from './text-field.js';
-/** @soyCompatible */
+/**
+ * An outlined text field component
+ */
 export class OutlinedTextField extends TextField {
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-text-field--outlined': true,
-        };
+    constructor() {
+        super(...arguments);
+        this.fieldTag = literal `md-outlined-field`;
     }
 }
 //# sourceMappingURL=outlined-text-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"outlined-text-field.js","sourceRoot":"","sources":["outlined-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,qBAAqB;AACrB,MAAM,OAAgB,iBAAkB,SAAQ,SAAS;IACvD,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,0BAA0B,EAAE,IAAI;SACjC,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {TextField} from './text-field.js';\n\n/** @soyCompatible */\nexport abstract class OutlinedTextField extends TextField {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-text-field--outlined': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"outlined-text-field.js","sourceRoot":"","sources":["outlined-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+BAA+B,CAAC;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QACqB,aAAQ,GAAG,OAAO,CAAA,mBAAmB,CAAC;IAC3D,CAAC;CAAA","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../field/outlined-field.js';\n\nimport {literal} from 'lit/static-html.js';\n\nimport {TextField} from './text-field.js';\n\n/**\n * An outlined text field component\n */\nexport class OutlinedTextField extends TextField {\n  protected readonly fieldTag = literal`md-outlined-field`;\n}\n"]}

package/textfield/lib/shared-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */
+export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field{display:inline-flex;flex:1}.field{cursor:text;flex:1}.disabled .field{cursor:default}.counter{white-space:nowrap}.icon{display:flex}.icon ::slotted(*){display:flex}.icon.leading{color:var(--_leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus-within .icon.leading{color:var(--_focus-leading-icon-color)}:focus-within .icon.trailing{color:var(--_focus-trailing-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.error .icon.leading{color:var(--_error-leading-icon-color)}.error .icon.trailing{color:var(--_error-trailing-icon-color)}.error:hover .icon.leading{color:var(--_error-hover-leading-icon-color)}.error:hover .icon.trailing{color:var(--_error-hover-trailing-icon-color)}.error:focus-within .icon.leading{color:var(--_error-focus-leading-icon-color)}.error:focus-within .icon.trailing{color:var(--_error-focus-trailing-icon-color)}input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}input::placeholder{color:currentColor;opacity:1}input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){input{background-color:Field}}:focus-within input{caret-color:var(--_focus-caret-color)}.error:focus-within input{caret-color:var(--_error-focus-caret-color)}input,.prefix,.suffix{font:var(--_input-text-type)}.text-field:not(.disabled) .prefix,.text-field:not(.disabled) .suffix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) input::placeholder{color:var(--_input-text-placeholder-color)}.prefix{padding-inline-end:var(--_input-text-prefix-padding)}.suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */
 `;
 //# sourceMappingURL=shared-styles.css.js.map

package/textfield/lib/shared-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field{display:inline-flex;flex:1}.field{cursor:text;flex:1}.disabled .field{cursor:default}.counter{white-space:nowrap}.icon{display:flex}.icon ::slotted(*){display:flex}.icon.leading{color:var(--_leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus-within .icon.leading{color:var(--_focus-leading-icon-color)}:focus-within .icon.trailing{color:var(--_focus-trailing-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.error .icon.leading{color:var(--_error-leading-icon-color)}.error .icon.trailing{color:var(--_error-trailing-icon-color)}.error:hover .icon.leading{color:var(--_error-hover-leading-icon-color)}.error:hover .icon.trailing{color:var(--_error-hover-trailing-icon-color)}.error:focus-within .icon.leading{color:var(--_error-focus-leading-icon-color)}.error:focus-within .icon.trailing{color:var(--_error-focus-trailing-icon-color)}input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}input::placeholder{color:currentColor;opacity:1}input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){input{background-color:Field}}:focus-within input{caret-color:var(--_focus-caret-color)}.error:focus-within input{caret-color:var(--_error-focus-caret-color)}input,.prefix,.suffix{font:var(--_input-text-type)}.text-field:not(.disabled) .prefix,.text-field:not(.disabled) .suffix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) input::placeholder{color:var(--_input-text-placeholder-color)}.prefix{padding-inline-end:var(--_input-text-prefix-padding)}.suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/textfield/lib/shared-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './shared';
+// go/keep-sorted end
 
 @include shared.styles;

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

@@ -1,28 +1,27 @@
 /**
- * @requirecss {textfield.lib.shared_styles}
- *
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { LitElement, PropertyValues } from 'lit';
 import { StaticValue } from 'lit/static-html.js';
 import { getFormValue } from '../../controller/form-controller.js';
 import { ARIAAutoComplete, ARIAExpanded, ARIARole } from '../../types/aria.js';
 /**
  * Input types that are compatible with the text field.
  */
-export declare type TextFieldType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+export type TextFieldType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
 /**
  * Input types that are not fully supported for the text field.
  */
-export declare type UnsupportedTextFieldType = 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
+export type UnsupportedTextFieldType = 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
 /**
  * Input types that are incompatible with the text field.
  */
-export declare type InvalidTextFieldType = 'button' | 'checkbox' | 'hidden' | 'image' | 'radio' | 'range' | 'reset' | 'submit';
-/** @soyCompatible */
+export type InvalidTextFieldType = 'button' | 'checkbox' | 'hidden' | 'image' | 'radio' | 'range' | 'reset' | 'submit';
+/**
+ * A text field component.
+ */
 export declare abstract class TextField extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     disabled: boolean;
@@ -91,12 +90,6 @@ export declare abstract class TextField extends LitElement {
      * The `aria-label` of the text field's input.
      */
     ariaLabel: string;
-    /**
-     * The `aria-labelledby` of the text field's input.
-     *
-     * Note: currently only usable in SSR light DOM.
-     */
-    ariaLabelledBy: string;
     role: ARIARole | null;
     get form(): HTMLFormElement;
     name: string;
@@ -164,7 +157,7 @@ export declare abstract class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
      */
     step: string;
-    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
+    type: TextFieldType | UnsupportedTextFieldType;
     /**
      * Returns the native validation error message that would be displayed upon
      * calling `reportValidity()`.
@@ -196,18 +189,19 @@ export declare abstract class TextField extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate
      */
     get willValidate(): boolean;
+    protected abstract readonly fieldTag: StaticValue;
     /**
      * Returns true when the text field has been interacted with. Native
      * validation errors only display in response to user interactions.
      */
-    protected dirty: boolean;
-    protected focused: boolean;
+    private dirty;
+    private focused;
     /**
      * When set to true, the error text's `role="alert"` will be removed, then
      * re-added after an animation frame. This will re-announce an error message
      * to screen readers.
      */
-    protected refreshErrorAlert: boolean;
+    private refreshErrorAlert;
     /**
      * Returns true when the text field's `value` property has been changed from
      * it's initial value.
@@ -215,29 +209,25 @@ export declare abstract class TextField extends LitElement {
      * Setting `value` should always overwrite `defaultValue`, even when `value`
      * is an empty string. This flag ensures that behavior.
      */
-    protected valueHasChanged: boolean;
+    private valueHasChanged;
     /**
      * Whether or not to ignore the next `value` change when computing
      * `valueHasChanged`.
      */
-    protected ignoreNextValueChange: boolean;
+    private ignoreNextValueChange;
     /**
      * Whether or not a native error has been reported via `reportValidity()`.
      */
-    protected nativeError: boolean;
+    private nativeError;
     /**
      * The validation message displayed from a native error via
      * `reportValidity()`.
      */
-    protected nativeErrorText: string;
-    protected readonly input?: HTMLInputElement | null;
-    protected abstract readonly fieldTag: StaticValue;
-    /** @soyUniqueAttribute */
-    private readonly counterId;
+    private nativeErrorText;
+    private get hasError();
+    private readonly input?;
     private readonly leadingIcons;
     private readonly trailingIcons;
-    /** @soyUniqueAttribute */
-    private readonly supportingTextId;
     constructor();
     /**
      * Checks the text field's native validation and returns whether or not the
@@ -254,10 +244,6 @@ export declare abstract class TextField extends LitElement {
      * Focuses the text field's input text.
      */
     focus(): void;
-    /**
-     * Unfocuses the text field.
-     */
-    blur(): void;
     /**
      * Checks the text field's native validation and returns whether or not the
      * element is valid.
@@ -334,65 +320,29 @@ export declare abstract class TextField extends LitElement {
      * Reset the text field to its default value.
      */
     reset(): void;
-    /** @soyTemplate */
-    render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected getError(): boolean;
-    /** @soyTemplate */
-    protected renderField(): TemplateResult;
-    /**
-     * @soyTemplate
-     * @slotName start
-     */
-    protected renderLeadingIcon(): TemplateResult;
-    /**
-     * @soyTemplate
-     * @slotName end
-     */
-    protected renderTrailingIcon(): TemplateResult;
-    /** @soyTemplate */
-    protected renderInput(): TemplateResult;
-    /** @soyTemplate */
-    protected getInputValue(): string;
-    /** @soyTemplate */
-    protected getAriaDescribedBy(): string;
-    /** @soyTemplate */
-    protected renderPrefix(): TemplateResult;
-    /** @soyTemplate */
-    protected renderSuffix(): TemplateResult;
-    /**
-     * @soyTemplate
-     * @slotName supporting-text
-     */
-    protected renderSupportingText(): TemplateResult;
-    /** @soyTemplate */
-    protected getSupportingText(): string;
-    /** @soyTemplate */
-    protected getErrorText(): string;
-    /** @soyTemplate */
-    protected shouldErrorAnnounce(): boolean;
-    /**
-     * @soyTemplate
-     * @slotName supporting-text-end
-     */
-    protected renderCounter(): TemplateResult;
-    /** @soyTemplate */
-    protected hasCounter(): boolean;
-    /** @soyTemplate */
-    protected getCounterText(): TemplateResult;
-    protected update(changedProperties: PropertyValues<TextField>): void;
+    protected update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
     protected updated(changedProperties: PropertyValues): void;
-    /** @bubbleWizEvent */
-    protected handleClick(): void;
-    /** @bubbleWizEvent */
-    protected handleFocusin(event: FocusEvent): void;
-    /** @bubbleWizEvent */
-    protected handleFocusout(event: FocusEvent): void;
-    protected handleInput(event: InputEvent): void;
-    protected redispatchEvent(event: Event): void;
-    protected getInput(): HTMLInputElement;
+    private renderField;
+    private renderLeadingIcon;
+    private renderTrailingIcon;
+    private renderInput;
+    private getInputValue;
+    private getAriaDescribedBy;
+    private renderPrefix;
+    private renderSuffix;
+    private renderAffix;
+    private renderSupportingText;
+    private getSupportingText;
+    private getErrorText;
+    private shouldErrorAnnounce;
+    private renderCounter;
+    private getCounterText;
+    private handleFocusin;
+    private handleFocusout;
+    private handleInput;
+    private redispatchEvent;
+    private getInput;
     private checkValidityAndDispatch;
     private handleIconChange;
 }