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

package/autocomplete/lib/_outlined-autocomplete.scss

@@ -0,0 +1,217 @@
+//
+// 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 '../../field/outlined-field';
+@use '../../list/list';
+@use '../../list/list-item';
+@use '../../menusurface/menu-surface';
+@use '../../sass/theme';
+@use '../../textfield/outlined-text-field';
+@use '../../tokens';
+@use './shared';
+
+$custom-property-prefix: 'outlined-autocomplete';
+$dark-theme: tokens.md-comp-outlined-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-outlined-autocomplete-values(),
+    $theme
+  );
+  $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-outlined-autocomplete-values();
+  $tokens: shared.resolve-tokens($tokens);
+  // TODO(b/251183088): Clean up container-shape once token is correct.
+  $tokens: map.merge(
+    $tokens,
+    (
+      text-field-container-shape: 4px,
+    )
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .md3-text-field {
+    @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),
+        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-outline-color: var(--_text-field-disabled-outline-color),
+        disabled-outline-opacity: var(--_text-field-disabled-outline-opacity),
+        disabled-outline-width: var(--_text-field-disabled-outline-width),
+        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-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-outline-color: var(--_text-field-error-focus-outline-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-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-outline-color: var(--_text-field-error-hover-outline-color),
+        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-outline-color: var(--_text-field-error-outline-color),
+        error-supporting-text-color:
+          var(--_text-field-error-supporting-text-color),
+        error-trailing-icon-color: var(--_text-field-error-trailing-icon-color),
+        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-outline-color: var(--_text-field-focus-outline-color),
+        focus-outline-width: var(--_text-field-focus-outline-width),
+        focus-supporting-text-color:
+          var(--_text-field-focus-supporting-text-color),
+        focus-trailing-icon-color: var(--_text-field-focus-trailing-icon-color),
+        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-outline-color: var(--_text-field-hover-outline-color),
+        hover-outline-width: var(--_text-field-hover-outline-width),
+        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),
+        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),
+        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 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),
+      )
+    );
+  }
+
+  .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),
+      )
+    );
+  }
+}

package/autocomplete/lib/_shared.scss

@@ -0,0 +1,34 @@
+//
+// 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 '../../sass/resolvers';
+@use '../../sass/shape';
+
+@mixin styles() {
+  .md3-autocomplete {
+    display: inline-flex;
+    flex: 1;
+  }
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: elevation-theme.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'elevation'),
+    $shadow-color-token: 'menu-container-shadow-color',
+    $elevation-tokens: (menu-container-elevation)
+  );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    text-field-container-shape
+  );
+  @return $tokens;
+}

package/autocomplete/lib/autocomplete.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { StaticValue } from 'lit/static-html.js';
+import { TextField } from '../../textfield/lib/text-field.js';
+import { AutocompleteItem } from './autocompleteitem/autocomplete-item.js';
+import { AutocompleteList } from './autocompletelist/autocomplete-list.js';
+import { AutocompleteSurface } from './autocompletesurface/autocomplete-surface.js';
+/** @soyCompatible */
+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.
+     */
+    itemIdPrefix: string;
+    protected abstract readonly menuSurfaceTag: StaticValue;
+    protected abstract readonly listTag: StaticValue;
+    menuSurface?: AutocompleteSurface | null;
+    list?: AutocompleteList | null;
+    protected slottedItems?: AutocompleteItem[];
+    value: string;
+    protected selectedItem: AutocompleteItem | null;
+    /** @soyTemplate */
+    render(): TemplateResult;
+    /** @soyTemplate */
+    protected getAutocompleteRenderClasses(): ClassInfo;
+    protected updated(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    /** @soyTemplate */
+    protected renderMenuSurface(): TemplateResult;
+    isOpen(): boolean;
+    open(): void;
+    close(): void;
+    protected handleClicked(event: PointerEvent): void;
+    protected handleFocusout(): void;
+    protected handleAction(event: CustomEvent<{
+        item: AutocompleteItem;
+    }>): void;
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected handleKeyup(event: KeyboardEvent): void;
+    /**
+     * When selectedItem is updated, item prefixes and aria-selected status will
+     * be updated along with scrolling the selected item into view, if needed.
+     */
+    private updateSelectedItem;
+    private getPreviousItem;
+    private getNextItem;
+}

package/autocomplete/lib/autocomplete.js

@@ -0,0 +1,273 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html as staticHtml } from 'lit/static-html.js';
+import { TextField } from '../../textfield/lib/text-field.js';
+import { AutocompleteItem } from './autocompleteitem/autocomplete-item.js';
+import { AutocompleteList } from './autocompletelist/autocomplete-list.js';
+import { AutocompleteSurface } from './autocompletesurface/autocomplete-surface.js';
+/** @soyCompatible */
+export class Autocomplete extends TextField {
+    constructor() {
+        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.
+         */
+        this.itemIdPrefix = 'autocomplete-item';
+        this.value = '';
+        this.selectedItem = null;
+    }
+    /** @soyTemplate */
+    render() {
+        return html `<div class="md3-autocomplete ${classMap(this.getAutocompleteRenderClasses())}"
+            @click=${this.handleClicked}
+            @focusout=${this.handleFocusout}
+            @action=${this.handleAction}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeydown}
+            @keyup=${this.handleKeyup}>
+            ${super.render()}
+            ${this.renderMenuSurface()}</div>`;
+    }
+    /** @soyTemplate */
+    getAutocompleteRenderClasses() {
+        return {};
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('selectedItem')) {
+            this.updateSelectedItem();
+            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) {
+        super.firstUpdated(changedProperties);
+        this.menuSurface.anchor = this;
+    }
+    /** @soyTemplate */
+    renderMenuSurface() {
+        return staticHtml `<${this.menuSurfaceTag}
+      class="md3-autocomplete__menu-surface">
+      <${this.listTag} class="md3-autocomplete__list">
+        <slot></slot>
+      </${this.listTag}>
+    </${this.menuSurfaceTag}>`;
+    }
+    isOpen() {
+        return this.menuSurface?.open || false;
+    }
+    open() {
+        this.menuSurface?.show();
+        this.ariaExpanded = 'true';
+    }
+    close() {
+        this.menuSurface?.close();
+        this.selectedItem = null;
+        this.ariaExpanded = 'false';
+    }
+    handleClicked(event) {
+        // When clicking the list (not items nor text field) the menu should stay
+        // open.
+        if (this.isOpen() &&
+            event.target?.parentNode !== this.menuSurface) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    handleFocusout() {
+        if (this.matches(':focus-within')) {
+            this.getInput().focus();
+            return;
+        }
+        this.close();
+        this.focused = false;
+    }
+    handleAction(event) {
+        const detail = event.detail;
+        this.value = detail.item.headline;
+    }
+    handleKeydown(event) {
+        let bubble = true;
+        const altKey = event.altKey;
+        switch (event.key) {
+            case 'Enter':
+                if (this.selectedItem) {
+                    this.value = this.selectedItem.headline;
+                }
+                this.close();
+                bubble = false;
+                break;
+            case 'ArrowDown':
+                if (!this.slottedItems)
+                    return;
+                if (this.slottedItems.length) {
+                    if (this.selectedItem) {
+                        this.selectedItem = this.getNextItem();
+                    }
+                    else {
+                        this.open();
+                        if (!altKey) {
+                            this.selectedItem = this.slottedItems[0];
+                        }
+                    }
+                }
+                bubble = false;
+                break;
+            case 'ArrowUp':
+                if (!this.slottedItems)
+                    return;
+                if (this.slottedItems.length) {
+                    if (this.selectedItem) {
+                        this.selectedItem = this.getPreviousItem();
+                    }
+                    else {
+                        this.open();
+                        if (!altKey) {
+                            this.selectedItem =
+                                this.slottedItems[this.slottedItems.length - 1];
+                        }
+                    }
+                }
+                bubble = false;
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    this.close();
+                }
+                else {
+                    this.value = '';
+                }
+                this.selectedItem = null;
+                bubble = false;
+                break;
+            case 'Tab':
+                if (this.selectedItem) {
+                    this.value = this.selectedItem.headline;
+                }
+                this.close();
+                break;
+            case 'Home':
+                this.setSelectionRange(0, 0);
+                this.selectedItem = null;
+                bubble = false;
+                break;
+            case 'End':
+                this.setSelectionRange(this.value.length, this.value.length);
+                this.selectedItem = null;
+                bubble = false;
+                break;
+            default:
+                break;
+        }
+        if (bubble)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    handleKeyup(event) {
+        let bubble = true;
+        switch (event.key) {
+            case 'Backspace':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                this.selectedItem = null;
+                bubble = false;
+                break;
+            default:
+                break;
+        }
+        if (bubble)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    /**
+     * When selectedItem is updated, item prefixes and aria-selected status will
+     * be updated along with scrolling the selected item into view, if needed.
+     */
+    updateSelectedItem() {
+        if (!this.slottedItems)
+            return;
+        this.slottedItems.forEach((item, index) => {
+            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) {
+                    this.list.scrollTop =
+                        item.offsetTop + item.offsetHeight - this.list.offsetHeight;
+                }
+                else if (this.list.scrollTop > item.offsetTop + 2) {
+                    this.list.scrollTop = item.offsetTop;
+                }
+            }
+            else {
+                item.ariaSelected = 'false';
+                item.showFocusRing = false;
+            }
+        });
+    }
+    getPreviousItem() {
+        if (!this.slottedItems)
+            return null;
+        const index = this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;
+        const length = this.slottedItems.length;
+        return this.slottedItems[(index - 1 + length) % length];
+    }
+    getNextItem() {
+        if (!this.slottedItems)
+            return null;
+        const index = this.selectedItem ? this.slottedItems.indexOf(this.selectedItem) : 0;
+        const length = this.slottedItems.length;
+        return this.slottedItems[(index + 1) % length];
+    }
+}
+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)
+], Autocomplete.prototype, "itemIdPrefix", void 0);
+__decorate([
+    query('.md3-autocomplete__menu-surface'),
+    __metadata("design:type", AutocompleteSurface)
+], Autocomplete.prototype, "menuSurface", void 0);
+__decorate([
+    query('.md3-autocomplete__list'),
+    __metadata("design:type", AutocompleteList)
+], Autocomplete.prototype, "list", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true }),
+    __metadata("design:type", Array)
+], Autocomplete.prototype, "slottedItems", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Autocomplete.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", AutocompleteItem)
+], Autocomplete.prototype, "selectedItem", void 0);
+//# sourceMappingURL=autocomplete.js.map

package/autocomplete/lib/autocomplete.js.map

@@ -0,0 +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 on the list element, used for SSR.\n   */\n  @property({type: String}) listId = 'autocomplete-list';\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      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    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      item.itemId = `${this.itemIdPrefix}-${index}`;\n\n      if (this.selectedItem && item === this.selectedItem && this.list) {\n        item.ariaSelected = 'true';\n        item.showFocusRing = 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        item.showFocusRing = 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/autocompleteitem/autocomplete-item.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItem } from '../../../list/lib/listitem/list-item.js';
+import { ARIARole } from '../../../types/aria.js';
+/** Base class for autocomplete item component. */
+export declare class AutocompleteItem extends ListItem {
+    role: ARIARole;
+}

package/autocomplete/lib/autocompleteitem/autocomplete-item.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItem } from '../../../list/lib/listitem/list-item.js';
+/** Base class for autocomplete item component. */
+export class AutocompleteItem extends ListItem {
+    constructor() {
+        super(...arguments);
+        this.role = 'option';
+    }
+}
+//# sourceMappingURL=autocomplete-item.js.map

package/autocomplete/lib/autocompleteitem/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,QAAQ,EAAC,MAAM,yCAAyC,CAAC;AAGjE,kDAAkD;AAClD,MAAM,OAAO,gBAAiB,SAAQ,QAAQ;IAA9C;;QACW,SAAI,GAAa,QAAQ,CAAC;IACrC,CAAC;CAAA","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItem} from '../../../list/lib/listitem/list-item.js';\nimport {ARIARole} from '../../../types/aria.js';\n\n/** Base class for autocomplete item component. */\nexport class AutocompleteItem extends ListItem {\n  override role: ARIARole = 'option';\n}\n"]}

package/autocomplete/lib/autocompleteitem/harness.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for autocomplete item.
+ */
+export declare class AutocompleteItemHarness extends ListItemHarness {
+}

package/autocomplete/lib/autocompleteitem/harness.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for autocomplete item.
+ */
+export class AutocompleteItemHarness extends ListItemHarness {
+}
+//# sourceMappingURL=harness.js.map

package/autocomplete/lib/autocompleteitem/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAEtE;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,eAAe;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItemHarness} from '../../../list/lib/listitem/harness.js';\n\n/**\n * Test harness for autocomplete item.\n */\nexport class AutocompleteItemHarness extends ListItemHarness {}\n"]}