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

package/select/lib/selectoption/select-option.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PropertyValues } from 'lit';
+import { ListItemRole, MenuItemEl } from '../../../menu/lib/menuitem/menu-item.js';
+import { SelectOption } from '../shared.js';
+/**
+ * @fires close-menu {CloseMenuEvent} Closes the encapsulating menu on
+ * @fires request-selection {RequestSelectionEvent} Requests the parent
+ * md-select to select this element (and deselect others if single-selection)
+ * when `selected` changed to `true`.
+ * @fires request-deselection {RequestDeselectionEvent} Requests the parent
+ * md-select to deselect this element when `selected` changed to `false`.
+ */
+export declare class SelectOptionEl extends MenuItemEl implements SelectOption {
+    /**
+     * Form value of the option.
+     */
+    value: string;
+    /**
+     * Whether or not this option is selected.
+     */
+    selected: boolean;
+    readonly type: ListItemRole;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+}

package/select/lib/selectoption/select-option.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { MenuItemEl } from '../../../menu/lib/menuitem/menu-item.js';
+import { RequestDeselectionEvent, RequestSelectionEvent } from '../shared.js';
+/**
+ * @fires close-menu {CloseMenuEvent} Closes the encapsulating menu on
+ * @fires request-selection {RequestSelectionEvent} Requests the parent
+ * md-select to select this element (and deselect others if single-selection)
+ * when `selected` changed to `true`.
+ * @fires request-deselection {RequestDeselectionEvent} Requests the parent
+ * md-select to deselect this element when `selected` changed to `false`.
+ */
+export class SelectOptionEl extends MenuItemEl {
+    constructor() {
+        super(...arguments);
+        /**
+         * Form value of the option.
+         */
+        this.value = '';
+        /**
+         * Whether or not this option is selected.
+         */
+        this.selected = false;
+        this.type = 'option';
+    }
+    willUpdate(changed) {
+        if (changed.has('selected')) {
+            // Synchronize selected -> active but not the other way around because
+            // active is used for keyboard navigation and doesn't mean the option
+            // should be selected if active.
+            this.active = this.selected;
+            this.ariaSelected = this.selected ? 'true' : 'false';
+            // By default active = true focuses the element. We want to prevent that
+            // in this case because we set active = this.selected and that may mess
+            // around with menu's restore focus function once the menu closes.
+            this.focusOnActivation = false;
+        }
+        super.willUpdate(changed);
+    }
+    updated(changed) {
+        super.updated(changed);
+        // Restore the active = true focusing behavior which happens in
+        // super.updated() if it was turned off.
+        this.focusOnActivation = true;
+        // Do not dispatch event on first update / boot-up.
+        if (changed.has('selected') && changed.get('selected') !== undefined) {
+            // This section is really useful for when the user sets selected on the
+            // option programmatically. Most other cases (click and keyboard) are
+            // handled by md-select because it needs to coordinate the
+            // single-selection behavior.
+            if (this.selected) {
+                this.dispatchEvent(new RequestSelectionEvent());
+            }
+            else {
+                this.dispatchEvent(new RequestDeselectionEvent());
+            }
+        }
+    }
+}
+__decorate([
+    property()
+], SelectOptionEl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectOptionEl.prototype, "selected", void 0);
+//# sourceMappingURL=select-option.js.map

package/select/lib/selectoption/select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAe,UAAU,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAe,MAAM,cAAc,CAAC;AAE1F;;;;;;;GAOG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACE;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAEzC,SAAI,GAAiB,QAAQ,CAAC;IAqClD,CAAC;IAnCU,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,sEAAsE;YACtE,qEAAqE;YACrE,gCAAgC;YAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACrD,wEAAwE;YACxE,uEAAuE;YACvE,kEAAkE;YAClE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC;QAED,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,+DAA+D;QAC/D,wCAAwC;QACxC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,mDAAmD;QACnD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE;YACpE,uEAAuE;YACvE,qEAAqE;YACrE,0DAA0D;YAC1D,6BAA6B;YAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,aAAa,CAAC,IAAI,qBAAqB,EAAE,CAAC,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,EAAE,CAAC,CAAC;aACnD;SACF;IACH,CAAC;CACF;AA5Ca;IAAX,QAAQ,EAAE;6CAAY;AAKmB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ListItemRole, MenuItemEl} from '../../../menu/lib/menuitem/menu-item.js';\nimport {RequestDeselectionEvent, RequestSelectionEvent, SelectOption} from '../shared.js';\n\n/**\n * @fires close-menu {CloseMenuEvent} Closes the encapsulating menu on\n * @fires request-selection {RequestSelectionEvent} Requests the parent\n * md-select to select this element (and deselect others if single-selection)\n * when `selected` changed to `true`.\n * @fires request-deselection {RequestDeselectionEvent} Requests the parent\n * md-select to deselect this element when `selected` changed to `false`.\n */\nexport class SelectOptionEl extends MenuItemEl implements SelectOption {\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  /**\n   * Whether or not this option is selected.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  override readonly type: ListItemRole = 'option';\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('selected')) {\n      // Synchronize selected -> active but not the other way around because\n      // active is used for keyboard navigation and doesn't mean the option\n      // should be selected if active.\n      this.active = this.selected;\n      this.ariaSelected = this.selected ? 'true' : 'false';\n      // By default active = true focuses the element. We want to prevent that\n      // in this case because we set active = this.selected and that may mess\n      // around with menu's restore focus function once the menu closes.\n      this.focusOnActivation = false;\n    }\n\n    super.willUpdate(changed);\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n    // Restore the active = true focusing behavior which happens in\n    // super.updated() if it was turned off.\n    this.focusOnActivation = true;\n\n    // Do not dispatch event on first update / boot-up.\n    if (changed.has('selected') && changed.get('selected') !== undefined) {\n      // This section is really useful for when the user sets selected on the\n      // option programmatically. Most other cases (click and keyboard) are\n      // handled by md-select because it needs to coordinate the\n      // single-selection behavior.\n      if (this.selected) {\n        this.dispatchEvent(new RequestSelectionEvent());\n      } else {\n        this.dispatchEvent(new RequestDeselectionEvent());\n      }\n    }\n  }\n}\n"]}

package/select/lib/shared-styles.css.d.ts

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

package/select/lib/shared-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:100%;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}.label{width:100%}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/select/lib/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:100%;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}.label{width:100%}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/select/lib/shared-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './shared';
+// go/keep-sorted end
+
+@include shared.styles();

package/select/lib/shared.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItem } from '../../menu/lib/shared.js';
+/**
+ * The interface specific to a Select Option
+ */
+interface SelectOptionSelf {
+    /**
+     * The form value associated with the Select Option. (Note: the visual portion
+     * of the SelectOption is the headline defined in ListItem)
+     */
+    value: string;
+    /**
+     * Whether or not the SelectOption is selected.
+     */
+    selected: boolean;
+}
+/**
+ * The interface to implement for a select option. Additionally, the element
+ * must have `md-list-item` and `md-menu-item` attributes on the host.
+ */
+export type SelectOption = SelectOptionSelf & MenuItem;
+/**
+ * A type that describes a SelectOption and its index.
+ */
+export type SelectOptionRecord = [SelectOption, number];
+/**
+ * Given a list of select options, this function will return an array of
+ * SelectOptionRecords that are selected.
+ *
+ * @return An array of SelectOptionRecords describing the options that are
+ * selected.
+ */
+export declare function getSelectedItems(items: SelectOption[]): SelectOptionRecord[];
+/**
+ * An event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export declare class RequestSelectionEvent extends Event {
+    constructor();
+}
+/**
+ * An event fired by a SelectOption to request deselection from md-select.
+ * Typically fired after `selected` changes from `true` to `false`.
+ */
+export declare class RequestDeselectionEvent extends Event {
+    constructor();
+}
+export {};

package/select/lib/shared.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Given a list of select options, this function will return an array of
+ * SelectOptionRecords that are selected.
+ *
+ * @return An array of SelectOptionRecords describing the options that are
+ * selected.
+ */
+export function getSelectedItems(items) {
+    const selectedItemRecords = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.selected) {
+            selectedItemRecords.push([item, i]);
+        }
+    }
+    return selectedItemRecords;
+}
+/**
+ * An event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export class RequestSelectionEvent extends Event {
+    constructor() {
+        super('request-selection', { bubbles: true, composed: true });
+    }
+}
+/**
+ * An event fired by a SelectOption to request deselection from md-select.
+ * Typically fired after `selected` changes from `true` to `false`.
+ */
+export class RequestDeselectionEvent extends Event {
+    constructor() {
+        super('request-deselection', { bubbles: true, composed: true });
+    }
+}
+//# sourceMappingURL=shared.js.map

package/select/lib/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA8BH;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAqB;IACpD,MAAM,mBAAmB,GAAyB,EAAE,CAAC;IAErD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;SACrC;KACF;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED;;;GAGG;AACH,MAAM,OAAO,qBAAsB,SAAQ,KAAK;IAC9C;QACE,KAAK,CAAC,mBAAmB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IAC9D,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAO,uBAAwB,SAAQ,KAAK;IAChD;QACE,KAAK,CAAC,qBAAqB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IAChE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItem} from '../../menu/lib/shared.js';\n\n/**\n * The interface specific to a Select Option\n */\ninterface SelectOptionSelf {\n  /**\n   * The form value associated with the Select Option. (Note: the visual portion\n   * of the SelectOption is the headline defined in ListItem)\n   */\n  value: string;\n  /**\n   * Whether or not the SelectOption is selected.\n   */\n  selected: boolean;\n}\n\n/**\n * The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n */\nexport type SelectOption = SelectOptionSelf&MenuItem;\n\n/**\n * A type that describes a SelectOption and its index.\n */\nexport type SelectOptionRecord = [SelectOption, number];\n\n/**\n * Given a list of select options, this function will return an array of\n * SelectOptionRecords that are selected.\n * \n * @return An array of SelectOptionRecords describing the options that are\n * selected.\n */\nexport function getSelectedItems(items: SelectOption[]) {\n  const selectedItemRecords: SelectOptionRecord[] = [];\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.selected) {\n      selectedItemRecords.push([item, i]);\n    }\n  }\n\n  return selectedItemRecords;\n}\n\n/**\n * An event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport class RequestSelectionEvent extends Event {\n  constructor() {\n    super('request-selection', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * An event fired by a SelectOption to request deselection from md-select.\n * Typically fired after `selected` changes from `true` to `false`.\n */\nexport class RequestDeselectionEvent extends Event {\n  constructor() {\n    super('request-deselection', {bubbles: true, composed: true});\n  }\n}\n"]}

package/select/outlined-select.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { OutlinedSelect } from './lib/outlined-select.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-select': MdOutlinedSelect;
+    }
+}
+/**
+ * @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 "outlined"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-outlined-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-outlined-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedSelect extends OutlinedSelect {
+    static styles: import("lit").CSSResult[];
+}

package/select/outlined-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 outlinedForcedColorsStyles } from './lib/outlined-forced-colors-styles.css.js';
+import { OutlinedSelect } from './lib/outlined-select.js';
+import { styles } from './lib/outlined-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 "outlined"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-outlined-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-outlined-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedSelect = class MdOutlinedSelect extends OutlinedSelect {
+};
+MdOutlinedSelect.styles = [sharedStyles, styles, outlinedForcedColorsStyles];
+MdOutlinedSelect = __decorate([
+    customElement('md-outlined-select')
+], MdOutlinedSelect);
+export { MdOutlinedSelect };
+//# sourceMappingURL=outlined-select.js.map

package/select/outlined-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-select.js","sourceRoot":"","sources":["outlined-select.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,4CAA4C,CAAC;AAChG,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,0BAA0B,CAAC,CAAC;AADjE,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","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 outlinedForcedColorsStyles} from './lib/outlined-forced-colors-styles.css.js';\nimport {OutlinedSelect} from './lib/outlined-select.js';\nimport {styles} from './lib/outlined-select-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-select': MdOutlinedSelect;\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 \"outlined\"\n * variant.\n *\n * @example\n * ```html\n * <md-outlined-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-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-select')\nexport class MdOutlinedSelect extends OutlinedSelect {\n  static override styles = [sharedStyles, styles, outlinedForcedColorsStyles];\n}\n"]}

package/select/select-option.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SelectOptionEl } from './lib/selectoption/select-option.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-select-option': MdSelectOption;
+    }
+}
+/**
+ * @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 option that
+ * can be placed inside of an md-select.
+ *
+ * This component is a subclass of `md-menu-item` and can accept the same slots,
+ * properties, and events as `md-menu-item`.
+ *
+ * @example
+ * ```html
+ * <md-outlined-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-outlined-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSelectOption extends SelectOptionEl {
+    static styles: import("lit").CSSResult[];
+}

package/select/select-option.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as forcedColorsStyles } from '../menu/lib/menuitem/forced-colors-styles.css.js';
+import { styles } from '../menu/lib/menuitem/menu-item-styles.css.js';
+// TODO(b/236285090): update with HCM best practices
+import { SelectOptionEl } from './lib/selectoption/select-option.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 option that
+ * can be placed inside of an md-select.
+ *
+ * This component is a subclass of `md-menu-item` and can accept the same slots,
+ * properties, and events as `md-menu-item`.
+ *
+ * @example
+ * ```html
+ * <md-outlined-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-outlined-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSelectOption = class MdSelectOption extends SelectOptionEl {
+};
+MdSelectOption.styles = [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
+MdSelectOption = __decorate([
+    customElement('md-select-option')
+], MdSelectOption);
+export { MdSelectOption };
+//# sourceMappingURL=select-option.js.map

package/select/select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,kDAAkD,CAAC;AAC9F,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,oDAAoD;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AAQnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;;AAChC,qBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAG1B;SAHY,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 listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\nimport {styles as forcedColorsStyles} from '../menu/lib/menuitem/forced-colors-styles.css.js';\nimport {styles} from '../menu/lib/menuitem/menu-item-styles.css.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {SelectOptionEl} from './lib/selectoption/select-option.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-select-option': MdSelectOption;\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 option that\n * can be placed inside of an md-select.\n *\n * This component is a subclass of `md-menu-item` and can accept the same slots,\n * properties, and events as `md-menu-item`.\n *\n * @example\n * ```html\n * <md-outlined-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-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-select-option')\nexport class MdSelectOption extends SelectOptionEl {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/slider/_slider.scss

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

package/slider/harness.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { Slider } from './lib/slider.js';
+/**
+ * Test harness for slider.
+ */
+export declare class SliderHarness extends Harness<Slider> {
+    getInteractiveElement(): Promise<HTMLInputElement>;
+    getInputs(): HTMLInputElement[];
+    getHandles(): Element[];
+    getLabels(): Element[];
+    isLabelShowing(): boolean;
+    simulateValueInteraction(value: number, el?: HTMLInputElement): Promise<void>;
+    private positionEventAtHandle;
+    protected simulateStartHover(element: HTMLElement, init?: PointerEventInit): void;
+    protected simulateMousePress(element: HTMLElement, init?: PointerEventInit): void;
+}

package/slider/harness.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for slider.
+ */
+export class SliderHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('input.end');
+    }
+    getInputs() {
+        return [
+            this.element.renderRoot.querySelector('input.end'),
+            this.element.renderRoot.querySelector('input.start')
+        ];
+    }
+    getHandles() {
+        return [
+            this.element.renderRoot.querySelector('.handle.end'),
+            this.element.renderRoot.querySelector('.handle.start')
+        ];
+    }
+    getLabels() {
+        return Array.from(this.element.renderRoot.querySelectorAll('.label'));
+    }
+    isLabelShowing() {
+        const labels = this.getLabels();
+        return labels.some(l => {
+            // remove transition to avoid the need to wait for it.
+            l.style.setProperty('transition', 'none');
+            const { width } = l.getBoundingClientRect();
+            l.style.removeProperty('transition');
+            return width > 0;
+        });
+    }
+    async simulateValueInteraction(value, el) {
+        if (!el) {
+            el = (this.getInputs())[0];
+        }
+        el.focus();
+        el.dispatchEvent(new Event('pointerdown', { bubbles: true, composed: true }));
+        el.value = String(value);
+        el.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        el.dispatchEvent(new Event('pointerup', { bubbles: true, composed: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        await this.element.updateComplete;
+    }
+    positionEventAtHandle(init, startHandle = false) {
+        const handle = this.getHandles()[startHandle ? 1 : 0];
+        const { x, y } = handle.getBoundingClientRect();
+        return { ...init, clientX: x, clientY: y, screenX: x, screenY: y };
+    }
+    simulateStartHover(element, init = {}) {
+        const i = this.getInputs().indexOf(element);
+        if ((i >= 0) || (element === this.element)) {
+            init = this.positionEventAtHandle(init, i === 1);
+        }
+        super.simulateStartHover(element, init);
+    }
+    simulateMousePress(element, init = {}) {
+        super.simulateMousePress(element, init);
+        // advance beyond RAF, which is used by the element's pointerDown handler.
+        jasmine.clock().tick(1);
+    }
+}
+//# sourceMappingURL=harness.js.map

package/slider/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Slider} from './lib/slider.js';\n\n/**\n * Test harness for slider.\n */\nexport class SliderHarness extends Harness<Slider> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!;\n  }\n\n  getInputs() {\n    return [\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!\n    ];\n  }\n  getHandles() {\n    return [\n      this.element.renderRoot.querySelector('.handle.end')!,\n      this.element.renderRoot.querySelector('.handle.start')!\n    ];\n  }\n\n  getLabels() {\n    return Array.from(this.element.renderRoot.querySelectorAll('.label'));\n  }\n\n  isLabelShowing() {\n    const labels = this.getLabels();\n    return labels.some(l => {\n      // remove transition to avoid the need to wait for it.\n      (l as HTMLElement).style.setProperty('transition', 'none');\n      const {width} = l.getBoundingClientRect();\n      (l as HTMLElement).style.removeProperty('transition');\n      return width > 0;\n    });\n  }\n\n  async simulateValueInteraction(value: number, el?: HTMLInputElement) {\n    if (!el) {\n      el = (this.getInputs())[0];\n    }\n    el.focus();\n    el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));\n    el.value = String(value);\n    el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('pointerup', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('change', {bubbles: true}));\n    await this.element.updateComplete;\n  }\n\n  private positionEventAtHandle(init: PointerEventInit, startHandle = false) {\n    const handle = this.getHandles()[startHandle ? 1 : 0];\n    const {x, y} = handle.getBoundingClientRect();\n    return {...init, clientX: x, clientY: y, screenX: x, screenY: y};\n  }\n\n  protected override simulateStartHover(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    const i = this.getInputs().indexOf(element as HTMLInputElement);\n    if ((i >= 0) || (element === this.element)) {\n      init = this.positionEventAtHandle(init, i === 1);\n    }\n    super.simulateStartHover(element, init);\n  }\n\n  protected override simulateMousePress(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    super.simulateMousePress(element, init);\n    // advance beyond RAF, which is used by the element's pointerDown handler.\n    jasmine.clock().tick(1);\n  }\n}\n"]}