@material/web 1.0.0 → 1.0.2-nightly.6a1fb38.0

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

@@ -4,20 +4,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
 import { SelectOptionController } from './selectOptionController.js';
 /**
- * @fires close-menu Closes the encapsulating menu on
- * @fires request-selection Requests the parent md-select to select this element
- * (and deselect others if single-selection) when `selected` changed to `true`.
- * @fires request-deselection Requests the parent md-select to deselect this
- * element when `selected` changed to `false`.
+ * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}
+ * Closes the encapsulating menu on closable interaction. --bubbles --composed
+ * @fires request-selection {Event} Requests the parent md-select to select this
+ * element (and deselect others if single-selection) when `selected` changed to
+ * `true`. --bubbles --composed
+ * @fires request-deselection {Event} Requests the parent md-select to deselect
+ * this element when `selected` changed to `false`. --bubbles --composed
  */
 export class SelectOptionEl extends LitElement {
     constructor() {
@@ -42,7 +44,8 @@ export class SelectOptionEl extends LitElement {
         this.selectOptionController = new SelectOptionController(this, {
             getHeadlineElements: () => {
                 return this.headlineElements;
-            }
+            },
+            getInteractiveElement: () => this.listItemRoot,
         });
     }
     /**
@@ -69,8 +72,7 @@ export class SelectOptionEl extends LitElement {
         return this.renderListItem(html `
       <md-item>
         <div slot="container">
-          ${this.renderRipple()}
-          ${this.renderFocusRing()}
+          ${this.renderRipple()} ${this.renderFocusRing()}
         </div>
         <slot name="start" slot="start"></slot>
         <slot name="end" slot="end"></slot>
@@ -97,28 +99,27 @@ export class SelectOptionEl extends LitElement {
         class="list-item ${classMap(this.getRenderClasses())}"
         @click=${this.selectOptionController.onClick}
         @keydown=${this.selectOptionController.onKeydown}
-      >${content}</li>
+        >${content}</li
+      >
     `;
     }
     /**
      * Handles rendering of the ripple element.
      */
     renderRipple() {
-        return html `
-      <md-ripple
-          part="ripple"
-          for="item"
-          ?disabled=${this.disabled}></md-ripple>`;
+        return html ` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}></md-ripple>`;
     }
     /**
      * Handles rendering of the focus ring.
      */
     renderFocusRing() {
-        return html `
-      <md-focus-ring
-          part="focus-ring"
-          for="item"
-          inward></md-focus-ring>`;
+        return html ` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
     }
     /**
      * Classes applied to the list item root.
@@ -138,8 +139,9 @@ export class SelectOptionEl extends LitElement {
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
       <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot name="trailing-supporting-text"
-          slot="trailing-supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
     `;
     }
     focus() {
@@ -154,7 +156,7 @@ export class SelectOptionEl extends LitElement {
 /** @nocollapse */
 SelectOptionEl.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
 };
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -1 +1 @@
-{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.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 '../../../ripple/ripple.js';\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\nimport {SelectOption, SelectOptionController} from './selectOptionController.js';\n\n/**\n * @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n */\nexport class SelectOptionEl extends LitElement implements SelectOption {\n  static {\n    requestUpdateOnAriaChange(SelectOptionEl);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, attribute: 'md-menu-item', reflect: true})\n  isMenuItem = true;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean}) selected = false;\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n\n  @queryAssignedElements({slot: 'headline'})\n  protected readonly headlineElements!: HTMLElement[];\n\n  type = 'option' as const;\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.selectOptionController.typeaheadText;\n  }\n\n  @property({attribute: 'typeahead-text'})\n  set typeaheadText(text: string) {\n    this.selectOptionController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    return this.selectOptionController.displayText;\n  }\n\n  @property({attribute: 'display-text'})\n  set displayText(text: string) {\n    this.selectOptionController.setDisplayText(text);\n  }\n\n  private readonly selectOptionController = new SelectOptionController(this, {\n    getHeadlineElements: () => {\n      return this.headlineElements;\n    }\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()}\n          ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : 0}\n        role=${this.selectOptionController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        @click=${this.selectOptionController.onClick}\n        @keydown=${this.selectOptionController.onKeydown}\n      >${content}</li>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple() {\n    return html`\n      <md-ripple\n          part=\"ripple\"\n          for=\"item\"\n          ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing() {\n    return html`\n      <md-focus-ring\n          part=\"focus-ring\"\n          for=\"item\"\n          inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'selected': this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.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 '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\nimport {SelectOption, SelectOptionController} from './selectOptionController.js';\n\n/**\n * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}\n * Closes the encapsulating menu on closable interaction. --bubbles --composed\n * @fires request-selection {Event} Requests the parent md-select to select this\n * element (and deselect others if single-selection) when `selected` changed to\n * `true`. --bubbles --composed\n * @fires request-deselection {Event} Requests the parent md-select to deselect\n * this element when `selected` changed to `false`. --bubbles --composed\n */\nexport class SelectOptionEl extends LitElement implements SelectOption {\n  static {\n    requestUpdateOnAriaChange(SelectOptionEl);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, attribute: 'md-menu-item', reflect: true})\n  isMenuItem = true;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean}) selected = false;\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'headline'})\n  protected readonly headlineElements!: HTMLElement[];\n\n  type = 'option' as const;\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.selectOptionController.typeaheadText;\n  }\n\n  @property({attribute: 'typeahead-text'})\n  set typeaheadText(text: string) {\n    this.selectOptionController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    return this.selectOptionController.displayText;\n  }\n\n  @property({attribute: 'display-text'})\n  set displayText(text: string) {\n    this.selectOptionController.setDisplayText(text);\n  }\n\n  private readonly selectOptionController = new SelectOptionController(this, {\n    getHeadlineElements: () => {\n      return this.headlineElements;\n    },\n    getInteractiveElement: () => this.listItemRoot,\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : 0}\n        role=${this.selectOptionController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        @click=${this.selectOptionController.onClick}\n        @keydown=${this.selectOptionController.onKeydown}\n        >${content}</li\n      >\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple() {\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing() {\n    return html` <md-focus-ring\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'selected': this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}

package/select/internal/selectoption/selectOptionController.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { MenuItemController } from '../../../menu/internal/controllers/menuItemController.js';
+import { MenuItemController, } from '../../../menu/internal/controllers/menuItemController.js';
 /**
  * Creates an event fired by a SelectOption to request selection from md-select.
  * Typically fired after `selected` changes from `false` to `true`.

package/select/internal/selectoption/selectOptionController.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectOptionController.js","sourceRoot":"","sources":["selectOptionController.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 {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {MenuItem, MenuItemController, MenuItemControllerConfig} from '../../../menu/internal/controllers/menuItemController.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   * The text to display in the select when selected. Defaults to the\n   * textContent of the Element slotted into the headline.\n   */\n  displayText: string;\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 * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n  return new Event('request-selection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n  return new Event('request-deselection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * The options used to inialize SelectOptionController.\n */\nexport type SelectOptionConfig = MenuItemControllerConfig;\n\n/**\n * A controller that provides most functionality and md-select compatibility for\n * an element that implements the SelectOption interface.\n */\nexport class SelectOptionController implements ReactiveController {\n  private readonly menuItemController: MenuItemController;\n  private readonly getHeadlineElements:\n      SelectOptionConfig['getHeadlineElements'];\n  private internalDisplayText: string|null = null;\n  private lastSelected = this.host.selected;\n  private firstUpdate = true;\n\n  /**\n   * The recommended role of the select option.\n   */\n  get role() {\n    return this.menuItemController.role;\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  setTypeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    if (this.internalDisplayText !== null) {\n      return this.internalDisplayText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  setDisplayText(text: string) {\n    this.internalDisplayText = text;\n  }\n\n  /**\n   * @param host The SelectOption in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n      private readonly host: ReactiveControllerHost&SelectOption,\n      config: SelectOptionConfig) {\n    this.menuItemController = new MenuItemController(host, config);\n    this.getHeadlineElements = config.getHeadlineElements;\n    host.addController(this);\n  }\n\n  hostUpdate() {\n    if (this.lastSelected !== this.host.selected) {\n      this.host.ariaSelected = this.host.selected ? 'true' : 'false';\n    }\n  }\n\n  hostUpdated() {\n    // Do not dispatch event on first update / boot-up.\n    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {\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.host.selected) {\n        this.host.dispatchEvent(createRequestSelectionEvent());\n      } else {\n        this.host.dispatchEvent(createRequestDeselectionEvent());\n      }\n    }\n\n    this.lastSelected = this.host.selected;\n    this.firstUpdate = false;\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    this.menuItemController.onClick();\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (e: KeyboardEvent) => {\n    this.menuItemController.onKeydown(e);\n  };\n}"]}
+{"version":3,"file":"selectOptionController.js","sourceRoot":"","sources":["selectOptionController.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 {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {\n  MenuItem,\n  MenuItemController,\n  MenuItemControllerConfig,\n} from '../../../menu/internal/controllers/menuItemController.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   * The text to display in the select when selected. Defaults to the\n   * textContent of the Element slotted into the headline.\n   */\n  displayText: string;\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 * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n  return new Event('request-selection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n  return new Event('request-deselection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * The options used to inialize SelectOptionController.\n */\nexport type SelectOptionConfig = MenuItemControllerConfig;\n\n/**\n * A controller that provides most functionality and md-select compatibility for\n * an element that implements the SelectOption interface.\n */\nexport class SelectOptionController implements ReactiveController {\n  private readonly menuItemController: MenuItemController;\n  private readonly getHeadlineElements: SelectOptionConfig['getHeadlineElements'];\n  private internalDisplayText: string | null = null;\n  private lastSelected = this.host.selected;\n  private firstUpdate = true;\n\n  /**\n   * The recommended role of the select option.\n   */\n  get role() {\n    return this.menuItemController.role;\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  setTypeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    if (this.internalDisplayText !== null) {\n      return this.internalDisplayText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  setDisplayText(text: string) {\n    this.internalDisplayText = text;\n  }\n\n  /**\n   * @param host The SelectOption in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost & SelectOption,\n    config: SelectOptionConfig,\n  ) {\n    this.menuItemController = new MenuItemController(host, config);\n    this.getHeadlineElements = config.getHeadlineElements;\n    host.addController(this);\n  }\n\n  hostUpdate() {\n    if (this.lastSelected !== this.host.selected) {\n      this.host.ariaSelected = this.host.selected ? 'true' : 'false';\n    }\n  }\n\n  hostUpdated() {\n    // Do not dispatch event on first update / boot-up.\n    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {\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.host.selected) {\n        this.host.dispatchEvent(createRequestSelectionEvent());\n      } else {\n        this.host.dispatchEvent(createRequestDeselectionEvent());\n      }\n    }\n\n    this.lastSelected = this.host.selected;\n    this.firstUpdate = false;\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    this.menuItemController.onClick();\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (e: KeyboardEvent) => {\n    this.menuItemController.onKeydown(e);\n  };\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */
+export const styles = css `:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */
 `;
 //# sourceMappingURL=shared-styles.css.js.map

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

@@ -1 +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;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
+{"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;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/select/outlined-select.js

@@ -5,7 +5,6 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as outlinedForcedColorsStyles } from './internal/outlined-forced-colors-styles.css.js';
 import { OutlinedSelect } from './internal/outlined-select.js';
 import { styles } from './internal/outlined-select-styles.css.js';
 import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -38,7 +37,7 @@ import { styles as sharedStyles } from './internal/shared-styles.css.js';
  */
 export let MdOutlinedSelect = class MdOutlinedSelect extends OutlinedSelect {
 };
-MdOutlinedSelect.styles = [sharedStyles, styles, outlinedForcedColorsStyles];
+MdOutlinedSelect.styles = [sharedStyles, styles];
 MdOutlinedSelect = __decorate([
     customElement('md-outlined-select')
 ], MdOutlinedSelect);

package/select/outlined-select.js.map

@@ -1 +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,iDAAiD,CAAC;AACrG,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,0CAA0C,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,WAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,0BAA0B,CAAC,AAArD,CAAsD;AADjE,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B","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 './internal/outlined-forced-colors-styles.css.js';\nimport {OutlinedSelect} from './internal/outlined-select.js';\nimport {styles} from './internal/outlined-select-styles.css.js';\nimport {styles as sharedStyles} from './internal/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"]}
+{"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,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,0CAA0C,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,WAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,AAAzB,CAA0B;AADrC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B","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 {OutlinedSelect} from './internal/outlined-select.js';\nimport {styles} from './internal/outlined-select-styles.css.js';\nimport {styles as sharedStyles} from './internal/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];\n}\n"]}

package/select/select-option.js

@@ -5,7 +5,6 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColorsStyles } from '../menu/internal/menuitem/forced-colors-styles.css.js';
 import { styles } from '../menu/internal/menuitem/menu-item-styles.css.js';
 // TODO(b/236285090): update with HCM best practices
 import { SelectOptionEl } from './internal/selectoption/select-option.js';
@@ -41,7 +40,7 @@ import { SelectOptionEl } from './internal/selectoption/select-option.js';
  */
 export let MdSelectOption = class MdSelectOption extends SelectOptionEl {
 };
-MdSelectOption.styles = [styles, forcedColorsStyles];
+MdSelectOption.styles = [styles];
 MdSelectOption = __decorate([
     customElement('md-select-option')
 ], MdSelectOption);

package/select/select-option.js.map

@@ -1 +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,kBAAkB,EAAC,MAAM,uDAAuD,CAAC;AACnG,OAAO,EAAC,MAAM,EAAC,MAAM,mDAAmD,CAAC;AAEzE,oDAAoD;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,0CAA0C,CAAC;AAQxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;;AAChC,qBAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,AAA/B,CAAgC;AAD3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","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 forcedColorsStyles} from '../menu/internal/menuitem/forced-colors-styles.css.js';\nimport {styles} from '../menu/internal/menuitem/menu-item-styles.css.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {SelectOptionEl} from './internal/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 = [styles, forcedColorsStyles];\n}\n"]}
+{"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,EAAC,MAAM,mDAAmD,CAAC;AAEzE,oDAAoD;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,0CAA0C,CAAC;AAQxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;;AAChC,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","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} from '../menu/internal/menuitem/menu-item-styles.css.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {SelectOptionEl} from './internal/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 = [styles];\n}\n"]}

package/slider/harness.js

@@ -15,13 +15,13 @@ export class SliderHarness extends Harness {
     getInputs() {
         return [
             this.element.renderRoot.querySelector('input.end'),
-            this.element.renderRoot.querySelector('input.start')
+            this.element.renderRoot.querySelector('input.start'),
         ];
     }
     getHandles() {
         return [
             this.element.renderRoot.querySelector('.handle.end'),
-            this.element.renderRoot.querySelector('.handle.start')
+            this.element.renderRoot.querySelector('.handle.start'),
         ];
     }
     getLabels() {
@@ -29,7 +29,7 @@ export class SliderHarness extends Harness {
     }
     isLabelShowing() {
         const labels = this.getLabels();
-        return labels.some(l => {
+        return labels.some((l) => {
             // remove transition to avoid the need to wait for it.
             l.style.setProperty('transition', 'none');
             const { width } = l.getBoundingClientRect();
@@ -39,7 +39,7 @@ export class SliderHarness extends Harness {
     }
     async simulateValueInteraction(value, el) {
         if (!el) {
-            el = (this.getInputs())[0];
+            el = this.getInputs()[0];
         }
         el.focus();
         el.dispatchEvent(new Event('pointerdown', { bubbles: true, composed: true }));
@@ -56,7 +56,7 @@ export class SliderHarness extends Harness {
     }
     simulateStartHover(element, init = {}) {
         const i = this.getInputs().indexOf(element);
-        if ((i >= 0) || (element === this.element)) {
+        if (i >= 0 || element === this.element) {
             init = this.positionEventAtHandle(init, i === 1);
         }
         super.simulateStartHover(element, init);

package/slider/harness.js.map

@@ -1 +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 './internal/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"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAC1C,WAAW,CACX,CAAC;IACL,CAAC;IAED,SAAS;QACP,OAAO;YACL,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAmB,WAAW,CAAE;YACrE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAmB,aAAa,CAAE;SACxE,CAAC;IACJ,CAAC;IACD,UAAU;QACR,OAAO;YACL,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAE;YACrD,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAE;SACxD,CAAC;IACJ,CAAC;IAED,SAAS;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,cAAc;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,sDAAsD;YACrD,CAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YAC3D,MAAM,EAAC,KAAK,EAAC,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;YACzC,CAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YACtD,OAAO,KAAK,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,wBAAwB,CAAC,KAAa,EAAE,EAAqB;QACjE,IAAI,CAAC,EAAE,EAAE;YACP,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;SAC1B;QACD,EAAE,CAAC,KAAK,EAAE,CAAC;QACX,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,aAAa,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC5E,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACzB,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QACtE,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC1E,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QACvD,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;IACpC,CAAC;IAEO,qBAAqB,CAAC,IAAsB,EAAE,WAAW,GAAG,KAAK;QACvE,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,EAAC,CAAC,EAAE,CAAC,EAAC,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC9C,OAAO,EAAC,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAC,CAAC;IACnE,CAAC;IAEkB,kBAAkB,CACnC,OAAoB,EACpB,OAAyB,EAAE;QAE3B,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,OAA2B,CAAC,CAAC;QAChE,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE;YACtC,IAAI,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;SAClD;QACD,KAAK,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC;IAEkB,kBAAkB,CACnC,OAAoB,EACpB,OAAyB,EAAE;QAE3B,KAAK,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACxC,0EAA0E;QAC1E,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;CACF","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 './internal/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>(\n      'input.end',\n    )!;\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,\n    init: PointerEventInit = {},\n  ) {\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,\n    init: PointerEventInit = {},\n  ) {\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"]}

package/slider/internal/_slider.scss

@@ -16,31 +16,6 @@
 $_md-sys-motion: tokens.md-sys-motion-values();
 $_md-sys-shape: tokens.md-sys-shape-values();
 
-// Returns a list of rtl selectors to construct distinct rulesets. Seprating
-// rulesets ensure they are not dropped on browsers where one is not supported;
-// note, `:where` cannot be used to create compound selectors that contain
-// pseudo elements
-// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
-@function _get-rtl-selectors($selector: '', $suffix: '') {
-  @return (
-    // TODO(b/279152429) remove selectors other than `:dir` when browser
-    // support improves.
-    ':host-context([dir="rtl"]) #{$selector}#{$suffix}',
-    ':host([dir="rtl"]) #{$selector}#{$suffix}',
-    '#{$selector}:dir(rtl)#{$suffix}'
-  );
-}
-
-// Returns a background-image with sized circular ticks of the given color.
-@function _get-tick-image($color) {
-  @return radial-gradient(
-    circle at var(--_with-tick-marks-container-size) center,
-    #{$color} 0,
-    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
-    transparent calc(var(--_with-tick-marks-container-size) / 2)
-  );
-}
-
 @mixin theme($tokens) {
   $supported-tokens: tokens.$md-comp-slider-supported-tokens;
 
@@ -430,15 +405,16 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   ::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    // note, this is sized to align with thumb but is 0 width so that
-    // fine adjustments are possible
-    block-size: var(--_state-layer-size);
-    inline-size: var(--_state-layer-size);
-    transform: scaleX(0);
+    // note, this is sized to align with thumb
+    block-size: var(--_handle-height);
+    inline-size: var(--_handle-width);
     opacity: 0;
     z-index: 2;
   }
 
+  @include _get-safari-knob-translate('end');
+  @include _get-safari-knob-translate('start');
+
   ::-moz-range-thumb {
     appearance: none;
     block-size: var(--_state-layer-size);
@@ -506,3 +482,65 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     width: var(--_state-layer-size);
   }
 }
+
+// Returns a list of rtl selectors to construct distinct rulesets. Seprating
+// rulesets ensure they are not dropped on browsers where one is not supported;
+// note, `:where` cannot be used to create compound selectors that contain
+// pseudo elements
+// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
+@function _get-rtl-selectors($selector: '', $suffix: '') {
+  @return (
+    // TODO(b/279152429) remove selectors other than `:dir` when browser
+    // support improves.
+    ':host-context([dir="rtl"]) #{$selector}#{$suffix}',
+    ':host([dir="rtl"]) #{$selector}#{$suffix}',
+    '#{$selector}:dir(rtl)#{$suffix}'
+  );
+}
+
+// Returns a background-image with sized circular ticks of the given color.
+@function _get-tick-image($color) {
+  @return radial-gradient(
+    circle at var(--_with-tick-marks-container-size) center,
+    #{$color} 0,
+    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
+    transparent calc(var(--_with-tick-marks-container-size) / 2)
+  );
+}
+
+// Webkit on iOS requires _some_ size on the thumb. We want to make this the
+// same as --_handle-size but also be centered on the handle.
+//
+// the layout is similar to this:
+// [()---[()===========]----]
+//
+// where - is the native input and the == is the material track.
+// at 0 we want to shift the native knob right (padding + knob-size / 2):
+// [----[(())===========]----]
+//
+// at the end we want to shift the native knob left by the same amount:
+// [----[===========(())]----]
+//
+// Therefore we can do `layout-shift - 2 * `percent-fraction` * `layout-shift`
+// and in RTL we want to do the the same * -1
+@mixin _get-safari-knob-translate($start-or-end) {
+  input.#{$start-or-end}::-webkit-slider-thumb {
+    // AKA `layout-shift` in the equations above
+    --_track-and-knob-padding: calc(
+      (var(--_state-layer-size) - var(--_handle-width)) / 2
+    );
+    --_x-translate: calc(
+      var(--_track-and-knob-padding) - 2 * var(--_#{$start-or-end}-fraction) *
+        var(--_track-and-knob-padding)
+    );
+    transform: translateX(var(--_x-translate));
+  }
+
+  @each $_rtl-selectors
+    in _get-rtl-selectors('input.#{$start-or-end}', '::-webkit-slider-thumb')
+  {
+    #{$_rtl-selectors} {
+      transform: translateX(calc(-1 * var(--_x-translate)));
+    }
+  }
+}

package/slider/internal/slider-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background-color:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background-color:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host-context([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:9999px;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}:host([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */
+export const styles = css `:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background-color:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background-color:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host-context([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:9999px;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}:host-context([dir=rtl]) input.end::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}:host([dir=rtl]) input.end::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}:host-context([dir=rtl]) input.start::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}:host([dir=rtl]) input.start::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}:host([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */
 `;
 //# sourceMappingURL=slider-styles.css.js.map