@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/slider/internal/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.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 '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n// Disable warning for classMap with destructuring\n// tslint:disable:quoted-properties-on-dictionary\n\n\n/**\n * Slider component.\n */\nexport class Slider extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /** @nocollapse */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the slider is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The slider minimum value\n   */\n  @property({type: Number}) min = 0;\n\n  /**\n   * The slider maximum value\n   */\n  @property({type: Number}) max = 100;\n\n  /**\n   * The slider value displayed when range is false.\n   */\n  @property({type: Number}) value?: number;\n\n  /**\n   * The slider start value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-start'}) valueStart?: number;\n\n  /**\n   * The slider end value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-end'}) valueEnd?: number;\n\n  /**\n   * An optional label for the slider's value displayed when range is\n   * false; if not set, the label is the value itself.\n   */\n  @property({attribute: 'value-label'}) valueLabel?: string;\n\n  /**\n   * An optional label for the slider's start value displayed when\n   * range is true; if not set, the label is the valueStart itself.\n   */\n  @property({attribute: 'value-label-start'}) valueLabelStart?: string;\n\n  /**\n   * An optional label for the slider's end value displayed when\n   * range is true; if not set, the label is the valueEnd itself.\n   */\n  @property({attribute: 'value-label-end'}) valueLabelEnd?: string;\n\n  /**\n   * Aria label for the slider's start value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-start'}) ariaLabelStart?: string;\n\n  /**\n   * Aria label for the slider's end value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-end'}) ariaLabelEnd?: string;\n\n  /**\n   * The step between values.\n   */\n  @property({type: Number}) step = 1;\n\n  /**\n   * Whether or not to show tick marks.\n   */\n  @property({type: Boolean}) ticks = false;\n\n  /**\n   * Whether or not to show a value label when activated.\n   */\n  @property({type: Boolean}) labeled = false;\n\n  /**\n   * Whether or not to show a value range. When false, the slider displays\n   * a slideable handle for the value property; when true, it displays\n   * slideable handles for the valueStart and valueEnd properties.\n   */\n  @property({type: Boolean}) range = false;\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The HTML name to use in form submission for a range slider's starting\n   * value. Use `name` instead if both the start and end values should use the\n   * same name.\n   */\n  get nameStart() {\n    return this.getAttribute('name-start') ?? this.name;\n  }\n  set nameStart(name: string) {\n    this.setAttribute('name-start', name);\n  }\n\n  /**\n   * The HTML name to use in form submission for a range slider's ending value.\n   * Use `name` instead if both the start and end values should use the same\n   * name.\n   */\n  get nameEnd() {\n    return this.getAttribute('name-end') ?? this.nameStart;\n  }\n  set nameEnd(name: string) {\n    this.setAttribute('name-end', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  @query('input.start') private readonly inputStart!: HTMLInputElement|null;\n  @query('.handle.start') private readonly handleStart!: HTMLDivElement|null;\n  @queryAsync('md-ripple.start')\n  private readonly rippleStart!: Promise<MdRipple|null>;\n\n  @query('input.end') private readonly inputEnd!: HTMLInputElement|null;\n  @query('.handle.end') private readonly handleEnd!: HTMLDivElement|null;\n  @queryAsync('md-ripple.end')\n  private readonly rippleEnd!: Promise<MdRipple|null>;\n\n\n  // handle hover/pressed states are set manually since the handle\n  // does not receive pointer events so that the native inputs are\n  // interaction targets.\n  @state() private handleStartHover = false;\n  @state() private handleEndHover = false;\n\n  @state() private startOnTop = false;\n  @state() private handlesOverlapping = false;\n\n  @state() private renderValueStart?: number;\n  @state() private renderValueEnd?: number;\n\n  // used in synthetic events generated to control ripple hover state.\n  private ripplePointerId = 1;\n\n  // flag to prvent processing of re-dispatched input event.\n  private isRedisptchingEvent = false;\n\n  private action?: Action;\n\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.inputEnd) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.inputEnd);\n      });\n    }\n  }\n\n  override focus() {\n    this.inputEnd?.focus();\n  }\n\n  protected override willUpdate(changed: PropertyValues) {\n    this.renderValueStart = changed.has('valueStart') ?\n        this.valueStart :\n        this.inputStart?.valueAsNumber;\n    const endValueChanged =\n        (changed.has('valueEnd') && this.range) || changed.has('value');\n    this.renderValueEnd = endValueChanged ?\n        (this.range ? this.valueEnd : this.value) :\n        this.inputEnd?.valueAsNumber;\n    // manually handle ripple hover state since the handle is pointer events\n    // none.\n    if (changed.get('handleStartHover') !== undefined) {\n      this.toggleRippleHover(this.rippleStart, this.handleStartHover);\n    } else if (changed.get('handleEndHover') !== undefined) {\n      this.toggleRippleHover(this.rippleEnd, this.handleEndHover);\n    }\n  }\n\n  protected override update(changed: PropertyValues<Slider>) {\n    if (changed.has('value') || changed.has('range') ||\n        changed.has('valueStart') || changed.has('valueEnd')) {\n      if (this.range) {\n        const data = new FormData();\n        data.append(this.nameStart, String(this.valueStart));\n        data.append(this.nameEnd, String(this.valueEnd));\n        this.internals.setFormValue(data);\n      } else {\n        this.internals.setFormValue(String(this.value));\n      }\n    }\n\n    super.update(changed);\n  }\n\n  protected override updated(changed: PropertyValues) {\n    // Validate input rendered value and re-render if necessary. This ensures\n    // the rendred handle stays in sync with the input thumb which is used for\n    // interaction. These can get out of sync if a supplied value does not\n    // map to an exactly stepped value between min and max.\n    if (this.range) {\n      this.renderValueStart = this.inputStart!.valueAsNumber;\n    }\n    this.renderValueEnd = this.inputEnd!.valueAsNumber;\n    // update values if they are unset\n    // when using a range, default to equi-distant between\n    // min - valueStart - valueEnd - max\n    if (this.range) {\n      const segment = (this.max - this.min) / 3;\n      if (this.valueStart === undefined) {\n        this.inputStart!.valueAsNumber = this.min + segment;\n        // read actual value from input\n        const v = this.inputStart!.valueAsNumber;\n        this.valueStart = this.renderValueStart = v;\n      }\n      if (this.valueEnd === undefined) {\n        this.inputEnd!.valueAsNumber = this.min + 2 * segment;\n        // read actual value from input\n        const v = this.inputEnd!.valueAsNumber;\n        this.valueEnd = this.renderValueEnd = v;\n      }\n    } else {\n      this.value ??= this.renderValueEnd;\n    }\n    if (changed.has('range') || changed.has('renderValueStart') ||\n        changed.has('renderValueEnd') || this.isUpdatePending) {\n      this.handlesOverlapping = isOverlapping(this.handleStart, this.handleEnd);\n    }\n    // called to finish the update imediately;\n    // note, this is a no-op unless an update is scheduled\n    this.performUpdate();\n  }\n\n  protected override render() {\n    const step = this.step === 0 ? 1 : this.step;\n    const range = Math.max(this.max - this.min, step);\n    const startFraction = this.range ?\n        (((this.renderValueStart ?? this.min) - this.min) / range) :\n        0;\n    const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;\n    const containerStyles = {\n      // for clipping inputs and active track.\n      '--slider-start-fraction': String(startFraction),\n      '--slider-end-fraction': String(endFraction),\n      // for generating tick marks\n      '--slider-tick-count': String(range / step),\n    };\n    const containerClasses = {ranged: this.range};\n\n    // optional label values to show in place of the value.\n    const labelStart = this.valueLabelStart ?? String(this.renderValueStart);\n    const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ??\n        String(this.renderValueEnd);\n\n    const inputStartProps = {\n      start: true,\n      value: this.renderValueStart,\n      label: labelStart\n    };\n\n    const inputEndProps = {\n      start: false,\n      value: this.renderValueEnd,\n      label: labelEnd\n    };\n\n    const handleStartProps = {\n      start: true,\n      hover: this.handleStartHover,\n      label: labelStart\n    };\n\n    const handleEndProps = {\n      start: false,\n      hover: this.handleEndHover,\n      label: labelEnd\n    };\n\n    const handleContainerClasses = {\n      hover: this.handleStartHover || this.handleEndHover\n    };\n\n    return html`\n      <div\n        class=\"container ${classMap(containerClasses)}\"\n        style=${styleMap(containerStyles)}\n      >\n        ${when(this.range, () => this.renderInput(inputStartProps))}\n        ${this.renderInput(inputEndProps)}\n        ${this.renderTrack()}\n        <div class=\"handleContainerPadded\">\n          <div class=\"handleContainerBlock\">\n            <div class=\"handleContainer ${classMap(handleContainerClasses)}\">\n              ${when(this.range, () => this.renderHandle(handleStartProps))}\n              ${this.renderHandle(handleEndProps)}\n            </div>\n          </div>\n        </div>\n      </div>`;\n  }\n\n  private renderTrack() {\n    const trackClasses = {'tickmarks': this.ticks};\n    return html`<div class=\"track ${classMap(trackClasses)}\"></div>`;\n  }\n\n  private renderLabel(value: string) {\n    return html`<div class=\"label\">\n        <span class=\"labelContent\" part=\"label\">${value}</span>\n      </div>`;\n  }\n\n  private renderHandle({start, hover, label}:\n                           {start: boolean, hover: boolean, label: string}) {\n    const onTop = !this.disabled && start === this.startOnTop;\n    const isOverlapping = !this.disabled && this.handlesOverlapping;\n    const name = start ? 'start' : 'end';\n    return html`<div class=\"handle ${classMap({\n      [name]: true,\n      hover,\n      onTop,\n      isOverlapping\n    })}\">\n      <div class=\"handleNub\"><md-elevation></md-elevation></div>\n      ${when(this.labeled, () => this.renderLabel(label))}\n      <md-focus-ring part=\"focus-ring\" for=${name}></md-focus-ring>\n      <md-ripple for=${name} class=${name} ?disabled=${\n        this.disabled}></md-ripple>\n    </div>`;\n  }\n\n  private renderInput({start, value, label}:\n                          {start: boolean; value?: number; label: string;}) {\n    const name = start ? `start` : `end`;\n    // when ranged, ensure announcement includes value info.\n    // Needed for closure conformance\n    let {ariaLabel} = this as ARIAMixinStrict;\n    const {range, ariaLabelStart, ariaLabelEnd} = this;\n    if (range) {\n      ariaLabel = (start ? ariaLabelStart : ariaLabelEnd) ?? null;\n    }\n    return html`<input type=\"range\"\n      class=\"${classMap({\n      start,\n      end: !start\n    })}\"\n      @focus=${this.handleFocus}\n      @pointerdown=${this.handleDown}\n      @pointerup=${this.handleUp}\n      @pointerenter=${this.handleEnter}\n      @pointermove=${this.handleMove}\n      @pointerleave=${this.handleLeave}\n      @keydown=${this.handleKeydown}\n      @keyup=${this.handleKeyup}\n      @input=${this.handleInput}\n      @change=${this.handleChange}\n      id=${name}\n      .disabled=${this.disabled}\n      .min=${String(this.min)}\n      .max=${String(this.max)}\n      .step=${String(this.step)}\n      .value=${String(value)}\n      .tabIndex=${start ? 1 : 0}\n      aria-label=${ariaLabel || nothing}\n      aria-valuetext=${label}>`;\n  }\n\n  private async toggleRippleHover(\n      ripple: Promise<MdRipple|null>, hovering: boolean) {\n    const rippleEl = await ripple;\n    if (!rippleEl) {\n      return;\n    }\n    // TODO(b/269799771): improve slider ripple connection\n    if (hovering) {\n      rippleEl.handlePointerenter(new PointerEvent(\n          'pointerenter', {isPrimary: true, pointerId: this.ripplePointerId}));\n    } else {\n      rippleEl.handlePointerleave(new PointerEvent(\n          'pointerleave', {isPrimary: true, pointerId: this.ripplePointerId}));\n    }\n  }\n\n  private handleFocus(event: Event) {\n    this.updateOnTop(event.target as HTMLInputElement);\n  }\n\n  private startAction(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const fixed =\n        (target === this.inputStart) ? this.inputEnd! : this.inputStart!;\n    this.action = {\n      canFlip: event.type === 'pointerdown',\n      flipped: false,\n      target,\n      fixed,\n      values: new Map(\n          [[target, target.valueAsNumber], [fixed, fixed?.valueAsNumber]])\n    };\n  }\n\n  private finishAction(event: Event) {\n    this.action = undefined;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.startAction(event);\n  }\n\n  private handleKeyup(event: KeyboardEvent) {\n    this.finishAction(event);\n  }\n\n  private handleDown(event: PointerEvent) {\n    this.startAction(event);\n    this.ripplePointerId = event.pointerId;\n    const isStart = event.target as HTMLInputElement === this.inputStart;\n    // Since handle moves to pointer on down and there may not be a move,\n    // it needs to be considered hovered..\n    this.handleStartHover =\n        !this.disabled && isStart && Boolean(this.handleStart);\n    this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);\n  }\n\n  private async handleUp(event: PointerEvent) {\n    const {target, values, flipped} = this.action ?? {};\n    //  Async here for Firefox because input can be after pointerup\n    //  when value is calmped.\n    await new Promise(requestAnimationFrame);\n    if (target !== undefined) {\n      // Ensure Safari focuses input so label renders.\n      // Ensure any flipped input is focused so the tab order is right.\n      target.focus();\n      // When action is flipped, change must be fired manually since the\n      // real event target did not change.\n      if (flipped && target.valueAsNumber !== values!.get(target)!) {\n        target.dispatchEvent(new Event('change', {bubbles: true}));\n      }\n    }\n    this.finishAction(event);\n  }\n\n  /**\n   * The move handler tracks handle hovering to facilitate proper ripple\n   * behavior on the slider handle. This is needed because user interaction with\n   * the native input is leveraged to position the handle. Because the separate\n   * displayed handle element has pointer events disabled (to allow interaction\n   * with the input) and the input's handle is a pseudo-element, neither can be\n   * the ripple's interactive element. Therefore the input is the ripple's\n   * interactive element and has a `ripple` directive; however the ripple\n   * is gated on the handle being hovered. In addition, because the ripple\n   * hover state is being specially handled, it must be triggered independent\n   * of the directive. This is done based on the hover state when the\n   * slider is updated.\n   */\n  private handleMove(event: PointerEvent) {\n    this.handleStartHover = !this.disabled && inBounds(event, this.handleStart);\n    this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd);\n  }\n\n  private handleEnter(event: PointerEvent) {\n    this.handleMove(event);\n  }\n\n  private handleLeave() {\n    this.handleStartHover = false;\n    this.handleEndHover = false;\n  }\n\n  private updateOnTop(input: HTMLInputElement) {\n    this.startOnTop = input.classList.contains('start');\n  }\n\n  private needsClamping() {\n    const {target, fixed} = this.action!;\n    const isStart = target === this.inputStart;\n    return isStart ? target.valueAsNumber > fixed.valueAsNumber :\n                     target.valueAsNumber < fixed.valueAsNumber;\n  }\n\n  // if start/end start coincident and the first drag input would e.g. move\n  // start > end, avoid clamping and \"flip\" to use the other input\n  // as the action target.\n  private isActionFlipped() {\n    const action = this.action!;\n    const {target, fixed, values} = action;\n    if (action.canFlip) {\n      const coincident = values.get(target) === values.get(fixed);\n      if (coincident && this.needsClamping()) {\n        action.canFlip = false;\n        action.flipped = true;\n        action.target = fixed;\n        action.fixed = target;\n      }\n    }\n    return action.flipped;\n  }\n\n  // when flipped, apply the drag input to the flipped target and reset\n  // the actual target.\n  private flipAction() {\n    const {target, fixed, values} = this.action!;\n    const changed = target.valueAsNumber !== fixed.valueAsNumber;\n    target.valueAsNumber = fixed.valueAsNumber;\n    fixed.valueAsNumber = values.get(fixed)!;\n    return changed;\n  }\n\n  // clamp such that start does not move beyond end and visa versa.\n  private clampAction() {\n    if (!this.needsClamping()) {\n      return false;\n    }\n    const {target, fixed} = this.action!;\n    target.valueAsNumber = fixed.valueAsNumber;\n    return true;\n  }\n\n  private handleInput(event: InputEvent) {\n    // avoid processing a re-dispatched event\n    if (this.isRedisptchingEvent) {\n      return;\n    }\n    let stopPropagation = false, redispatch = false;\n    if (this.range) {\n      if (this.isActionFlipped()) {\n        stopPropagation = true;\n        redispatch = this.flipAction();\n      }\n      if (this.clampAction()) {\n        stopPropagation = true;\n        redispatch = false;\n      }\n    }\n    const {target} = this.action!;\n    this.updateOnTop(target);\n    // update value only on interaction\n    if (this.range) {\n      this.valueStart = this.inputStart!.valueAsNumber;\n      this.valueEnd = this.inputEnd!.valueAsNumber;\n    } else {\n      this.value = this.inputEnd!.valueAsNumber;\n    }\n    // control external visibility of input event\n    if (stopPropagation) {\n      event.stopPropagation();\n    }\n    // ensure event path is correct when flipped.\n    if (redispatch) {\n      this.isRedisptchingEvent = true;\n      redispatchEvent(target, event);\n      this.isRedisptchingEvent = false;\n    }\n  }\n\n  private handleChange(event: Event) {\n    // prevent keyboard triggered changes from dispatching for\n    // clamped values; note, this only occurs for keyboard\n    const changeTarget = event.target as HTMLInputElement;\n    const {target, values} = this.action ?? {};\n    const squelch =\n        (target && (target.valueAsNumber === values!.get(changeTarget)!));\n    if (!squelch) {\n      redispatchEvent(this, event);\n    }\n    // ensure keyboard triggered change clears action.\n    this.finishAction(event);\n  }\n\n  /** @private */\n  formResetCallback() {\n    if (this.range) {\n      const valueStart = this.getAttribute('value-start');\n      this.valueStart = valueStart !== null ? Number(valueStart) : undefined;\n      const valueEnd = this.getAttribute('value-end');\n      this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;\n      return;\n    }\n    const value = this.getAttribute('value');\n    this.value = value !== null ? Number(value) : undefined;\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string|Array<[string, string]>|null) {\n    if (Array.isArray(state)) {\n      const [[, valueStart], [, valueEnd]] = state;\n      this.valueStart = Number(valueStart);\n      this.valueEnd = Number(valueEnd);\n      this.range = true;\n      return;\n    }\n\n    this.value = Number(state);\n    this.range = false;\n  }\n}\n\nfunction inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {\n  if (!element) {\n    return false;\n  }\n  const {top, left, bottom, right} = element.getBoundingClientRect();\n  return x >= left && x <= right && y >= top && y <= bottom;\n}\n\nfunction isOverlapping(elA: Element|null, elB: Element|null) {\n  if (!(elA && elB)) {\n    return false;\n  }\n  const a = elA.getBoundingClientRect();\n  const b = elB.getBoundingClientRect();\n  return !(\n      a.top > b.bottom || a.right < b.left || a.bottom < b.top ||\n      a.left > b.right);\n}\n\ninterface Action {\n  canFlip: boolean;\n  flipped: boolean;\n  target: HTMLInputElement;\n  fixed: HTMLInputElement;\n  values: Map<HTMLInputElement|undefined, number|undefined>;\n}\n"]}

package/slider/slider.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Slider } from './lib/slider.js';
+import { Slider } from './internal/slider.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-slider': MdSlider;

package/slider/slider.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
-import { Slider } from './lib/slider.js';
-import { styles } from './lib/slider-styles.css.js';
+import { styles as forcedColorsStyles } from './internal/forced-colors-styles.css.js';
+import { Slider } from './internal/slider.js';
+import { styles } from './internal/slider-styles.css.js';
 /**
  * @summary Sliders allow users to view and select a value (or range) along
  * a track.

package/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;;;;;GAaG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 './lib/forced-colors-styles.css.js';\nimport {Slider} from './lib/slider.js';\nimport {styles} from './lib/slider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-slider': MdSlider;\n  }\n}\n\n/**\n * @summary Sliders allow users to view and select a value (or range) along\n * a track.\n *\n * @description\n * Changes made with sliders are immediate, allowing the user to make slider\n * adjustments while determining a selection. Sliders shouldn’t be used to\n * adjust settings with any delay in providing user feedback. Sliders reflect\n * the current state of the settings they control.\n *\n * __Example usages:__\n * - Sliders are ideal for adjusting settings such as volume and brightness, or\n * for applying image filters.\n */\n@customElement('md-slider')\nexport class MdSlider extends Slider {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AAQvD;;;;;;;;;;;;;GAaG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 './internal/forced-colors-styles.css.js';\nimport {Slider} from './internal/slider.js';\nimport {styles} from './internal/slider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-slider': MdSlider;\n  }\n}\n\n/**\n * @summary Sliders allow users to view and select a value (or range) along\n * a track.\n *\n * @description\n * Changes made with sliders are immediate, allowing the user to make slider\n * adjustments while determining a selection. Sliders shouldn’t be used to\n * adjust settings with any delay in providing user feedback. Sliders reflect\n * the current state of the settings they control.\n *\n * __Example usages:__\n * - Sliders are ideal for adjusting settings such as volume and brightness, or\n * for applying image filters.\n */\n@customElement('md-slider')\nexport class MdSlider extends Slider {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/switch/_switch.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/switch' show theme;
+@forward './internal/switch' show theme;

package/switch/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Switch } from './lib/switch.js';
+import { Switch } from './internal/switch.js';
 /**
  * Test harness for switch elements.
  */

package/switch/harness.js.map

@@ -1 +1 @@
-{"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;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,SAAS,CAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Switch} from './lib/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLElement>('.switch')!;\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;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,SAAS,CAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Switch} from './internal/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLElement>('.switch')!;\n  }\n}\n"]}

package/switch/internal/_switch.scss

@@ -0,0 +1,154 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../tokens';
+@use './handle';
+@use './icon';
+@use './track';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-switch-supported-tokens,
+    (
+      'handle-shape-start-start',
+      'handle-shape-start-end',
+      'handle-shape-end-end',
+      'handle-shape-end-start',
+      'track-shape-start-start',
+      'track-shape-start-end',
+      'track-shape-end-end',
+      'track-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-switch-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-switch-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-switch-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_handle-shape-start-start: var(
+      --md-switch-handle-shape-start-start,
+      var(--_handle-shape)
+    );
+    --_handle-shape-start-end: var(
+      --md-switch-handle-shape-start-end,
+      var(--_handle-shape)
+    );
+    --_handle-shape-end-end: var(
+      --md-switch-handle-shape-end-end,
+      var(--_handle-shape)
+    );
+    --_handle-shape-end-start: var(
+      --md-switch-handle-shape-end-start,
+      var(--_handle-shape)
+    );
+    --_track-shape-start-start: var(
+      --md-switch-track-shape-start-start,
+      var(--_track-shape)
+    );
+    --_track-shape-start-end: var(
+      --md-switch-track-shape-start-end,
+      var(--_track-shape)
+    );
+    --_track-shape-end-end: var(
+      --md-switch-track-shape-end-end,
+      var(--_track-shape)
+    );
+    --_track-shape-end-start: var(
+      --md-switch-track-shape-end-start,
+      var(--_track-shape)
+    );
+
+    display: inline-flex;
+    outline: none;
+    vertical-align: top;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_track-shape-start-start),
+        'shape-start-end': var(--_track-shape-start-end),
+        'shape-end-end': var(--_track-shape-end-end),
+        'shape-end-start': var(--_track-shape-end-start),
+      )
+    );
+  }
+
+  .switch {
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0; // Stop from collapsing in flex containers
+    margin: 0;
+    outline: none;
+    padding: 0;
+    position: relative;
+    width: var(--_track-width);
+    height: var(--_track-height);
+
+    // Track shape
+    border-start-start-radius: var(--_track-shape-start-start);
+    border-start-end-radius: var(--_track-shape-start-end);
+    border-end-end-radius: var(--_track-shape-end-end);
+    border-end-start-radius: var(--_track-shape-end-start);
+  }
+
+  // Touch target
+  .touch {
+    position: absolute;
+    height: 48px;
+    width: 48px;
+  }
+
+  // Disabled
+  .switch:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // Disabled - Track
+  .switch:disabled .track {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .switch:disabled .track::before {
+    background-clip: content-box;
+  }
+
+  .switch--selected:disabled .track {
+    background-clip: border-box;
+  }
+
+  @include track.styles();
+  @include handle.styles();
+  @include icon.styles();
+}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 0.12);--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-handle-opacity: var(--md-switch-disabled-unselected-handle-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-unselected-icon-opacity: var(--md-switch-disabled-unselected-icon-opacity, 0.38);--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.touch{position:absolute;height:48px;width:48px}.switch:disabled{cursor:default;pointer-events:none}.switch:disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.switch:disabled .track::before{background-clip:content-box}.switch--selected:disabled .track{background-clip:border-box}.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.switch:disabled .track::before,.switch:disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.switch--selected .track::before{background-color:var(--_selected-track-color)}.switch--selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.switch--selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.switch--selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.switch--selected:disabled .track::before{background-color:var(--_disabled-selected-track-color)}.switch--unselected .track::before{background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.switch--unselected:hover .track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.switch--unselected:focus-visible .track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.switch--unselected:active .track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.switch--unselected:disabled .track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.handle-container{display:grid;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.switch--selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.switch--unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.switch:disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.switch:disabled .handle,.switch:disabled .handle::before{transition:none}.switch--selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.switch--selected:enabled:active .handle,.switch--unselected:enabled:active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.switch--selected .handle::before{background-color:var(--_selected-handle-color)}.switch--selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.switch--selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.switch--selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.switch--selected:disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.switch--unselected .handle::before{background-color:var(--_unselected-handle-color)}.switch--unselected:hover .handle::before{background-color:var(--_unselected-hover-handle-color)}.switch--unselected:focus-within .handle::before{background-color:var(--_unselected-focus-handle-color)}.switch--unselected:active .handle::before{background-color:var(--_unselected-pressed-handle-color)}.switch--unselected:disabled .handle::before{background-color:var(--_disabled-unselected-handle-color);opacity:var(--_disabled-unselected-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.switch--selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.switch--unselected md-ripple{--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity)}.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.switch:disabled .icon{transition:none}.switch--selected .icon--on,.switch--unselected .icon--off{opacity:1}.switch--unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.switch--unselected:hover .icon--off{fill:var(--_unselected-hover-icon-color)}.switch--unselected:focus-within .icon--off{fill:var(--_unselected-focus-icon-color)}.switch--unselected:active .icon--off{fill:var(--_unselected-pressed-icon-color)}.switch--unselected:disabled .icon--off{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.switch--selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.switch--selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.switch--selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.switch--selected:disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=switch-styles.css.map */
+`;
+//# sourceMappingURL=switch-styles.css.js.map

package/switch/internal/switch-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.css.js","sourceRoot":"","sources":["switch-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{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 0.12);--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-handle-opacity: var(--md-switch-disabled-unselected-handle-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-unselected-icon-opacity: var(--md-switch-disabled-unselected-icon-opacity, 0.38);--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.touch{position:absolute;height:48px;width:48px}.switch:disabled{cursor:default;pointer-events:none}.switch:disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.switch:disabled .track::before{background-clip:content-box}.switch--selected:disabled .track{background-clip:border-box}.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.switch:disabled .track::before,.switch:disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.switch--selected .track::before{background-color:var(--_selected-track-color)}.switch--selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.switch--selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.switch--selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.switch--selected:disabled .track::before{background-color:var(--_disabled-selected-track-color)}.switch--unselected .track::before{background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.switch--unselected:hover .track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.switch--unselected:focus-visible .track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.switch--unselected:active .track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.switch--unselected:disabled .track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.handle-container{display:grid;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.switch--selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.switch--unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.switch:disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:\"\";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.switch:disabled .handle,.switch:disabled .handle::before{transition:none}.switch--selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.switch--selected:enabled:active .handle,.switch--unselected:enabled:active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.switch--selected .handle::before{background-color:var(--_selected-handle-color)}.switch--selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.switch--selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.switch--selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.switch--selected:disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.switch--unselected .handle::before{background-color:var(--_unselected-handle-color)}.switch--unselected:hover .handle::before{background-color:var(--_unselected-hover-handle-color)}.switch--unselected:focus-within .handle::before{background-color:var(--_unselected-focus-handle-color)}.switch--unselected:active .handle::before{background-color:var(--_unselected-pressed-handle-color)}.switch--unselected:disabled .handle::before{background-color:var(--_disabled-unselected-handle-color);opacity:var(--_disabled-unselected-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.switch--selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.switch--unselected md-ripple{--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity)}.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.switch:disabled .icon{transition:none}.switch--selected .icon--on,.switch--unselected .icon--off{opacity:1}.switch--unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.switch--unselected:hover .icon--off{fill:var(--_unselected-hover-icon-color)}.switch--unselected:focus-within .icon--off{fill:var(--_unselected-focus-icon-color)}.switch--unselected:active .icon--off{fill:var(--_unselected-pressed-icon-color)}.switch--unselected:disabled .icon--off{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.switch--selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.switch--selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.switch--selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.switch--selected:disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=switch-styles.css.map */\n`;\n "]}

package/switch/internal/switch.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
+export declare class Switch extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
+    static formAssociated: boolean;
+    /**
+     * Disables the switch and makes it non-interactive.
+     */
+    disabled: boolean;
+    /**
+     * Puts the switch in the selected state and sets the form submission value to
+     * the `value` property.
+     */
+    selected: boolean;
+    /**
+     * Shows both the selected and deselected icons.
+     */
+    icons: boolean;
+    /**
+     * Shows only the selected icon, and not the deselected icon. If `true`,
+     * overrides the behavior of the `icons` property.
+     */
+    showOnlySelectedIcon: boolean;
+    private readonly button;
+    /**
+     * The value associated with this switch on form submission. `null` is
+     * submitted when `selected` is `false`.
+     */
+    value: string;
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name(): string;
+    set name(name: string);
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement;
+    /**
+     * The labels this element is associated with.
+     */
+    get labels(): NodeList;
+    private readonly internals;
+    constructor();
+    protected update(changed: PropertyValues<Switch>): void;
+    protected render(): TemplateResult;
+    private getRenderClasses;
+    private renderHandle;
+    private renderIcons;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    private renderOnIcon;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    private renderOffIcon;
+    private renderTouchTarget;
+    private shouldShowIcons;
+    private handleClick;
+    /** @private */
+    formResetCallback(): void;
+    /** @private */
+    formStateRestoreCallback(state: string): void;
+}