@material/web 1.0.0-pre.4 → 1.0.0-pre.6

package/autocomplete/lib/_filled-autocomplete.scss

@@ -1,189 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/lib/elevation';
-@use '../../field/filled-field';
-@use '../../menusurface/menu-surface';
-@use '../../sass/shape';
-@use '../../sass/theme';
-@use '../../sass/typography';
-@use '../../textfield/filled-text-field';
-@use '../../tokens';
-@use './shared';
-// go/keep-sorted end
-
-$custom-property-prefix: 'filled-autocomplete';
-$dark-theme: tokens.md-comp-filled-autocomplete-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($tokens) {
-  $reference: shared.resolve-typography-tokens(
-    tokens.md-comp-filled-autocomplete-values()
-  );
-  $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: 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 {
-      --_#{$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),
-        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-type: var(--_text-field-input-text-type),
-        label-text-color: var(--_text-field-label-text-color),
-        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),
-        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-type: var(--_supporting-text-type),
-        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:
-          shape.corners-to-shape-token('--_text-field-container-shape'),
-      )
-    );
-  }
-
-  .md3-autocomplete__menu-surface {
-    @include menu-surface.theme(
-      (
-        container-elevation: var(--_menu-container-elevation),
-        container-shape: var(--_menu-container-shape),
-        container-shadow-color: var(--_menu-container-shadow-color),
-      )
-    );
-  }
-
-  .md3-autocomplete ::slotted([data-aria-selected='true']) {
-    // TODO(b/265209322): list item selected styles
-  }
-}

package/autocomplete/lib/_outlined-autocomplete.scss

@@ -1,178 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/lib/elevation';
-@use '../../field/outlined-field';
-@use '../../menusurface/menu-surface';
-@use '../../sass/shape';
-@use '../../sass/theme';
-@use '../../sass/typography';
-@use '../../textfield/outlined-text-field';
-@use '../../tokens';
-@use './shared';
-// go/keep-sorted end
-
-$custom-property-prefix: 'outlined-autocomplete';
-$dark-theme: tokens.md-comp-outlined-autocomplete-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($tokens) {
-  $reference: shared.resolve-typography-tokens(
-    tokens.md-comp-outlined-autocomplete-values()
-  );
-
-  $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: 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,
-    (
-      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 {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  .md3-text-field {
-    @include outlined-text-field.theme(
-      (
-        caret-color: var(--_text-field-caret-color),
-        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-type: var(--_text-field-input-text-type),
-        label-text-color: var(--_text-field-label-text-color),
-        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),
-        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-type: var(--_supporting-text-type),
-        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:
-          shape.corners-to-shape-token('--_text-field-container-shape'),
-      )
-    );
-  }
-
-  .md3-autocomplete__menu-surface {
-    @include menu-surface.theme(
-      (
-        container-elevation: var(--_menu-container-elevation),
-        container-shape: var(--_menu-container-shape),
-        container-shadow-color: var(--_menu-container-shadow-color),
-      )
-    );
-  }
-
-  .md3-autocomplete ::slotted([data-aria-selected='true']) {
-    // TODO(b/265209322): list item selected styles
-  }
-}

package/autocomplete/lib/_shared.scss

@@ -1,25 +0,0 @@
-//
-// 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/typography';
-
-@mixin styles() {
-  .md3-autocomplete {
-    display: inline-flex;
-    flex: 1;
-  }
-}
-
-@function resolve-typography-tokens($tokens) {
-  @return typography.resolve-tokens(
-    $tokens,
-    'input-text',
-    'label-text',
-    'supporting-text'
-  );
-}

package/autocomplete/lib/autocomplete.d.ts

@@ -1,54 +0,0 @@
-/**
- * @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 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<1>;
-    /** @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 handleAnyFocusout(): 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;
-}