@material/web 1.0.0-pre.13 → 1.0.0-pre.15

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

@@ -1,71 +0,0 @@
-/**
- * @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

@@ -1 +0,0 @@
-{"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.js

@@ -1,9 +0,0 @@
-/**
-  * @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:inherit;width:inherit;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

@@ -1 +0,0 @@
-{"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:inherit;width:inherit;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.d.ts

@@ -1,52 +0,0 @@
-/**
- * @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

@@ -1,41 +0,0 @@
-/**
- * @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

@@ -1 +0,0 @@
-{"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/slider/lib/_slider.scss

@@ -1,476 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../focus/focus-ring';
-@use '../../internal/sass/theme';
-@use '../../ripple/ripple';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_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) {
-  $tokens: theme.validate-theme(tokens.md-comp-slider-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'slider');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: theme.create-theme-vars(tokens.md-comp-slider-values(), 'slider');
-
-  // The max clip is reduced by 1 full tick display which is 2x the container
-  // size to account for always showing the active track on the outside
-  // edge of the last tick.
-  $_active-track-max-clip: calc(
-    100% - var(--_with-tick-marks-container-size) * 2
-  );
-  // When the start fraction is !0, add clipping by the tick container size
-  $_start-fraction-not-zero: min(var(--slider-start-fraction) * 1e9, 1);
-  $_active-track-start-offset: calc(
-    var(--_with-tick-marks-container-size) * $_start-fraction-not-zero
-  );
-  $_active-track-start-clip: calc(
-    $_active-track-start-offset + $_active-track-max-clip *
-      var(--slider-start-fraction)
-  );
-
-  // When the end fraction is !1, add clipping by the tick container size
-  $_end-fraction-not-one: min((1 - var(--slider-end-fraction)) * 1e9, 1);
-  $_active-track-end-offset: calc(
-    var(--_with-tick-marks-container-size) * $_end-fraction-not-one
-  );
-  $_active-track-end-clip: calc(
-    $_active-track-end-offset + $_active-track-max-clip *
-      (1 - var(--slider-end-fraction))
-  );
-
-  :host {
-    display: inline-flex;
-    vertical-align: middle;
-
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-    min-inline-size: 200px;
-
-    @include elevation.theme(
-      (
-        level: var(--_handle-elevation),
-        shadow-color: var(--_handle-shadow-color),
-      )
-    );
-    // Focus ring
-    @include focus-ring.theme(
-      (
-        'outward-offset': -2px,
-        shape: 9999px,
-      )
-    );
-  }
-
-  md-elevation {
-    transition-duration: map.get($_md-sys-motion, 'duration-medium1');
-    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
-  }
-
-  @media (prefers-reduced-motion) {
-    .label {
-      transition-duration: 0;
-    }
-  }
-
-  // Note, opacity for active track and handle controlled via host.
-  // This avoids bleed through from the handle to the track since they overlap.
-  // It also means the inactive track opacity is calc'd to compensate.
-  :host([disabled]) {
-    opacity: var(--_disabled-active-track-opacity);
-
-    @include elevation.theme(
-      (
-        level: var(--_disabled-handle-elevation),
-      )
-    );
-  }
-
-  .container {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    position: relative;
-    block-size: var(--_state-layer-size);
-    // note, only the native inputs are interactive.
-    pointer-events: none;
-    // ensure scrolling is prevented on mobile.
-    touch-action: none;
-  }
-
-  .track {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  // inactive-track
-  .track::before,
-  // active-track
-  .track::after {
-    position: absolute;
-    content: '';
-    // pad the track inward by half the ripple size offset by the tick container size.
-    $_track-padding: calc(
-      (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)
-    );
-    inset-inline-start: $_track-padding;
-    inset-inline-end: $_track-padding;
-
-    // ticks size: set here since it does not change.
-    background-size: calc(
-        (100% - var(--_with-tick-marks-container-size) * 2) /
-          var(--slider-tick-count)
-      )
-      100%;
-  }
-
-  // inactive-track
-  .track::before {
-    block-size: var(--_inactive-track-height);
-    border-radius: var(--_inactive-track-shape);
-    background-color: var(--_inactive-track-color);
-  }
-
-  .track.tickmarks::before {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-inactive-container-color)'
-    );
-  }
-
-  :host([disabled]) .track::before {
-    // Note, the active track opacity is applied to the entire host,
-    // so the inactive track is calc'd to compensate.
-    opacity: calc(
-      (1 / var(--_disabled-active-track-opacity)) *
-        var(--_disabled-inactive-track-opacity)
-    );
-    background-color: var(--_disabled-inactive-track-color);
-  }
-
-  // active-track
-  .track::after {
-    block-size: var(--_active-track-height);
-    border-radius: var(--_active-track-shape);
-    clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
-    background-color: var(--_active-track-color);
-  }
-
-  // rtl for active track clipping
-  @each $_rtl-selectors in _get-rtl-selectors('.track', '::after') {
-    #{$_rtl-selectors} {
-      clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
-    }
-  }
-
-  .track.tickmarks::after {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-active-container-color)'
-    );
-  }
-
-  :host([disabled]) .track::after {
-    background-color: var(--_disabled-active-track-color);
-  }
-
-  :host([disabled]) .track.tickmarks::before,
-  :host([disabled]) .track.tickmarks::after {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-disabled-container-color)'
-    );
-  }
-
-  // container for the handle that is inset with padding to be
-  // track-sized so that the handle container can be positioned with % only
-  // and avoid a Safari issue with not being able to transition values that
-  // are calced from different units.
-  // TODO remove when https://bugs.webkit.org/show_bug.cgi?id=23775 is
-  // addressed.
-  .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(--slider-start-fraction));
-    inline-size: calc(
-      100% * (var(--slider-end-fraction) - var(--slider-start-fraction))
-    );
-  }
-
-  // handle
-  .handle {
-    position: absolute;
-    block-size: var(--_state-layer-size);
-    inline-size: var(--_state-layer-size);
-    border-radius: var(--_handle-shape);
-    display: grid;
-    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);
-  }
-
-  // prefix classes exist to overcome specificity of focus styling.
-  .container > .handleContainerPadded .handle.hover > .handleNub {
-    background: var(--_hover-handle-color);
-  }
-
-  :host(:not([disabled])) {
-    input.end:active ~ .handleContainerPadded .handle.end > .handleNub,
-    input.start:active ~ .handleContainerPadded .handle.start > .handleNub {
-      background: var(--_pressed-handle-color);
-    }
-  }
-
-  .onTop.isOverlapping {
-    .handleNub,
-    .label,
-    .label::before {
-      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
-  .label {
-    position: absolute;
-    box-sizing: border-box;
-    display: grid;
-    padding: 4px;
-    place-items: center;
-    border-radius: map.get($_md-sys-shape, 'corner-full');
-
-    color: var(--_label-label-text-color);
-    font: var(--_label-label-text-type);
-
-    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 map.get($_md-sys-motion, 'duration-short2')
-      map.get($_md-sys-motion, 'easing-emphasized');
-    transform-origin: center bottom;
-    transform: scale(0);
-  }
-
-  // note, `:has` needed only for Safari; it's wrapped in a "forgiving"
-  // `:where` since the syntax isn't supported yet in Firefox.
-  :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;
-  }
-
-  // triangle below label
-  .label::before {
-    // Note, sizing carefully estimated to create an ice cream cone shape.
-    $_triangleSize: calc(var(--_label-container-height) / 2);
-    inline-size: $_triangleSize;
-    block-size: $_triangleSize;
-    bottom: calc(var(--_label-container-height) / -10);
-    transform: rotate(45deg);
-  }
-
-  // fits inside label and occludes top half of triangle.
-  .label::after {
-    inset: 0px;
-    border-radius: inherit;
-  }
-
-  // must stack above the label's pseudo-elements.
-  .labelContent {
-    z-index: 1;
-  }
-
-  // native input styling
-  // note, the input is what the user interacts with so it must render and
-  // be clickable, but it is visually hidden via opacity: 0 and non-clickable
-  // styled ui is shown instead and positioned accordingly.
-  input[type='range'] {
-    opacity: 0;
-    -webkit-tap-highlight-color: transparent;
-    position: absolute;
-    box-sizing: border-box;
-    // needed for firefox
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    background: transparent;
-    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;
-    // 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);
-    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;
-  }
-
-  // Clip the inputs to the space left/right of the center point between the
-  // values so the right input gets pointer events.
-  $_clip-to-start: calc(
-    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
-      (
-        var(--slider-start-fraction) +
-          ((var(--slider-end-fraction) - var(--slider-start-fraction)) / 2)
-      )
-  );
-
-  $_clip-to-end: calc(100% - $_clip-to-start);
-
-  // clip left side of "start" input
-  .ranged input.start {
-    clip-path: inset(0 $_clip-to-end 0 0);
-  }
-
-  // in 'rtl', clip right side of "lesser" input
-  @each $_rtl-selector in _get-rtl-selectors('.ranged input.start') {
-    #{$_rtl-selector} {
-      clip-path: inset(0 0 0 $_clip-to-end);
-    }
-  }
-
-  // clip right side of "end" input
-  .ranged input.end {
-    clip-path: inset(0 0 0 $_clip-to-start);
-  }
-
-  // in 'rtl', clip left side of "greater" input
-  @each $_rtl-selector in _get-rtl-selectors('.ranged input.end') {
-    #{$_rtl-selector} {
-      clip-path: inset(0 $_clip-to-start 0 0);
-    }
-  }
-
-  .onTop {
-    z-index: 1;
-  }
-
-  // Ripple
-  .handle {
-    @include ripple.theme(
-      (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  md-ripple {
-    border-radius: 50%;
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
-  }
-}