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

package/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","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 {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;GAKG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","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 {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/select/_filled-select.scss

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

package/select/_outlined-select.scss

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

package/select/filled-select.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledSelect } from './lib/filled-select.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-select': MdFilledSelect;
+    }
+}
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "filled"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-filled-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-filled-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledSelect extends FilledSelect {
+    static styles: import("lit").CSSResult[];
+}

package/select/filled-select.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as filledForcedColorsStyles } from './lib/filled-forced-colors-styles.css.js';
+import { FilledSelect } from './lib/filled-select.js';
+import { styles } from './lib/filled-select-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "filled"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-filled-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-filled-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledSelect = class MdFilledSelect extends FilledSelect {
+};
+MdFilledSelect.styles = [sharedStyles, styles, filledForcedColorsStyles];
+MdFilledSelect = __decorate([
+    customElement('md-filled-select')
+], MdFilledSelect);
+export { MdFilledSelect };
+//# sourceMappingURL=filled-select.js.map

package/select/filled-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-select.js","sourceRoot":"","sources":["filled-select.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,wBAAwB,CAAC,CAAC;AAD/D,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {FilledSelect} from './lib/filled-select.js';\nimport {styles} from './lib/filled-select-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-select': MdFilledSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"filled\"\n * variant.\n *\n * @example\n * ```html\n * <md-filled-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-filled-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-select')\nexport class MdFilledSelect extends FilledSelect {\n  static override styles = [sharedStyles, styles, filledForcedColorsStyles];\n}\n"]}

package/select/harness.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Field } from '../field/lib/field.js';
+import { Harness } from '../testing/harness.js';
+import { Select } from './lib/select.js';
+import { SelectOptionHarness } from './lib/selectoption/harness.js';
+/**
+ * Test harness for menu.
+ */
+export declare class SelectHarness extends Harness<Select> {
+    protected getField(): Field;
+    /**
+     * Shows the menu and returns the first list item element.
+     */
+    protected getInteractiveElement(): Promise<Field>;
+    startHover(): Promise<void>;
+    /** @return ListItem harnesses for the menu's items. */
+    getItems(): SelectOptionHarness[];
+    click(quick?: boolean): Promise<void>;
+    clickOption(index: number): Promise<void>;
+}

package/select/harness.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FieldHarness } from '../field/harness.js';
+import { Harness } from '../testing/harness.js';
+import { SelectOptionHarness } from './lib/selectoption/harness.js';
+/**
+ * Test harness for menu.
+ */
+export class SelectHarness extends Harness {
+    getField() {
+        return this.element.renderRoot.querySelector('.field');
+    }
+    /**
+     * Shows the menu and returns the first list item element.
+     */
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.getField();
+    }
+    async startHover() {
+        const field = await this.getField();
+        const element = await (new SelectFieldHardness(field)).getInteractiveElement();
+        this.simulateStartHover(element);
+    }
+    /** @return ListItem harnesses for the menu's items. */
+    getItems() {
+        return this.element.options.map((item) => new SelectOptionHarness(item));
+    }
+    async click(quick = true) {
+        this.element.quick = quick;
+        await this.element.updateComplete;
+        const field = await this.getField();
+        field.click();
+    }
+    async clickOption(index) {
+        const menu = this.element.renderRoot.querySelector('md-menu');
+        if (!menu.open) {
+            console.warn('Internal menu is not open. Try calling SelectHarness.prototype.click()');
+        }
+        this.getItems()[index].element.click();
+    }
+}
+// Private class (not exported)
+class SelectFieldHardness extends FieldHarness {
+    /* Expose so that we can call it from our internal code in SelectHarness. */
+    getInteractiveElement() {
+        return super.getInteractiveElement();
+    }
+}
+//# sourceMappingURL=harness.js.map

package/select/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,+BAA+B,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACtC,QAAQ;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAU,CAAC;IAClE,CAAC;IACD;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAEQ,KAAK,CAAC,UAAU;QACvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;QAC/E,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI;QACtB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3B,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC;QAC/D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,CAAC,IAAI,CACR,wEAAwE,CAAC,CAAC;SAC/E;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzC,CAAC;CACF;AAED,+BAA+B;AAC/B,MAAM,mBAAoB,SAAQ,YAAY;IAC5C,4EAA4E;IACnE,qBAAqB;QAC5B,OAAO,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACvC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FieldHarness} from '../field/harness.js';\nimport {Field} from '../field/lib/field.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {Select} from './lib/select.js';\nimport {SelectOptionHarness} from './lib/selectoption/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class SelectHarness extends Harness<Select> {\n  protected getField() {\n    return this.element.renderRoot.querySelector('.field') as Field;\n  }\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.getField();\n  }\n\n  override async startHover() {\n    const field = await this.getField();\n    const element = await (new SelectFieldHardness(field)).getInteractiveElement();\n    this.simulateStartHover(element);\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.options.map((item) => new SelectOptionHarness(item));\n  }\n\n  async click(quick = true) {\n    this.element.quick = quick;\n    await this.element.updateComplete;\n    const field = await this.getField();\n    field.click();\n  }\n\n  async clickOption(index: number) {\n    const menu = this.element.renderRoot.querySelector('md-menu')!;\n    if (!menu.open) {\n      console.warn(\n          'Internal menu is not open. Try calling SelectHarness.prototype.click()');\n    }\n    this.getItems()[index].element.click();\n  }\n}\n\n// Private class (not exported)\nclass SelectFieldHardness extends FieldHarness {\n  /* Expose so that we can call it from our internal code in SelectHarness. */\n  override getInteractiveElement() {\n    return super.getInteractiveElement();\n  }\n}\n"]}

package/select/lib/_filled-select.scss

@@ -0,0 +1,222 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../field/filled-field';
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-select-supported-tokens,
+    (
+      'text-field-container-shape-start-start',
+      'text-field-container-shape-start-end',
+      'text-field-container-shape-end-end',
+      'text-field-container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $token ==
+      'text-field-container-shape' and
+      meta.type-of($value) ==
+      'list'
+    {
+      @error 'Filled select `text-field-container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
+    }
+
+    @if $value {
+      --md-filled-select-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-select-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      @if $token == 'text-field-container-shape' {
+        // Support logical shape properties. Filled text field has a default
+        // oblong shape, which is why the fallback value is unique per corner.
+        --_text-field-container-shape-start-start: var(
+          --md-filled-select-text-field-container-shape-start-start,
+          var(
+            --md-filled-select-text-field-container-shape,
+            #{list.nth($value, 1)}
+          )
+        );
+        --_text-field-container-shape-start-end: var(
+          --md-filled-select-text-field-container-shape-start-end,
+          var(
+            --md-filled-select-text-field-container-shape,
+            #{list.nth($value, 2)}
+          )
+        );
+        --_text-field-container-shape-end-end: var(
+          --md-filled-select-text-field-container-shape-end-end,
+          var(
+            --md-filled-select-text-field-container-shape,
+            #{list.nth($value, 3)}
+          )
+        );
+        --_text-field-container-shape-end-start: var(
+          --md-filled-select-text-field-container-shape-end-start,
+          var(
+            --md-filled-select-text-field-container-shape,
+            #{list.nth($value, 4)}
+          )
+        );
+      } @else {
+        --_#{$token}: var(--md-filled-select-#{$token}, #{$value});
+      }
+    }
+
+    @include filled-field.theme(
+      (
+        // go/keep-sorted start
+        'active-indicator-color': var(--_text-field-active-indicator-color),
+        'active-indicator-height': var(--_text-field-active-indicator-height),
+        'container-color': var(--_text-field-container-color),
+        'container-shape-end-end': var(--_text-field-container-shape-end-end),
+        'container-shape-end-start':
+          var(--_text-field-container-shape-end-start),
+        'container-shape-start-end':
+          var(--_text-field-container-shape-start-end),
+        'container-shape-start-start':
+          var(--_text-field-container-shape-start-start),
+        'content-color': var(--_text-field-input-text-color),
+        'content-type': var(--_text-field-input-text-type),
+        '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-content-color': var(--_text-field-disabled-input-text-color),
+        'disabled-content-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-content-color':
+          var(--_text-field-disabled-leading-icon-color),
+        'disabled-leading-content-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-content-color':
+          var(--_text-field-disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_text-field-disabled-trailing-icon-opacity),
+        'error-active-indicator-color':
+          var(--_text-field-error-active-indicator-color),
+        'error-content-color': var(--_text-field-error-input-text-color),
+        'error-focus-active-indicator-color':
+          var(--_text-field-error-focus-active-indicator-color),
+        'error-focus-content-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-content-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-content-color':
+          var(--_text-field-error-focus-trailing-icon-color),
+        'error-hover-active-indicator-color':
+          var(--_text-field-error-hover-active-indicator-color),
+        'error-hover-content-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-content-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-content-color':
+          var(--_text-field-error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_text-field-error-label-text-color),
+        'error-leading-content-color':
+          var(--_text-field-error-leading-icon-color),
+        'error-supporting-text-color':
+          var(--_text-field-error-supporting-text-color),
+        'error-trailing-content-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-content-color': var(--_text-field-focus-input-text-color),
+        'focus-label-text-color': var(--_text-field-focus-label-text-color),
+        'focus-leading-content-color':
+          var(--_text-field-focus-leading-icon-color),
+        'focus-supporting-text-color':
+          var(--_text-field-focus-supporting-text-color),
+        'focus-trailing-content-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-content-color': var(--_text-field-hover-input-text-color),
+        'hover-label-text-color': var(--_text-field-hover-label-text-color),
+        'hover-leading-content-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-content-color':
+          var(--_text-field-hover-trailing-icon-color),
+        'label-text-color': var(--_text-field-label-text-color),
+        '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-type': var(--_text-field-label-text-type),
+        'leading-content-color': var(--_text-field-leading-icon-color),
+        'supporting-text-color': var(--_text-field-supporting-text-color),
+        'supporting-text-type': var(--_text-field-supporting-text-type),
+        'trailing-content-color': var(--_text-field-trailing-icon-color),
+        // go/keep-sorted end
+      )
+    );
+  }
+
+  [hasstart] .icon.leading {
+    font-size: var(--_text-field-leading-icon-size);
+    height: var(--_text-field-leading-icon-size);
+    width: var(--_text-field-leading-icon-size);
+  }
+
+  [hasend] .icon.trailing {
+    font-size: var(--_text-field-trailing-icon-size);
+    height: var(--_text-field-trailing-icon-size);
+    width: var(--_text-field-trailing-icon-size);
+  }
+}

package/select/lib/_outlined-select.scss

@@ -0,0 +1,180 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../field/outlined-field';
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-outlined-select-supported-tokens,
+    (
+      'text-field-container-shape-start-start',
+      'text-field-container-shape-start-end',
+      'text-field-container-shape-end-end',
+      'text-field-container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-select-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-select-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-select-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_text-field-container-shape-start-start: var(
+      --md-outlined-select-text-field-container-shape-start-start,
+      var(--_text-field-container-shape)
+    );
+    --_text-field-container-shape-start-end: var(
+      --md-outlined-select-text-field-container-shape-start-end,
+      var(--_text-field-container-shape)
+    );
+    --_text-field-container-shape-end-end: var(
+      --md-outlined-select-text-field-container-shape-end-end,
+      var(--_text-field-container-shape)
+    );
+    --_text-field-container-shape-end-start: var(
+      --md-outlined-select-text-field-container-shape-end-start,
+      var(--_text-field-container-shape)
+    );
+
+    @include outlined-field.theme(
+      (
+        // go/keep-sorted start
+        'container-shape-end-end': var(--_text-field-container-shape-end-end),
+        'container-shape-end-start':
+          var(--_text-field-container-shape-end-start),
+        'container-shape-start-end':
+          var(--_text-field-container-shape-start-end),
+        'container-shape-start-start':
+          var(--_text-field-container-shape-start-start),
+        'content-color': var(--_text-field-input-text-color),
+        'content-type': var(--_text-field-input-text-type),
+        'disabled-content-color': var(--_text-field-disabled-input-text-color),
+        'disabled-content-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-content-color':
+          var(--_text-field-disabled-leading-icon-color),
+        'disabled-leading-content-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-content-color':
+          var(--_text-field-disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_text-field-disabled-trailing-icon-opacity),
+        'error-content-color': var(--_text-field-error-input-text-color),
+        'error-focus-content-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-content-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-content-color':
+          var(--_text-field-error-focus-trailing-icon-color),
+        'error-hover-content-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-content-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-content-color':
+          var(--_text-field-error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_text-field-error-label-text-color),
+        'error-leading-content-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-content-color':
+          var(--_text-field-error-trailing-icon-color),
+        'focus-content-color': var(--_text-field-focus-input-text-color),
+        'focus-label-text-color': var(--_text-field-focus-label-text-color),
+        'focus-leading-content-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-content-color':
+          var(--_text-field-focus-trailing-icon-color),
+        'hover-content-color': var(--_text-field-hover-input-text-color),
+        'hover-label-text-color': var(--_text-field-hover-label-text-color),
+        'hover-leading-content-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-content-color':
+          var(--_text-field-hover-trailing-icon-color),
+        'label-text-color': var(--_text-field-label-text-color),
+        '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-type': var(--_text-field-label-text-type),
+        'leading-content-color': var(--_text-field-leading-icon-color),
+        '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(--_text-field-supporting-text-type),
+        'trailing-content-color': var(--_text-field-trailing-icon-color),
+        // go/keep-sorted end
+      )
+    );
+  }
+
+  [hasstart] .icon.leading {
+    font-size: var(--_text-field-leading-icon-size);
+    height: var(--_text-field-leading-icon-size);
+    width: var(--_text-field-leading-icon-size);
+  }
+
+  [hasend] .icon.trailing {
+    font-size: var(--_text-field-trailing-icon-size);
+    height: var(--_text-field-trailing-icon-size);
+    width: var(--_text-field-trailing-icon-size);
+  }
+}

package/select/lib/_shared.scss

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/lib/elevation';
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    color: unset;
+    min-width: 210px;
+  }
+
+  .field {
+    cursor: default;
+    outline: none;
+  }
+
+  .select {
+    position: relative;
+  }
+
+  .field,
+  .select {
+    min-width: inherit;
+  }
+
+  :host {
+    display: inline-flex;
+  }
+
+  .label {
+    width: 100%;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+}

package/select/lib/filled-forced-colors-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;