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

package/README.md

@@ -6,29 +6,76 @@
 Material Web is Google’s UI toolkit for building beautiful, accessible web
 applications. Material Web is implemented as a collection of
 [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
+[Material 3](https://m3.material.io/) is the latest version of Google’s
+open-source design system.
 
-The Material team is currently working on
-[Material You](https://material.io/blog/announcing-material-you) (Material
-Design 3) support for Material components.
+> Note: Looking for Material 2? `<mwc-*` components are now on the
+> [`mwc` branch](https://github.com/material-components/material-web/tree/mwc).
 
-Developers using this library should expect some big changes as we work to
-improve our codebase and ease of use and implement the newest Material Design.
+## Links
 
-A few notable changes you should expect:
+- [Quick start](docs/quick-start.md)
 
--   UX changes as we adopt the new designs (production users will definitely
-    want to pin to an appropriate release, not mainline)
--   A single npm package (`@material/web`)
--   Simplification of tag name prefixes to `md-` (CSS custom properties will be
-    `--md-`)
--   Components as top-level folders which contain all variants
+## Roadmap
 
-Example: `top-app-bar` and `top-app-bar-fixed` will be placed in the same
-folder: `top-app-bar` - Components with variant attributes will be split into
-several variant components:
+**Alpha** components are in-development and may have many frequent breaking
+changes.
 
-Example: `mwc-button` will be split into `md-text-button`, `md-filled-button`,
-`md-tonal-button`, `md-outlined-button`, etc
+**Beta** components are mostly polished and ready for use.
 
-> Note: Looking for Material 2? MWC components are now on the
-> [`mwc` branch](https://github.com/material-components/material-web/tree/mwc).
+**Stable** components are reviewed, documented, and API complete.
+
+-   🔴 Not started
+-   🟡 In progress
+-   🟢 Complete
+
+### 1.0 Components
+
+Component                     | Alpha | Beta | Stable
+----------------------------- | :---: | :--: | :----:
+Button                        | 🟢     | 🟢    | 🔴
+FAB                           | 🟢     | 🔴    | 🔴
+Icon button                   | 🟢     | 🔴    | 🔴
+Checkbox                      | 🟢     | 🟢    | 🔴
+Chips                         | 🔴     | 🔴    | 🔴
+Dialog                        | 🟢     | 🟢    | 🔴
+Divider                       | 🟢     | 🟢    | 🟡
+Elevation                     | 🟢     | 🔴    | 🔴
+Focus ring                    | 🟢     | 🔴    | 🔴
+Field                         | 🟢     | 🟢    | 🔴
+Icon                          | 🟢     | 🔴    | 🔴
+List                          | 🟢     | 🟢    | 🟡
+Menu                          | 🟢     | 🟢    | 🟡
+Progress indicator (circular) | 🔴     | 🔴    | 🔴
+Progress indicator (linear)   | 🔴     | 🔴    | 🔴
+Radio button                  | 🟢     | 🟢    | 🔴
+Ripple                        | 🟢     | 🟢    | 🟡
+Select                        | 🟡     | 🔴    | 🔴
+Slider                        | 🟢     | 🟢    | 🔴
+Switch                        | 🟢     | 🟢    | 🔴
+Tabs                          | 🔴     | 🔴    | 🔴
+Text field                    | 🟢     | 🟢    | 🟡
+
+### 1.1+ Components
+
+These components are planned for release after 1.0.
+
+Component         | Alpha | Beta | Stable
+----------------- | :---: | :--: | :----:
+Autocomplete      | 🟡     | 🔴    | 🔴
+Badge             | 🟡     | 🔴    | 🔴
+Banner            | 🔴     | 🔴    | 🔴
+Bottom app bar    | 🔴     | 🔴    | 🔴
+Bottom sheet      | 🔴     | 🔴    | 🔴
+Segmented button  | 🟡     | 🔴    | 🔴
+Card              | 🔴     | 🔴    | 🔴
+Data table        | 🔴     | 🔴    | 🔴
+Date picker       | 🔴     | 🔴    | 🔴
+Navigation bar    | 🟡     | 🔴    | 🔴
+Navigation drawer | 🟡     | 🔴    | 🔴
+Navigation rail   | 🔴     | 🔴    | 🔴
+Search            | 🔴     | 🔴    | 🔴
+Snackbar          | 🔴     | 🔴    | 🔴
+Time picker       | 🔴     | 🔴    | 🔴
+Tooltip           | 🔴     | 🔴    | 🔴
+Top app bar       | 🔴     | 🔴    | 🔴

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,15 +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 '../../list/list';
-@use '../../list/list-item';
 @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(
@@ -25,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 {
@@ -53,7 +63,6 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
         active-indicator-height: var(--_text-field-active-indicator-height),
         caret-color: var(--_text-field-caret-color),
         container-color: var(--_text-field-container-color),
-        container-height: var(--_text-field-container-height),
         disabled-active-indicator-color:
           var(--_text-field-disabled-active-indicator-color),
         disabled-active-indicator-height:
@@ -141,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),
       )
@@ -173,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'),
       )
     );
   }
@@ -190,39 +181,9 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
         container-shadow-color: var(--_menu-container-shadow-color),
       )
     );
-
-    @include list.theme(
-      (
-        container-color: var(--_menu-container-color),
-        container-surface-tint-layer-color:
-          var(--_menu-container-surface-tint-layer-color),
-        container-elevation: var(--_menu-container-elevation),
-      )
-    );
-
-    @include list-item.theme(
-      (
-        list-item-container-color: var(--_menu-container-color),
-        list-item-one-line-container-height:
-          var(--_menu-list-item-container-height),
-        list-item-label-text-color: var(--_menu-list-item-label-text-color),
-        list-item-label-text-font: var(--_menu-list-item-label-text-font),
-        list-item-label-text-line-height:
-          var(--_menu-list-item-label-text-line-height),
-        list-item-label-text-size: var(--_menu-list-item-label-text-size),
-        list-item-label-text-tracking:
-          var(--_menu-list-item-label-text-tracking),
-        list-item-label-text-weight: var(--_menu-list-item-label-text-weight),
-      )
-    );
   }
 
   .md3-autocomplete ::slotted([data-aria-selected='true']) {
-    @include list-item.theme(
-      (
-        list-item-container-color:
-          var(--_menu-list-item-selected-container-color),
-      )
-    );
+    // TODO(b/265209322): list item selected styles
   }
 }

package/autocomplete/lib/_outlined-autocomplete.scss

@@ -6,15 +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 '../../list/list';
-@use '../../list/list-item';
 @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(
@@ -25,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,
@@ -45,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 {
@@ -58,7 +68,6 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
     @include outlined-text-field.theme(
       (
         caret-color: var(--_text-field-caret-color),
-        container-height: var(--_text-field-container-height),
         disabled-input-text-color: var(--_text-field-disabled-input-text-color),
         disabled-input-text-opacity:
           var(--_text-field-disabled-input-text-opacity),
@@ -127,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),
       )
@@ -162,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'),
       )
     );
   }
@@ -179,39 +170,9 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
         container-shadow-color: var(--_menu-container-shadow-color),
       )
     );
-
-    @include list.theme(
-      (
-        container-color: var(--_menu-container-color),
-        container-surface-tint-layer-color:
-          var(--_menu-container-surface-tint-layer-color),
-        container-elevation: var(--_menu-container-elevation),
-      )
-    );
-
-    @include list-item.theme(
-      (
-        list-item-container-color: var(--_menu-container-color),
-        list-item-one-line-container-height:
-          var(--_menu-list-item-container-height),
-        list-item-label-text-color: var(--_menu-list-item-label-text-color),
-        list-item-label-text-font: var(--_menu-list-item-label-text-font),
-        list-item-label-text-line-height:
-          var(--_menu-list-item-label-text-line-height),
-        list-item-label-text-size: var(--_menu-list-item-label-text-size),
-        list-item-label-text-tracking:
-          var(--_menu-list-item-label-text-tracking),
-        list-item-label-text-weight: var(--_menu-list-item-label-text-weight),
-      )
-    );
   }
 
   .md3-autocomplete ::slotted([data-aria-selected='true']) {
-    @include list-item.theme(
-      (
-        list-item-container-color:
-          var(--_menu-list-item-selected-container-color),
-      )
-    );
+    // TODO(b/265209322): list item selected styles
   }
 }

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

@@ -15,10 +15,6 @@ export declare abstract class Autocomplete extends TextField {
     static shadowRootOptions: ShadowRootInit;
     readonly role = "combobox";
     readonly ariaAutoComplete = "list";
-    /**
-     * The ID on the list element, used for SSR.
-     */
-    listId: string;
     /**
      * The ID prefix for the item elements, used for SSR.
      */
@@ -31,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;
@@ -42,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

@@ -18,10 +18,6 @@ export class Autocomplete extends TextField {
         super(...arguments);
         this.role = 'combobox';
         this.ariaAutoComplete = 'list';
-        /**
-         * The ID on the list element, used for SSR.
-         */
-        this.listId = 'autocomplete-list';
         /**
          * The ID prefix for the item elements, used for SSR.
          */
@@ -33,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()}
@@ -49,13 +44,15 @@ export class Autocomplete extends TextField {
         super.updated(changedProperties);
         if (changedProperties.has('selectedItem')) {
             this.updateSelectedItem();
-            this.ariaActiveDescendant = this.selectedItem?.itemId ?? null;
+            // TODO(b/265209253): implement
+            // this.ariaActiveDescendant = this.selectedItem?.itemId ?? null;
         }
         if (changedProperties.has('value')) {
             this.dispatchEvent(new CustomEvent('autocomplete-value-changed', { detail: { value: this.value }, bubbles: true, composed: true }));
         }
     }
     firstUpdated(changedProperties) {
+        console.warn('<md-autocomplete> is not yet implemented.');
         super.firstUpdated(changedProperties);
         this.menuSurface.anchor = this;
     }
@@ -91,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;
@@ -206,10 +203,10 @@ export class Autocomplete extends TextField {
         if (!this.slottedItems)
             return;
         this.slottedItems.forEach((item, index) => {
-            item.itemId = `${this.itemIdPrefix}-${index}`;
+            // TODO(b/265209253): implement
+            // item.itemId = `${this.itemIdPrefix}-${index}`;
             if (this.selectedItem && item === this.selectedItem && this.list) {
                 item.ariaSelected = 'true';
-                item.showFocusRing = true;
                 // Scroll into view
                 if (this.list.scrollTop + this.list.offsetHeight <
                     item.offsetTop + item.offsetHeight) {
@@ -222,7 +219,6 @@ export class Autocomplete extends TextField {
             }
             else {
                 item.ariaSelected = 'false';
-                item.showFocusRing = false;
             }
         });
     }
@@ -242,10 +238,6 @@ export class Autocomplete extends TextField {
     }
 }
 Autocomplete.shadowRootOptions = { mode: 'open', delegatesFocus: true };
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], Autocomplete.prototype, "listId", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)