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

package/README.md

@@ -38,7 +38,7 @@ FAB                           | 🟢     | 🔴    | 🔴
 Icon button                   | 🟢     | 🔴    | 🔴
 Checkbox                      | 🟢     | 🟢    | 🔴
 Chips                         | 🔴     | 🔴    | 🔴
-Dialog                        | 🟢     | 🔴    | 🔴
+Dialog                        | 🟢     | 🟢    | 🔴
 Divider                       | 🟢     | 🟢    | 🟡
 Elevation                     | 🟢     | 🔴    | 🔴
 Focus ring                    | 🟢     | 🔴    | 🔴
@@ -49,12 +49,12 @@ Menu                          | 🟢     | 🟢    | 🟡
 Progress indicator (circular) | 🔴     | 🔴    | 🔴
 Progress indicator (linear)   | 🔴     | 🔴    | 🔴
 Radio button                  | 🟢     | 🟢    | 🔴
-Ripple                        | 🟢     | 🟡    | 🔴
+Ripple                        | 🟢     | 🟢    | 🟡
 Select                        | 🟡     | 🔴    | 🔴
-Slider                        | 🔴     | 🔴    | 🔴
+Slider                        | 🟢     | 🟢    | 🔴
 Switch                        | 🟢     | 🟢    | 🔴
 Tabs                          | 🔴     | 🔴    | 🔴
-Text field                    | 🟢     | 🟢    | 🔴
+Text field                    | 🟢     | 🟢    | 🟡
 
 ### 1.1+ Components
 

package/autocomplete/autocomplete-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-item.js","sourceRoot":"","sources":["autocomplete-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,6CAA6C,CAAC;AAQ7E;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AADiB,yBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {AutocompleteItem} from './lib/autocompleteitem/autocomplete-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-item': MdAutocompleteItem;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-item')\nexport class MdAutocompleteItem extends AutocompleteItem {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"autocomplete-item.js","sourceRoot":"","sources":["autocomplete-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,6CAA6C,CAAC;AAQ7E;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {AutocompleteItem} from './lib/autocompleteitem/autocomplete-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-item': MdAutocompleteItem;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-item')\nexport class MdAutocompleteItem extends AutocompleteItem {\n  static override styles = [styles];\n}\n"]}

package/autocomplete/autocomplete-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-list.js","sourceRoot":"","sources":["autocomplete-list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAEtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wDAAwD,CAAC;AAQpG;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AADiB,yBAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;AAD3C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../list/lib/list-styles.css.js';\n\nimport {AutocompleteList} from './lib/autocompletelist/autocomplete-list.js';\nimport {styles as autocompleteStyles} from './lib/autocompletelist/autocomplete-list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-list': MdAutocompleteList;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-list')\nexport class MdAutocompleteList extends AutocompleteList {\n  static override styles = [styles, autocompleteStyles];\n}\n"]}
+{"version":3,"file":"autocomplete-list.js","sourceRoot":"","sources":["autocomplete-list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAEtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wDAAwD,CAAC;AAQpG;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../list/lib/list-styles.css.js';\n\nimport {AutocompleteList} from './lib/autocompletelist/autocomplete-list.js';\nimport {styles as autocompleteStyles} from './lib/autocompletelist/autocomplete-list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-list': MdAutocompleteList;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-list')\nexport class MdAutocompleteList extends AutocompleteList {\n  static override styles = [styles, autocompleteStyles];\n}\n"]}

package/autocomplete/autocomplete-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-surface.js","sourceRoot":"","sources":["autocomplete-surface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,+CAA+C,CAAC;AAErE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mDAAmD,CAAC;AACtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8DAA8D,CAAC;AAQ1G;;;;GAIG;AAEH,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,mBAAmB;CAE7D,CAAA;AADiB,4BAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;AAD3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAEjC;SAFY,qBAAqB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../menusurface/lib/menu-surface-styles.css.js';\n\nimport {AutocompleteSurface} from './lib/autocompletesurface/autocomplete-surface.js';\nimport {styles as autocompleteStyles} from './lib/autocompletesurface/autocomplete-surface-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-surface': MdAutocompleteSurface;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-surface')\nexport class MdAutocompleteSurface extends AutocompleteSurface {\n  static override styles = [styles, autocompleteStyles];\n}\n"]}
+{"version":3,"file":"autocomplete-surface.js","sourceRoot":"","sources":["autocomplete-surface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,+CAA+C,CAAC;AAErE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mDAAmD,CAAC;AACtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8DAA8D,CAAC;AAQ1G;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,mBAAmB;;AAC5C,4BAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAEjC;SAFY,qBAAqB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../menusurface/lib/menu-surface-styles.css.js';\n\nimport {AutocompleteSurface} from './lib/autocompletesurface/autocomplete-surface.js';\nimport {styles as autocompleteStyles} from './lib/autocompletesurface/autocomplete-surface-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-autocomplete-surface': MdAutocompleteSurface;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-autocomplete-surface')\nexport class MdAutocompleteSurface extends AutocompleteSurface {\n  static override styles = [styles, autocompleteStyles];\n}\n"]}

package/autocomplete/filled-autocomplete.d.ts

@@ -25,6 +25,4 @@ export declare class MdFilledAutocomplete extends Autocomplete {
     protected readonly fieldTag: import("lit-html/static.js").StaticValue;
     /** @soyTemplate */
     protected getAutocompleteRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
 }

package/autocomplete/filled-autocomplete.js

@@ -34,13 +34,6 @@ let MdFilledAutocomplete = class MdFilledAutocomplete extends Autocomplete {
             'md3-autocomplete--filled': true,
         };
     }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-text-field--filled': true,
-        };
-    }
 };
 MdFilledAutocomplete.styles = [
     sharedStyles, filledStyles, filledForcedColorsStyles,

package/autocomplete/filled-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-autocomplete.js","sourceRoot":"","sources":["filled-autocomplete.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,qDAAqD,CAAC;AACvG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAQ9E;;;;GAIG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,YAAY;IAAtD;;QAM8B,YAAO,GAAG,OAAO,CAAA,sBAAsB,CAAC;QACxC,mBAAc,GAAG,OAAO,CAAA,yBAAyB,CAAC;QAClD,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAiBlE,CAAC;IAfC,mBAAmB;IACA,4BAA4B;QAC7C,OAAO;YACL,GAAG,KAAK,CAAC,4BAA4B,EAAE;YACvC,0BAA0B,EAAE,IAAI;SACjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,wBAAwB,EAAE,IAAI;SAC/B,CAAC;IACJ,CAAC;CACF,CAAA;AAxBiB,2BAAM,GAAG;IACvB,YAAY,EAAE,YAAY,EAAE,wBAAwB;IACpD,wBAAwB,EAAE,kBAAkB;CAC5C,CAAA;AAJS,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAyBhC;SAzBY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\nimport './autocomplete-list.js';\nimport './autocomplete-surface.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from '../textfield/lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from '../textfield/lib/filled-styles.css.js';\nimport {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';\n\nimport {Autocomplete} from './lib/autocomplete.js';\nimport {styles as autocompleteStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-autocomplete': MdFilledAutocomplete;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-autocomplete')\nexport class MdFilledAutocomplete extends Autocomplete {\n  static override styles = [\n    sharedStyles, filledStyles, filledForcedColorsStyles,\n    sharedAutocompleteStyles, autocompleteStyles\n  ];\n\n  protected override readonly listTag = literal`md-autocomplete-list`;\n  protected override readonly menuSurfaceTag = literal`md-autocomplete-surface`;\n  protected override readonly fieldTag = literal`md-filled-field`;\n\n  /** @soyTemplate */\n  protected override getAutocompleteRenderClasses(): ClassInfo {\n    return {\n      ...super.getAutocompleteRenderClasses(),\n      'md3-autocomplete--filled': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-text-field--filled': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-autocomplete.js","sourceRoot":"","sources":["filled-autocomplete.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,qDAAqD,CAAC;AACvG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAQ9E;;;;GAIG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,YAAY;IAA/C;;QAMuB,YAAO,GAAG,OAAO,CAAA,sBAAsB,CAAC;QACxC,mBAAc,GAAG,OAAO,CAAA,yBAAyB,CAAC;QAClD,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IASlE,CAAC;IAPC,mBAAmB;IACA,4BAA4B;QAC7C,OAAO;YACL,GAAG,KAAK,CAAC,4BAA4B,EAAE;YACvC,0BAA0B,EAAE,IAAI;SACjC,CAAC;IACJ,CAAC;;AAfe,2BAAM,GAAG;IACvB,YAAY,EAAE,YAAY,EAAE,wBAAwB;IACpD,wBAAwB,EAAE,kBAAkB;CAC7C,CAAC;AAJS,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAiBhC;SAjBY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\nimport './autocomplete-list.js';\nimport './autocomplete-surface.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from '../textfield/lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from '../textfield/lib/filled-styles.css.js';\nimport {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';\n\nimport {Autocomplete} from './lib/autocomplete.js';\nimport {styles as autocompleteStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-autocomplete': MdFilledAutocomplete;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-autocomplete')\nexport class MdFilledAutocomplete extends Autocomplete {\n  static override styles = [\n    sharedStyles, filledStyles, filledForcedColorsStyles,\n    sharedAutocompleteStyles, autocompleteStyles\n  ];\n\n  protected override readonly listTag = literal`md-autocomplete-list`;\n  protected override readonly menuSurfaceTag = literal`md-autocomplete-surface`;\n  protected override readonly fieldTag = literal`md-filled-field`;\n\n  /** @soyTemplate */\n  protected override getAutocompleteRenderClasses(): ClassInfo {\n    return {\n      ...super.getAutocompleteRenderClasses(),\n      'md3-autocomplete--filled': true,\n    };\n  }\n}\n"]}

package/autocomplete/lib/_filled-autocomplete.scss

@@ -6,13 +6,20 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/lib/elevation';
 @use '../../field/filled-field';
 @use '../../menusurface/menu-surface';
+@use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../textfield/filled-text-field';
 @use '../../tokens';
 @use './shared';
+// go/keep-sorted end
 
 $custom-property-prefix: 'filled-autocomplete';
 $dark-theme: tokens.md-comp-filled-autocomplete-values(
@@ -23,20 +30,25 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
 );
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-autocomplete-values(),
-    $tokens
+  $reference: shared.resolve-typography-tokens(
+    tokens.md-comp-filled-autocomplete-values()
   );
-  $tokens: shared.resolve-tokens($tokens);
+  $tokens: shared.resolve-typography-tokens($tokens);
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-autocomplete-values();
-  $tokens: shared.resolve-tokens($tokens);
+  $tokens: shared.resolve-typography-tokens(
+    tokens.md-comp-filled-autocomplete-values()
+  );
+  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
 
   :host {
     @each $token, $value in $tokens {
@@ -138,31 +150,16 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
           var(--_text-field-hover-supporting-text-color),
         hover-trailing-icon-color: var(--_text-field-hover-trailing-icon-color),
         input-text-color: var(--_text-field-input-text-color),
-        input-text-font: var(--_text-field-input-text-font),
-        input-text-line-height: var(--_text-field-input-text-line-height),
-        input-text-size: var(--_text-field-input-text-size),
-        input-text-tracking: var(--_text-field-input-text-tracking),
         input-text-type: var(--_text-field-input-text-type),
-        input-text-weight: var(--_text-field-input-text-weight),
         label-text-color: var(--_text-field-label-text-color),
-        label-text-font: var(--_text-field-label-text-font),
-        label-text-line-height: var(--_text-field-label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-populated-line-height:
           var(--_text-field-label-text-populated-line-height),
         label-text-populated-size: var(--_text-field-label-text-populated-size),
-        label-text-size: var(--_text-field-label-text-size),
-        label-text-tracking: var(--_text-field-label-text-tracking),
-        label-text-type: var(--_text-field-label-text-type),
-        label-text-weight: var(--_text-field-label-text-weight),
         leading-icon-color: var(--_text-field-leading-icon-color),
         leading-icon-size: var(--_text-field-leading-icon-size),
         supporting-text-color: var(--_text-field-supporting-text-color),
-        supporting-text-font: var(--_text-field-supporting-text-font),
-        supporting-text-line-height:
-          var(--_text-field-supporting-text-line-height),
-        supporting-text-size: var(--_text-field-supporting-text-size),
-        supporting-text-tracking: var(--_text-field-supporting-text-tracking),
-        supporting-text-weight: var(--_text-field-supporting-text-weight),
+        supporting-text-type: var(--_supporting-text-type),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
       )
@@ -170,11 +167,8 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
     // Textfield cannot resolve shape when created as vars.
     @include filled-field.theme(
       (
-        container-shape-start-start:
-          var(--_text-field-container-shape-start-start),
-        container-shape-start-end: var(--_text-field-container-shape-start-end),
-        container-shape-end-end: var(--_text-field-container-shape-end-end),
-        container-shape-end-start: var(--_text-field-container-shape-end-start),
+        container-shape:
+          shape.corners-to-shape-token('--_text-field-container-shape'),
       )
     );
   }

package/autocomplete/lib/_outlined-autocomplete.scss

@@ -6,13 +6,20 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/lib/elevation';
 @use '../../field/outlined-field';
 @use '../../menusurface/menu-surface';
+@use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../textfield/outlined-text-field';
 @use '../../tokens';
 @use './shared';
+// go/keep-sorted end
 
 $custom-property-prefix: 'outlined-autocomplete';
 $dark-theme: tokens.md-comp-outlined-autocomplete-values(
@@ -23,19 +30,23 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
 );
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-autocomplete-values(),
-    $theme
+  $reference: shared.resolve-typography-tokens(
+    tokens.md-comp-outlined-autocomplete-values()
   );
-  $tokens: shared.resolve-tokens($tokens);
+
+  $tokens: shared.resolve-typography-tokens($tokens);
+  $tokens: theme.validate-theme($reference, $theme);
+  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-autocomplete-values();
-  $tokens: shared.resolve-tokens($tokens);
+  $tokens: shared.resolve-typography-tokens(
+    tokens.md-comp-outlined-autocomplete-values()
+  );
   // TODO(b/251183088): Clean up container-shape once token is correct.
   $tokens: map.merge(
     $tokens,
@@ -43,8 +54,9 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
       text-field-container-shape: 4px,
     )
   );
-
+  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
 
   :host {
     @each $token, $value in $tokens {
@@ -124,33 +136,18 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
           var(--_text-field-hover-supporting-text-color),
         hover-trailing-icon-color: var(--_text-field-hover-trailing-icon-color),
         input-text-color: var(--_text-field-input-text-color),
-        input-text-font: var(--_text-field-input-text-font),
-        input-text-line-height: var(--_text-field-input-text-line-height),
-        input-text-size: var(--_text-field-input-text-size),
-        input-text-tracking: var(--_text-field-input-text-tracking),
         input-text-type: var(--_text-field-input-text-type),
-        input-text-weight: var(--_text-field-input-text-weight),
         label-text-color: var(--_text-field-label-text-color),
-        label-text-font: var(--_text-field-label-text-font),
-        label-text-line-height: var(--_text-field-label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-populated-line-height:
           var(--_text-field-label-text-populated-line-height),
         label-text-populated-size: var(--_text-field-label-text-populated-size),
-        label-text-size: var(--_text-field-label-text-size),
-        label-text-tracking: var(--_text-field-label-text-tracking),
-        label-text-type: var(--_text-field-label-text-type),
-        label-text-weight: var(--_text-field-label-text-weight),
         leading-icon-color: var(--_text-field-leading-icon-color),
         leading-icon-size: var(--_text-field-leading-icon-size),
         outline-color: var(--_text-field-outline-color),
         outline-width: var(--_text-field-outline-width),
         supporting-text-color: var(--_text-field-supporting-text-color),
-        supporting-text-font: var(--_text-field-supporting-text-font),
-        supporting-text-line-height:
-          var(--_text-field-supporting-text-line-height),
-        supporting-text-size: var(--_text-field-supporting-text-size),
-        supporting-text-tracking: var(--_text-field-supporting-text-tracking),
-        supporting-text-weight: var(--_text-field-supporting-text-weight),
+        supporting-text-type: var(--_supporting-text-type),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
       )
@@ -159,11 +156,8 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
     // Textfield cannot resolve shape when created as vars.
     @include outlined-field.theme(
       (
-        container-shape-start-start:
-          var(--_text-field-container-shape-start-start),
-        container-shape-start-end: var(--_text-field-container-shape-start-end),
-        container-shape-end-end: var(--_text-field-container-shape-end-end),
-        container-shape-end-start: var(--_text-field-container-shape-end-start),
+        container-shape:
+          shape.corners-to-shape-token('--_text-field-container-shape'),
       )
     );
   }

package/autocomplete/lib/_shared.scss

@@ -6,10 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use 'sass:map';
-@use '../../elevation/lib/elevation';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
+@use '../../sass/typography';
 
 @mixin styles() {
   .md3-autocomplete {
@@ -18,12 +15,11 @@
   }
 }
 
-@function resolve-tokens($tokens) {
-  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
-  $tokens: shape.resolve-theme(
+@function resolve-typography-tokens($tokens) {
+  @return typography.resolve-tokens(
     $tokens,
-    map.get(resolvers.$material, shape),
-    text-field-container-shape
+    'input-text',
+    'label-text',
+    'supporting-text'
   );
-  @return $tokens;
 }

package/autocomplete/lib/autocomplete.d.ts

@@ -27,7 +27,7 @@ export declare abstract class Autocomplete extends TextField {
     value: string;
     protected selectedItem: AutocompleteItem | null;
     /** @soyTemplate */
-    render(): TemplateResult;
+    render(): TemplateResult<1>;
     /** @soyTemplate */
     protected getAutocompleteRenderClasses(): ClassInfo;
     protected updated(changedProperties: PropertyValues): void;
@@ -38,7 +38,7 @@ export declare abstract class Autocomplete extends TextField {
     open(): void;
     close(): void;
     protected handleClicked(event: PointerEvent): void;
-    protected handleFocusout(): void;
+    protected handleAnyFocusout(): void;
     protected handleAction(event: CustomEvent<{
         item: AutocompleteItem;
     }>): void;

package/autocomplete/lib/autocomplete.js

@@ -29,9 +29,8 @@ export class Autocomplete extends TextField {
     render() {
         return html `<div class="md3-autocomplete ${classMap(this.getAutocompleteRenderClasses())}"
             @click=${this.handleClicked}
-            @focusout=${this.handleFocusout}
+            @focusout=${this.handleAnyFocusout}
             @action=${this.handleAction}
-            @input=${this.handleInput}
             @keydown=${this.handleKeydown}
             @keyup=${this.handleKeyup}>
             ${super.render()}
@@ -89,13 +88,13 @@ export class Autocomplete extends TextField {
             this.open();
         }
     }
-    handleFocusout() {
+    handleAnyFocusout() {
         if (this.matches(':focus-within')) {
-            this.getInput().focus();
+            super.focus();
             return;
         }
         this.close();
-        this.focused = false;
+        this.blur();
     }
     handleAction(event) {
         const detail = event.detail;

package/autocomplete/lib/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["autocomplete.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {TextField} from '../../textfield/lib/text-field.js';\n\nimport {AutocompleteItem} from './autocompleteitem/autocomplete-item.js';\nimport {AutocompleteList} from './autocompletelist/autocomplete-list.js';\nimport {AutocompleteSurface} from './autocompletesurface/autocomplete-surface.js';\n\n/** @soyCompatible */\nexport abstract class Autocomplete extends TextField {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  override readonly role = 'combobox';\n  override readonly ariaAutoComplete = 'list';\n\n  /**\n   * The ID prefix for the item elements, used for SSR.\n   */\n  @property({type: String}) itemIdPrefix = 'autocomplete-item';\n\n  protected abstract readonly menuSurfaceTag: StaticValue;\n  protected abstract readonly listTag: StaticValue;\n\n  @query('.md3-autocomplete__menu-surface')\n  menuSurface?: AutocompleteSurface|null;\n  @query('.md3-autocomplete__list') list?: AutocompleteList|null;\n\n  @queryAssignedElements({flatten: true})\n  protected slottedItems?: AutocompleteItem[];\n\n  @property({type: String}) override value = '';\n  @state() protected selectedItem: AutocompleteItem|null = null;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`<div class=\"md3-autocomplete ${\n        classMap(this.getAutocompleteRenderClasses())}\"\n            @click=${this.handleClicked}\n            @focusout=${this.handleFocusout}\n            @action=${this.handleAction}\n            @input=${this.handleInput}\n            @keydown=${this.handleKeydown}\n            @keyup=${this.handleKeyup}>\n            ${super.render()}\n            ${this.renderMenuSurface()}</div>`;\n  }\n\n  /** @soyTemplate */\n  protected getAutocompleteRenderClasses(): ClassInfo {\n    return {};\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selectedItem')) {\n      this.updateSelectedItem();\n      // TODO(b/265209253): implement\n      // this.ariaActiveDescendant = this.selectedItem?.itemId ?? null;\n    }\n    if (changedProperties.has('value')) {\n      this.dispatchEvent(new CustomEvent(\n          'autocomplete-value-changed',\n          {detail: {value: this.value}, bubbles: true, composed: true}));\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    console.warn('<md-autocomplete> is not yet implemented.');\n    super.firstUpdated(changedProperties);\n    this.menuSurface!.anchor = this;\n  }\n\n  /** @soyTemplate */\n  protected renderMenuSurface(): TemplateResult {\n    return staticHtml`<${this.menuSurfaceTag}\n      class=\"md3-autocomplete__menu-surface\">\n      <${this.listTag} class=\"md3-autocomplete__list\">\n        <slot></slot>\n      </${this.listTag}>\n    </${this.menuSurfaceTag}>`;\n  }\n\n  isOpen() {\n    return this.menuSurface?.open || false;\n  }\n\n  open() {\n    this.menuSurface?.show();\n    this.ariaExpanded = 'true';\n  }\n\n  close() {\n    this.menuSurface?.close();\n    this.selectedItem = null;\n    this.ariaExpanded = 'false';\n  }\n\n  protected handleClicked(event: PointerEvent) {\n    // When clicking the list (not items nor text field) the menu should stay\n    // open.\n    if (this.isOpen() &&\n        (event.target as Node)?.parentNode !== this.menuSurface) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  protected override handleFocusout() {\n    if (this.matches(':focus-within')) {\n      this.getInput().focus();\n      return;\n    }\n    this.close();\n    this.focused = false;\n  }\n\n  protected handleAction(event: CustomEvent<{item: AutocompleteItem}>) {\n    const detail = event.detail;\n    this.value = detail.item.headline;\n  }\n\n  protected handleKeydown(event: KeyboardEvent) {\n    let bubble = true;\n    const altKey = event.altKey;\n\n    switch (event.key) {\n      case 'Enter':\n        if (this.selectedItem) {\n          this.value = this.selectedItem.headline;\n        }\n        this.close();\n        bubble = false;\n        break;\n\n      case 'ArrowDown':\n        if (!this.slottedItems) return;\n        if (this.slottedItems.length) {\n          if (this.selectedItem) {\n            this.selectedItem = this.getNextItem();\n          } else {\n            this.open();\n            if (!altKey) {\n              this.selectedItem = this.slottedItems[0];\n            }\n          }\n        }\n        bubble = false;\n        break;\n\n      case 'ArrowUp':\n        if (!this.slottedItems) return;\n        if (this.slottedItems.length) {\n          if (this.selectedItem) {\n            this.selectedItem = this.getPreviousItem();\n          } else {\n            this.open();\n            if (!altKey) {\n              this.selectedItem =\n                  this.slottedItems[this.slottedItems.length - 1];\n            }\n          }\n        }\n        bubble = false;\n        break;\n\n      case 'Escape':\n        if (this.isOpen()) {\n          this.close();\n        } else {\n          this.value = '';\n        }\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      case 'Tab':\n        if (this.selectedItem) {\n          this.value = this.selectedItem.headline;\n        }\n        this.close();\n        break;\n\n      case 'Home':\n        this.setSelectionRange(0, 0);\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      case 'End':\n        this.setSelectionRange(this.value.length, this.value.length);\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      default:\n        break;\n    }\n\n    if (bubble) return;\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  protected handleKeyup(event: KeyboardEvent) {\n    let bubble = true;\n\n    switch (event.key) {\n      case 'Backspace':\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      default:\n        break;\n    }\n\n    if (bubble) return;\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * When selectedItem is updated, item prefixes and aria-selected status will\n   * be updated along with scrolling the selected item into view, if needed.\n   */\n  private updateSelectedItem() {\n    if (!this.slottedItems) return;\n    this.slottedItems.forEach((item, index) => {\n      // TODO(b/265209253): implement\n      // item.itemId = `${this.itemIdPrefix}-${index}`;\n\n      if (this.selectedItem && item === this.selectedItem && this.list) {\n        item.ariaSelected = 'true';\n\n        // Scroll into view\n        if (this.list.scrollTop + this.list.offsetHeight <\n            item.offsetTop + item.offsetHeight) {\n          this.list.scrollTop =\n              item.offsetTop + item.offsetHeight - this.list.offsetHeight;\n        } else if (this.list.scrollTop > item.offsetTop + 2) {\n          this.list.scrollTop = item.offsetTop;\n        }\n      } else {\n        item.ariaSelected = 'false';\n      }\n    });\n  }\n\n  private getPreviousItem(): AutocompleteItem|null {\n    if (!this.slottedItems) return null;\n    const index =\n        this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;\n    const length = this.slottedItems.length;\n    return this.slottedItems[(index - 1 + length) % length];\n  }\n\n  private getNextItem(): AutocompleteItem|null {\n    if (!this.slottedItems) return null;\n    const index =\n        this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;\n    const length = this.slottedItems.length;\n    return this.slottedItems[(index + 1) % length];\n  }\n}\n"]}
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["autocomplete.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {TextField} from '../../textfield/lib/text-field.js';\n\nimport {AutocompleteItem} from './autocompleteitem/autocomplete-item.js';\nimport {AutocompleteList} from './autocompletelist/autocomplete-list.js';\nimport {AutocompleteSurface} from './autocompletesurface/autocomplete-surface.js';\n\n/** @soyCompatible */\nexport abstract class Autocomplete extends TextField {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  override readonly role = 'combobox';\n  override readonly ariaAutoComplete = 'list';\n\n  /**\n   * The ID prefix for the item elements, used for SSR.\n   */\n  @property({type: String}) itemIdPrefix = 'autocomplete-item';\n\n  protected abstract readonly menuSurfaceTag: StaticValue;\n  protected abstract readonly listTag: StaticValue;\n\n  @query('.md3-autocomplete__menu-surface')\n  menuSurface?: AutocompleteSurface|null;\n  @query('.md3-autocomplete__list') list?: AutocompleteList|null;\n\n  @queryAssignedElements({flatten: true})\n  protected slottedItems?: AutocompleteItem[];\n\n  @property({type: String}) override value = '';\n  @state() protected selectedItem: AutocompleteItem|null = null;\n\n  /** @soyTemplate */\n  override render() {\n    return html`<div class=\"md3-autocomplete ${\n        classMap(this.getAutocompleteRenderClasses())}\"\n            @click=${this.handleClicked}\n            @focusout=${this.handleAnyFocusout}\n            @action=${this.handleAction}\n            @keydown=${this.handleKeydown}\n            @keyup=${this.handleKeyup}>\n            ${super.render()}\n            ${this.renderMenuSurface()}</div>`;\n  }\n\n  /** @soyTemplate */\n  protected getAutocompleteRenderClasses(): ClassInfo {\n    return {};\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selectedItem')) {\n      this.updateSelectedItem();\n      // TODO(b/265209253): implement\n      // this.ariaActiveDescendant = this.selectedItem?.itemId ?? null;\n    }\n    if (changedProperties.has('value')) {\n      this.dispatchEvent(new CustomEvent(\n          'autocomplete-value-changed',\n          {detail: {value: this.value}, bubbles: true, composed: true}));\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    console.warn('<md-autocomplete> is not yet implemented.');\n    super.firstUpdated(changedProperties);\n    this.menuSurface!.anchor = this;\n  }\n\n  /** @soyTemplate */\n  protected renderMenuSurface(): TemplateResult {\n    return staticHtml`<${this.menuSurfaceTag}\n      class=\"md3-autocomplete__menu-surface\">\n      <${this.listTag} class=\"md3-autocomplete__list\">\n        <slot></slot>\n      </${this.listTag}>\n    </${this.menuSurfaceTag}>`;\n  }\n\n  isOpen() {\n    return this.menuSurface?.open || false;\n  }\n\n  open() {\n    this.menuSurface?.show();\n    this.ariaExpanded = 'true';\n  }\n\n  close() {\n    this.menuSurface?.close();\n    this.selectedItem = null;\n    this.ariaExpanded = 'false';\n  }\n\n  protected handleClicked(event: PointerEvent) {\n    // When clicking the list (not items nor text field) the menu should stay\n    // open.\n    if (this.isOpen() &&\n        (event.target as Node)?.parentNode !== this.menuSurface) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  protected handleAnyFocusout() {\n    if (this.matches(':focus-within')) {\n      super.focus();\n      return;\n    }\n    this.close();\n    this.blur();\n  }\n\n  protected handleAction(event: CustomEvent<{item: AutocompleteItem}>) {\n    const detail = event.detail;\n    this.value = detail.item.headline;\n  }\n\n  protected handleKeydown(event: KeyboardEvent) {\n    let bubble = true;\n    const altKey = event.altKey;\n\n    switch (event.key) {\n      case 'Enter':\n        if (this.selectedItem) {\n          this.value = this.selectedItem.headline;\n        }\n        this.close();\n        bubble = false;\n        break;\n\n      case 'ArrowDown':\n        if (!this.slottedItems) return;\n        if (this.slottedItems.length) {\n          if (this.selectedItem) {\n            this.selectedItem = this.getNextItem();\n          } else {\n            this.open();\n            if (!altKey) {\n              this.selectedItem = this.slottedItems[0];\n            }\n          }\n        }\n        bubble = false;\n        break;\n\n      case 'ArrowUp':\n        if (!this.slottedItems) return;\n        if (this.slottedItems.length) {\n          if (this.selectedItem) {\n            this.selectedItem = this.getPreviousItem();\n          } else {\n            this.open();\n            if (!altKey) {\n              this.selectedItem =\n                  this.slottedItems[this.slottedItems.length - 1];\n            }\n          }\n        }\n        bubble = false;\n        break;\n\n      case 'Escape':\n        if (this.isOpen()) {\n          this.close();\n        } else {\n          this.value = '';\n        }\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      case 'Tab':\n        if (this.selectedItem) {\n          this.value = this.selectedItem.headline;\n        }\n        this.close();\n        break;\n\n      case 'Home':\n        this.setSelectionRange(0, 0);\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      case 'End':\n        this.setSelectionRange(this.value.length, this.value.length);\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      default:\n        break;\n    }\n\n    if (bubble) return;\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  protected handleKeyup(event: KeyboardEvent) {\n    let bubble = true;\n\n    switch (event.key) {\n      case 'Backspace':\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        this.selectedItem = null;\n        bubble = false;\n        break;\n\n      default:\n        break;\n    }\n\n    if (bubble) return;\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * When selectedItem is updated, item prefixes and aria-selected status will\n   * be updated along with scrolling the selected item into view, if needed.\n   */\n  private updateSelectedItem() {\n    if (!this.slottedItems) return;\n    this.slottedItems.forEach((item, index) => {\n      // TODO(b/265209253): implement\n      // item.itemId = `${this.itemIdPrefix}-${index}`;\n\n      if (this.selectedItem && item === this.selectedItem && this.list) {\n        item.ariaSelected = 'true';\n\n        // Scroll into view\n        if (this.list.scrollTop + this.list.offsetHeight <\n            item.offsetTop + item.offsetHeight) {\n          this.list.scrollTop =\n              item.offsetTop + item.offsetHeight - this.list.offsetHeight;\n        } else if (this.list.scrollTop > item.offsetTop + 2) {\n          this.list.scrollTop = item.offsetTop;\n        }\n      } else {\n        item.ariaSelected = 'false';\n      }\n    });\n  }\n\n  private getPreviousItem(): AutocompleteItem|null {\n    if (!this.slottedItems) return null;\n    const index =\n        this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;\n    const length = this.slottedItems.length;\n    return this.slottedItems[(index - 1 + length) % length];\n  }\n\n  private getNextItem(): AutocompleteItem|null {\n    if (!this.slottedItems) return null;\n    const index =\n        this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;\n    const length = this.slottedItems.length;\n    return this.slottedItems[(index + 1) % length];\n  }\n}\n"]}

package/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss

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

package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss

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

package/autocomplete/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_text-field-container-shape-start-start: var(--md-filled-autocomplete-text-field-container-shape-start-start, 4px);--_text-field-container-shape-start-end: var(--md-filled-autocomplete-text-field-container-shape-start-end, 4px);--_text-field-container-shape-end-end: var(--md-filled-autocomplete-text-field-container-shape-end-end, 0px);--_text-field-container-shape-end-start: var(--md-filled-autocomplete-text-field-container-shape-end-start, 0px);--_menu-cascading-menu-indicator-icon-color: var(--md-filled-autocomplete-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_menu-cascading-menu-indicator-icon-size: var(--md-filled-autocomplete-menu-cascading-menu-indicator-icon-size, 24px);--_menu-container-color: var(--md-filled-autocomplete-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_menu-container-elevation: var(--md-filled-autocomplete-menu-container-elevation, 2);--_menu-container-shadow-color: var(--md-filled-autocomplete-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_menu-container-shape: var(--md-filled-autocomplete-menu-container-shape, 4px);--_menu-container-surface-tint-layer-color: var(--md-filled-autocomplete-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_menu-divider-color: var(--md-filled-autocomplete-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_menu-divider-height: var(--md-filled-autocomplete-menu-divider-height, 1px);--_menu-list-item-container-height: var(--md-filled-autocomplete-menu-list-item-container-height, 48px);--_menu-list-item-label-text-color: var(--md-filled-autocomplete-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_menu-list-item-label-text-font: var(--md-filled-autocomplete-menu-list-item-label-text-font, Roboto);--_menu-list-item-label-text-line-height: var(--md-filled-autocomplete-menu-list-item-label-text-line-height, 1.25rem);--_menu-list-item-label-text-size: var(--md-filled-autocomplete-menu-list-item-label-text-size, 0.875rem);--_menu-list-item-label-text-tracking: var(--md-filled-autocomplete-menu-list-item-label-text-tracking, 0.006rem);--_menu-list-item-label-text-type: var(--md-filled-autocomplete-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_menu-list-item-label-text-weight: var(--md-filled-autocomplete-menu-list-item-label-text-weight, 500);--_menu-list-item-selected-container-color: var(--md-filled-autocomplete-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_text-field-active-indicator-color: var(--md-filled-autocomplete-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-active-indicator-height: var(--md-filled-autocomplete-text-field-active-indicator-height, 1px);--_text-field-caret-color: var(--md-filled-autocomplete-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_text-field-container-color: var(--md-filled-autocomplete-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_text-field-disabled-active-indicator-color: var(--md-filled-autocomplete-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-active-indicator-height: var(--md-filled-autocomplete-text-field-disabled-active-indicator-height, 1px);--_text-field-disabled-active-indicator-opacity: var(--md-filled-autocomplete-text-field-disabled-active-indicator-opacity, 0.38);--_text-field-disabled-container-color: var(--md-filled-autocomplete-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-container-opacity: var(--md-filled-autocomplete-text-field-disabled-container-opacity, 0.04);--_text-field-disabled-input-text-color: var(--md-filled-autocomplete-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-input-text-opacity: var(--md-filled-autocomplete-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-filled-autocomplete-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-label-text-opacity: var(--md-filled-autocomplete-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-filled-autocomplete-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-leading-icon-opacity: var(--md-filled-autocomplete-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-supporting-text-color: var(--md-filled-autocomplete-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-supporting-text-opacity: var(--md-filled-autocomplete-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-filled-autocomplete-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-trailing-icon-opacity: var(--md-filled-autocomplete-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-active-indicator-color: var(--md-filled-autocomplete-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-active-indicator-color: var(--md-filled-autocomplete-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-caret-color: var(--md-filled-autocomplete-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-input-text-color: var(--md-filled-autocomplete-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-focus-label-text-color: var(--md-filled-autocomplete-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-filled-autocomplete-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-supporting-text-color: var(--md-filled-autocomplete-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-active-indicator-color: var(--md-filled-autocomplete-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-input-text-color: var(--md-filled-autocomplete-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-hover-label-text-color: var(--md-filled-autocomplete-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-filled-autocomplete-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-state-layer-color: var(--md-filled-autocomplete-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-hover-state-layer-opacity: var(--md-filled-autocomplete-text-field-error-hover-state-layer-opacity, 0.08);--_text-field-error-hover-supporting-text-color: var(--md-filled-autocomplete-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-filled-autocomplete-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-label-text-color: var(--md-filled-autocomplete-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-filled-autocomplete-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-supporting-text-color: var(--md-filled-autocomplete-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-active-indicator-color: var(--md-filled-autocomplete-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-active-indicator-height: var(--md-filled-autocomplete-text-field-focus-active-indicator-height, 2px);--_text-field-focus-input-text-color: var(--md-filled-autocomplete-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-focus-label-text-color: var(--md-filled-autocomplete-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-filled-autocomplete-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-supporting-text-color: var(--md-filled-autocomplete-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-filled-autocomplete-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-active-indicator-color: var(--md-filled-autocomplete-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-active-indicator-height: var(--md-filled-autocomplete-text-field-hover-active-indicator-height, 1px);--_text-field-hover-input-text-color: var(--md-filled-autocomplete-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-label-text-color: var(--md-filled-autocomplete-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-leading-icon-color: var(--md-filled-autocomplete-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-state-layer-color: var(--md-filled-autocomplete-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-state-layer-opacity: var(--md-filled-autocomplete-text-field-hover-state-layer-opacity, 0.08);--_text-field-hover-supporting-text-color: var(--md-filled-autocomplete-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-filled-autocomplete-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-filled-autocomplete-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-input-text-font: var(--md-filled-autocomplete-text-field-input-text-font, Roboto);--_text-field-input-text-line-height: var(--md-filled-autocomplete-text-field-input-text-line-height, 1.5rem);--_text-field-input-text-size: var(--md-filled-autocomplete-text-field-input-text-size, 1rem);--_text-field-input-text-tracking: var(--md-filled-autocomplete-text-field-input-text-tracking, 0.031rem);--_text-field-input-text-type: var(--md-filled-autocomplete-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_text-field-input-text-weight: var(--md-filled-autocomplete-text-field-input-text-weight, 400);--_text-field-label-text-color: var(--md-filled-autocomplete-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-filled-autocomplete-text-field-label-text-font, Roboto);--_text-field-label-text-line-height: var(--md-filled-autocomplete-text-field-label-text-line-height, 1.5rem);--_text-field-label-text-populated-line-height: var(--md-filled-autocomplete-text-field-label-text-populated-line-height, 1rem);--_text-field-label-text-populated-size: var(--md-filled-autocomplete-text-field-label-text-populated-size, 0.75rem);--_text-field-label-text-size: var(--md-filled-autocomplete-text-field-label-text-size, 1rem);--_text-field-label-text-tracking: var(--md-filled-autocomplete-text-field-label-text-tracking, 0.031rem);--_text-field-label-text-type: var(--md-filled-autocomplete-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_text-field-label-text-weight: var(--md-filled-autocomplete-text-field-label-text-weight, 400);--_text-field-leading-icon-color: var(--md-filled-autocomplete-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-filled-autocomplete-text-field-leading-icon-size, 20px);--_text-field-supporting-text-color: var(--md-filled-autocomplete-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-filled-autocomplete-text-field-supporting-text-font, Roboto);--_text-field-supporting-text-line-height: var(--md-filled-autocomplete-text-field-supporting-text-line-height, 1rem);--_text-field-supporting-text-size: var(--md-filled-autocomplete-text-field-supporting-text-size, 0.75rem);--_text-field-supporting-text-tracking: var(--md-filled-autocomplete-text-field-supporting-text-tracking, 0.025rem);--_text-field-supporting-text-type: var(--md-filled-autocomplete-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_text-field-supporting-text-weight: var(--md-filled-autocomplete-text-field-supporting-text-weight, 400);--_text-field-trailing-icon-color: var(--md-filled-autocomplete-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-filled-autocomplete-text-field-trailing-icon-size, 24px)}.md3-text-field{--md-filled-text-field-active-indicator-color:var(--_text-field-active-indicator-color);--md-filled-text-field-active-indicator-height:var(--_text-field-active-indicator-height);--md-filled-text-field-caret-color:var(--_text-field-caret-color);--md-filled-text-field-container-color:var(--_text-field-container-color);--md-filled-text-field-disabled-active-indicator-color:var(--_text-field-disabled-active-indicator-color);--md-filled-text-field-disabled-active-indicator-height:var(--_text-field-disabled-active-indicator-height);--md-filled-text-field-disabled-active-indicator-opacity:var(--_text-field-disabled-active-indicator-opacity);--md-filled-text-field-disabled-container-color:var(--_text-field-disabled-container-color);--md-filled-text-field-disabled-container-opacity:var(--_text-field-disabled-container-opacity);--md-filled-text-field-disabled-input-text-color:var(--_text-field-disabled-input-text-color);--md-filled-text-field-disabled-input-text-opacity:var(--_text-field-disabled-input-text-opacity);--md-filled-text-field-disabled-label-text-color:var(--_text-field-disabled-label-text-color);--md-filled-text-field-disabled-label-text-opacity:var(--_text-field-disabled-label-text-opacity);--md-filled-text-field-disabled-leading-icon-color:var(--_text-field-disabled-leading-icon-color);--md-filled-text-field-disabled-leading-icon-opacity:var(--_text-field-disabled-leading-icon-opacity);--md-filled-text-field-disabled-supporting-text-color:var(--_text-field-disabled-supporting-text-color);--md-filled-text-field-disabled-supporting-text-opacity:var(--_text-field-disabled-supporting-text-opacity);--md-filled-text-field-disabled-trailing-icon-color:var(--_text-field-disabled-trailing-icon-color);--md-filled-text-field-disabled-trailing-icon-opacity:var(--_text-field-disabled-trailing-icon-opacity);--md-filled-text-field-error-active-indicator-color:var(--_text-field-error-active-indicator-color);--md-filled-text-field-error-focus-active-indicator-color:var(--_text-field-error-focus-active-indicator-color);--md-filled-text-field-error-focus-caret-color:var(--_text-field-error-focus-caret-color);--md-filled-text-field-error-focus-input-text-color:var(--_text-field-error-focus-input-text-color);--md-filled-text-field-error-focus-label-text-color:var(--_text-field-error-focus-label-text-color);--md-filled-text-field-error-focus-leading-icon-color:var(--_text-field-error-focus-leading-icon-color);--md-filled-text-field-error-focus-supporting-text-color:var(--_text-field-error-focus-supporting-text-color);--md-filled-text-field-error-focus-trailing-icon-color:var(--_text-field-error-focus-trailing-icon-color);--md-filled-text-field-error-hover-active-indicator-color:var(--_text-field-error-hover-active-indicator-color);--md-filled-text-field-error-hover-input-text-color:var(--_text-field-error-hover-input-text-color);--md-filled-text-field-error-hover-label-text-color:var(--_text-field-error-hover-label-text-color);--md-filled-text-field-error-hover-leading-icon-color:var(--_text-field-error-hover-leading-icon-color);--md-filled-text-field-error-hover-state-layer-color:var(--_text-field-error-hover-state-layer-color);--md-filled-text-field-error-hover-state-layer-opacity:var(--_text-field-error-hover-state-layer-opacity);--md-filled-text-field-error-hover-supporting-text-color:var(--_text-field-error-hover-supporting-text-color);--md-filled-text-field-error-hover-trailing-icon-color:var(--_text-field-error-hover-trailing-icon-color);--md-filled-text-field-error-input-text-color:var(--_text-field-error-input-text-color);--md-filled-text-field-error-label-text-color:var(--_text-field-error-label-text-color);--md-filled-text-field-error-leading-icon-color:var(--_text-field-error-leading-icon-color);--md-filled-text-field-error-supporting-text-color:var(--_text-field-error-supporting-text-color);--md-filled-text-field-error-trailing-icon-color:var(--_text-field-error-trailing-icon-color);--md-filled-text-field-focus-active-indicator-color:var(--_text-field-focus-active-indicator-color);--md-filled-text-field-focus-active-indicator-height:var(--_text-field-focus-active-indicator-height);--md-filled-text-field-focus-input-text-color:var(--_text-field-focus-input-text-color);--md-filled-text-field-focus-label-text-color:var(--_text-field-focus-label-text-color);--md-filled-text-field-focus-leading-icon-color:var(--_text-field-focus-leading-icon-color);--md-filled-text-field-focus-supporting-text-color:var(--_text-field-focus-supporting-text-color);--md-filled-text-field-focus-trailing-icon-color:var(--_text-field-focus-trailing-icon-color);--md-filled-text-field-hover-active-indicator-color:var(--_text-field-hover-active-indicator-color);--md-filled-text-field-hover-active-indicator-height:var(--_text-field-hover-active-indicator-height);--md-filled-text-field-hover-input-text-color:var(--_text-field-hover-input-text-color);--md-filled-text-field-hover-label-text-color:var(--_text-field-hover-label-text-color);--md-filled-text-field-hover-leading-icon-color:var(--_text-field-hover-leading-icon-color);--md-filled-text-field-hover-state-layer-color:var(--_text-field-hover-state-layer-color);--md-filled-text-field-hover-state-layer-opacity:var(--_text-field-hover-state-layer-opacity);--md-filled-text-field-hover-supporting-text-color:var(--_text-field-hover-supporting-text-color);--md-filled-text-field-hover-trailing-icon-color:var(--_text-field-hover-trailing-icon-color);--md-filled-text-field-input-text-color:var(--_text-field-input-text-color);--md-filled-text-field-input-text-font:var(--_text-field-input-text-font);--md-filled-text-field-input-text-line-height:var(--_text-field-input-text-line-height);--md-filled-text-field-input-text-size:var(--_text-field-input-text-size);--md-filled-text-field-input-text-tracking:var(--_text-field-input-text-tracking);--md-filled-text-field-input-text-type:var(--_text-field-input-text-type);--md-filled-text-field-input-text-weight:var(--_text-field-input-text-weight);--md-filled-text-field-label-text-color:var(--_text-field-label-text-color);--md-filled-text-field-label-text-font:var(--_text-field-label-text-font);--md-filled-text-field-label-text-line-height:var(--_text-field-label-text-line-height);--md-filled-text-field-label-text-populated-line-height:var(--_text-field-label-text-populated-line-height);--md-filled-text-field-label-text-populated-size:var(--_text-field-label-text-populated-size);--md-filled-text-field-label-text-size:var(--_text-field-label-text-size);--md-filled-text-field-label-text-tracking:var(--_text-field-label-text-tracking);--md-filled-text-field-label-text-type:var(--_text-field-label-text-type);--md-filled-text-field-label-text-weight:var(--_text-field-label-text-weight);--md-filled-text-field-leading-icon-color:var(--_text-field-leading-icon-color);--md-filled-text-field-leading-icon-size:var(--_text-field-leading-icon-size);--md-filled-text-field-supporting-text-color:var(--_text-field-supporting-text-color);--md-filled-text-field-supporting-text-font:var(--_text-field-supporting-text-font);--md-filled-text-field-supporting-text-line-height:var(--_text-field-supporting-text-line-height);--md-filled-text-field-supporting-text-size:var(--_text-field-supporting-text-size);--md-filled-text-field-supporting-text-tracking:var(--_text-field-supporting-text-tracking);--md-filled-text-field-supporting-text-weight:var(--_text-field-supporting-text-weight);--md-filled-text-field-trailing-icon-color:var(--_text-field-trailing-icon-color);--md-filled-text-field-trailing-icon-size:var(--_text-field-trailing-icon-size);--md-filled-field-container-shape-start-start:var(--_text-field-container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_text-field-container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_text-field-container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_text-field-container-shape-end-start)}.md3-autocomplete__menu-surface{--md-menu-surface-container-elevation:var(--_menu-container-elevation);--md-menu-surface-container-shape:var(--_menu-container-shape);--md-menu-surface-container-shadow-color:var(--_menu-container-shadow-color)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_text-field-container-shape-start-start: var(--md-filled-autocomplete-text-field-container-shape-start-start, var(--md-filled-autocomplete-text-field-container-shape, 4px));--_text-field-container-shape-start-end: var(--md-filled-autocomplete-text-field-container-shape-start-end, var(--md-filled-autocomplete-text-field-container-shape, 4px));--_text-field-container-shape-end-end: var(--md-filled-autocomplete-text-field-container-shape-end-end, var(--md-filled-autocomplete-text-field-container-shape, 0px));--_text-field-container-shape-end-start: var(--md-filled-autocomplete-text-field-container-shape-end-start, var(--md-filled-autocomplete-text-field-container-shape, 0px));--_menu-cascading-menu-indicator-icon-color: var(--md-filled-autocomplete-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_menu-cascading-menu-indicator-icon-size: var(--md-filled-autocomplete-menu-cascading-menu-indicator-icon-size, 24px);--_menu-container-color: var(--md-filled-autocomplete-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_menu-container-elevation: var(--md-filled-autocomplete-menu-container-elevation, 2);--_menu-container-shadow-color: var(--md-filled-autocomplete-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_menu-container-shape: var(--md-filled-autocomplete-menu-container-shape, 4px);--_menu-container-surface-tint-layer-color: var(--md-filled-autocomplete-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_menu-divider-color: var(--md-filled-autocomplete-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_menu-divider-height: var(--md-filled-autocomplete-menu-divider-height, 1px);--_menu-list-item-container-height: var(--md-filled-autocomplete-menu-list-item-container-height, 48px);--_menu-list-item-label-text-color: var(--md-filled-autocomplete-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_menu-list-item-label-text-font: var(--md-filled-autocomplete-menu-list-item-label-text-font, Roboto);--_menu-list-item-label-text-line-height: var(--md-filled-autocomplete-menu-list-item-label-text-line-height, 1.25rem);--_menu-list-item-label-text-size: var(--md-filled-autocomplete-menu-list-item-label-text-size, 0.875rem);--_menu-list-item-label-text-tracking: var(--md-filled-autocomplete-menu-list-item-label-text-tracking, 0.006rem);--_menu-list-item-label-text-type: var(--md-filled-autocomplete-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_menu-list-item-label-text-weight: var(--md-filled-autocomplete-menu-list-item-label-text-weight, 500);--_menu-list-item-selected-container-color: var(--md-filled-autocomplete-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_text-field-active-indicator-color: var(--md-filled-autocomplete-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-active-indicator-height: var(--md-filled-autocomplete-text-field-active-indicator-height, 1px);--_text-field-caret-color: var(--md-filled-autocomplete-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_text-field-container-color: var(--md-filled-autocomplete-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_text-field-disabled-active-indicator-color: var(--md-filled-autocomplete-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-active-indicator-height: var(--md-filled-autocomplete-text-field-disabled-active-indicator-height, 1px);--_text-field-disabled-active-indicator-opacity: var(--md-filled-autocomplete-text-field-disabled-active-indicator-opacity, 0.38);--_text-field-disabled-container-color: var(--md-filled-autocomplete-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-container-opacity: var(--md-filled-autocomplete-text-field-disabled-container-opacity, 0.04);--_text-field-disabled-input-text-color: var(--md-filled-autocomplete-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-input-text-opacity: var(--md-filled-autocomplete-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-filled-autocomplete-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-label-text-opacity: var(--md-filled-autocomplete-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-filled-autocomplete-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-leading-icon-opacity: var(--md-filled-autocomplete-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-supporting-text-color: var(--md-filled-autocomplete-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-supporting-text-opacity: var(--md-filled-autocomplete-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-filled-autocomplete-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-disabled-trailing-icon-opacity: var(--md-filled-autocomplete-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-active-indicator-color: var(--md-filled-autocomplete-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-active-indicator-color: var(--md-filled-autocomplete-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-caret-color: var(--md-filled-autocomplete-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-input-text-color: var(--md-filled-autocomplete-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-focus-label-text-color: var(--md-filled-autocomplete-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-filled-autocomplete-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-supporting-text-color: var(--md-filled-autocomplete-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-active-indicator-color: var(--md-filled-autocomplete-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-input-text-color: var(--md-filled-autocomplete-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-hover-label-text-color: var(--md-filled-autocomplete-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-filled-autocomplete-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-state-layer-color: var(--md-filled-autocomplete-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-hover-state-layer-opacity: var(--md-filled-autocomplete-text-field-error-hover-state-layer-opacity, 0.08);--_text-field-error-hover-supporting-text-color: var(--md-filled-autocomplete-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-filled-autocomplete-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-error-label-text-color: var(--md-filled-autocomplete-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-filled-autocomplete-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-supporting-text-color: var(--md-filled-autocomplete-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-filled-autocomplete-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-active-indicator-color: var(--md-filled-autocomplete-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-active-indicator-height: var(--md-filled-autocomplete-text-field-focus-active-indicator-height, 2px);--_text-field-focus-input-text-color: var(--md-filled-autocomplete-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-focus-label-text-color: var(--md-filled-autocomplete-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-filled-autocomplete-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-supporting-text-color: var(--md-filled-autocomplete-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-filled-autocomplete-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-active-indicator-color: var(--md-filled-autocomplete-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-active-indicator-height: var(--md-filled-autocomplete-text-field-hover-active-indicator-height, 1px);--_text-field-hover-input-text-color: var(--md-filled-autocomplete-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-label-text-color: var(--md-filled-autocomplete-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-leading-icon-color: var(--md-filled-autocomplete-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-state-layer-color: var(--md-filled-autocomplete-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-hover-state-layer-opacity: var(--md-filled-autocomplete-text-field-hover-state-layer-opacity, 0.08);--_text-field-hover-supporting-text-color: var(--md-filled-autocomplete-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-filled-autocomplete-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-filled-autocomplete-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_text-field-input-text-font: var(--md-filled-autocomplete-text-field-input-text-font, Roboto);--_text-field-input-text-line-height: var(--md-filled-autocomplete-text-field-input-text-line-height, 1.5rem);--_text-field-input-text-size: var(--md-filled-autocomplete-text-field-input-text-size, 1rem);--_text-field-input-text-tracking: var(--md-filled-autocomplete-text-field-input-text-tracking, 0.031rem);--_text-field-input-text-type: var(--md-filled-autocomplete-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_text-field-input-text-weight: var(--md-filled-autocomplete-text-field-input-text-weight, 400);--_text-field-label-text-color: var(--md-filled-autocomplete-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-filled-autocomplete-text-field-label-text-font, Roboto);--_text-field-label-text-line-height: var(--md-filled-autocomplete-text-field-label-text-line-height, 1.5rem);--_text-field-label-text-populated-line-height: var(--md-filled-autocomplete-text-field-label-text-populated-line-height, 1rem);--_text-field-label-text-populated-size: var(--md-filled-autocomplete-text-field-label-text-populated-size, 0.75rem);--_text-field-label-text-size: var(--md-filled-autocomplete-text-field-label-text-size, 1rem);--_text-field-label-text-tracking: var(--md-filled-autocomplete-text-field-label-text-tracking, 0.031rem);--_text-field-label-text-type: var(--md-filled-autocomplete-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_text-field-label-text-weight: var(--md-filled-autocomplete-text-field-label-text-weight, 400);--_text-field-leading-icon-color: var(--md-filled-autocomplete-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-filled-autocomplete-text-field-leading-icon-size, 20px);--_text-field-supporting-text-color: var(--md-filled-autocomplete-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-filled-autocomplete-text-field-supporting-text-font, Roboto);--_text-field-supporting-text-line-height: var(--md-filled-autocomplete-text-field-supporting-text-line-height, 1rem);--_text-field-supporting-text-size: var(--md-filled-autocomplete-text-field-supporting-text-size, 0.75rem);--_text-field-supporting-text-tracking: var(--md-filled-autocomplete-text-field-supporting-text-tracking, 0.025rem);--_text-field-supporting-text-type: var(--md-filled-autocomplete-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_text-field-supporting-text-weight: var(--md-filled-autocomplete-text-field-supporting-text-weight, 400);--_text-field-trailing-icon-color: var(--md-filled-autocomplete-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-filled-autocomplete-text-field-trailing-icon-size, 24px)}.md3-text-field{--md-filled-text-field-active-indicator-color:var(--_text-field-active-indicator-color);--md-filled-text-field-active-indicator-height:var(--_text-field-active-indicator-height);--md-filled-text-field-caret-color:var(--_text-field-caret-color);--md-filled-text-field-container-color:var(--_text-field-container-color);--md-filled-text-field-disabled-active-indicator-color:var(--_text-field-disabled-active-indicator-color);--md-filled-text-field-disabled-active-indicator-height:var(--_text-field-disabled-active-indicator-height);--md-filled-text-field-disabled-active-indicator-opacity:var(--_text-field-disabled-active-indicator-opacity);--md-filled-text-field-disabled-container-color:var(--_text-field-disabled-container-color);--md-filled-text-field-disabled-container-opacity:var(--_text-field-disabled-container-opacity);--md-filled-text-field-disabled-input-text-color:var(--_text-field-disabled-input-text-color);--md-filled-text-field-disabled-input-text-opacity:var(--_text-field-disabled-input-text-opacity);--md-filled-text-field-disabled-label-text-color:var(--_text-field-disabled-label-text-color);--md-filled-text-field-disabled-label-text-opacity:var(--_text-field-disabled-label-text-opacity);--md-filled-text-field-disabled-leading-icon-color:var(--_text-field-disabled-leading-icon-color);--md-filled-text-field-disabled-leading-icon-opacity:var(--_text-field-disabled-leading-icon-opacity);--md-filled-text-field-disabled-supporting-text-color:var(--_text-field-disabled-supporting-text-color);--md-filled-text-field-disabled-supporting-text-opacity:var(--_text-field-disabled-supporting-text-opacity);--md-filled-text-field-disabled-trailing-icon-color:var(--_text-field-disabled-trailing-icon-color);--md-filled-text-field-disabled-trailing-icon-opacity:var(--_text-field-disabled-trailing-icon-opacity);--md-filled-text-field-error-active-indicator-color:var(--_text-field-error-active-indicator-color);--md-filled-text-field-error-focus-active-indicator-color:var(--_text-field-error-focus-active-indicator-color);--md-filled-text-field-error-focus-caret-color:var(--_text-field-error-focus-caret-color);--md-filled-text-field-error-focus-input-text-color:var(--_text-field-error-focus-input-text-color);--md-filled-text-field-error-focus-label-text-color:var(--_text-field-error-focus-label-text-color);--md-filled-text-field-error-focus-leading-icon-color:var(--_text-field-error-focus-leading-icon-color);--md-filled-text-field-error-focus-supporting-text-color:var(--_text-field-error-focus-supporting-text-color);--md-filled-text-field-error-focus-trailing-icon-color:var(--_text-field-error-focus-trailing-icon-color);--md-filled-text-field-error-hover-active-indicator-color:var(--_text-field-error-hover-active-indicator-color);--md-filled-text-field-error-hover-input-text-color:var(--_text-field-error-hover-input-text-color);--md-filled-text-field-error-hover-label-text-color:var(--_text-field-error-hover-label-text-color);--md-filled-text-field-error-hover-leading-icon-color:var(--_text-field-error-hover-leading-icon-color);--md-filled-text-field-error-hover-state-layer-color:var(--_text-field-error-hover-state-layer-color);--md-filled-text-field-error-hover-state-layer-opacity:var(--_text-field-error-hover-state-layer-opacity);--md-filled-text-field-error-hover-supporting-text-color:var(--_text-field-error-hover-supporting-text-color);--md-filled-text-field-error-hover-trailing-icon-color:var(--_text-field-error-hover-trailing-icon-color);--md-filled-text-field-error-input-text-color:var(--_text-field-error-input-text-color);--md-filled-text-field-error-label-text-color:var(--_text-field-error-label-text-color);--md-filled-text-field-error-leading-icon-color:var(--_text-field-error-leading-icon-color);--md-filled-text-field-error-supporting-text-color:var(--_text-field-error-supporting-text-color);--md-filled-text-field-error-trailing-icon-color:var(--_text-field-error-trailing-icon-color);--md-filled-text-field-focus-active-indicator-color:var(--_text-field-focus-active-indicator-color);--md-filled-text-field-focus-active-indicator-height:var(--_text-field-focus-active-indicator-height);--md-filled-text-field-focus-input-text-color:var(--_text-field-focus-input-text-color);--md-filled-text-field-focus-label-text-color:var(--_text-field-focus-label-text-color);--md-filled-text-field-focus-leading-icon-color:var(--_text-field-focus-leading-icon-color);--md-filled-text-field-focus-supporting-text-color:var(--_text-field-focus-supporting-text-color);--md-filled-text-field-focus-trailing-icon-color:var(--_text-field-focus-trailing-icon-color);--md-filled-text-field-hover-active-indicator-color:var(--_text-field-hover-active-indicator-color);--md-filled-text-field-hover-active-indicator-height:var(--_text-field-hover-active-indicator-height);--md-filled-text-field-hover-input-text-color:var(--_text-field-hover-input-text-color);--md-filled-text-field-hover-label-text-color:var(--_text-field-hover-label-text-color);--md-filled-text-field-hover-leading-icon-color:var(--_text-field-hover-leading-icon-color);--md-filled-text-field-hover-state-layer-color:var(--_text-field-hover-state-layer-color);--md-filled-text-field-hover-state-layer-opacity:var(--_text-field-hover-state-layer-opacity);--md-filled-text-field-hover-supporting-text-color:var(--_text-field-hover-supporting-text-color);--md-filled-text-field-hover-trailing-icon-color:var(--_text-field-hover-trailing-icon-color);--md-filled-text-field-input-text-color:var(--_text-field-input-text-color);--md-filled-text-field-input-text-type:var(--_text-field-input-text-type);--md-filled-text-field-label-text-color:var(--_text-field-label-text-color);--md-filled-text-field-label-text-type:var(--_label-text-type);--md-filled-text-field-label-text-populated-line-height:var(--_text-field-label-text-populated-line-height);--md-filled-text-field-label-text-populated-size:var(--_text-field-label-text-populated-size);--md-filled-text-field-leading-icon-color:var(--_text-field-leading-icon-color);--md-filled-text-field-leading-icon-size:var(--_text-field-leading-icon-size);--md-filled-text-field-supporting-text-color:var(--_text-field-supporting-text-color);--md-filled-text-field-supporting-text-type:var(--_supporting-text-type);--md-filled-text-field-trailing-icon-color:var(--_text-field-trailing-icon-color);--md-filled-text-field-trailing-icon-size:var(--_text-field-trailing-icon-size);--md-filled-field-container-shape-start-start:var(--md-filled-field-container-shape, var(--_text-field-container-shape-start-start));--md-filled-field-container-shape-start-end:var(--md-filled-field-container-shape, var(--_text-field-container-shape-start-end));--md-filled-field-container-shape-end-end:var(--md-filled-field-container-shape, var(--_text-field-container-shape-end-end));--md-filled-field-container-shape-end-start:var(--md-filled-field-container-shape, var(--_text-field-container-shape-end-start))}.md3-autocomplete__menu-surface{--md-menu-surface-container-elevation:var(--_menu-container-elevation);--md-menu-surface-container-shape:var(--_menu-container-shape);--md-menu-surface-container-shadow-color:var(--_menu-container-shadow-color)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map