@m3e/web 2.5.4 → 2.5.5

package/dist/slider.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.min.js","sources":["../../src/slider/SliderThumbElement.ts","../../src/slider/SliderElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thumb used to select a value in a slider.\r\n *\r\n * @description\r\n * The `m3e-slider-thumb` component is used within a `m3e-slider` to represent and select a specific value.\r\n * This component supports continuous and discrete input, form association, and accessibility semantics.\r\n * It emits `input` and `change` events to reflect value updates.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider-thumb\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - The value of the thumb.\r\n *\r\n * @fires input - Emitted when the value changes.\r\n * @fires change - Emitted when the value changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.\r\n * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.\r\n * @cssprop --m3e-slider-thumb-color - Active color of the slider thumb when enabled.\r\n * @cssprop --m3e-slider-thumb-pressed-width - Width of the thumb when pressed.\r\n * @cssprop --m3e-slider-thumb-disabled-color - Color of the thumb when disabled.\r\n * @cssprop --m3e-slider-thumb-disabled-opacity - Opacity of the thumb when disabled.\r\n * @cssprop --m3e-slider-label-width - Width of the floating label above the thumb.\r\n * @cssprop --m3e-slider-label-container-color - Background color of the label container.\r\n * @cssprop --m3e-slider-label-color - Text color of the label.\r\n * @cssprop --m3e-slider-label-font-size - Font size of the label text.\r\n * @cssprop --m3e-slider-label-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-slider-label-line-height - Line height of the label text.\r\n * @cssprop --m3e-slider-label-tracking - Letter spacing of the label text.\r\n */\r\n@customElement(\"m3e-slider-thumb\")\r\nexport class M3eSliderThumbElement extends Dirty(\r\n  Touched(FormAssociated(Focusable(Disabled(AttachInternals(Role(LitElement, \"slider\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      outline: none;\r\n      top: 0;\r\n      bottom: 0;\r\n      border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full});\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n      touch-action: none;\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2));\r\n    }\r\n    .focus-ring {\r\n      top: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      left: var(--m3e-focus-ring-thickness, 3px);\r\n      right: var(--m3e-focus-ring-thickness, 3px);\r\n    }\r\n    .label {\r\n      user-select: none;\r\n      position: absolute;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      visibility: var(--_slider-label-visibility, hidden);\r\n      opacity: var(--_slider-label-opacity, 0);\r\n      transform: var(--_slider-label-transform, scale(0));\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n          transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n          visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n      width: var(--m3e-slider-label-width, 3rem);\r\n      height: var(--_m3e-slider-label-height, 2.75rem);\r\n      top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem));\r\n      inset-inline-start: calc(0px - 100%);\r\n      border-radius: var(--m3e-slider-label-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-slider-label-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-slider-label-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-slider-label-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(--m3e-slider-label-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight});\r\n      line-height: var(--m3e-slider-label-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight});\r\n      letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n    }\r\n    @starting-style {\r\n      .label {\r\n        opacity: 0;\r\n        transform: scale(0);\r\n      }\r\n    }\r\n    .handle {\r\n      height: 100%;\r\n      width: var(--m3e-slider-thumb-width, 0.25rem);\r\n      border-radius: inherit;\r\n      transition: ${unsafeCSS(`width ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:active:not([aria-disabled=\"true\"])) .handle {\r\n      width: var(--m3e-slider-thumb-pressed-width, 2px);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .handle {\r\n      background-color: var(--m3e-slider-thumb-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .handle {\r\n      opacity: var(--m3e-slider-thumb-disabled-opacity, 38%);\r\n      background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken.color.onSurface});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .label {\r\n        forced-color-adjust: none;\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"])) .handle {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .handle {\r\n        opacity: unset;\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\")\r\n  private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  /**\r\n   * The value of the thumb.\r\n   * @default null\r\n   */\r\n  @property({ type: Number, reflect: true }) value: number | null = null;\r\n\r\n  /** @inheritdoc */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.value?.toString() ?? null;\r\n  }\r\n\r\n  /** @internal */\r\n  get #labelText(): string {\r\n    return this.closest(\"m3e-slider\")?.displayWith?.(this.value) ?? this.value?.toString() ?? \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = true;\r\n    }\r\n\r\n    super.focus(options);\r\n\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._focusRing?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"value\")) {\r\n      this.dispatchEvent(new Event(\"value-change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\" aria-hidden=\"true\">${this.#labelText}</div>\r\n      <div class=\"base\">\r\n        <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"handle\"></div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider-thumb\": M3eSliderThumbElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  safeStyleMap,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eSliderThumbElement } from \"./SliderThumbElement\";\r\nimport { SliderSize } from \"./SliderSize\";\r\n\r\n/**\r\n * Allows for the selection of numeric values from a range.\r\n *\r\n * @description\r\n * The `m3e-slider` component enables users to select a numeric value from a continuous or discrete range.\r\n * Designed according to Material 3 principles, it supports labeled value indicators, tick marks, and\r\n * snapping behavior.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider\r\n *\r\n * @slot - Renders the thumbs of the slider.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr discrete - Whether to show tick marks.\r\n * @attr labelled - Whether to show value labels when activated.\r\n * @attr max - The maximum allowable value.\r\n * @attr min - The minimum allowable value.\r\n * @attr step - The value at which the thumb will snap.\r\n * @attr size - The size of the slider.\r\n *\r\n * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.\r\n * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.\r\n * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.\r\n * @cssprop --m3e-slider-large-height - Height of the slider when size is large.\r\n * @cssprop --m3e-slider-extra-large-height - Height of the slider when size is extra-large.\r\n * @cssprop --m3e-slider-small-active-track-shape - Corner shape of the active track for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-active-track-start-shape - Corner shape of the inactive track start for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-track-end-shape - Corner shape of the inactive track end for small sliders.\r\n * @cssprop --m3e-slider-medium-active-track-shape - Corner shape of the active track for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-active-track-start-shape - Corner shape of the inactive track start for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-track-end-shape - Corner shape of the inactive track end for medium sliders.\r\n * @cssprop --m3e-slider-large-active-track-shape - Corner shape of the active track for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-active-track-start-shape - Corner shape of the inactive track start for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-track-end-shape - Corner shape of the inactive track end for large sliders.\r\n * @cssprop --m3e-slider-extra-large-active-track-shape - Corner shape of the active track for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-active-track-start-shape - Corner shape of the inactive track start for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-track-end-shape - Corner shape of the inactive track end for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-small-track-height - Height of the track for extra-small sliders.\r\n * @cssprop --m3e-slider-small-track-height - Height of the track for small sliders.\r\n * @cssprop --m3e-slider-medium-track-height - Height of the track for medium sliders.\r\n * @cssprop --m3e-slider-large-track-height - Height of the track for large sliders.\r\n * @cssprop --m3e-slider-extra-large-track-height - Height of the track for extra-large sliders.\r\n * @cssprop --m3e-slider-tick-size - Size of each tick mark.\r\n * @cssprop --m3e-slider-tick-shape - Corner shape of each tick mark.\r\n * @cssprop --m3e-slider-inactive-track-color - Background color of the inactive track when enabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-color - Base color of the inactive track when disabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-opacity - Opacity of the inactive track when disabled.\r\n * @cssprop --m3e-slider-active-track-color - Background color of the active track when enabled.\r\n * @cssprop --m3e-slider-disabled-active-track-color - Base color of the active track when disabled.\r\n * @cssprop --m3e-slider-disabled-active-track-opacity - Opacity of the active track when disabled.\r\n * @cssprop --m3e-slider-tick-active-color - Color of active ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-active-color - Color of active ticks when disabled.\r\n * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.\r\n */\r\n@customElement(\"m3e-slider\")\r\nexport class M3eSliderElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      min-inline-size: var(--m3e-slider-min-width, 12.5rem);\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([disabled])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([size=\"extra-small\"]),\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-slider-small-height, 2.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-small\"]) .base,\r\n    :host(:not(:dir(rtl))[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-small\"]) .base,\r\n    :host(:dir(rtl)[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .track {\r\n      height: calc(var(--m3e-slider-extra-small-track-height, 1rem));\r\n    }\r\n    :host([size=\"small\"]) .track {\r\n      height: calc(var(--m3e-slider-small-track-height, 1.5rem));\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-slider-medium-height, 3.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-medium-active-track-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n    }\r\n    :host([size=\"medium\"]) .track {\r\n      height: var(--m3e-slider-medium-track-height, 2.5rem);\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-slider-large-height, 4.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n    }\r\n    :host([size=\"large\"]) .track {\r\n      height: var(--m3e-slider-large-track-height, 3.5rem);\r\n    }\r\n    :host([size=\"extra-large\"]) {\r\n      height: var(--m3e-slider-extra-large-height, 6.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-large\"]) .track {\r\n      height: var(--m3e-slider-extra-large-track-height, 6rem);\r\n    }\r\n    :host(:state(-animating)) .track-active,\r\n    :host(:state(-animating)) .track-inactive.start,\r\n    :host(:state(-animating)) .track-inactive.end {\r\n      transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects},\r\n        width ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      outline: none;\r\n      touch-action: none;\r\n    }\r\n    .track {\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      touch-action: none;\r\n    }\r\n    .track-inactive,\r\n    .track-active {\r\n      position: absolute;\r\n      height: 100%;\r\n      touch-action: none;\r\n    }\r\n    .track-active {\r\n      margin-inline-start: var(--_slider-active-track-offset, 0px);\r\n      width: var(--_slider-active-track-size, 0px);\r\n      border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape));\r\n    }\r\n    .track-inactive.start {\r\n      width: var(--_slider-inactive-track-before-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-start-shape);\r\n    }\r\n    .track-inactive.end {\r\n      margin-inline-start: var(--_slider-inactive-track-after-offset, 0px);\r\n      width: var(--_slider-inactive-track-after-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-end-shape);\r\n    }\r\n    .ticks {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      overflow: visible;\r\n      touch-action: none;\r\n    }\r\n    .tick {\r\n      position: absolute;\r\n      top: 0;\r\n      touch-action: none;\r\n      inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2));\r\n      width: var(--m3e-slider-tick-size, 0.25rem);\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not([disabled])) .track-inactive {\r\n      background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([disabled]) .track-inactive {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-inactive-track-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .track-active {\r\n      background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([disabled]) .track-active {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-active-track-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .tick.active {\r\n      background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host([disabled]) .tick.active {\r\n      background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([disabled])) .tick.inactive {\r\n      background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([disabled]) .tick.inactive {\r\n      background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([discrete])) .tick.active {\r\n      display: none;\r\n    }\r\n    :host(:hover[labelled]) .base,\r\n    :host(:focus-within[labelled]) .base {\r\n      --_slider-label-visibility: visible;\r\n      --_slider-label-opacity: 1;\r\n      --_slider-label-transform: scale(1);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([disabled])) .track-inactive {\r\n        background-color: unset;\r\n      }\r\n      :host(:not([disabled])) .base.range .track-inactive.start,\r\n      :host(:not([disabled])) .track-inactive.end {\r\n        border: 1px solid CanvasText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host(:not([disabled])) .tick.inactive {\r\n        background-color: CanvasText;\r\n      }\r\n      :host(:not([disabled])) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n      :host(:not([disabled])) .track-active {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([disabled]) .base.range .track-inactive.start,\r\n      :host([disabled]) .track-inactive.end {\r\n        border: 1px solid GrayText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host([disabled]) .track-active {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.inactive {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */\r\n  @state() private _ticks = new Array<{ value: number; active: boolean }>();\r\n\r\n  /** @private */ #thumbs = new Array<M3eSliderThumbElement>();\r\n  /** @private */ #activeThumb?: M3eSliderThumbElement;\r\n  /** @private */ #cachedWidth = 0;\r\n  /** @private */ #cachedThumbWidth = 0;\r\n  /** @private */ #cachedLeft = 0;\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, { callback: () => this.#updateDimensions(true) });\r\n  }\r\n\r\n  /**\r\n   * The size of the slider.\r\n   * @default \"extra-small\"\r\n   */\r\n  @property({ reflect: true }) size: SliderSize = \"extra-small\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether to show tick marks.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) discrete = false;\r\n\r\n  /**\r\n   * The minimum allowable value.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) min = 0;\r\n\r\n  /**\r\n   * The maximum allowable value.\r\n   * @default 100\r\n   */\r\n  @property({ type: Number }) max = 100;\r\n\r\n  /**\r\n   * The value at which the thumb will snap.\r\n   * @default 1\r\n   */\r\n  @property({ type: Number }) step = 1;\r\n\r\n  /**\r\n   * Whether to show value labels when activated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) labelled = false;\r\n\r\n  /** The function used to format display values. */\r\n  @property({ attribute: false }) displayWith: ((value: number | null) => string) | null = null;\r\n\r\n  /** The thumbs used to select values. */\r\n  get thumbs(): readonly M3eSliderThumbElement[] {\r\n    return this.#thumbs;\r\n  }\r\n\r\n  /** Whether the slider is a range slider. */\r\n  get isRange(): boolean {\r\n    return this.#thumbs.length > 1;\r\n  }\r\n\r\n  /** The thumb used to select a value. */\r\n  get thumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[0] ?? null;\r\n  }\r\n\r\n  /** The thumb used to select the lower value of a range slider. */\r\n  get lowerThumb(): M3eSliderThumbElement | null {\r\n    return this.thumb;\r\n  }\r\n\r\n  /** The thumb used to select the upper value of a range slider. */\r\n  get upperThumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[1] ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.#updateDimensions(true);\r\n      this.requestUpdate();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"disabled\")) {\r\n      this.#thumbs.forEach((x) => (x.disabled = this.disabled));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div\r\n      class=\"base\"\r\n      tabindex=\"${ifDefined(!this.disabled ? \"-1\" : undefined)}\"\r\n      @pointerdown=\"${this.#handlePointerDown}\"\r\n      @pointermove=\"${this.#handlePointerMove}\"\r\n      @pointerup=\"${this.#handlePointerUp}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @value-change=\"${this.#handleThumbChange}\"\r\n    >\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"track-inactive start\"></div>\r\n        <div class=\"track-active\"></div>\r\n        <div class=\"track-inactive end\"></div>\r\n      </div>\r\n      <div class=\"ticks\" aria-hidden=\"true\">${this._ticks.map((x) => this.#renderTick(x))}</div>\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderTick(tick: { value: number; active: boolean }) {\r\n    return html`<div\r\n      class=\"tick ${tick.active ? \"active\" : \"inactive\"}\"\r\n      style=\"${safeStyleMap({\r\n        transform: `translate(${M3eDirectionality.current === \"rtl\" ? -this.#pointFromValue(tick.value) : this.#pointFromValue(tick.value)}px, 0)`,\r\n      })}\"\r\n    ></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#thumbs = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#thumbs.length > 2) {\r\n      this.#thumbs.length = 2;\r\n    }\r\n    if (this.isRange) {\r\n      this._base?.style.setProperty(\"--_slider-active-track-middle-shape\", `0`);\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_slider-active-track-middle-shape\");\r\n    }\r\n\r\n    this.#updateThumbs();\r\n  }\r\n\r\n  /** @private */\r\n  #updateThumbs(): void {\r\n    this.#thumbs.forEach((thumb, i) => {\r\n      if (this.disabled) {\r\n        thumb.disabled = true;\r\n      }\r\n      thumb.ariaValueMin = `${this.#thumbs[i - 1]?.value ?? this.min}`;\r\n      thumb.ariaValueMax = `${this.#thumbs[i + 1]?.value ?? this.max}`;\r\n      thumb.ariaValueNow = `${thumb.value ?? this.#thumbs[i - 1]?.value ?? this.min}`;\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #pointFromValue(value: number): number {\r\n    return (this.#cachedWidth - this.#cachedThumbWidth) * ((value - this.min) / (this.max - this.min));\r\n  }\r\n\r\n  /** @private */\r\n  #valueFromPoint(e: PointerEvent): number {\r\n    const pos =\r\n      M3eDirectionality.current === \"rtl\"\r\n        ? this.#cachedLeft + this.#cachedWidth - e.clientX\r\n        : e.clientX - this.#cachedLeft;\r\n    const step = this.step === 0 ? 1 : this.step;\r\n    const numSteps = Math.floor((this.max - this.min) / step);\r\n    const percentage = pos / this.#cachedWidth;\r\n    const fixedPercentage = Math.round(percentage * numSteps) / numSteps;\r\n    const impreciseValue = fixedPercentage * (this.max - this.min) + this.min;\r\n    return Math.round(impreciseValue / step) * step;\r\n  }\r\n\r\n  /** @private */\r\n  #updateCachedDimensions(force = false): void {\r\n    if (!this.lowerThumb) return;\r\n    this.#cachedWidth = !force && this.#cachedWidth > 0 ? this.#cachedWidth : this.clientWidth;\r\n    this.#cachedThumbWidth =\r\n      !force && this.#cachedThumbWidth > 0 ? this.#cachedThumbWidth : this.lowerThumb.clientWidth;\r\n    this.#cachedLeft = !force && this.#cachedLeft > 0 ? this.#cachedLeft : this.getBoundingClientRect().left;\r\n  }\r\n\r\n  /** @private */\r\n  #updateDimensions(force = false): void {\r\n    this.#updateCachedDimensions(force);\r\n    if (!this.lowerThumb) return;\r\n\r\n    const lowerValue = this.lowerThumb.value ?? this.min;\r\n    const lowerPos = this.#pointFromValue(lowerValue);\r\n    this.lowerThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -lowerPos : lowerPos}px, 0)`;\r\n\r\n    if (!this.upperThumb) {\r\n      this._base?.classList.toggle(\"range\", false);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - lowerPos - this.#cachedThumbWidth}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i < lowerValue);\r\n    } else {\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n      const upperPos = this.#pointFromValue(upperValue);\r\n      this.upperThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -upperPos : upperPos}px, 0)`;\r\n\r\n      this._base?.classList.toggle(\"range\", true);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-before-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${upperPos - lowerPos - this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${upperPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - this.#cachedThumbWidth - upperPos}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i > lowerValue && i < upperValue);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTicks(active: (value: number) => boolean): void {\r\n    this._ticks = [];\r\n    if (this.discrete && this.step > 1) {\r\n      for (let i = this.min; i <= this.max; i += this.step) {\r\n        this._ticks.push({ value: i, active: active(i) });\r\n      }\r\n    } else {\r\n      this._ticks.push({ value: this.min, active: active(this.min) });\r\n      if (this.min < 0 && this.max > 0) {\r\n        this._ticks.push({ value: 0, active: active(0) });\r\n      }\r\n      this._ticks.push({ value: this.max, active: active(this.max) });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.setPointerCapture(e.pointerId);\r\n    }\r\n\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement) as\r\n      | M3eSliderThumbElement\r\n      | undefined;\r\n\r\n    if (this.#activeThumb) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n\r\n    if (!this.upperThumb) {\r\n      if (!this.lowerThumb.disabled) {\r\n        this.#changeThumb(this.lowerThumb, value, true);\r\n        this.#activeThumb = this.lowerThumb;\r\n      }\r\n    } else {\r\n      const lowerValue = this.lowerThumb.value ?? this.min;\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n\r\n      if (value < lowerValue) {\r\n        if (!this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        }\r\n      } else if (value > upperValue) {\r\n        if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      } else {\r\n        const mid = (lowerValue + upperValue) / 2;\r\n        if (value < mid && !this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        } else if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerMove(e: PointerEvent): void {\r\n    if (\r\n      !(e.target instanceof HTMLElement) ||\r\n      !e.target.hasPointerCapture(e.pointerId) ||\r\n      !this.#activeThumb ||\r\n      this.#activeThumb.disabled\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.min(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    if (hasCustomState(this, \"-animating\")) {\r\n      deleteCustomState(this, \"-animating\");\r\n      this.#activeThumb.style.transition = \"\";\r\n    }\r\n\r\n    this.#changeThumb(this.#activeThumb, Math.min(max, Math.max(min, value)));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerUp(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.releasePointerCapture(e.pointerId);\r\n    }\r\n\r\n    if (this.#activeThumb && !this.#activeThumb.disabled) {\r\n      this.#activeThumb.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement) as\r\n      | M3eSliderThumbElement\r\n      | undefined;\r\n\r\n    if (!this.#activeThumb) return;\r\n\r\n    const value = this.#activeThumb.value ?? 0;\r\n\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.max(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"Home\":\r\n        this.#changeThumb(this.#activeThumb, min);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"End\":\r\n        this.#changeThumb(this.#activeThumb, max);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageUp\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageDown\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        }\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n\r\n        break;\r\n\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \" \":\r\n        e.preventDefault();\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleThumbChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.#updateThumbs();\r\n    this.#updateDimensions();\r\n  }\r\n\r\n  /** @private */\r\n  #changeThumb(thumb: M3eSliderThumbElement, value: number, animate = false): void {\r\n    if (thumb.value === value) return;\r\n    const prev = thumb.value;\r\n    if (animate && !prefersReducedMotion()) {\r\n      addCustomState(this, \"-animating\");\r\n      thumb.addEventListener(\r\n        \"transitionend\",\r\n        () => {\r\n          thumb.style.transition = \"\";\r\n          deleteCustomState(this, \"-animating\");\r\n        },\r\n        { once: true },\r\n      );\r\n      thumb.style.transition = `transform ${DesignToken.motion.spring.fastEffects}`;\r\n    }\r\n    thumb.value = value;\r\n    thumb.markAsDirty();\r\n    thumb.markAsTouched();\r\n    if (thumb.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      thumb.dispatchEvent(new Event(\"change\", { bubbles: true, composed: true }));\r\n    } else {\r\n      thumb.value = prev;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider\": M3eSliderElement;\r\n  }\r\n}\r\n"],"names":["M3eSliderThumbElement","Dirty","Touched","FormAssociated","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","this","value","_M3eSliderThumbElement_instances","WeakSet","formValue","toString","focus","options","_focusRing","disabled","super","firstUpdated","_changedProperties","attach","update","changedProperties","has","dispatchEvent","Event","bubbles","render","html","__classPrivateFieldGet","_M3eSliderThumbElement_labelText_get","closest","displayWith","styles","css","DesignToken","shape","corner","full","unsafeCSS","motion","duration","short3","easing","standard","color","inverseSurface","inverseOnSurface","typescale","label","medium","fontSize","fontWeight","lineHeight","tracking","short2","primary","onSurface","__decorate","query","prototype","property","type","Number","reflect","customElement","M3eSliderElement","_M3eSliderElement_directionalitySubscription","set","_ticks","Array","_M3eSliderElement_thumbs","_M3eSliderElement_activeThumb","_M3eSliderElement_cachedWidth","_M3eSliderElement_cachedThumbWidth","_M3eSliderElement_cachedLeft","size","discrete","min","max","step","labelled","ResizeController","callback","_M3eSliderElement_instances","_M3eSliderElement_updateDimensions","thumbs","isRange","length","thumb","lowerThumb","upperThumb","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","call","requestUpdate","disconnectedCallback","updated","forEach","x","ifDefined","undefined","_M3eSliderElement_handlePointerDown","_M3eSliderElement_handlePointerMove","_M3eSliderElement_handlePointerUp","_M3eSliderElement_handleKeyDown","_M3eSliderElement_handleThumbChange","map","_M3eSliderElement_renderTick","_M3eSliderElement_handleSlotChange","tick","active","safeStyleMap","transform","current","_M3eSliderElement_pointFromValue","e","target","assignedElements","flatten","filter","_base","style","setProperty","removeProperty","_M3eSliderElement_updateThumbs","i","ariaValueMin","ariaValueMax","ariaValueNow","pos","clientX","numSteps","Math","floor","percentage","impreciseValue","round","_M3eSliderElement_updateCachedDimensions","force","clientWidth","getBoundingClientRect","left","lowerValue","lowerPos","upperValue","upperPos","classList","toggle","_M3eSliderElement_updateTicks","push","pointerType","button","HTMLElement","setPointerCapture","pointerId","composedPath","find","_M3eSliderElement_valueFromPoint","_M3eSliderElement_changeThumb","hasPointerCapture","hasCustomState","deleteCustomState","transition","releasePointerCapture","key","preventDefault","stopPropagation","animate","prev","prefersReducedMotion","addCustomState","addEventListener","once","spring","fastEffects","markAsDirty","markAsTouched","composed","cancelable","smallStart","smallEnd","mediumStart","mediumEnd","largeStart","largeEnd","extraLargeStart","extraLargeEnd","secondaryContainer","onPrimary","onSecondaryContainer","state","Boolean","attribute"],"mappings":";;;;;gpBAmEO,IAAMA,EAAN,cAAoCC,EACzCC,EAAQC,EAAeC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,iBADtEC,WAAAA,mCA2HsCC,KAAAC,MAAuB,IAmDpE,CAhDE,KAAaC,EAAA,IAAAC,QAACC,MACZ,OAAOJ,KAAKC,OAAOI,YAAc,IACnC,CAQSC,KAAAA,CAAMC,GACTP,KAAKQ,aACPR,KAAKQ,WAAWC,UAAW,GAG7BC,MAAMJ,MAAMC,GAERP,KAAKQ,aACPR,KAAKQ,WAAWC,SAAWT,KAAKS,SAEpC,CAGmBE,YAAAA,CAAaC,GAC9BF,MAAMC,aAAaC,GACnBZ,KAAKQ,YAAYK,OAAOb,KAC1B,CAGmBc,MAAAA,CAAOC,GACxBL,MAAMI,OAAOC,GAETA,EAAkBC,IAAI,UACxBhB,KAAKiB,cAAc,IAAIC,MAAM,eAAgB,CAAEC,SAAS,IAE5D,CAGmBC,MAAAA,GACjB,OAAOC,CAAI,yCAAyCC,EAAAtB,KAAIE,EAAA,IAAAqB,2EAEJvB,KAAKS,oIAM3D,8DAzCE,OAAOT,KAAKwB,QAAQ,eAAeC,cAAczB,KAAKC,QAAUD,KAAKC,OAAOI,YAAc,EAC5F,EAjIgBf,EAAAoC,OAAyBC,CAAG,sJAQOC,EAAYC,MAAMC,OAAOC,0hCA4C1DC,EACZ,WAAWJ,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,mCAC7DT,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,mCAC/DT,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,sTAMlCT,EAAYC,MAAMC,OAAOC,oEACZH,EAAYU,MAAMC,yDACvCX,EAAYU,MAAME,mEACVZ,EAAYa,UAAUJ,SAASK,MAAMC,OAAOC,+DACxChB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOE,iEAC5CjB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOG,iEAC5ClB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOI,2LAYjFf,EAAU,SAASJ,EAAYK,OAAOC,SAASc,UAAUpB,EAAYK,OAAOG,OAAOC,0NAM/CT,EAAYU,MAAMW,wKAITrB,EAAYU,MAAMY,2WAwBhEC,EAAA,CADAC,EAAM,gBAC2B9D,EAAA+D,UAAA,qBAMPF,EAAA,CAA1CG,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAAoCnE,EAAA+D,UAAA,aAAA,GA3H5D/D,EAAqB6D,EAAA,CADjCO,EAAc,qBACFpE,GC2BN,IAAMqE,EAAN,cAA+B/D,EAAgBE,IAiSpDC,WAAAA,GACEW,oBAfckD,EAAAC,IAAA7D,aAMCA,KAAA8D,OAAS,IAAIC,MAEdC,EAAAH,IAAA7D,KAAU,IAAI+D,OACdE,EAAAJ,IAAA7D,aACAkE,EAAAL,IAAA7D,KAAe,GACfmE,EAAAN,IAAA7D,KAAoB,GACpBoE,EAAAP,IAAA7D,KAAc,GAWDA,KAAAqE,KAAmB,cAMJrE,KAAAS,UAAW,EAMXT,KAAAsE,UAAW,EAM3BtE,KAAAuE,IAAM,EAMNvE,KAAAwE,IAAM,IAMNxE,KAAAyE,KAAO,EAMNzE,KAAA0E,UAAW,EAGR1E,KAAAyB,YAAyD,KA9CvF,IAAIkD,EAAiB3E,KAAM,CAAE4E,SAAUA,IAAMtD,EAAAtB,KAAI6E,EAAA,IAAAC,QAAJ9E,MAAuB,IACtE,CAgDA,UAAI+E,GACF,OAAOzD,EAAAtB,KAAIgE,EAAA,IACb,CAGA,WAAIgB,GACF,OAAO1D,EAAAtB,KAAIgE,EAAA,KAASiB,OAAS,CAC/B,CAGA,SAAIC,GACF,OAAO5D,EAAAtB,KAAIgE,EAAA,KAAS,IAAM,IAC5B,CAGA,cAAImB,GACF,OAAOnF,KAAKkF,KACd,CAGA,cAAIE,GACF,OAAO9D,EAAAtB,KAAIgE,EAAA,KAAS,IAAM,IAC5B,CAGSqB,iBAAAA,GACP3E,MAAM2E,oBAENC,EAAAtF,KAAI4D,EAA+B2B,EAAkBC,QAAQ,KAC3DlE,EAAAtB,KAAI6E,EAAA,IAAAC,GAAkBW,KAAtBzF,MAAuB,GACvBA,KAAK0F,sBAET,CAGSC,oBAAAA,GACPjF,MAAMiF,uBACNrE,EAAAtB,KAAI4D,EAAA,MAA8B6B,KAAlCzF,KACF,CAGmB4F,OAAAA,CAAQhF,GACzBF,MAAMkF,QAAQhF,GAEVA,EAAmBI,IAAI,aACzBM,EAAAtB,YAAa6F,QAASC,GAAOA,EAAErF,SAAWT,KAAKS,SAEnD,CAGmBW,MAAAA,GACjB,OAAOC,CAAI,+BAEG0E,EAAW/F,KAAKS,cAAkBuF,EAAP,wBACvB1E,EAAAtB,KAAI6E,EAAA,IAAAoB,qBACJ3E,EAAAtB,KAAI6E,EAAA,IAAAqB,mBACN5E,EAAAtB,KAAI6E,EAAA,IAAAsB,iBACN7E,EAAAtB,KAAI6E,EAAA,IAAAuB,sBACC9E,EAAAtB,KAAI6E,EAAA,IAAAwB,uMAOmBrG,KAAK8D,OAAOwC,IAAKR,GAAMxE,EAAAtB,KAAI6E,EAAA,IAAA0B,GAAYd,KAAhBzF,KAAiB8F,+BAC3DxE,EAAAtB,KAAI6E,EAAA,IAAA2B,mBAE7B,gHAGYC,GACV,OAAOpF,CAAI,oBACKoF,EAAKC,OAAS,SAAW,sBAC9BC,EAAa,CACpBC,UAAW,aAA2C,QAA9BrB,EAAkBsB,SAAqBvF,EAAAtB,KAAI6E,EAAA,IAAAiC,QAAJ9G,KAAqByG,EAAKxG,OAASqB,EAAAtB,KAAI6E,EAAA,IAAAiC,GAAgBrB,KAApBzF,KAAqByG,EAAKxG,0BAGlI,aAGkB8G,GAChBzB,EAAAtF,KAAIgE,EAA6B+C,EAAEC,OAChCC,iBAAiB,CAAEC,SAAS,IAC5BC,OAAQrB,GAAMA,aAAaxG,GAAsB,KAEhDgC,EAAAtB,KAAIgE,EAAA,KAASiB,OAAS,IACxB3D,EAAAtB,KAAIgE,EAAA,KAASiB,OAAS,GAEpBjF,KAAKgF,QACPhF,KAAKoH,OAAOC,MAAMC,YAAY,sCAAuC,KAErEtH,KAAKoH,OAAOC,MAAME,eAAe,uCAGnCjG,EAAAtB,KAAI6E,EAAA,IAAA2C,GAAc/B,KAAlBzF,KACF,eAIEsB,EAAAtB,KAAIgE,EAAA,KAAS6B,QAAQ,CAACX,EAAOuC,KACvBzH,KAAKS,WACPyE,EAAMzE,UAAW,GAEnByE,EAAMwC,aAAe,GAAGpG,EAAAtB,YAAayH,EAAI,IAAIxH,OAASD,KAAKuE,MAC3DW,EAAMyC,aAAe,GAAGrG,EAAAtB,YAAayH,EAAI,IAAIxH,OAASD,KAAKwE,MAC3DU,EAAM0C,aAAe,GAAG1C,EAAMjF,OAASqB,EAAAtB,KAAIgE,EAAA,KAASyD,EAAI,IAAIxH,OAASD,KAAKuE,OAE9E,aAGgBtE,GACd,OAAQqB,EAAAtB,KAAIkE,EAAA,KAAgB5C,EAAAtB,KAAImE,EAAA,QAAwBlE,EAAQD,KAAKuE,MAAQvE,KAAKwE,IAAMxE,KAAKuE,KAC/F,aAGgBwC,GACd,MAAMc,EAC0B,QAA9BtC,EAAkBsB,QACdvF,EAAAtB,KAAIoE,EAAA,KAAe9C,EAAAtB,KAAIkE,EAAA,KAAgB6C,EAAEe,QACzCf,EAAEe,QAAUxG,EAAAtB,YACZyE,EAAqB,IAAdzE,KAAKyE,KAAa,EAAIzE,KAAKyE,KAClCsD,EAAWC,KAAKC,OAAOjI,KAAKwE,IAAMxE,KAAKuE,KAAOE,GAC9CyD,EAAaL,EAAMvG,EAAAtB,YAEnBmI,EADkBH,KAAKI,MAAMF,EAAaH,GAAYA,GAClB/H,KAAKwE,IAAMxE,KAAKuE,KAAOvE,KAAKuE,IACtE,OAAOyD,KAAKI,MAAMD,EAAiB1D,GAAQA,CAC7C,EAGwB4D,EAAA,SAAAC,GAAQ,GACzBtI,KAAKmF,aACVG,EAAAtF,QAAqBsI,GAAShH,EAAAtB,KAAIkE,EAAA,KAAgB,EAAI5C,EAAAtB,KAAIkE,EAAA,KAAgBlE,KAAKuI,YAAW,KAC1FjD,EAAAtF,KAAImE,GACDmE,GAAShH,EAAAtB,KAAImE,EAAA,KAAqB,EAAI7C,EAAAtB,KAAImE,EAAA,KAAqBnE,KAAKmF,WAAWoD,YAAW,KAC7FjD,EAAAtF,KAAIoE,GAAgBkE,GAAShH,EAAAtB,KAAIoE,EAAA,KAAe,EAAI9C,EAAAtB,KAAIoE,EAAA,KAAepE,KAAKwI,wBAAwBC,KAAI,KAC1G,EAGkB3D,EAAA,SAAAwD,GAAQ,GAExB,GADAhH,EAAAtB,KAAI6E,EAAA,IAAAwD,GAAwB5C,KAA5BzF,KAA6BsI,IACxBtI,KAAKmF,WAAY,OAEtB,MAAMuD,EAAa1I,KAAKmF,WAAWlF,OAASD,KAAKuE,IAC3CoE,EAAWrH,EAAAtB,KAAI6E,EAAA,IAAAiC,QAAJ9G,KAAqB0I,GAGtC,GAFA1I,KAAKmF,WAAWkC,MAAMT,UAAY,aAA2C,QAA9BrB,EAAkBsB,SAAqB8B,EAAWA,UAE5F3I,KAAKoF,WAUH,CACL,MAAMwD,EAAa5I,KAAKoF,WAAWnF,OAASyI,EACtCG,EAAWvH,EAAAtB,KAAI6E,EAAA,IAAAiC,QAAJ9G,KAAqB4I,GACtC5I,KAAKoF,WAAWiC,MAAMT,UAAY,aAA2C,QAA9BrB,EAAkBsB,SAAqBgC,EAAWA,UAEjG7I,KAAKoH,OAAO0B,UAAUC,OAAO,SAAS,GACtC/I,KAAKoH,OAAOC,MAAMC,YAAY,uCAAwC,GAAGqB,OACzE3I,KAAKoH,OAAOC,MAAMC,YAAY,gCAAiC,GAAGqB,EAAWrH,EAAAtB,KAAImE,EAAA,UACjFnE,KAAKoH,OAAOC,MAAMC,YAAY,8BAAkCuB,EAAWF,EAAWrH,EAAAtB,KAAImE,EAAA,KAA7B,MAC7DnE,KAAKoH,OAAOC,MAAMC,YAAY,wCAAyC,GAAGuB,EAAWvH,EAAAtB,KAAImE,EAAA,UACzFnE,KAAKoH,OAAOC,MAAMC,YAChB,sCACGhG,EAAAtB,KAAIkE,EAAA,KAAgB5C,EAAAtB,YAAyB6I,EAAhD,MAGFvH,EAAAtB,KAAI6E,EAAA,IAAAmE,GAAavD,KAAjBzF,KAAmByH,GAAMA,EAAIiB,GAAcjB,EAAImB,EACjD,MAzBE5I,KAAKoH,OAAO0B,UAAUC,OAAO,SAAS,GACtC/I,KAAKoH,OAAOC,MAAMC,YAAY,8BAA+B,GAAGqB,OAChE3I,KAAKoH,OAAOC,MAAMC,YAAY,wCAAyC,GAAGqB,EAAWrH,EAAAtB,KAAImE,EAAA,UACzFnE,KAAKoH,OAAOC,MAAMC,YAChB,sCACGhG,EAAAtB,KAAIkE,EAAA,KAAgByE,EAAWrH,EAAAtB,KAAImE,EAAA,KAAtC,MAGF7C,EAAAtB,KAAI6E,EAAA,IAAAmE,GAAavD,KAAjBzF,KAAmByH,GAAMA,EAAIiB,EAkBjC,aAGahC,GAEX,GADA1G,KAAK8D,OAAS,GACV9D,KAAKsE,UAAYtE,KAAKyE,KAAO,EAC/B,IAAK,IAAIgD,EAAIzH,KAAKuE,IAAKkD,GAAKzH,KAAKwE,IAAKiD,GAAKzH,KAAKyE,KAC9CzE,KAAK8D,OAAOmF,KAAK,CAAEhJ,MAAOwH,EAAGf,OAAQA,EAAOe,UAG9CzH,KAAK8D,OAAOmF,KAAK,CAAEhJ,MAAOD,KAAKuE,IAAKmC,OAAQA,EAAO1G,KAAKuE,OACpDvE,KAAKuE,IAAM,GAAKvE,KAAKwE,IAAM,GAC7BxE,KAAK8D,OAAOmF,KAAK,CAAEhJ,MAAO,EAAGyG,OAAQA,EAAO,KAE9C1G,KAAK8D,OAAOmF,KAAK,CAAEhJ,MAAOD,KAAKwE,IAAKkC,OAAQA,EAAO1G,KAAKwE,MAE5D,aAGmBuC,GACjB,GAAsB,UAAlBA,EAAEmC,aAA2BnC,EAAEoC,OAAS,EAAG,OAC/C,IAAKnJ,KAAKmF,YAAcnF,KAAKS,SAAU,OAUvC,GARIsG,EAAEC,kBAAkBoC,aACtBrC,EAAEC,OAAOqC,kBAAkBtC,EAAEuC,WAG/BhE,EAAAtF,KAAIiE,EAAgB8C,EAAEwC,eAAeC,KAAM1D,GAAMA,aAAaxG,QAI1DgC,EAAAtB,KAAIiE,EAAA,KACN,OAGF,MAAMhE,EAAQqB,EAAAtB,KAAI6E,EAAA,IAAA4E,QAAJzJ,KAAqB+G,GAEnC,GAAK/G,KAAKoF,WAKH,CACL,MAAMsD,EAAa1I,KAAKmF,WAAWlF,OAASD,KAAKuE,IAC3CqE,EAAa5I,KAAKoF,WAAWnF,OAASyI,EAE5C,GAAIzI,EAAQyI,EACL1I,KAAKmF,WAAW1E,WACnBa,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBA,KAAKmF,WAAYlF,GAAO,GAC1CqF,EAAAtF,KAAIiE,EAAgBjE,KAAKmF,sBAEtB,GAAIlF,EAAQ2I,EACZ5I,KAAKoF,WAAW3E,WACnBa,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBA,KAAKoF,WAAYnF,GAAO,GAC1CqF,EAAAtF,KAAIiE,EAAgBjE,KAAKoF,qBAEtB,CAEDnF,GADSyI,EAAaE,GAAc,IACpB5I,KAAKmF,WAAW1E,UAClCa,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBA,KAAKmF,WAAYlF,GAAO,GAC1CqF,EAAAtF,KAAIiE,EAAgBjE,KAAKmF,iBACfnF,KAAKoF,WAAW3E,WAC1Ba,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBA,KAAKoF,WAAYnF,GAAO,GAC1CqF,EAAAtF,KAAIiE,EAAgBjE,KAAKoF,gBAE7B,CACF,MA5BOpF,KAAKmF,WAAW1E,WACnBa,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBA,KAAKmF,WAAYlF,GAAO,GAC1CqF,EAAAtF,KAAIiE,EAAgBjE,KAAKmF,gBA2B/B,aAGmB4B,GACjB,KACIA,EAAEC,kBAAkBoC,eACrBrC,EAAEC,OAAO2C,kBAAkB5C,EAAEuC,aAC7BhI,EAAAtB,KAAIiE,EAAA,MACL3C,EAAAtB,KAAIiE,EAAA,KAAcxD,SAElB,OAGF,MAAMR,EAAQqB,EAAAtB,KAAI6E,EAAA,IAAA4E,QAAJzJ,KAAqB+G,GACnC,IAAIxC,EAAMvE,KAAKuE,IACXC,EAAMxE,KAAKwE,IAEXlD,EAAAtB,KAAIiE,EAAA,OAAkBjE,KAAKoF,WAC7Bb,EAAMyD,KAAKxD,IAAID,EAAKvE,KAAKmF,YAAYlF,OAAS,GACrCD,KAAKoF,aACdZ,EAAMwD,KAAKzD,IAAIC,EAAKxE,KAAKoF,WAAWnF,OAASD,KAAKwE,MAGhDoF,EAAe5J,KAAM,gBACvB6J,EAAkB7J,KAAM,cACxBsB,EAAAtB,YAAkBqH,MAAMyC,WAAa,IAGvCxI,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKzD,IAAIC,EAAKwD,KAAKxD,IAAID,EAAKtE,IACnE,aAGiB8G,GACO,UAAlBA,EAAEmC,aAA2BnC,EAAEoC,OAAS,GACvCnJ,KAAKmF,aAAcnF,KAAKS,WAEzBsG,EAAEC,kBAAkBoC,aACtBrC,EAAEC,OAAO+C,sBAAsBhD,EAAEuC,WAG/BhI,EAAAtB,KAAIiE,EAAA,OAAkB3C,EAAAtB,KAAIiE,EAAA,KAAcxD,UAC1Ca,EAAAtB,KAAIiE,EAAA,KAAc3D,QAEtB,aAGeyG,GAKb,GAJAzB,EAAAtF,KAAIiE,EAAgB8C,EAAEwC,eAAeC,KAAM1D,GAAMA,aAAaxG,SAIzDgC,EAAAtB,KAAIiE,EAAA,KAAe,OAExB,MAAMhE,EAAQqB,EAAAtB,YAAkBC,OAAS,EAEzC,IAAIsE,EAAMvE,KAAKuE,IACXC,EAAMxE,KAAKwE,IAQf,OANIlD,EAAAtB,KAAIiE,EAAA,OAAkBjE,KAAKoF,WAC7Bb,EAAMyD,KAAKxD,IAAID,EAAKvE,KAAKmF,YAAYlF,OAAS,GACrCD,KAAKoF,aACdZ,EAAMwD,KAAKxD,IAAIA,EAAKxE,KAAKoF,WAAWnF,OAASD,KAAKwE,MAG5CuC,EAAEiD,KACR,IAAK,OACH1I,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAeM,GACrCwC,EAAEkD,iBACF,MAEF,IAAK,MACH3I,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAeO,GACrCuC,EAAEkD,iBACF,MAEF,IAAK,SAC+B,QAA9B1E,EAAkBsB,QACpBvF,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKzD,IAAIC,EAAKvE,GAASD,KAAKyE,KAAO,EAAIzE,KAAKyE,KAAO,MAExFnD,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKxD,IAAID,EAAKtE,GAASD,KAAKyE,KAAO,EAAIzE,KAAKyE,KAAO,MAG1FsC,EAAEkD,iBACF,MAEF,IAAK,WAC+B,QAA9B1E,EAAkBsB,QACpBvF,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKxD,IAAID,EAAKtE,GAASD,KAAKyE,KAAO,EAAIzE,KAAKyE,KAAO,MAExFnD,EAAAtB,KAAI6E,EAAA,IAAA6E,GAAajE,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKzD,IAAIC,EAAKvE,GAASD,KAAKyE,KAAO,EAAIzE,KAAKyE,KAAO,MAE1FsC,EAAEkD,iBACF,MAEF,IAAK,OACL,IAAK,YACL,IAAK,OACL,IAAK,YAC+B,QAA9B1E,EAAkBsB,QACpBvF,EAAAtB,cAAiByF,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKxD,IAAID,EAAKtE,EAAQD,KAAKyE,OAEhEnD,EAAAtB,cAAiByF,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKzD,IAAIC,EAAKvE,EAAQD,KAAKyE,OAGlEsC,EAAEkD,iBAEF,MAEF,IAAK,KACL,IAAK,UACL,IAAK,QACL,IAAK,aAC+B,QAA9B1E,EAAkBsB,QACpBvF,EAAAtB,cAAiByF,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKzD,IAAIC,EAAKvE,EAAQD,KAAKyE,OAEhEnD,EAAAtB,cAAiByF,KAAjBzF,KAAkBsB,EAAAtB,KAAIiE,EAAA,KAAe+D,KAAKxD,IAAID,EAAKtE,EAAQD,KAAKyE,OAGlEsC,EAAEkD,iBACF,MAEF,IAAK,IACHlD,EAAEkD,iBAGR,aAGmBlD,GACjBA,EAAEmD,kBACF5I,EAAAtB,KAAI6E,EAAA,IAAA2C,GAAc/B,KAAlBzF,MACAsB,EAAAtB,KAAI6E,EAAA,IAAAC,GAAkBW,KAAtBzF,KACF,EAGa0J,EAAA,SAAAxE,EAA8BjF,EAAekK,GAAU,GAClE,GAAIjF,EAAMjF,QAAUA,EAAO,OAC3B,MAAMmK,EAAOlF,EAAMjF,MACfkK,IAAYE,MACdC,EAAetK,KAAM,cACrBkF,EAAMqF,iBACJ,gBACA,KACErF,EAAMmC,MAAMyC,WAAa,GACzBD,EAAkB7J,KAAM,eAE1B,CAAEwK,MAAM,IAEVtF,EAAMmC,MAAMyC,WAAa,aAAalI,EAAYK,OAAOwI,OAAOC,eAElExF,EAAMjF,MAAQA,EACdiF,EAAMyF,cACNzF,EAAM0F,gBACF1F,EAAMjE,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAM0J,UAAU,EAAMC,YAAY,KACtF5F,EAAMjE,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,EAAM0J,UAAU,KAEnE3F,EAAMjF,MAAQmK,CAElB,EAjuBgBzG,EAAAjC,OAAyBC,CAAG,kfAiBmCC,EAAYC,MAAMC,OAAOiJ,iHAGhGnJ,EAAYC,MAAMC,OAAOiJ,uGAIzBnJ,EAAYC,MAAMC,OAAOkJ,6KAK8CpJ,EAAYC,MAAMC,OAAOkJ,+GAGhGpJ,EAAYC,MAAMC,OAAOkJ,qGAIzBpJ,EAAYC,MAAMC,OAAOiJ,6ZAezBnJ,EAAYC,MAAMC,OAAOmJ,oHAIzBrJ,EAAYC,MAAMC,OAAOmJ,yGAIzBrJ,EAAYC,MAAMC,OAAOoJ,oIAI+CtJ,EAAYC,MAAMC,OAAOoJ,iHAGjGtJ,EAAYC,MAAMC,OAAOoJ,uGAIzBtJ,EAAYC,MAAMC,OAAOmJ,8SAU8CrJ,EAAYC,MAAMC,OAAOqJ,iHAGhGvJ,EAAYC,MAAMC,OAAOqJ,uGAIzBvJ,EAAYC,MAAMC,OAAOsJ,iIAI8CxJ,EAAYC,MAAMC,OAAOsJ,+GAGhGxJ,EAAYC,MAAMC,OAAOsJ,qGAIzBxJ,EAAYC,MAAMC,OAAOqJ,oUAYzBvJ,EAAYC,MAAMC,OAAOuJ,6HAIzBzJ,EAAYC,MAAMC,OAAOuJ,kHAIzBzJ,EAAYC,MAAMC,OAAOwJ,mJAMzB1J,EAAYC,MAAMC,OAAOwJ,2HAIzB1J,EAAYC,MAAMC,OAAOwJ,gHAIzB1J,EAAYC,MAAMC,OAAOuJ,+QASfrJ,EAAU,uBAAuBJ,EAAYK,OAAOwI,OAAOC,+BAC/D9I,EAAYK,OAAOwI,OAAOC,kzCAmDU9I,EAAYC,MAAMC,OAAOC,+GAGZH,EAAYU,MAAMiJ,oJAKzB3J,EAAYU,MAAMY,sLAMbtB,EAAYU,MAAMW,qIAKzBrB,EAAYU,MAAMY,kLAMZtB,EAAYU,MAAMkJ,iHAGT5J,EAAYU,MAAME,yHAGzBZ,EAAYU,MAAMmJ,gIAGT7J,EAAYU,MAAMY,oiCAiDxDC,EAAA,CAAhCC,EAAM,UAA8CO,EAAAN,UAAA,gBAGpCF,EAAA,CAAhBuI,KAAyE/H,EAAAN,UAAA,iBAiB7CF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAyCE,EAAAN,UAAA,YAAA,GAMlBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMoI,QAASlI,SAAS,KAAyBE,EAAAN,UAAA,gBAAA,GAMjBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMoI,QAASlI,SAAS,KAAyBE,EAAAN,UAAA,gBAAA,GAMjCF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAkBG,EAAAN,UAAA,WAAA,GAMRF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAoBG,EAAAN,UAAA,WAAA,GAMVF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAmBG,EAAAN,UAAA,YAAA,GAMRF,EAAA,CAA5BG,EAAS,CAAEC,KAAMoI,WAA4BhI,EAAAN,UAAA,gBAAA,GAGdF,EAAA,CAA/BG,EAAS,CAAEsI,WAAW,KAAuEjI,EAAAN,UAAA,mBAAA,GAjVnFM,EAAgBR,EAAA,CAD5BO,EAAc,eACFC"}
+{"version":3,"file":"slider.min.js","sources":["../../src/slider/SliderThumbElement.ts","../../src/slider/SliderElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thumb used to select a value in a slider.\r\n *\r\n * @description\r\n * The `m3e-slider-thumb` component is used within a `m3e-slider` to represent and select a specific value.\r\n * This component supports continuous and discrete input, form association, and accessibility semantics.\r\n * It emits `input` and `change` events to reflect value updates.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider-thumb\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - The value of the thumb.\r\n *\r\n * @fires input - Emitted when the value changes.\r\n * @fires change - Emitted when the value changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.\r\n * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.\r\n * @cssprop --m3e-slider-thumb-color - Active color of the slider thumb when enabled.\r\n * @cssprop --m3e-slider-thumb-pressed-width - Width of the thumb when pressed.\r\n * @cssprop --m3e-slider-thumb-disabled-color - Color of the thumb when disabled.\r\n * @cssprop --m3e-slider-thumb-disabled-opacity - Opacity of the thumb when disabled.\r\n * @cssprop --m3e-slider-label-width - Width of the floating label above the thumb.\r\n * @cssprop --m3e-slider-label-container-color - Background color of the label container.\r\n * @cssprop --m3e-slider-label-color - Text color of the label.\r\n * @cssprop --m3e-slider-label-font-size - Font size of the label text.\r\n * @cssprop --m3e-slider-label-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-slider-label-line-height - Line height of the label text.\r\n * @cssprop --m3e-slider-label-tracking - Letter spacing of the label text.\r\n */\r\n@customElement(\"m3e-slider-thumb\")\r\nexport class M3eSliderThumbElement extends Dirty(\r\n  Touched(FormAssociated(Focusable(Disabled(AttachInternals(Role(LitElement, \"slider\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      outline: none;\r\n      top: 0;\r\n      bottom: 0;\r\n      border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full});\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n      touch-action: none;\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2));\r\n    }\r\n    .focus-ring {\r\n      top: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      left: var(--m3e-focus-ring-thickness, 3px);\r\n      right: var(--m3e-focus-ring-thickness, 3px);\r\n    }\r\n    .label {\r\n      user-select: none;\r\n      position: absolute;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      visibility: var(--_slider-label-visibility, hidden);\r\n      opacity: var(--_slider-label-opacity, 0);\r\n      transform: var(--_slider-label-transform, scale(0));\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n          transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n          visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n      width: var(--m3e-slider-label-width, 3rem);\r\n      height: var(--_m3e-slider-label-height, 2.75rem);\r\n      top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem));\r\n      inset-inline-start: calc(0px - 100%);\r\n      border-radius: var(--m3e-slider-label-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-slider-label-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-slider-label-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-slider-label-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(--m3e-slider-label-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight});\r\n      line-height: var(--m3e-slider-label-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight});\r\n      letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n    }\r\n    @starting-style {\r\n      .label {\r\n        opacity: 0;\r\n        transform: scale(0);\r\n      }\r\n    }\r\n    .handle {\r\n      height: 100%;\r\n      width: var(--m3e-slider-thumb-width, 0.25rem);\r\n      border-radius: inherit;\r\n      transition: ${unsafeCSS(`width ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:active:not([aria-disabled=\"true\"])) .handle {\r\n      width: var(--m3e-slider-thumb-pressed-width, 2px);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .handle {\r\n      background-color: var(--m3e-slider-thumb-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .handle {\r\n      opacity: var(--m3e-slider-thumb-disabled-opacity, 38%);\r\n      background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken.color.onSurface});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .label {\r\n        forced-color-adjust: none;\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"])) .handle {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .handle {\r\n        opacity: unset;\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\")\r\n  private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  /**\r\n   * The value of the thumb.\r\n   * @default null\r\n   */\r\n  @property({ type: Number, reflect: true }) value: number | null = null;\r\n\r\n  /** @inheritdoc */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.value?.toString() ?? null;\r\n  }\r\n\r\n  /** @internal */\r\n  get #labelText(): string {\r\n    return this.closest(\"m3e-slider\")?.displayWith?.(this.value) ?? this.value?.toString() ?? \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = true;\r\n    }\r\n\r\n    super.focus(options);\r\n\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._focusRing?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"value\")) {\r\n      this.dispatchEvent(new Event(\"value-change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\" aria-hidden=\"true\">${this.#labelText}</div>\r\n      <div class=\"base\">\r\n        <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"handle\"></div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider-thumb\": M3eSliderThumbElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  safeStyleMap,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eSliderThumbElement } from \"./SliderThumbElement\";\r\nimport { SliderSize } from \"./SliderSize\";\r\n\r\n/**\r\n * Allows for the selection of numeric values from a range.\r\n *\r\n * @description\r\n * The `m3e-slider` component enables users to select a numeric value from a continuous or discrete range.\r\n * Designed according to Material 3 principles, it supports labeled value indicators, tick marks, and\r\n * snapping behavior.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider\r\n *\r\n * @slot - Renders the thumbs of the slider.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr discrete - Whether to show tick marks.\r\n * @attr labelled - Whether to show value labels when activated.\r\n * @attr max - The maximum allowable value.\r\n * @attr min - The minimum allowable value.\r\n * @attr step - The value at which the thumb will snap.\r\n * @attr size - The size of the slider.\r\n *\r\n * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.\r\n * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.\r\n * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.\r\n * @cssprop --m3e-slider-large-height - Height of the slider when size is large.\r\n * @cssprop --m3e-slider-extra-large-height - Height of the slider when size is extra-large.\r\n * @cssprop --m3e-slider-small-active-track-shape - Corner shape of the active track for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-active-track-start-shape - Corner shape of the inactive track start for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-track-end-shape - Corner shape of the inactive track end for small sliders.\r\n * @cssprop --m3e-slider-medium-active-track-shape - Corner shape of the active track for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-active-track-start-shape - Corner shape of the inactive track start for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-track-end-shape - Corner shape of the inactive track end for medium sliders.\r\n * @cssprop --m3e-slider-large-active-track-shape - Corner shape of the active track for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-active-track-start-shape - Corner shape of the inactive track start for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-track-end-shape - Corner shape of the inactive track end for large sliders.\r\n * @cssprop --m3e-slider-extra-large-active-track-shape - Corner shape of the active track for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-active-track-start-shape - Corner shape of the inactive track start for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-track-end-shape - Corner shape of the inactive track end for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-small-track-height - Height of the track for extra-small sliders.\r\n * @cssprop --m3e-slider-small-track-height - Height of the track for small sliders.\r\n * @cssprop --m3e-slider-medium-track-height - Height of the track for medium sliders.\r\n * @cssprop --m3e-slider-large-track-height - Height of the track for large sliders.\r\n * @cssprop --m3e-slider-extra-large-track-height - Height of the track for extra-large sliders.\r\n * @cssprop --m3e-slider-tick-size - Size of each tick mark.\r\n * @cssprop --m3e-slider-tick-shape - Corner shape of each tick mark.\r\n * @cssprop --m3e-slider-inactive-track-color - Background color of the inactive track when enabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-color - Base color of the inactive track when disabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-opacity - Opacity of the inactive track when disabled.\r\n * @cssprop --m3e-slider-active-track-color - Background color of the active track when enabled.\r\n * @cssprop --m3e-slider-disabled-active-track-color - Base color of the active track when disabled.\r\n * @cssprop --m3e-slider-disabled-active-track-opacity - Opacity of the active track when disabled.\r\n * @cssprop --m3e-slider-tick-active-color - Color of active ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-active-color - Color of active ticks when disabled.\r\n * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.\r\n */\r\n@customElement(\"m3e-slider\")\r\nexport class M3eSliderElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      min-inline-size: var(--m3e-slider-min-width, 12.5rem);\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([disabled])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([size=\"extra-small\"]),\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-slider-small-height, 2.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-small\"]) .base,\r\n    :host(:not(:dir(rtl))[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-small\"]) .base,\r\n    :host(:dir(rtl)[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .track {\r\n      height: calc(var(--m3e-slider-extra-small-track-height, 1rem));\r\n    }\r\n    :host([size=\"small\"]) .track {\r\n      height: calc(var(--m3e-slider-small-track-height, 1.5rem));\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-slider-medium-height, 3.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-medium-active-track-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n    }\r\n    :host([size=\"medium\"]) .track {\r\n      height: var(--m3e-slider-medium-track-height, 2.5rem);\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-slider-large-height, 4.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n    }\r\n    :host([size=\"large\"]) .track {\r\n      height: var(--m3e-slider-large-track-height, 3.5rem);\r\n    }\r\n    :host([size=\"extra-large\"]) {\r\n      height: var(--m3e-slider-extra-large-height, 6.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-large\"]) .track {\r\n      height: var(--m3e-slider-extra-large-track-height, 6rem);\r\n    }\r\n    :host(:is(:state(--animating), :--animating)) .track-active,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.start,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.end {\r\n      transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects},\r\n        width ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      outline: none;\r\n      touch-action: none;\r\n    }\r\n    .track {\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      touch-action: none;\r\n    }\r\n    .track-inactive,\r\n    .track-active {\r\n      position: absolute;\r\n      height: 100%;\r\n      touch-action: none;\r\n    }\r\n    .track-active {\r\n      margin-inline-start: var(--_slider-active-track-offset, 0px);\r\n      width: var(--_slider-active-track-size, 0px);\r\n      border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape));\r\n    }\r\n    .track-inactive.start {\r\n      width: var(--_slider-inactive-track-before-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-start-shape);\r\n    }\r\n    .track-inactive.end {\r\n      margin-inline-start: var(--_slider-inactive-track-after-offset, 0px);\r\n      width: var(--_slider-inactive-track-after-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-end-shape);\r\n    }\r\n    .ticks {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      overflow: visible;\r\n      touch-action: none;\r\n    }\r\n    .tick {\r\n      position: absolute;\r\n      top: 0;\r\n      touch-action: none;\r\n      inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2));\r\n      width: var(--m3e-slider-tick-size, 0.25rem);\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not([disabled])) .track-inactive {\r\n      background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([disabled]) .track-inactive {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-inactive-track-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .track-active {\r\n      background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([disabled]) .track-active {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-active-track-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .tick.active {\r\n      background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host([disabled]) .tick.active {\r\n      background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([disabled])) .tick.inactive {\r\n      background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([disabled]) .tick.inactive {\r\n      background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([discrete])) .tick.active {\r\n      display: none;\r\n    }\r\n    :host(:hover[labelled]) .base,\r\n    :host(:focus-within[labelled]) .base {\r\n      --_slider-label-visibility: visible;\r\n      --_slider-label-opacity: 1;\r\n      --_slider-label-transform: scale(1);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([disabled])) .track-inactive {\r\n        background-color: unset;\r\n      }\r\n      :host(:not([disabled])) .base.range .track-inactive.start,\r\n      :host(:not([disabled])) .track-inactive.end {\r\n        border: 1px solid CanvasText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host(:not([disabled])) .tick.inactive {\r\n        background-color: CanvasText;\r\n      }\r\n      :host(:not([disabled])) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n      :host(:not([disabled])) .track-active {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([disabled]) .base.range .track-inactive.start,\r\n      :host([disabled]) .track-inactive.end {\r\n        border: 1px solid GrayText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host([disabled]) .track-active {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.inactive {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */\r\n  @state() private _ticks = new Array<{ value: number; active: boolean }>();\r\n\r\n  /** @private */ #thumbs = new Array<M3eSliderThumbElement>();\r\n  /** @private */ #activeThumb?: M3eSliderThumbElement;\r\n  /** @private */ #cachedWidth = 0;\r\n  /** @private */ #cachedThumbWidth = 0;\r\n  /** @private */ #cachedLeft = 0;\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, { callback: () => this.#updateDimensions(true) });\r\n  }\r\n\r\n  /**\r\n   * The size of the slider.\r\n   * @default \"extra-small\"\r\n   */\r\n  @property({ reflect: true }) size: SliderSize = \"extra-small\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether to show tick marks.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) discrete = false;\r\n\r\n  /**\r\n   * The minimum allowable value.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) min = 0;\r\n\r\n  /**\r\n   * The maximum allowable value.\r\n   * @default 100\r\n   */\r\n  @property({ type: Number }) max = 100;\r\n\r\n  /**\r\n   * The value at which the thumb will snap.\r\n   * @default 1\r\n   */\r\n  @property({ type: Number }) step = 1;\r\n\r\n  /**\r\n   * Whether to show value labels when activated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) labelled = false;\r\n\r\n  /** The function used to format display values. */\r\n  @property({ attribute: false }) displayWith: ((value: number | null) => string) | null = null;\r\n\r\n  /** The thumbs used to select values. */\r\n  get thumbs(): readonly M3eSliderThumbElement[] {\r\n    return this.#thumbs;\r\n  }\r\n\r\n  /** Whether the slider is a range slider. */\r\n  get isRange(): boolean {\r\n    return this.#thumbs.length > 1;\r\n  }\r\n\r\n  /** The thumb used to select a value. */\r\n  get thumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[0] ?? null;\r\n  }\r\n\r\n  /** The thumb used to select the lower value of a range slider. */\r\n  get lowerThumb(): M3eSliderThumbElement | null {\r\n    return this.thumb;\r\n  }\r\n\r\n  /** The thumb used to select the upper value of a range slider. */\r\n  get upperThumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[1] ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.#updateDimensions(true);\r\n      this.requestUpdate();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"disabled\")) {\r\n      this.#thumbs.forEach((x) => (x.disabled = this.disabled));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div\r\n      class=\"base\"\r\n      tabindex=\"${ifDefined(!this.disabled ? \"-1\" : undefined)}\"\r\n      @pointerdown=\"${this.#handlePointerDown}\"\r\n      @pointermove=\"${this.#handlePointerMove}\"\r\n      @pointerup=\"${this.#handlePointerUp}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @value-change=\"${this.#handleThumbChange}\"\r\n    >\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"track-inactive start\"></div>\r\n        <div class=\"track-active\"></div>\r\n        <div class=\"track-inactive end\"></div>\r\n      </div>\r\n      <div class=\"ticks\" aria-hidden=\"true\">${this._ticks.map((x) => this.#renderTick(x))}</div>\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderTick(tick: { value: number; active: boolean }) {\r\n    return html`<div\r\n      class=\"tick ${tick.active ? \"active\" : \"inactive\"}\"\r\n      style=\"${safeStyleMap({\r\n        transform: `translate(${M3eDirectionality.current === \"rtl\" ? -this.#pointFromValue(tick.value) : this.#pointFromValue(tick.value)}px, 0)`,\r\n      })}\"\r\n    ></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#thumbs = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#thumbs.length > 2) {\r\n      this.#thumbs.length = 2;\r\n    }\r\n    if (this.isRange) {\r\n      this._base?.style.setProperty(\"--_slider-active-track-middle-shape\", `0`);\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_slider-active-track-middle-shape\");\r\n    }\r\n\r\n    this.#updateThumbs();\r\n  }\r\n\r\n  /** @private */\r\n  #updateThumbs(): void {\r\n    this.#thumbs.forEach((thumb, i) => {\r\n      if (this.disabled) {\r\n        thumb.disabled = true;\r\n      }\r\n      thumb.ariaValueMin = `${this.#thumbs[i - 1]?.value ?? this.min}`;\r\n      thumb.ariaValueMax = `${this.#thumbs[i + 1]?.value ?? this.max}`;\r\n      thumb.ariaValueNow = `${thumb.value ?? this.#thumbs[i - 1]?.value ?? this.min}`;\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #pointFromValue(value: number): number {\r\n    return (this.#cachedWidth - this.#cachedThumbWidth) * ((value - this.min) / (this.max - this.min));\r\n  }\r\n\r\n  /** @private */\r\n  #valueFromPoint(e: PointerEvent): number {\r\n    const pos =\r\n      M3eDirectionality.current === \"rtl\"\r\n        ? this.#cachedLeft + this.#cachedWidth - e.clientX\r\n        : e.clientX - this.#cachedLeft;\r\n    const step = this.step === 0 ? 1 : this.step;\r\n    const numSteps = Math.floor((this.max - this.min) / step);\r\n    const percentage = pos / this.#cachedWidth;\r\n    const fixedPercentage = Math.round(percentage * numSteps) / numSteps;\r\n    const impreciseValue = fixedPercentage * (this.max - this.min) + this.min;\r\n    return Math.round(impreciseValue / step) * step;\r\n  }\r\n\r\n  /** @private */\r\n  #updateCachedDimensions(force = false): void {\r\n    if (!this.lowerThumb) return;\r\n    this.#cachedWidth = !force && this.#cachedWidth > 0 ? this.#cachedWidth : this.clientWidth;\r\n    this.#cachedThumbWidth =\r\n      !force && this.#cachedThumbWidth > 0 ? this.#cachedThumbWidth : this.lowerThumb.clientWidth;\r\n    this.#cachedLeft = !force && this.#cachedLeft > 0 ? this.#cachedLeft : this.getBoundingClientRect().left;\r\n  }\r\n\r\n  /** @private */\r\n  #updateDimensions(force = false): void {\r\n    this.#updateCachedDimensions(force);\r\n    if (!this.lowerThumb) return;\r\n\r\n    const lowerValue = this.lowerThumb.value ?? this.min;\r\n    const lowerPos = this.#pointFromValue(lowerValue);\r\n    this.lowerThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -lowerPos : lowerPos}px, 0)`;\r\n\r\n    if (!this.upperThumb) {\r\n      this._base?.classList.toggle(\"range\", false);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - lowerPos - this.#cachedThumbWidth}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i < lowerValue);\r\n    } else {\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n      const upperPos = this.#pointFromValue(upperValue);\r\n      this.upperThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -upperPos : upperPos}px, 0)`;\r\n\r\n      this._base?.classList.toggle(\"range\", true);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-before-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${upperPos - lowerPos - this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${upperPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - this.#cachedThumbWidth - upperPos}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i > lowerValue && i < upperValue);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTicks(active: (value: number) => boolean): void {\r\n    this._ticks = [];\r\n    if (this.discrete && this.step > 1) {\r\n      for (let i = this.min; i <= this.max; i += this.step) {\r\n        this._ticks.push({ value: i, active: active(i) });\r\n      }\r\n    } else {\r\n      this._ticks.push({ value: this.min, active: active(this.min) });\r\n      if (this.min < 0 && this.max > 0) {\r\n        this._ticks.push({ value: 0, active: active(0) });\r\n      }\r\n      this._ticks.push({ value: this.max, active: active(this.max) });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.setPointerCapture(e.pointerId);\r\n    }\r\n\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement) as\r\n      | M3eSliderThumbElement\r\n      | undefined;\r\n\r\n    if (this.#activeThumb) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n\r\n    if (!this.upperThumb) {\r\n      if (!this.lowerThumb.disabled) {\r\n        this.#changeThumb(this.lowerThumb, value, true);\r\n        this.#activeThumb = this.lowerThumb;\r\n      }\r\n    } else {\r\n      const lowerValue = this.lowerThumb.value ?? this.min;\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n\r\n      if (value < lowerValue) {\r\n        if (!this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        }\r\n      } else if (value > upperValue) {\r\n        if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      } else {\r\n        const mid = (lowerValue + upperValue) / 2;\r\n        if (value < mid && !this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        } else if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerMove(e: PointerEvent): void {\r\n    if (\r\n      !(e.target instanceof HTMLElement) ||\r\n      !e.target.hasPointerCapture(e.pointerId) ||\r\n      !this.#activeThumb ||\r\n      this.#activeThumb.disabled\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.min(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    if (hasCustomState(this, \"--animating\")) {\r\n      deleteCustomState(this, \"--animating\");\r\n      this.#activeThumb.style.transition = \"\";\r\n    }\r\n\r\n    this.#changeThumb(this.#activeThumb, Math.min(max, Math.max(min, value)));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerUp(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.releasePointerCapture(e.pointerId);\r\n    }\r\n\r\n    if (this.#activeThumb && !this.#activeThumb.disabled) {\r\n      this.#activeThumb.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement) as\r\n      | M3eSliderThumbElement\r\n      | undefined;\r\n\r\n    if (!this.#activeThumb) return;\r\n\r\n    const value = this.#activeThumb.value ?? 0;\r\n\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.max(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"Home\":\r\n        this.#changeThumb(this.#activeThumb, min);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"End\":\r\n        this.#changeThumb(this.#activeThumb, max);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageUp\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageDown\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        }\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n\r\n        break;\r\n\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \" \":\r\n        e.preventDefault();\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleThumbChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.#updateThumbs();\r\n    this.#updateDimensions();\r\n  }\r\n\r\n  /** @private */\r\n  #changeThumb(thumb: M3eSliderThumbElement, value: number, animate = false): void {\r\n    if (thumb.value === value) return;\r\n    const prev = thumb.value;\r\n    if (animate && !prefersReducedMotion()) {\r\n      addCustomState(this, \"--animating\");\r\n      thumb.addEventListener(\r\n        \"transitionend\",\r\n        () => {\r\n          thumb.style.transition = \"\";\r\n          deleteCustomState(this, \"--animating\");\r\n        },\r\n        { once: true },\r\n      );\r\n      thumb.style.transition = `transform ${DesignToken.motion.spring.fastEffects}`;\r\n    }\r\n    thumb.value = value;\r\n    thumb.markAsDirty();\r\n    thumb.markAsTouched();\r\n    if (thumb.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      thumb.dispatchEvent(new Event(\"change\", { bubbles: true, composed: true }));\r\n    } else {\r\n      thumb.value = prev;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider\": M3eSliderElement;\r\n  }\r\n}\r\n"],"names":["M3eSliderThumbElement","Dirty","Touched","FormAssociated","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","this","value","_M3eSliderThumbElement_instances","WeakSet","formValue","toString","focus","options","_focusRing","disabled","super","firstUpdated","_changedProperties","attach","update","changedProperties","has","dispatchEvent","Event","bubbles","render","html","__classPrivateFieldGet","_M3eSliderThumbElement_labelText_get","closest","displayWith","styles","css","DesignToken","shape","corner","full","unsafeCSS","motion","duration","short3","easing","standard","color","inverseSurface","inverseOnSurface","typescale","label","medium","fontSize","fontWeight","lineHeight","tracking","short2","primary","onSurface","__decorate","query","prototype","property","type","Number","reflect","customElement","M3eSliderElement","_M3eSliderElement_directionalitySubscription","set","_ticks","Array","_M3eSliderElement_thumbs","_M3eSliderElement_activeThumb","_M3eSliderElement_cachedWidth","_M3eSliderElement_cachedThumbWidth","_M3eSliderElement_cachedLeft","size","discrete","min","max","step","labelled","ResizeController","callback","_M3eSliderElement_instances","_M3eSliderElement_updateDimensions","thumbs","isRange","length","thumb","lowerThumb","upperThumb","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","call","requestUpdate","disconnectedCallback","updated","forEach","x","ifDefined","undefined","_M3eSliderElement_handlePointerDown","_M3eSliderElement_handlePointerMove","_M3eSliderElement_handlePointerUp","_M3eSliderElement_handleKeyDown","_M3eSliderElement_handleThumbChange","map","_M3eSliderElement_renderTick","_M3eSliderElement_handleSlotChange","tick","active","safeStyleMap","transform","current","_M3eSliderElement_pointFromValue","e","target","assignedElements","flatten","filter","_base","style","setProperty","removeProperty","_M3eSliderElement_updateThumbs","i","ariaValueMin","ariaValueMax","ariaValueNow","pos","clientX","numSteps","Math","floor","percentage","impreciseValue","round","_M3eSliderElement_updateCachedDimensions","force","clientWidth","getBoundingClientRect","left","lowerValue","lowerPos","upperValue","upperPos","classList","toggle","_M3eSliderElement_updateTicks","push","pointerType","button","HTMLElement","setPointerCapture","pointerId","composedPath","find","_M3eSliderElement_valueFromPoint","_M3eSliderElement_changeThumb","hasPointerCapture","hasCustomState","deleteCustomState","transition","releasePointerCapture","key","preventDefault","stopPropagation","animate","prev","prefersReducedMotion","addCustomState","addEventListener","once","spring","fastEffects","markAsDirty","markAsTouched","composed","cancelable","smallStart","smallEnd","mediumStart","mediumEnd","largeStart","largeEnd","extraLargeStart","extraLargeEnd","secondaryContainer","onPrimary","onSecondaryContainer","state","Boolean","attribute"],"mappings":"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"}

package/dist/split-pane.js

@@ -99,7 +99,7 @@ let M3eSplitPaneElement = class M3eSplitPaneElement extends FormAssociated(Disab
       target: null,
       isPressedKey: key => key === " ",
       minPressedDuration: 150,
-      callback: pressed => setCustomState(this, "-pressed", pressed && !this.disabled)
+      callback: pressed => setCustomState(this, "--pressed", pressed && !this.disabled)
     }));
     /** @private */
     _M3eSplitPaneElement_startMutationController.set(this, new MutationController(this, {
@@ -262,10 +262,10 @@ _M3eSplitPaneElement_renderDragHandle = function _M3eSplitPaneElement_renderDrag
   return html`<div id="drag-handle" class="drag-handle" role="separator" tabindex="${ifDefined(this.disabled ? undefined : 0)}" aria-label="${this.label}" aria-controls="start" aria-disabled="${ifDefined(this.disabled ? "true" : undefined)}" aria-orientation="${this.currentOrientation === "horizontal" ? "vertical" : "horizontal"}" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}" aria-valuetext="${ifDefined(this.valueFormatter?.(this.value, this.currentOrientation, M3eDirectionality.current))}" @pointerdown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerDown)}" @pointerup="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerUp)}" @pointermove="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handlePointerMove)}" @keydown="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleKeyDown)}" @dblclick="${__classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_cycleDetent)}">${this.disabled ? nothing : html`<div class="handle"><m3e-focus-ring for="drag-handle"></m3e-focus-ring><m3e-state-layer for="drag-handle"></m3e-state-layer></div><div class="touch"></div>`}</div>`;
 };
 _M3eSplitPaneElement_handleStartSlotChange = function _M3eSplitPaneElement_handleStartSlotChange(e) {
-  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_startMutationController, "f"), "-with-start");
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_startMutationController, "f"), "--with-start");
 };
 _M3eSplitPaneElement_handleEndSlotChange = function _M3eSplitPaneElement_handleEndSlotChange(e) {
-  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_endMutationController, "f"), "-with-end");
+  __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_handleSlotChange).call(this, e.target, __classPrivateFieldGet(this, _M3eSplitPaneElement_endMutationController, "f"), "--with-end");
 };
 _M3eSplitPaneElement_handleSlotChange = function _M3eSplitPaneElement_handleSlotChange(slot, mutationController, state) {
   for (const target of mutationController.targets) {
@@ -280,7 +280,7 @@ _M3eSplitPaneElement_handleSlotChange = function _M3eSplitPaneElement_handleSlot
   }
 };
 _M3eSplitPaneElement_updatePaneVisibility = function _M3eSplitPaneElement_updatePaneVisibility(pane) {
-  setCustomState(this, `-with-${pane}`, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, this.shadowRoot?.querySelector(`slot[name='${pane}']`)));
+  setCustomState(this, `--with-${pane}`, __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_hasVisibleElements).call(this, this.shadowRoot?.querySelector(`slot[name='${pane}']`)));
 };
 _M3eSplitPaneElement_hasVisibleElements = function _M3eSplitPaneElement_hasVisibleElements(slot, assignedElements) {
   assignedElements = assignedElements ?? [];
@@ -299,10 +299,10 @@ _M3eSplitPaneElement_initBreakpointMonitoring = function _M3eSplitPaneElement_in
   }), "f");
 };
 _M3eSplitPaneElement_updateOrientation = function _M3eSplitPaneElement_updateOrientation() {
-  setCustomState(this, "-vertical", this.currentOrientation === "vertical");
+  setCustomState(this, "--vertical", this.currentOrientation === "vertical");
 };
 _M3eSplitPaneElement_clearOrientation = function _M3eSplitPaneElement_clearOrientation() {
-  deleteCustomState(this, "-vertical");
+  deleteCustomState(this, "--vertical");
   this._orientation = undefined;
   __classPrivateFieldGet(this, _M3eSplitPaneElement_breakpointUnobserve, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eSplitPaneElement_breakpointUnobserve, undefined, "f");
@@ -594,7 +594,7 @@ _M3eSplitPaneElement_snapToValue = function _M3eSplitPaneElement_snapToValue(val
   value = Math.max(this.min, Math.min(this.max, value));
   if (value === this.value) return;
   if (!prefersReducedMotion()) {
-    addCustomState(this, "-animating");
+    addCustomState(this, "--animating");
     __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, this._base.animate([{
       "--_split-pane-value": `${this.value}%`
     }, {
@@ -606,7 +606,7 @@ _M3eSplitPaneElement_snapToValue = function _M3eSplitPaneElement_snapToValue(val
     __classPrivateFieldGet(this, _M3eSplitPaneElement_snapAnimation, "f").onfinish = () => {
       __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
       __classPrivateFieldSet(this, _M3eSplitPaneElement_snapAnimation, undefined, "f");
-      deleteCustomState(this, "-animating");
+      deleteCustomState(this, "--animating");
     };
   } else {
     __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_changeValue).call(this, value, emitChange);
@@ -630,8 +630,8 @@ _M3eSplitPaneElement_cycleDetent = function _M3eSplitPaneElement_cycleDetent() {
   registerStyleSheet(css`@property --_split-pane-value { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }</length-percentage>`);
 })();
 /** The styles of the element. */
-M3eSplitPaneElement.styles = css`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:state(-vertical))) .base { flex-direction: row; } :host(:state(-vertical)) .base { flex-direction: column; } :host(:state(-with-start):state(-with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:state(-with-end))) .start { flex: 1 1 auto; } :host(:state(-with-end)) .end { flex: 1 1 auto; } :host(:not(:state(-with-end))) .end { display: none; } :host(:not(:state(-animating))) .start[inert], :host(:not(:state(-animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:state(-with-start)), :not(:state(-with-end)))) .drag-handle { display: none; } :host(:not(:state(-pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:state(-pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-        width ${DesignToken.motion.spring.fastEffects}, height ${DesignToken.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:state(-pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken.shape.corner.full}); } :host(:state(-pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken.shape.corner.medium}); } :host(:not(:state(-vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:state(-vertical)):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:state(-vertical)):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:state(-vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:state(-vertical):not(:state(-pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:state(-vertical):state(-pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:state(-pressed)) .handle, :host(:not(:state(-pressed))) .handle { background-color: ButtonText; } }`;
+M3eSplitPaneElement.styles = css`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:is(:state(--vertical), :--vertical))) .base { flex-direction: row; } :host(:is(:state(--vertical), :--vertical)) .base { flex-direction: column; } :host(:is(:state(--with-start), :--with-start):is(:state(--with-end), :--with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:is(:state(--with-end), :--with-end))) .start { flex: 1 1 auto; } :host(:is(:state(--with-end), :--with-end)) .end { flex: 1 1 auto; } :host(:not(:is(:state(--with-end), :--with-end))) .end { display: none; } :host(:not(:is(:state(--animating), :--animating))) .start[inert], :host(:not(:is(:state(--animating), :--animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:is(:state(--with-start), :--with-start)), :not(:is(:state(--with-end), :--with-end)))) .drag-handle { display: none; } :host(:not(:is(:state(--pressed), :--pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:is(:state(--pressed), :--pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+        width ${DesignToken.motion.spring.fastEffects}, height ${DesignToken.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken.shape.corner.full}); } :host(:is(:state(--pressed), :--pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken.shape.corner.medium}); } :host(:not(:is(:state(--vertical), :--vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:is(:state(--vertical), :--vertical)):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:is(:state(--vertical), :--vertical)):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:is(:state(--vertical), :--vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:is(:state(--vertical), :--vertical):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:is(:state(--vertical), :--vertical):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:is(:state(--pressed), :--pressed)) .handle, :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: ButtonText; } }`;
 __decorate([state()], M3eSplitPaneElement.prototype, "_orientation", void 0);
 __decorate([query(".base")], M3eSplitPaneElement.prototype, "_base", void 0);
 __decorate([query(".drag-handle")], M3eSplitPaneElement.prototype, "_dragHandle", void 0);