@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/actionelement/action-element.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig } from '@material/web/controller/action-controller.js';
 import { LitElement } from 'lit';
+import { ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig } from '../controller/action-controller.js';
 export { BeginPressConfig, EndPressConfig };
 /**
  * @soyCompatible

package/actionelement/action-element.js

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ActionController } from '@material/web/controller/action-controller.js';
 import { LitElement } from 'lit';
+import { ActionController } from '../controller/action-controller.js';
 /**
  * @soyCompatible
  *

package/actionelement/action-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-element.js","sourceRoot":"","sources":["action-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAyD,MAAM,+CAA+C,CAAC;AACvI,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAI/B;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAAtD;;QAQY,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAoF1D,CAAC;IAlFC;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAyB,IAAG,CAAC;IAExC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAC,SAAS,EAAE,UAAU,EAAiB;QAC9C,IAAI,CAAC,SAAS,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED;;;;OAIG;IACH,iBAAiB,CAAC,CAAe;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,CAAe;QACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig} from '@material/web/controller/action-controller.js';\nimport {LitElement} from 'lit';\n\nexport {BeginPressConfig, EndPressConfig};\n\n/**\n * @soyCompatible\n *\n * ActionElement is a base class that provides a handy starting point for using\n * ActionController. Subclasses should add the event handlers on the interactive\n * node in the template, and override `beginPress` and `endPress` to handle\n * pressed state, ripple interaction, and any other \"press\" interaction.\n */\nexport abstract class ActionElement extends LitElement implements\n    ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean;\n\n  protected actionController = new ActionController(this);\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig) {}\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({cancelled, actionData}: EndPressConfig) {\n    if (!cancelled) {\n      this.dispatchEvent(new CustomEvent('action', {\n        detail: actionData,\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent) {\n    this.actionController.pointerDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent) {\n    this.actionController.pointerUp(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent) {\n    this.actionController.pointerCancel(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent) {\n    this.actionController.pointerLeave(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent) {\n    this.actionController.click(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu() {\n    this.actionController.contextMenu();\n  }\n}\n"]}
+{"version":3,"file":"action-element.js","sourceRoot":"","sources":["action-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAyD,MAAM,oCAAoC,CAAC;AAI5H;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAAtD;;QAQY,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAoF1D,CAAC;IAlFC;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAyB,IAAG,CAAC;IAExC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAC,SAAS,EAAE,UAAU,EAAiB;QAC9C,IAAI,CAAC,SAAS,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED;;;;OAIG;IACH,iBAAiB,CAAC,CAAe;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,CAAe;QACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig} from '../controller/action-controller.js';\n\nexport {BeginPressConfig, EndPressConfig};\n\n/**\n * @soyCompatible\n *\n * ActionElement is a base class that provides a handy starting point for using\n * ActionController. Subclasses should add the event handlers on the interactive\n * node in the template, and override `beginPress` and `endPress` to handle\n * pressed state, ripple interaction, and any other \"press\" interaction.\n */\nexport abstract class ActionElement extends LitElement implements\n    ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean;\n\n  protected actionController = new ActionController(this);\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig) {}\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({cancelled, actionData}: EndPressConfig) {\n    if (!cancelled) {\n      this.dispatchEvent(new CustomEvent('action', {\n        detail: actionData,\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent) {\n    this.actionController.pointerDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent) {\n    this.actionController.pointerUp(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent) {\n    this.actionController.pointerCancel(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent) {\n    this.actionController.pointerLeave(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent) {\n    this.actionController.click(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu() {\n    this.actionController.contextMenu();\n  }\n}\n"]}

package/autocomplete/_filled-autocomplete.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-autocomplete' show theme;

package/autocomplete/_outlined-autocomplete.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/outlined-autocomplete' show theme;

package/autocomplete/autocomplete-item.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AutocompleteItem } from './lib/autocompleteitem/autocomplete-item.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-autocomplete-item': MdAutocompleteItem;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdAutocompleteItem extends AutocompleteItem {
+    static styles: import("lit").CSSResult[];
+}

package/autocomplete/autocomplete-item.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles } from '../list/lib/listitem/list-item-styles.css.js';
+import { AutocompleteItem } from './lib/autocompleteitem/autocomplete-item.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdAutocompleteItem = class MdAutocompleteItem extends AutocompleteItem {
+};
+MdAutocompleteItem.styles = [styles];
+MdAutocompleteItem = __decorate([
+    customElement('md-autocomplete-item')
+], MdAutocompleteItem);
+export { MdAutocompleteItem };
+//# sourceMappingURL=autocomplete-item.js.map

package/autocomplete/autocomplete-item.js.map

@@ -0,0 +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"]}

package/autocomplete/autocomplete-list.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AutocompleteList } from './lib/autocompletelist/autocomplete-list.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-autocomplete-list': MdAutocompleteList;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdAutocompleteList extends AutocompleteList {
+    static styles: import("lit").CSSResult[];
+}

package/autocomplete/autocomplete-list.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles } from '../list/lib/list-styles.css.js';
+import { AutocompleteList } from './lib/autocompletelist/autocomplete-list.js';
+import { styles as autocompleteStyles } from './lib/autocompletelist/autocomplete-list-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdAutocompleteList = class MdAutocompleteList extends AutocompleteList {
+};
+MdAutocompleteList.styles = [styles, autocompleteStyles];
+MdAutocompleteList = __decorate([
+    customElement('md-autocomplete-list')
+], MdAutocompleteList);
+export { MdAutocompleteList };
+//# sourceMappingURL=autocomplete-list.js.map

package/autocomplete/autocomplete-list.js.map

@@ -0,0 +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"]}

package/autocomplete/autocomplete-surface.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AutocompleteSurface } from './lib/autocompletesurface/autocomplete-surface.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-autocomplete-surface': MdAutocompleteSurface;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdAutocompleteSurface extends AutocompleteSurface {
+    static styles: import("lit").CSSResult[];
+}

package/autocomplete/autocomplete-surface.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles } from '../menusurface/lib/menu-surface-styles.css.js';
+import { AutocompleteSurface } from './lib/autocompletesurface/autocomplete-surface.js';
+import { styles as autocompleteStyles } from './lib/autocompletesurface/autocomplete-surface-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdAutocompleteSurface = class MdAutocompleteSurface extends AutocompleteSurface {
+};
+MdAutocompleteSurface.styles = [styles, autocompleteStyles];
+MdAutocompleteSurface = __decorate([
+    customElement('md-autocomplete-surface')
+], MdAutocompleteSurface);
+export { MdAutocompleteSurface };
+//# sourceMappingURL=autocomplete-surface.js.map

package/autocomplete/autocomplete-surface.js.map

@@ -0,0 +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"]}

package/autocomplete/filled-autocomplete.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../field/filled-field.js';
+import './autocomplete-list.js';
+import './autocomplete-surface.js';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { Autocomplete } from './lib/autocomplete.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-autocomplete': MdFilledAutocomplete;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledAutocomplete extends Autocomplete {
+    static styles: import("lit").CSSResult[];
+    protected readonly listTag: import("lit-html/static.js").StaticValue;
+    protected readonly menuSurfaceTag: import("lit-html/static.js").StaticValue;
+    protected readonly fieldTag: import("lit-html/static.js").StaticValue;
+    /** @soyTemplate */
+    protected getAutocompleteRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+}

package/autocomplete/filled-autocomplete.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../field/filled-field.js';
+import './autocomplete-list.js';
+import './autocomplete-surface.js';
+import { customElement } from 'lit/decorators.js';
+import { literal } from 'lit/static-html.js';
+import { styles as filledForcedColorsStyles } from '../textfield/lib/filled-forced-colors-styles.css.js';
+import { styles as filledStyles } from '../textfield/lib/filled-styles.css.js';
+import { styles as sharedStyles } from '../textfield/lib/shared-styles.css.js';
+import { Autocomplete } from './lib/autocomplete.js';
+import { styles as autocompleteStyles } from './lib/filled-styles.css.js';
+import { styles as sharedAutocompleteStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledAutocomplete = class MdFilledAutocomplete extends Autocomplete {
+    constructor() {
+        super(...arguments);
+        this.listTag = literal `md-autocomplete-list`;
+        this.menuSurfaceTag = literal `md-autocomplete-surface`;
+        this.fieldTag = literal `md-filled-field`;
+    }
+    /** @soyTemplate */
+    getAutocompleteRenderClasses() {
+        return {
+            ...super.getAutocompleteRenderClasses(),
+            'md3-autocomplete--filled': true,
+        };
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-text-field--filled': true,
+        };
+    }
+};
+MdFilledAutocomplete.styles = [
+    sharedStyles, filledStyles, filledForcedColorsStyles,
+    sharedAutocompleteStyles, autocompleteStyles
+];
+MdFilledAutocomplete = __decorate([
+    customElement('md-filled-autocomplete')
+], MdFilledAutocomplete);
+export { MdFilledAutocomplete };
+//# sourceMappingURL=filled-autocomplete.js.map

package/autocomplete/filled-autocomplete.js.map

@@ -0,0 +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"]}

package/autocomplete/lib/_filled-autocomplete.scss

@@ -0,0 +1,229 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../elevationold/lib/elevation-theme';
+@use '../../field/filled-field';
+@use '../../list/list';
+@use '../../list/list-item';
+@use '../../menusurface/menu-surface';
+@use '../../sass/theme';
+@use '../../textfield/filled-text-field';
+@use '../../tokens';
+@use './shared';
+
+$custom-property-prefix: 'filled-autocomplete';
+$dark-theme: tokens.md-comp-filled-autocomplete-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-filled-autocomplete-values(),
+    $tokens
+  );
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-autocomplete-values();
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .md3-text-field {
+    @include filled-text-field.theme(
+      (
+        active-indicator-color: var(--_text-field-active-indicator-color),
+        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:
+          var(--_text-field-disabled-active-indicator-height),
+        disabled-active-indicator-opacity:
+          var(--_text-field-disabled-active-indicator-opacity),
+        disabled-container-color: var(--_text-field-disabled-container-color),
+        disabled-container-opacity:
+          var(--_text-field-disabled-container-opacity),
+        disabled-input-text-color: var(--_text-field-disabled-input-text-color),
+        disabled-input-text-opacity:
+          var(--_text-field-disabled-input-text-opacity),
+        disabled-label-text-color: var(--_text-field-disabled-label-text-color),
+        disabled-label-text-opacity:
+          var(--_text-field-disabled-label-text-opacity),
+        disabled-leading-icon-color:
+          var(--_text-field-disabled-leading-icon-color),
+        disabled-leading-icon-opacity:
+          var(--_text-field-disabled-leading-icon-opacity),
+        disabled-supporting-text-color:
+          var(--_text-field-disabled-supporting-text-color),
+        disabled-supporting-text-opacity:
+          var(--_text-field-disabled-supporting-text-opacity),
+        disabled-trailing-icon-color:
+          var(--_text-field-disabled-trailing-icon-color),
+        disabled-trailing-icon-opacity:
+          var(--_text-field-disabled-trailing-icon-opacity),
+        error-active-indicator-color:
+          var(--_text-field-error-active-indicator-color),
+        error-focus-active-indicator-color:
+          var(--_text-field-error-focus-active-indicator-color),
+        error-focus-caret-color: var(--_text-field-error-focus-caret-color),
+        error-focus-input-text-color:
+          var(--_text-field-error-focus-input-text-color),
+        error-focus-label-text-color:
+          var(--_text-field-error-focus-label-text-color),
+        error-focus-leading-icon-color:
+          var(--_text-field-error-focus-leading-icon-color),
+        error-focus-supporting-text-color:
+          var(--_text-field-error-focus-supporting-text-color),
+        error-focus-trailing-icon-color:
+          var(--_text-field-error-focus-trailing-icon-color),
+        error-hover-active-indicator-color:
+          var(--_text-field-error-hover-active-indicator-color),
+        error-hover-input-text-color:
+          var(--_text-field-error-hover-input-text-color),
+        error-hover-label-text-color:
+          var(--_text-field-error-hover-label-text-color),
+        error-hover-leading-icon-color:
+          var(--_text-field-error-hover-leading-icon-color),
+        error-hover-state-layer-color:
+          var(--_text-field-error-hover-state-layer-color),
+        error-hover-state-layer-opacity:
+          var(--_text-field-error-hover-state-layer-opacity),
+        error-hover-supporting-text-color:
+          var(--_text-field-error-hover-supporting-text-color),
+        error-hover-trailing-icon-color:
+          var(--_text-field-error-hover-trailing-icon-color),
+        error-input-text-color: var(--_text-field-error-input-text-color),
+        error-label-text-color: var(--_text-field-error-label-text-color),
+        error-leading-icon-color: var(--_text-field-error-leading-icon-color),
+        error-supporting-text-color:
+          var(--_text-field-error-supporting-text-color),
+        error-trailing-icon-color: var(--_text-field-error-trailing-icon-color),
+        focus-active-indicator-color:
+          var(--_text-field-focus-active-indicator-color),
+        focus-active-indicator-height:
+          var(--_text-field-focus-active-indicator-height),
+        focus-input-text-color: var(--_text-field-focus-input-text-color),
+        focus-label-text-color: var(--_text-field-focus-label-text-color),
+        focus-leading-icon-color: var(--_text-field-focus-leading-icon-color),
+        focus-supporting-text-color:
+          var(--_text-field-focus-supporting-text-color),
+        focus-trailing-icon-color: var(--_text-field-focus-trailing-icon-color),
+        hover-active-indicator-color:
+          var(--_text-field-hover-active-indicator-color),
+        hover-active-indicator-height:
+          var(--_text-field-hover-active-indicator-height),
+        hover-input-text-color: var(--_text-field-hover-input-text-color),
+        hover-label-text-color: var(--_text-field-hover-label-text-color),
+        hover-leading-icon-color: var(--_text-field-hover-leading-icon-color),
+        hover-state-layer-color: var(--_text-field-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_text-field-hover-state-layer-opacity),
+        hover-supporting-text-color:
+          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-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),
+        trailing-icon-color: var(--_text-field-trailing-icon-color),
+        trailing-icon-size: var(--_text-field-trailing-icon-size),
+      )
+    );
+    // 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),
+      )
+    );
+  }
+
+  .md3-autocomplete__menu-surface {
+    @include menu-surface.theme(
+      (
+        container-elevation-shadow: var(--_menu-container-elevation-shadow),
+        container-shape: var(--_menu-container-shape),
+      )
+    );
+
+    @include list.theme(
+      (
+        container-color: var(--_menu-container-color),
+        container-surface-tint-layer-color:
+          var(--_menu-container-surface-tint-layer-color),
+        container-elevation-overlay-opacity:
+          var(--_menu-container-elevation-overlay-opacity),
+      )
+    );
+
+    @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),
+      )
+    );
+  }
+}