@ixfx/components 0.5.20 → 0.6.0

package/dist/range-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input.js","names":["customElement"],"sources":["../src/range-input/range-input.ts"],"sourcesContent":["/**\n * <ixfx-range-input> — styled range input with no label.\n *\n * A thin wrapper around <input type=\"range\"> that adds the same\n * fancy track/thumb/fill styling as the linear-value components,\n * without the label display.\n *\n * Supports horizontal (default) and vertical orientation in a single element.\n * Set orientation=\"vertical\" attribute to switch.\n *\n * CSS Variables:\n *   --track-thickness            Track cross-axis size (default 1.5em)\n *   --thumb-color                Thumb fill (default var(--surface-2-text))\n *   --thumb-color-active         Thumb fill on hover/active (default var(--accent))\n *   --thumb-size                 Thumb cross-axis size (default var(--track-thickness))\n *   --thumb-thickness            Thumb inline size (default 2em)\n *   --thumb-radius               Thumb border-radius (default 0)\n *   --thumb-border               Thumb border (default none)\n *   --thumb-shadow               Thumb box-shadow (default none)\n *   --background-track           Unfilled track background (default var(--surface-4))\n *   --background-track-hover     Unfilled track on hover (default --background-track)\n *   --background-track-value     Filled track color (default var(--surface-6))\n *   --background-track-value-hover   Filled track on hover (default var(--accent))\n *   --background-track-value-active  Filled track on active (default var(--accent))\n *\n * Optional vertical-specific overrides (fall back to horizontal vars when unset):\n *   --background-track-vertical\n *   --background-track-value-vertical\n *   --background-track-value-hover-vertical\n *   --background-track-value-active-vertical\n *\n * Tooltip:\n *   tooltip               Boolean attribute — enables value tooltip on hover/focus\n *   tooltip-orientation   'top' (default) | 'right'\n *   labelFormatter        Function property (not attribute): (rawValue: number, scaledValue: number) => string\n *                         rawValue  = native input value within min..max\n *                         scaledValue = normalised 0..1 position\n *\n * Swipeable mode:\n *   swipeable   Boolean attribute — enables swipe-to-draw gesture.\n *               When active, pressing down on the slider or entering it while the\n *               pointer is pressed sets the value from the cursor coordinate.\n *               Pointer capture is NOT held, so the cursor can move to adjacent\n *               swipeable sliders and update them too (step-sequencer style).\n *               Kill-axis exit (above/below for horizontal, left/right for vertical)\n *               freezes the value; re-entering re-engages.\n *\n * Wheel:\n *   lighttouch  Boolean attribute — wheel adjusts the value on hover instead\n *               of requiring focus. The native `<input type=\"range\">` inside\n *               already responds to wheel when focused; the host listener\n *               fires under `lighttouch` (or when focus is on the host) and\n *               synthesises a value change via `input`/`change` events.\n *               See `docs/infra-mousewheel.md`.\n *\n * Events:\n *   input  — CustomEvent<{ value: number }>\n *   change — CustomEvent<{ value: number }>\n *             In swipeable mode fires on pointerleave (or pointerup if released\n *             while still inside). In normal mode delegates to native change.\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\nimport type { TooltipElement, TooltipOrientations } from '../util/tooltip.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { tooltipValueStyles } from '../styles/tooltip.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nfunction normalize(value: number, min: number, max: number): number {\n  return max === min ? 0 : (value - min) / (max - min);\n}\n\n@customElement(`ixfx-range-input`)\nexport class RangeInput extends WheelNudgeMixin(LitElement) {\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1;\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) step = 0.01;\n  @property({ type: String, reflect: true }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: Boolean, reflect: true }) swipeable = false;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: TooltipOrientations = `top`;\n  @property({ attribute: false }) labelFormatter?: (rawValue: number, scaledValue: number) => string;\n\n  @query(`input`)\n  _inputEl!: HTMLInputElement;\n\n  @query(`ixfx-tooltip`)\n  _tooltipEl?: TooltipElement | null;\n\n  /** True if this slider changed its value during the current pointer visit. */\n  private _swipeModified = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointerdown`, this._onPointerDown);\n    this.addEventListener(`pointermove`, this._onPointerMove);\n    this.addEventListener(`pointerenter`, this._onPointerEnter);\n    this.addEventListener(`pointerleave`, this._onPointerLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointerdown`, this._onPointerDown);\n    this.removeEventListener(`pointermove`, this._onPointerMove);\n    this.removeEventListener(`pointerenter`, this._onPointerEnter);\n    this.removeEventListener(`pointerleave`, this._onPointerLeave);\n    window.removeEventListener(`pointerup`, this._onWindowPointerUp);\n  }\n\n  private _valueFromPointer(e: PointerEvent): number {\n    const rect = this.getBoundingClientRect();\n    // vertical: top = max, bottom = min (writing-mode: vertical-rl; direction: rtl)\n    const normalized = this.orientation === `vertical`\n      ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))\n      : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const raw = this.min + normalized * (this.max - this.min);\n    const snapped = Math.round((raw - this.min) / this.step) * this.step + this.min;\n    return Math.max(this.min, Math.min(this.max, snapped));\n  }\n\n  private _applySwipeValue(value: number): void {\n    this.value = value;\n    if (this._inputEl)\n      this._inputEl.value = String(value);\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n    this._swipeModified = true;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (!this.swipeable)\n      return;\n    e.preventDefault();\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._applySwipeValue(this._valueFromPointer(e));\n  };\n\n  private _onPointerEnter = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerLeave = (_e: PointerEvent): void => {\n    if (!this.swipeable || !this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  private _onWindowPointerUp = (): void => {\n    if (!this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has(`value`) || changedProperties.has(`min`) || changedProperties.has(`max`)) {\n      this.style.setProperty(`--value`, String(normalize(this.value, this.min, this.max)));\n    }\n    if (this._tooltipEl) {\n      this._tooltipEl.valueFormatTooltip = (v: unknown) => {\n        const num = typeof v === `number` ? v : Number(v);\n        if (this.labelFormatter)\n          return this.labelFormatter(num, normalize(num, this.min, this.max));\n        const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n        return num.toFixed(decimals);\n      };\n    }\n  }\n\n  _handleInput = (e: Event): void => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    const target = e.target as HTMLInputElement;\n    const value = Number.parseFloat(target.value);\n    this.value = value;\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  _formatTooltipLabel(): string {\n    const normalized = normalize(this.value, this.min, this.max);\n    if (this.labelFormatter)\n      return this.labelFormatter(this.value, normalized);\n    const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n    return this.value.toFixed(decimals);\n  }\n\n  _handleChange = (): void => {\n    const value = Number.parseFloat(this._inputEl.value);\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  /**\n   * Wheel handler — installed by WheelNudgeMixin on the host. Synthesises a\n   * value change by writing to the inner `<input type=\"range\">` and dispatching\n   * `input` + `change`, so the existing `_handleInput` and `_handleChange`\n   * handlers run unchanged and re-bubble the events to listeners.\n   *\n   * Native wheel handling is left intact for the focused-inner-input case;\n   * the host listener fires under `lighttouch` or when focus is on the host.\n   */\n  override _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void {\n    const input = this._inputEl;\n    if (!input)\n      return;\n    const step = this.step > 0 ? this.step : Math.max((this.max - this.min) / 100, 0.01);\n    const candidate = this.value + direction * step;\n    const clamped = Math.min(this.max, Math.max(this.min, candidate));\n    if (clamped === this.value)\n      return;\n\n    input.value = String(clamped);\n    input.dispatchEvent(new Event(`input`, { bubbles: true }));\n    input.dispatchEvent(new Event(`change`, { bubbles: true }));\n  }\n\n  override render() {\n    const tooltipEl = this.tooltip\n      ? html`\n      <ixfx-tooltip\n        style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n        .orientation=${this.tooltipOrientation}\n        anchor=\"--ixfx-ri-thumb\"\n        .value=${this.value}\n      ></ixfx-tooltip>\n    `\n      : nothing;\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"range-bg\"></div>\n        <input\n          type=\"range\"\n          .min=${String(this.min)}\n          .max=${String(this.max)}\n          .step=${String(this.step)}\n          .value=${String(this.value)}\n          @input=${this._handleInput}\n          @change=${this._handleChange}\n        >${tooltipEl}\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, tooltipValueStyles, css`\n    :host {\n      display: block;\n      container-type: size;\n      user-select: none;\n      touch-action: none;\n      -webkit-touch-action: none;\n      width: var(--width, 200px);\n      height: var(--height, 2em);\n\n      /*\n       * Internal resolved vars — read public vars and apply defaults here.\n       * Public vars are NOT defined in :host {}, only read via fallback.\n       * This lets inherited values from ancestor elements flow through.\n       */\n      --_track-thickness: var(--track-thickness, 100%);\n      --_thumb-thickness: var(--thumb-thickness, 2em);\n      --_thumb-color: var(--thumb-color, var(--surface-2-text));\n      --_thumb-color-active: var(--thumb-color-active, var(--surface-2-text));\n      --_thumb-opacity: var(--thumb-opacity, 0.7);\n      --_thumb-opacity-hover: var(--thumb-opacity-hover, 0.8);\n      --_thumb-opacity-active: var(--thumb-opacity-active, 1); \n      --_thumb-size: var(--thumb-size, var(--_track-thickness));\n      --_thumb-radius: var(--thumb-radius, 0);\n      --_thumb-border: var(--thumb-border, none);\n      --_thumb-shadow: var(--thumb-shadow, none);\n      --_track-radius: var(--track-radius, none);\n      --_track-corner-shape: var(--track-corner-shape, none);\n      --_bg-track: var(--background-track, var(--surface-4));\n      --_bg-track-hover: var(--background-track-hover, var(--_bg-track));\n      --_bg-track-value: var(--background-track-value, var(--surface-6));\n      --_bg-track-value-hover: var(--background-track-value-hover, var(--accent));\n      --_bg-track-value-active: var(--background-track-value-active, var(--accent));\n\n      --value: 0;\n      --sx1: calc(var(--_thumb-thickness) + var(--value) * (100% - var(--_thumb-thickness)));\n      --track-avail: calc(100% - var(--_thumb-thickness));\n      --sx: calc(var(--_thumb-thickness) + (var(--value) * var(--track-avail)));\n      --track-mask: linear-gradient(to right, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n      --track-mask-vertical: linear-gradient(to top, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n    }\n\n    :host([orientation=\"vertical\"]) {\n      width: var(--width, 2em);\n      height: var(--height, 200px);\n    }\n\n    .wrap {\n      display: grid;\n      width: 100%;\n      height: 100%;\n    }\n\n    .wrap > * {\n      grid-area: 1 / 1;\n    }\n\n    .range-bg {\n      background: var(--_bg-track);\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    .wrap:hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    input[type=range] {\n      margin: 0;\n      padding: 0;\n      -webkit-appearance: none;\n      background: unset;\n      box-shadow: none;\n      width: 100%;\n      height: var(--_track-thickness);\n      align-self: center;\n    }\n\n    input[type=range]:focus {\n      outline: none;\n    }\n\n    /* Vertical layout */\n    :host([orientation=\"vertical\"]) .range-bg {\n      background: var(--background-track-vertical, var(--_bg-track));\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    :host([orientation=\"vertical\"]) .wrap:hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range] {\n      writing-mode: vertical-rl;\n      direction: rtl;\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    /* ── Webkit thumb ── */\n    input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      opacity: var(--_thumb-opacity);\n      box-sizing: border-box;\n      anchor-name: --ixfx-ri-thumb;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n      margin-top: calc(max((var(--_thumb-thickness) - 1px - 1px) * 0.5, 0px) - var(--_thumb-thickness) * 0.5);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n      margin-top: 0;\n      margin-left: calc(max((1em - 1px - 1px) * 0.5, 0px) - 1.2em * 0.5);\n    }\n\n    input[type=range]::-webkit-slider-thumb:hover {\n      opacity: var(--_thumb-opacity-hover);\n    }\n\n    input[type=range]::-webkit-slider-thumb:active {\n      opacity: var(--_thumb-opacity-active);\n    }\n    input[type=range]::-webkit-slider-thumb:hover,\n    input[type=range]::-webkit-slider-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Webkit track ── */\n    input[type=range]::-webkit-slider-runnable-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      width: var(--_track-thickness);\n      height: unset;\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Mozilla thumb ── */\n    input[type=range]::-moz-range-thumb {\n      box-sizing: border-box;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n    }\n\n    input[type=range]::-moz-range-thumb:hover,\n    input[type=range]::-moz-range-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Mozilla track ── */\n    input[type=range]::-moz-range-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    input[type=range]:hover::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-moz-range-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      height: unset;\n      width: var(--_track-thickness);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-moz-range-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Swipeable mode ── */\n    /* Disable native pointer capture so the cursor can move freely between sliders */\n    :host([swipeable]) input {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, disable pointer events on wrap so host receives hover */\n    :host([swipeable]) .wrap {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, use host hover to trigger track/thumb hover styles */\n    :host([swipeable]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-webkit-slider-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-range-input': RangeInput;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"range-input.js","names":["customElement"],"sources":["../src/range-input/range-input.ts"],"sourcesContent":["/**\n * <ixfx-range-input> — styled range input with no label.\n *\n * A thin wrapper around <input type=\"range\"> that adds the same\n * fancy track/thumb/fill styling as the linear-value components,\n * without the label display.\n *\n * Supports horizontal (default) and vertical orientation in a single element.\n * Set orientation=\"vertical\" attribute to switch.\n *\n * CSS Variables:\n *   --track-thickness            Track cross-axis size (default 1.5em)\n *   --thumb-color                Thumb fill (default var(--surface-2-text))\n *   --thumb-color-active         Thumb fill on hover/active (default var(--accent))\n *   --thumb-size                 Thumb cross-axis size (default var(--track-thickness))\n *   --thumb-thickness            Thumb inline size (default 2em)\n *   --thumb-radius               Thumb border-radius (default 0)\n *   --thumb-border               Thumb border (default none)\n *   --thumb-shadow               Thumb box-shadow (default none)\n *   --background-track           Unfilled track background (default var(--surface-4))\n *   --background-track-hover     Unfilled track on hover (default --background-track)\n *   --background-track-value     Filled track color (default var(--surface-6))\n *   --background-track-value-hover   Filled track on hover (default var(--accent))\n *   --background-track-value-active  Filled track on active (default var(--accent))\n *\n * Optional vertical-specific overrides (fall back to horizontal vars when unset):\n *   --background-track-vertical\n *   --background-track-value-vertical\n *   --background-track-value-hover-vertical\n *   --background-track-value-active-vertical\n *\n * Tooltip:\n *   tooltip               Boolean attribute — enables value tooltip on hover/focus\n *   tooltip-orientation   'top' (default) | 'right'\n *   labelFormatter        Function property (not attribute): (rawValue: number, scaledValue: number) => string\n *                         rawValue  = native input value within min..max\n *                         scaledValue = normalised 0..1 position\n *\n * Swipeable mode:\n *   swipeable   Boolean attribute — enables swipe-to-draw gesture.\n *               When active, pressing down on the slider or entering it while the\n *               pointer is pressed sets the value from the cursor coordinate.\n *               Pointer capture is NOT held, so the cursor can move to adjacent\n *               swipeable sliders and update them too (step-sequencer style).\n *               Kill-axis exit (above/below for horizontal, left/right for vertical)\n *               freezes the value; re-entering re-engages.\n *\n * Wheel:\n *   lighttouch  Boolean attribute — wheel adjusts the value on hover instead\n *               of requiring focus. The native `<input type=\"range\">` inside\n *               already responds to wheel when focused; the host listener\n *               fires under `lighttouch` (or when focus is on the host) and\n *               synthesises a value change via `input`/`change` events.\n *               See `docs/infra-mousewheel.md`.\n *\n * Events:\n *   input  — CustomEvent<{ value: number }>\n *   change — CustomEvent<{ value: number }>\n *             In swipeable mode fires on pointerleave (or pointerup if released\n *             while still inside). In normal mode delegates to native change.\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\nimport type { TooltipElement, TooltipOrientations } from '../util/tooltip.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { tooltipValueStyles } from '../styles/tooltip.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nfunction normalize(value: number, min: number, max: number): number {\n  return max === min ? 0 : (value - min) / (max - min);\n}\n\n@customElement(`ixfx-range-input`)\nexport class RangeInput extends WheelNudgeMixin(LitElement) {\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1;\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) step = 0.01;\n  @property({ type: String, reflect: true }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: Boolean, reflect: true }) swipeable = false;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: TooltipOrientations = `top`;\n  @property({ attribute: false }) labelFormatter?: (rawValue: number, scaledValue: number) => string;\n\n  @query(`input`)\n  _inputEl!: HTMLInputElement;\n\n  @query(`ixfx-tooltip`)\n  _tooltipEl?: TooltipElement | null;\n\n  /** True if this slider changed its value during the current pointer visit. */\n  private _swipeModified = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointerdown`, this._onPointerDown);\n    this.addEventListener(`pointermove`, this._onPointerMove);\n    this.addEventListener(`pointerenter`, this._onPointerEnter);\n    this.addEventListener(`pointerleave`, this._onPointerLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointerdown`, this._onPointerDown);\n    this.removeEventListener(`pointermove`, this._onPointerMove);\n    this.removeEventListener(`pointerenter`, this._onPointerEnter);\n    this.removeEventListener(`pointerleave`, this._onPointerLeave);\n    window.removeEventListener(`pointerup`, this._onWindowPointerUp);\n  }\n\n  private _valueFromPointer(e: PointerEvent): number {\n    const rect = this.getBoundingClientRect();\n    // vertical: top = max, bottom = min (writing-mode: vertical-rl; direction: rtl)\n    const normalized = this.orientation === `vertical`\n      ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))\n      : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const raw = this.min + normalized * (this.max - this.min);\n    const snapped = Math.round((raw - this.min) / this.step) * this.step + this.min;\n    return Math.max(this.min, Math.min(this.max, snapped));\n  }\n\n  private _applySwipeValue(value: number): void {\n    this.value = value;\n    if (this._inputEl)\n      this._inputEl.value = String(value);\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n    this._swipeModified = true;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (!this.swipeable)\n      return;\n    e.preventDefault();\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._applySwipeValue(this._valueFromPointer(e));\n  };\n\n  private _onPointerEnter = (e: PointerEvent): void => {\n    if (!this.swipeable || e.buttons === 0)\n      return;\n    this._swipeModified = false;\n    this._applySwipeValue(this._valueFromPointer(e));\n    window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });\n  };\n\n  private _onPointerLeave = (_e: PointerEvent): void => {\n    if (!this.swipeable || !this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  private _onWindowPointerUp = (): void => {\n    if (!this._swipeModified)\n      return;\n    this._swipeModified = false;\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));\n  };\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has(`value`) || changedProperties.has(`min`) || changedProperties.has(`max`)) {\n      this.style.setProperty(`--value`, String(normalize(this.value, this.min, this.max)));\n    }\n    if (this._tooltipEl) {\n      this._tooltipEl.valueFormatTooltip = (v: unknown) => {\n        const num = typeof v === `number` ? v : Number(v);\n        if (this.labelFormatter)\n          return this.labelFormatter(num, normalize(num, this.min, this.max));\n        const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n        return num.toFixed(decimals);\n      };\n    }\n  }\n\n  _handleInput = (e: Event): void => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    const target = e.target as HTMLInputElement;\n    const value = Number.parseFloat(target.value);\n    this.value = value;\n    this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));\n    this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  _formatTooltipLabel(): string {\n    const normalized = normalize(this.value, this.min, this.max);\n    if (this.labelFormatter)\n      return this.labelFormatter(this.value, normalized);\n    const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;\n    return this.value.toFixed(decimals);\n  }\n\n  _handleChange = (): void => {\n    const value = Number.parseFloat(this._inputEl.value);\n    this.dispatchEvent(new CustomEvent(`change`, { detail: { value }, bubbles: true, composed: true }));\n  };\n\n  /**\n   * Wheel handler — installed by WheelNudgeMixin on the host. Synthesises a\n   * value change by writing to the inner `<input type=\"range\">` and dispatching\n   * `input` + `change`, so the existing `_handleInput` and `_handleChange`\n   * handlers run unchanged and re-bubble the events to listeners.\n   *\n   * Native wheel handling is left intact for the focused-inner-input case;\n   * the host listener fires under `lighttouch` or when focus is on the host.\n   */\n  override _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void {\n    const input = this._inputEl;\n    if (!input)\n      return;\n    const step = this.step > 0 ? this.step : Math.max((this.max - this.min) / 100, 0.01);\n    const candidate = this.value + direction * step;\n    const clamped = Math.min(this.max, Math.max(this.min, candidate));\n    if (clamped === this.value)\n      return;\n\n    input.value = String(clamped);\n    input.dispatchEvent(new Event(`input`, { bubbles: true }));\n    input.dispatchEvent(new Event(`change`, { bubbles: true }));\n  }\n\n  override render() {\n    const tooltipEl = this.tooltip\n      ? html`\n      <ixfx-tooltip\n        style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n        .orientation=${this.tooltipOrientation}\n        anchor=\"--ixfx-ri-thumb\"\n        .value=${this.value}\n      ></ixfx-tooltip>\n    `\n      : nothing;\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"range-bg\"></div>\n        <input\n          type=\"range\"\n          .min=${String(this.min)}\n          .max=${String(this.max)}\n          .step=${String(this.step)}\n          .value=${String(this.value)}\n          @input=${this._handleInput}\n          @change=${this._handleChange}\n        >${tooltipEl}\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, tooltipValueStyles, css`\n    :host {\n      display: block;\n      container-type: size;\n      user-select: none;\n      touch-action: none;\n      -webkit-touch-action: none;\n      width: var(--width, 200px);\n      height: var(--height, 2em);\n\n      /*\n       * Internal resolved vars — read public vars and apply defaults here.\n       * Public vars are NOT defined in :host {}, only read via fallback.\n       * This lets inherited values from ancestor elements flow through.\n       */\n      --_track-thickness: var(--track-thickness, 100%);\n      --_thumb-thickness: var(--thumb-thickness, 2em);\n      --_thumb-color: var(--thumb-color, var(--surface-2-text));\n      --_thumb-color-active: var(--thumb-color-active, var(--surface-2-text));\n      --_thumb-opacity: var(--thumb-opacity, 0.7);\n      --_thumb-opacity-hover: var(--thumb-opacity-hover, 0.8);\n      --_thumb-opacity-active: var(--thumb-opacity-active, 1); \n      --_thumb-size: var(--thumb-size, var(--_track-thickness));\n      --_thumb-radius: var(--thumb-radius, 0);\n      --_thumb-border: var(--thumb-border, none);\n      --_thumb-shadow: var(--thumb-shadow, none);\n      --_track-radius: var(--track-radius, none);\n      --_track-corner-shape: var(--track-corner-shape, none);\n      --_bg-track: var(--background-track, var(--surface-4));\n      --_bg-track-hover: var(--background-track-hover, var(--_bg-track));\n      --_bg-track-value: var(--background-track-value, var(--surface-6));\n      --_bg-track-value-hover: var(--background-track-value-hover, var(--accent));\n      --_bg-track-value-active: var(--background-track-value-active, var(--accent));\n\n      --value: 0;\n      --sx1: calc(var(--_thumb-thickness) + var(--value) * (100% - var(--_thumb-thickness)));\n      --track-avail: calc(100% - var(--_thumb-thickness));\n      --sx: calc(var(--_thumb-thickness) + (var(--value) * var(--track-avail)));\n      --track-mask: linear-gradient(to right, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n      --track-mask-vertical: linear-gradient(to top, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);\n    }\n\n    :host([orientation=\"vertical\"]) {\n      width: var(--width, 2em);\n      height: var(--height, 200px);\n    }\n\n    .wrap {\n      display: grid;\n      width: 100%;\n      height: 100%;\n    }\n\n    .wrap > * {\n      grid-area: 1 / 1;\n    }\n\n    .range-bg {\n      background: var(--_bg-track);\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    .wrap:hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    input[type=range] {\n      margin: 0;\n      padding: 0;\n      -webkit-appearance: none;\n      background: unset;\n      box-shadow: none;\n      width: 100%;\n      height: var(--_track-thickness);\n      align-self: center;\n    }\n\n    input[type=range]:focus {\n      outline: none;\n    }\n\n    /* Vertical layout */\n    :host([orientation=\"vertical\"]) .range-bg {\n      background: var(--background-track-vertical, var(--_bg-track));\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    :host([orientation=\"vertical\"]) .wrap:hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range] {\n      writing-mode: vertical-rl;\n      direction: rtl;\n      width: var(--_track-thickness);\n      height: 100%;\n      justify-self: center;\n    }\n\n    /* ── Webkit thumb ── */\n    input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      opacity: var(--_thumb-opacity);\n      box-sizing: border-box;\n      anchor-name: --ixfx-ri-thumb;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n      margin-top: calc(max((var(--_thumb-thickness) - 1px - 1px) * 0.5, 0px) - var(--_thumb-thickness) * 0.5);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n      margin-top: 0;\n      margin-left: calc(max((1em - 1px - 1px) * 0.5, 0px) - 1.2em * 0.5);\n    }\n\n    input[type=range]::-webkit-slider-thumb:hover {\n      opacity: var(--_thumb-opacity-hover);\n    }\n\n    input[type=range]::-webkit-slider-thumb:active {\n      opacity: var(--_thumb-opacity-active);\n    }\n    input[type=range]::-webkit-slider-thumb:hover,\n    input[type=range]::-webkit-slider-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Webkit track ── */\n    input[type=range]::-webkit-slider-runnable-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n      border-radius: var(--_track-radius);\n      corner-shape: var(--_track-corner-shape);\n    }\n\n    input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      width: var(--_track-thickness);\n      height: unset;\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-webkit-slider-runnable-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Mozilla thumb ── */\n    input[type=range]::-moz-range-thumb {\n      box-sizing: border-box;\n      width: var(--_thumb-thickness);\n      height: var(--_thumb-size);\n      border-radius: var(--_thumb-radius);\n      background: var(--_thumb-color);\n      border: var(--_thumb-border);\n      box-shadow: var(--_thumb-shadow);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-thumb {\n      width: var(--_thumb-size);\n      height: var(--_thumb-thickness);\n    }\n\n    input[type=range]::-moz-range-thumb:hover,\n    input[type=range]::-moz-range-thumb:active {\n      background: var(--_thumb-color-active);\n    }\n\n    /* ── Mozilla track ── */\n    input[type=range]::-moz-range-track {\n      height: var(--_track-thickness);\n      background: var(--_bg-track-value);\n      mask-image: var(--track-mask);\n      box-shadow: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    input[type=range]:hover::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n      mask-image: var(--track-mask);\n    }\n\n    input[type=range]:active::-moz-range-track {\n      background: var(--_bg-track-value-active);\n      mask-image: var(--track-mask);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]::-moz-range-track {\n      background: var(--background-track-value-vertical, var(--_bg-track-value));\n      mask-image: var(--track-mask-vertical);\n      height: unset;\n      width: var(--_track-thickness);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:hover::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    :host([orientation=\"vertical\"]) input[type=range]:active::-moz-range-track {\n      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));\n      mask-image: var(--track-mask-vertical);\n    }\n\n    /* ── Swipeable mode ── */\n    /* Disable native pointer capture so the cursor can move freely between sliders */\n    :host([swipeable]) input {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, disable pointer events on wrap so host receives hover */\n    :host([swipeable]) .wrap {\n      pointer-events: none;\n    }\n\n    /* In swipeable mode, use host hover to trigger track/thumb hover styles */\n    :host([swipeable]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-webkit-slider-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-webkit-slider-runnable-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-track {\n      background: var(--_bg-track-value-hover);\n    }\n\n    :host([swipeable]):hover input[type=range]::-moz-range-thumb {\n      background: var(--_thumb-color-active);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover input[type=range]::-moz-range-track {\n      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));\n    }\n\n    :host([swipeable]):hover .range-bg {\n      background: var(--_bg-track-hover);\n    }\n\n    :host([swipeable][orientation=\"vertical\"]):hover .range-bg {\n      background: var(--background-track-hover-vertical, var(--_bg-track-hover));\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-range-input': RangeInput;\n  }\n}\n"],"mappings":"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"}

package/dist/range.d.ts

@@ -1,7 +1,6 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-C-ra_1os.js";
-import { r as TooltipOrientations } from "./tooltip-BMTSUPBU.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { r as TooltipOrientations } from "./tooltip-BlvBUQxx.js";
 import { LitElement } from "lit";
-
 //#region src/range/range.d.ts
 declare const RangeElement_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;
 declare class RangeElement extends RangeElement_base {

package/dist/range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","names":[],"sources":["../src/range/range.ts"],"mappings":";;;;;cAEqD,iBAAA;cASxC,YAAA,SAAqB,iBAAA;EAAA;EAEhC,OAAA;EAGA,kBAAA,EAAoB,mBAAA;EAGpB,WAAA;EAGA,QAAA;EAGA,GAAA;EAGA,GAAA;EAAA,IAGI,KAAA,CAAM,CAAA;EAAA,IAIN,KAAA;EAOJ,IAAA;EAEA,YAAA,CAAa,KAAA,EAAO,UAAA;;;;AAlCtB;;;;;;EA0DW,gBAAA,CAAiB,SAAA,EAAW,cAAA,EAAgB,MAAA,EAAQ,UAAA;EAAA,UAenD,MAAA;EAAA,OAiBH,MAAA,gBAAM,SAAA;AAAA;AAAA,QAmEP,MAAA;EAAA,UACI,cAAA;IACR,YAAA,EAAc,YAAY;EAAA;AAAA"}
+{"version":3,"file":"range.d.ts","names":[],"sources":["../src/range/range.ts"],"mappings":";;;;;cAWa,qBAAqB;;EAEhC;EAGA,oBAAoB;EAGpB;EAGA;EAGA;EAGA;MAGI,MAAM;MAIN;EAOJ;EAEA,aAAa,OAAO;;;;;;;;;;EAwBX,iBAAiB,WAAW,gBAAgB,QAAQ;YAenD;SAiBH,sBAAM;;QAmEP;YACI;IACR,cAAc"}

package/dist/range.js

@@ -1,7 +1,7 @@
 import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-Dhzi5nHc.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
 import { t as tooltipValueStyles } from "./tooltip-CJt3WLmN.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";

package/dist/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","names":["#value","customElement"],"sources":["../src/range/range.ts"],"sourcesContent":["import type { WheelDirection } from \"../mixins/wheel-nudge.js\";\nimport type { TooltipOrientations } from \"../util/tooltip.js\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { WheelNudgeMixin } from \"../mixins/wheel-nudge.js\";\nimport { themeFallbacks } from \"../styles/fallbacks.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { tooltipValueStyles } from \"../styles/tooltip.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-range`)\nexport class RangeElement extends WheelNudgeMixin(LitElement) {\n  @property({ type: Boolean })\n  tooltip = true;\n\n  @property({ type: String, attribute: `tooltip-orientation` })\n  tooltipOrientation: TooltipOrientations = `top`;\n\n  @property({ type: String, reflect: true })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Boolean, attribute: true })\n  disabled = false;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  set value(v: number) {\n    this.#value = v;\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  #value = 0;\n\n  @property({ type: Number })\n  step = 0;\n\n  onRangeInput(event: InputEvent) {\n    const valueNum = (event.target as HTMLInputElement).valueAsNumber;\n    const valueStr = (event.target as HTMLInputElement).value;\n    this.#value = valueNum;\n\n    if (this.tooltip) {\n      const o = this.shadowRoot?.querySelector(`output`);\n      if (o) {\n        o.value = valueStr;\n      } else {\n        console.warn(`Output element not found`);\n      }\n    }\n  }\n\n  /**\n   * Wheel handler — installed by WheelNudgeMixin on the host. Synthesises a\n   * value change by writing to the inner `<input type=\"range\">` and dispatching\n   * `input` + `change`, so the existing `onRangeInput` handler runs unchanged.\n   *\n   * The native input still responds to wheel when focused (focus rule wins by\n   * default). The host handler fires when `lighttouch` is set or when the host\n   * itself has focus, ensuring Shift-aware step math and consistent event firing.\n   */\n  override _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void {\n    const input = this.renderRoot?.querySelector(`input[type=range]`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    const step = this.step > 0 ? this.step : Math.max((this.max - this.min) / 100, 0.01);\n    const candidate = this.#value + direction * step;\n    const clamped = Math.min(this.max, Math.max(this.min, candidate));\n    if (clamped === this.#value)\n      return;\n\n    input.value = String(clamped);\n    input.dispatchEvent(new Event(`input`, { bubbles: true }));\n    input.dispatchEvent(new Event(`change`, { bubbles: true }));\n  }\n\n  protected render(): unknown {\n    const tt = this.tooltip\n      ? html`<ixfx-tooltip\n          style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n          .orientation=${this.tooltipOrientation}\n          anchor=\"--thumb-tooltip\"\n          .value=${this.value}></ixfx-tooltip>`\n      : nothing;\n    const verticalStyle = this.orientation === `vertical`\n      ? `writing-mode: vertical-lr; direction: rtl;`\n      : nothing;\n    return html`\n      <input ?disabled=${this.disabled} step=${this.step} min=${this.min} max=${this.max} value=${this.value} @input=${this.onRangeInput} type=\"range\" style=${verticalStyle}>\n      ${tt}\n    `;\n  }\n\n  static styles = [\n    themeFallbacks,\n    prominenceStyles,\n    tooltipValueStyles,\n    css`\n    :host {\n      display: inline-block;\n      --value-label-color: unset;\n      --thumb-background: ButtonFace;\n      --thumb-radius: 50%;\n      --thumb-width: 1em;\n      --thumb-height: 1em;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      display: block;\n      width: 1.5em;\n      height: 200px;\n    }\n\n    [type=\"range\"] {\n      width: 100%;\n      height: 1.5em;\n      accent-color: var(--accent, AccentColor);\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"] {\n      writing-mode: vertical-lr;\n      direction: rtl;\n      width: 1.5em;\n      height: 100%;\n    }\n\n    [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      box-shadow: var(--shadow-m);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]:focus {\n      outline: none;\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementMap {\n    \"ixfx-range\": RangeElement;\n  }\n}\n"],"mappings":";;;;;;;;AAWO,IAAA,eAAA,MAAM,qBAAqB,gBAAgB,UAAU,EAAE;;;iBAElD;4BAGgC;qBAGD;kBAG9B;aAGL;aAGA;gBAWG;cAGF;;CAZP,IACI,MAAM,GAAW;EACnB,KAAKA,SAAS;CAChB;CAEA,IAAI,QAAQ;EACV,OAAO,KAAKA;CACd;CAEA;CAKA,aAAa,OAAmB;EAC9B,MAAM,WAAY,MAAM,OAA4B;EACpD,MAAM,WAAY,MAAM,OAA4B;EACpD,KAAKA,SAAS;EAEd,IAAI,KAAK,SAAS;GAChB,MAAM,IAAI,KAAK,YAAY,cAAc,QAAQ;GACjD,IAAI,GACF,EAAE,QAAQ;QAEV,QAAQ,KAAK,0BAA0B;EAE3C;CACF;;;;;;;;;;CAWA,iBAA0B,WAA2B,QAA0B;EAC7E,MAAM,QAAQ,KAAK,YAAY,cAAc,mBAAmB;EAChE,IAAI,CAAC,OACH;EACF,MAAM,OAAO,KAAK,OAAO,IAAI,KAAK,OAAO,KAAK,KAAK,KAAK,MAAM,KAAK,OAAO,KAAK,GAAI;EACnF,MAAM,YAAY,KAAKA,SAAS,YAAY;EAC5C,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,SAAS,CAAC;EAChE,IAAI,YAAY,KAAKA,QACnB;EAEF,MAAM,QAAQ,OAAO,OAAO;EAC5B,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D;CAEA,SAA4B;EAC1B,MAAM,KAAK,KAAK,UACZ,IAAI;;yBAEa,KAAK,mBAAmB;;mBAE9B,KAAK,MAAM,oBACtB;EACJ,MAAM,gBAAgB,KAAK,gBAAgB,aACvC,+CACA;EACJ,OAAO,IAAI;yBACU,KAAK,SAAS,QAAQ,KAAK,KAAK,OAAO,KAAK,IAAI,OAAO,KAAK,IAAI,SAAS,KAAK,MAAM,UAAU,KAAK,aAAa,sBAAsB,cAAc;QACrK,GAAG;;CAET;;gBAEgB;GACd;GACA;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DL;;AACF;YAzJG,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;YAG1B,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAsB,CAAC,CAAA,GAAA,aAAA,WAAA,sBAAA,KAAA,CAAA;YAG3D,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;YAGxC,SAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YAG3C,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,OAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,OAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,IAAA;YAWzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;2BA/B3BC,kBAAc,YAAY,CAAA,GAAA,YAAA"}
+{"version":3,"file":"range.js","names":["#value","customElement"],"sources":["../src/range/range.ts"],"sourcesContent":["import type { WheelDirection } from \"../mixins/wheel-nudge.js\";\nimport type { TooltipOrientations } from \"../util/tooltip.js\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { WheelNudgeMixin } from \"../mixins/wheel-nudge.js\";\nimport { themeFallbacks } from \"../styles/fallbacks.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { tooltipValueStyles } from \"../styles/tooltip.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-range`)\nexport class RangeElement extends WheelNudgeMixin(LitElement) {\n  @property({ type: Boolean })\n  tooltip = true;\n\n  @property({ type: String, attribute: `tooltip-orientation` })\n  tooltipOrientation: TooltipOrientations = `top`;\n\n  @property({ type: String, reflect: true })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Boolean, attribute: true })\n  disabled = false;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  set value(v: number) {\n    this.#value = v;\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  #value = 0;\n\n  @property({ type: Number })\n  step = 0;\n\n  onRangeInput(event: InputEvent) {\n    const valueNum = (event.target as HTMLInputElement).valueAsNumber;\n    const valueStr = (event.target as HTMLInputElement).value;\n    this.#value = valueNum;\n\n    if (this.tooltip) {\n      const o = this.shadowRoot?.querySelector(`output`);\n      if (o) {\n        o.value = valueStr;\n      } else {\n        console.warn(`Output element not found`);\n      }\n    }\n  }\n\n  /**\n   * Wheel handler — installed by WheelNudgeMixin on the host. Synthesises a\n   * value change by writing to the inner `<input type=\"range\">` and dispatching\n   * `input` + `change`, so the existing `onRangeInput` handler runs unchanged.\n   *\n   * The native input still responds to wheel when focused (focus rule wins by\n   * default). The host handler fires when `lighttouch` is set or when the host\n   * itself has focus, ensuring Shift-aware step math and consistent event firing.\n   */\n  override _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void {\n    const input = this.renderRoot?.querySelector(`input[type=range]`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    const step = this.step > 0 ? this.step : Math.max((this.max - this.min) / 100, 0.01);\n    const candidate = this.#value + direction * step;\n    const clamped = Math.min(this.max, Math.max(this.min, candidate));\n    if (clamped === this.#value)\n      return;\n\n    input.value = String(clamped);\n    input.dispatchEvent(new Event(`input`, { bubbles: true }));\n    input.dispatchEvent(new Event(`change`, { bubbles: true }));\n  }\n\n  protected render(): unknown {\n    const tt = this.tooltip\n      ? html`<ixfx-tooltip\n          style=\"--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)\"\n          .orientation=${this.tooltipOrientation}\n          anchor=\"--thumb-tooltip\"\n          .value=${this.value}></ixfx-tooltip>`\n      : nothing;\n    const verticalStyle = this.orientation === `vertical`\n      ? `writing-mode: vertical-lr; direction: rtl;`\n      : nothing;\n    return html`\n      <input ?disabled=${this.disabled} step=${this.step} min=${this.min} max=${this.max} value=${this.value} @input=${this.onRangeInput} type=\"range\" style=${verticalStyle}>\n      ${tt}\n    `;\n  }\n\n  static styles = [\n    themeFallbacks,\n    prominenceStyles,\n    tooltipValueStyles,\n    css`\n    :host {\n      display: inline-block;\n      --value-label-color: unset;\n      --thumb-background: ButtonFace;\n      --thumb-radius: 50%;\n      --thumb-width: 1em;\n      --thumb-height: 1em;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      display: block;\n      width: 1.5em;\n      height: 200px;\n    }\n\n    [type=\"range\"] {\n      width: 100%;\n      height: 1.5em;\n      accent-color: var(--accent, AccentColor);\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"] {\n      writing-mode: vertical-lr;\n      direction: rtl;\n      width: 1.5em;\n      height: 100%;\n    }\n\n    [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-webkit-slider-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-width);\n      height: var(--thumb-height);\n      border-radius: var(--thumb-radius);\n      background: var(--thumb-background);\n      box-shadow: var(--shadow-m);\n      anchor-name: --thumb-tooltip;\n    }\n\n    :host([orientation=\"vertical\"]) [type=\"range\"]::-moz-range-thumb {\n      width: var(--thumb-height);\n      height: var(--thumb-width);\n    }\n\n    [type=\"range\"]:focus {\n      outline: none;\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementMap {\n    \"ixfx-range\": RangeElement;\n  }\n}\n"],"mappings":";;;;;;;;AAWO,IAAM,eAAN,MAAM,qBAAqB,gBAAgB,UAAU,CAAC,CAAC;;;EAElD,KAAA,UAAA;EAGgC,KAAA,qBAAA;EAGD,KAAA,cAAA;EAG9B,KAAA,WAAA;EAGL,KAAA,MAAA;EAGA,KAAA,MAAA;EAWG,KAAA,SAAA;EAGF,KAAA,OAAA;;CAZP,IACI,MAAM,GAAW;EACnB,KAAKA,SAAS;CAChB;CAEA,IAAI,QAAQ;EACV,OAAO,KAAKA;CACd;CAEA;CAKA,aAAa,OAAmB;EAC9B,MAAM,WAAY,MAAM,OAA4B;EACpD,MAAM,WAAY,MAAM,OAA4B;EACpD,KAAKA,SAAS;EAEd,IAAI,KAAK,SAAS;GAChB,MAAM,IAAI,KAAK,YAAY,cAAc,QAAQ;GACjD,IAAI,GACF,EAAE,QAAQ;QAEV,QAAQ,KAAK,0BAA0B;EAE3C;CACF;;;;;;;;;;CAWA,iBAA0B,WAA2B,QAA0B;EAC7E,MAAM,QAAQ,KAAK,YAAY,cAAc,mBAAmB;EAChE,IAAI,CAAC,OACH;EACF,MAAM,OAAO,KAAK,OAAO,IAAI,KAAK,OAAO,KAAK,KAAK,KAAK,MAAM,KAAK,OAAO,KAAK,GAAI;EACnF,MAAM,YAAY,KAAKA,SAAS,YAAY;EAC5C,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,SAAS,CAAC;EAChE,IAAI,YAAY,KAAKA,QACnB;EAEF,MAAM,QAAQ,OAAO,OAAO;EAC5B,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D;CAEA,SAA4B;EAC1B,MAAM,KAAK,KAAK,UACZ,IAAI;;yBAEa,KAAK,mBAAmB;;mBAE9B,KAAK,MAAM,oBACtB;EACJ,MAAM,gBAAgB,KAAK,gBAAgB,aACvC,+CACA;EACJ,OAAO,IAAI;yBACU,KAAK,SAAS,QAAQ,KAAK,KAAK,OAAO,KAAK,IAAI,OAAO,KAAK,IAAI,SAAS,KAAK,MAAM,UAAU,KAAK,aAAa,sBAAsB,cAAc;QACrK,GAAG;;CAET;;EAEgB,KAAA,SAAA;GACd;GACA;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DL;;AACF;AAzJG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAsB,CAAC,CAAA,GAAA,aAAA,WAAA,sBAAA,KAAA,CAAA;AAG3D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAGxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAG3C,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,OAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,OAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,IAAA;AAWzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AA/B3BC,eAAAA,WAAAA,CAAAA,kBAAc,YAAY,CAAA,GAAA,YAAA"}

package/dist/scroll-fade-CAs1EabA.js

@@ -0,0 +1,70 @@
+import { css, unsafeCSS } from "lit";
+//#region src/styles/scroll-fade.ts
+/**
+* Zero-JS scroll edge fade.
+*
+* A CSS alpha mask driven by a scroll-linked animation (`scroll-timeline`),
+* rather than a JS scroll/resize listener - so it can never go stale after
+* a resize (widening a scroller so content fully fits clears the fade
+* immediately, with no JS involved), and it fades the whole element
+* including its children, not just a background layer that an opaque
+* item background would hide.
+*
+* Apply the returned `.scroll-fade-x` / `.scroll-fade-y` class to
+* whichever element actually has `overflow` scrolling on that axis.
+*
+* CSS variables:
+* - `--scroll-fade-width` (default `30px`): how far the fade extends from each edge.
+*
+* ```ts
+* import { scrollFadeStyles } from '../styles/scroll-fade.js';
+*
+* static styles = [scrollFadeStyles(`x`), css`...`];
+* ```
+* ```html
+* <div class="scroll-fade-x" style="overflow-x: scroll">...</div>
+* ```
+*/
+function scrollFadeStyles(axis) {
+	const className = `scroll-fade-${axis}`;
+	const start = `--${className}-start`;
+	const end = `--${className}-end`;
+	const timeline = `--${className}-timeline`;
+	const keyframesName = `${className}-fade`;
+	const gradientDirection = axis === `x` ? `to right` : `to bottom`;
+	return css`
+    @property ${unsafeCSS(start)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @property ${unsafeCSS(end)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @keyframes ${unsafeCSS(keyframesName)} {
+      0% { ${unsafeCSS(start)}: 0px; }
+      10%, 100% { ${unsafeCSS(start)}: var(--scroll-fade-width, 30px); }
+      0%, 90% { ${unsafeCSS(end)}: var(--scroll-fade-width, 30px); }
+      100% { ${unsafeCSS(end)}: 0px; }
+    }
+
+    .${unsafeCSS(className)} {
+      scroll-timeline: ${unsafeCSS(timeline)} ${unsafeCSS(axis)};
+      animation: ${unsafeCSS(keyframesName)};
+      animation-timeline: ${unsafeCSS(timeline)};
+      mask-image: linear-gradient(${unsafeCSS(gradientDirection)},
+        transparent,
+        black var(${unsafeCSS(start)}, 0px) calc(100% - var(${unsafeCSS(end)}, 0px)),
+        transparent
+      );
+    }
+  `;
+}
+//#endregion
+export { scrollFadeStyles as t };
+
+//# sourceMappingURL=scroll-fade-CAs1EabA.js.map

package/dist/scroll-fade-CAs1EabA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-fade-CAs1EabA.js","names":[],"sources":["../src/styles/scroll-fade.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit';\n\nexport type ScrollFadeAxis = `x` | `y`;\n\n/**\n * Zero-JS scroll edge fade.\n *\n * A CSS alpha mask driven by a scroll-linked animation (`scroll-timeline`),\n * rather than a JS scroll/resize listener - so it can never go stale after\n * a resize (widening a scroller so content fully fits clears the fade\n * immediately, with no JS involved), and it fades the whole element\n * including its children, not just a background layer that an opaque\n * item background would hide.\n *\n * Apply the returned `.scroll-fade-x` / `.scroll-fade-y` class to\n * whichever element actually has `overflow` scrolling on that axis.\n *\n * CSS variables:\n * - `--scroll-fade-width` (default `30px`): how far the fade extends from each edge.\n *\n * ```ts\n * import { scrollFadeStyles } from '../styles/scroll-fade.js';\n *\n * static styles = [scrollFadeStyles(`x`), css`...`];\n * ```\n * ```html\n * <div class=\"scroll-fade-x\" style=\"overflow-x: scroll\">...</div>\n * ```\n */\nexport function scrollFadeStyles(axis: ScrollFadeAxis) {\n  const className = `scroll-fade-${axis}`;\n  const start = `--${className}-start`;\n  const end = `--${className}-end`;\n  const timeline = `--${className}-timeline`;\n  const keyframesName = `${className}-fade`;\n  const gradientDirection = axis === `x` ? `to right` : `to bottom`;\n\n  return css`\n    @property ${unsafeCSS(start)} {\n      syntax: '<length>';\n      inherits: false;\n      initial-value: 0px;\n    }\n\n    @property ${unsafeCSS(end)} {\n      syntax: '<length>';\n      inherits: false;\n      initial-value: 0px;\n    }\n\n    @keyframes ${unsafeCSS(keyframesName)} {\n      0% { ${unsafeCSS(start)}: 0px; }\n      10%, 100% { ${unsafeCSS(start)}: var(--scroll-fade-width, 30px); }\n      0%, 90% { ${unsafeCSS(end)}: var(--scroll-fade-width, 30px); }\n      100% { ${unsafeCSS(end)}: 0px; }\n    }\n\n    .${unsafeCSS(className)} {\n      scroll-timeline: ${unsafeCSS(timeline)} ${unsafeCSS(axis)};\n      animation: ${unsafeCSS(keyframesName)};\n      animation-timeline: ${unsafeCSS(timeline)};\n      mask-image: linear-gradient(${unsafeCSS(gradientDirection)},\n        transparent,\n        black var(${unsafeCSS(start)}, 0px) calc(100% - var(${unsafeCSS(end)}, 0px)),\n        transparent\n      );\n    }\n  `;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,iBAAiB,MAAsB;CACrD,MAAM,YAAY,eAAe;CACjC,MAAM,QAAQ,KAAK,UAAU;CAC7B,MAAM,MAAM,KAAK,UAAU;CAC3B,MAAM,WAAW,KAAK,UAAU;CAChC,MAAM,gBAAgB,GAAG,UAAU;CACnC,MAAM,oBAAoB,SAAS,MAAM,aAAa;CAEtD,OAAO,GAAG;gBACI,UAAU,KAAK,EAAE;;;;;;gBAMjB,UAAU,GAAG,EAAE;;;;;;iBAMd,UAAU,aAAa,EAAE;aAC7B,UAAU,KAAK,EAAE;oBACV,UAAU,KAAK,EAAE;kBACnB,UAAU,GAAG,EAAE;eAClB,UAAU,GAAG,EAAE;;;OAGvB,UAAU,SAAS,EAAE;yBACH,UAAU,QAAQ,EAAE,GAAG,UAAU,IAAI,EAAE;mBAC7C,UAAU,aAAa,EAAE;4BAChB,UAAU,QAAQ,EAAE;oCACZ,UAAU,iBAAiB,EAAE;;oBAE7C,UAAU,KAAK,EAAE,yBAAyB,UAAU,GAAG,EAAE;;;;;AAK7E"}

package/dist/select-horiz.d.ts

@@ -0,0 +1,50 @@
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { LitElement } from "lit";
+//#region src/select-horiz/select-horiz.d.ts
+type SelectHorizChangeDetail = {
+  readonly selectedIndex: number;
+  readonly selectedItem: HTMLElement | null;
+  readonly selectedValue: string | null;
+};
+type SelectHorizChangeEvent = CustomEvent<SelectHorizChangeDetail>;
+interface SelectHorizEventMap {
+  change: SelectHorizChangeEvent;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-select-horiz': SelectHorizElement;
+  }
+}
+interface SelectHorizElement {
+  addEventListener: (<K extends keyof SelectHorizEventMap>(type: K, listener: (this: SelectHorizElement, event: SelectHorizEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+declare const SelectHorizElement_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;
+declare class SelectHorizElement extends SelectHorizElement_base {
+  static styles: import("lit").CSSResult[];
+  private _selectedIndex;
+  private _slottedItems;
+  private tickled;
+  get selectedIndex(): number;
+  set selectedIndex(value: number);
+  get selectedValue(): string | null;
+  set selectedValue(value: string | null);
+  get selectedItem(): HTMLElement | null;
+  get items(): HTMLCollection;
+  protected render(): import("lit").TemplateResult<1>;
+  willUpdate(changed: Map<PropertyKey, unknown>): void;
+  private _onSlotChange;
+  private _syncTickled;
+  private _findSlottedItem;
+  private _handlePointerOver;
+  private _handleKeyDown;
+  private _applyTickledSelection;
+  private _wheelCooldown;
+  _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void;
+  private _handleClick;
+  private _updateSelectedAttribute;
+  private _scrollSelectedIntoView;
+  private _emitChange;
+}
+//#endregion
+export { SelectHorizChangeDetail, SelectHorizChangeEvent, SelectHorizElement, SelectHorizEventMap };
+//# sourceMappingURL=select-horiz.d.ts.map

package/dist/select-horiz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-horiz.d.ts","names":[],"sources":["../src/select-horiz/select-horiz.ts"],"mappings":";;;KAUY;WACD;WACA,cAAc;WACd;;KAGC,yBAAyB,YAAY;UAEhC;EACf,QAAQ;;QAGF;YACI;IACR,qBAAqB;;;UAIR;EACf,oBAAoB,gBAAgB,qBAClC,MAAM,GACN,WAAW,MAAM,oBAAoB,OAAO,oBAAoB,aAChE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;cAKX,2BAA2B;SACtB,sBAAM;UA2Fd;UAGA;UAEA;MAUJ;MAIA,cAAc;MAoBd;MAKA,cAAc;MASd,gBAAgB;MAIhB,SAAS;YAIM,wBAAM;EAkBhB,WAAW,SAAS,IAAI;UAKzB;UAoBA;UAaA;UAUA;UAOA;UAoBA;UAOA;EAOR,iBAAiB,WAAW,gBAAgB,QAAQ;UAc5C;UAYA;UAUA;UAOA"}

package/dist/select-horiz.js

@@ -0,0 +1,263 @@
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/select-horiz/select-horiz.ts
+let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._selectedIndex = -1;
+		this._slottedItems = [];
+		this.tickled = new TickledController(this, {
+			getItems: () => this._slottedItems.map((_, i) => ({
+				id: i,
+				enabled: true
+			})),
+			onStateChange: () => this._syncTickled()
+		});
+		this._onSlotChange = () => {
+			this._slottedItems = Array.from(this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? []);
+			const declaredIndex = this._slottedItems.findIndex((item) => item.hasAttribute(`selected`));
+			let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;
+			if (resolvedIndex >= this._slottedItems.length) resolvedIndex = this._slottedItems.length - 1;
+			if (resolvedIndex < 0 && this._slottedItems.length > 0) resolvedIndex = 0;
+			this.selectedIndex = resolvedIndex;
+		};
+		this._syncTickled = () => {
+			this._slottedItems.forEach((item, i) => {
+				const isTickled = this.tickled.isTickled(i);
+				item.classList.toggle(`tickled`, isTickled);
+				item.tabIndex = isTickled && this.tickled.inputMode === `keyboard` ? 0 : -1;
+			});
+		};
+		this._findSlottedItem = (target) => {
+			let el = target instanceof Element ? target : null;
+			while (el) {
+				if (this._slottedItems.includes(el)) return el;
+				el = el.parentElement;
+			}
+		};
+		this._handlePointerOver = (e) => {
+			const item = this._findSlottedItem(e.target);
+			if (item) this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));
+		};
+		this._handleKeyDown = (e) => {
+			if (e.key === `ArrowLeft`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+				this._applyTickledSelection();
+			} else if (e.key === `ArrowRight`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+				this._applyTickledSelection();
+			} else if (e.key === `Home`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`first`);
+				this._applyTickledSelection();
+			} else if (e.key === `End`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`last`);
+				this._applyTickledSelection();
+			}
+		};
+		this._applyTickledSelection = () => {
+			const id = this.tickled.tickledId;
+			if (id !== void 0 && id !== this._selectedIndex) this.selectedIndex = id;
+		};
+		this._wheelCooldown = false;
+		this._handleClick = (e) => {
+			e.currentTarget.focus();
+			const item = this._findSlottedItem(e.target);
+			const index = item ? this._slottedItems.indexOf(item) : -1;
+			if (index >= 0 && index !== this._selectedIndex) this.selectedIndex = index;
+		};
+		this._updateSelectedAttribute = () => {
+			this._slottedItems.forEach((item, i) => {
+				if (i === this._selectedIndex) item.setAttribute(`selected`, ``);
+				else item.removeAttribute(`selected`);
+			});
+		};
+		this._scrollSelectedIntoView = () => {
+			const item = this._slottedItems[this._selectedIndex];
+			if (item) item.scrollIntoView({
+				inline: `center`,
+				behavior: `smooth`
+			});
+		};
+		this._emitChange = () => {
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					selectedIndex: this._selectedIndex,
+					selectedItem: this.selectedItem,
+					selectedValue: this.selectedValue
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			css`
+      :host {
+        --select-horiz-item-width: 80%;
+        --select-horiz-gap: var(--space-s);
+        --select-horiz-bg: var(--surface-3);
+        --select-horiz-border: var(--border);
+        --select-horiz-radius: var(--radius-l);
+        display: flex;
+        width: 100%;
+              background: var(--select-horiz-bg);
+        border: var(--select-horiz-border);
+        border-radius: var(--select-horiz-radius);
+      }
+
+      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on
+       * the element that actually scrolls - its mask is sized to this element's own
+       * box, and content overflowing a *different*, non-scrolling ancestor gets the
+       * mask tiled across it instead of fading correctly. */
+      .items {
+        display: flex;
+        align-items: center;
+        gap: var(--select-horiz-gap);
+        padding: var(--space-xs) var(--scroll-fade-width, 30px);
+        width: 100%;
+        min-height: 48px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        cursor: grab;
+  
+        box-sizing: border-box;
+      }
+
+      .items:focus-within {
+        cursor: default;
+      }
+
+      .spacer {
+        flex: 0 0 var(--select-horiz-spacer-width, 10%);
+        pointer-events: none;
+        user-select: none;
+      }
+
+      ::slotted(*) {
+        flex: 0 0 var(--select-horiz-item-width);
+        scroll-snap-align: center;
+        user-select: none;
+        min-height: 100%;
+        box-sizing: border-box;
+        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
+        background: var(--item-bg);
+        border: var(--item-border);
+        border-radius: var(--item-border-radius);
+        padding: var(--item-padding);
+        display: grid;
+        align-content: center;
+        justify-content: center;
+      }
+
+      ::slotted(.tickled) {
+        background: var(--item-bg-tickled);
+        border: var(--item-border-tickled);
+        color: var(--item-text-tickled);
+      }
+
+      ::slotted([selected]) {
+        background: var(--item-bg-selected);
+        border: var(--item-border-selected);
+        color: var(--item-text-selected);
+      }
+
+      ::slotted([selected].tickled) {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    `
+		];
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		const oldValue = this._selectedIndex;
+		if (value < -1 || this._slottedItems.length > 0 && value >= this._slottedItems.length) return;
+		this._selectedIndex = value;
+		this._updateSelectedAttribute();
+		this._scrollSelectedIntoView();
+		this.tickled.setTickled(value === -1 ? void 0 : value);
+		if (oldValue !== value) this._emitChange();
+	}
+	get selectedValue() {
+		return this._slottedItems[this._selectedIndex]?.getAttribute(`value`) ?? null;
+	}
+	set selectedValue(value) {
+		if (value === null) return;
+		const index = this._slottedItems.findIndex((item) => item.getAttribute(`value`) === value);
+		if (index >= 0) this.selectedIndex = index;
+	}
+	get selectedItem() {
+		return this._slottedItems[this._selectedIndex] ?? null;
+	}
+	get items() {
+		return this._slottedItems;
+	}
+	render() {
+		return html`
+      <div
+        class="items scroll-fade-x"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @pointerover=${this._handlePointerOver}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        @keydown=${this._handleKeyDown}
+        @click=${this._handleClick}
+      >
+        <div class="spacer"></div>
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="spacer"></div>
+      </div>
+    `;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_applyWheelDelta(direction, _event) {
+		if (this._wheelCooldown) return;
+		this._wheelCooldown = true;
+		this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);
+		this._applyTickledSelection();
+		setTimeout(() => {
+			this._wheelCooldown = false;
+		}, 250);
+	}
+};
+__decorate([state()], SelectHorizElement.prototype, "_selectedIndex", void 0);
+__decorate([state()], SelectHorizElement.prototype, "_slottedItems", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: `selected-index`
+})], SelectHorizElement.prototype, "selectedIndex", null);
+__decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
+SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
+//#endregion
+export { SelectHorizElement };
+
+//# sourceMappingURL=select-horiz.js.map

package/dist/select-horiz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-horiz.js","names":["customElement"],"sources":["../src/select-horiz/select-horiz.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { scrollFadeStyles } from '../styles/scroll-fade.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type SelectHorizChangeDetail = {\n  readonly selectedIndex: number;\n  readonly selectedItem: HTMLElement | null;\n  readonly selectedValue: string | null;\n};\n\nexport type SelectHorizChangeEvent = CustomEvent<SelectHorizChangeDetail>;\n\nexport interface SelectHorizEventMap {\n  change: SelectHorizChangeEvent;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-select-horiz': SelectHorizElement;\n  }\n}\n\nexport interface SelectHorizElement {\n  addEventListener: (<K extends keyof SelectHorizEventMap>(\n    type: K,\n    listener: (this: SelectHorizElement, event: SelectHorizEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n\n@customElement(`ixfx-select-horiz`)\nexport class SelectHorizElement extends WheelNudgeMixin(LitElement) {\n  static override styles = [\n    themeFallbacks,\n    tickledStyles,\n    tickledItemStyles,\n    scrollFadeStyles(`x`),\n    css`\n      :host {\n        --select-horiz-item-width: 80%;\n        --select-horiz-gap: var(--space-s);\n        --select-horiz-bg: var(--surface-3);\n        --select-horiz-border: var(--border);\n        --select-horiz-radius: var(--radius-l);\n        display: flex;\n        width: 100%;\n              background: var(--select-horiz-bg);\n        border: var(--select-horiz-border);\n        border-radius: var(--select-horiz-radius);\n      }\n\n      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on\n       * the element that actually scrolls - its mask is sized to this element's own\n       * box, and content overflowing a *different*, non-scrolling ancestor gets the\n       * mask tiled across it instead of fading correctly. */\n      .items {\n        display: flex;\n        align-items: center;\n        gap: var(--select-horiz-gap);\n        padding: var(--space-xs) var(--scroll-fade-width, 30px);\n        width: 100%;\n        min-height: 48px;\n        overflow-x: scroll;\n        overflow-y: hidden;\n        scrollbar-width: none;\n        scroll-snap-type: x mandatory;\n        -webkit-overflow-scrolling: touch;\n        cursor: grab;\n  \n        box-sizing: border-box;\n      }\n\n      .items:focus-within {\n        cursor: default;\n      }\n\n      .spacer {\n        flex: 0 0 var(--select-horiz-spacer-width, 10%);\n        pointer-events: none;\n        user-select: none;\n      }\n\n      ::slotted(*) {\n        flex: 0 0 var(--select-horiz-item-width);\n        scroll-snap-align: center;\n        user-select: none;\n        min-height: 100%;\n        box-sizing: border-box;\n        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);\n        background: var(--item-bg);\n        border: var(--item-border);\n        border-radius: var(--item-border-radius);\n        padding: var(--item-padding);\n        display: grid;\n        align-content: center;\n        justify-content: center;\n      }\n\n      ::slotted(.tickled) {\n        background: var(--item-bg-tickled);\n        border: var(--item-border-tickled);\n        color: var(--item-text-tickled);\n      }\n\n      ::slotted([selected]) {\n        background: var(--item-bg-selected);\n        border: var(--item-border-selected);\n        color: var(--item-text-selected);\n      }\n\n      ::slotted([selected].tickled) {\n        background: var(--item-bg-selected-tickled);\n        outline: 2px dashed var(--surface-3);\n        outline-offset: -2px;\n      }\n\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n  ];\n\n  @state()\n  private _selectedIndex = -1;\n\n  @state()\n  private _slottedItems: HTMLElement[] = [];\n\n  private tickled = new TickledController<number>(this, {\n    getItems: () =>\n      this._slottedItems.map((_, i) => ({\n        id: i,\n        enabled: true,\n      })),\n    onStateChange: () => this._syncTickled(),\n  });\n\n  @property({ type: Number, reflect: true, attribute: `selected-index` })\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  set selectedIndex(value: number) {\n    const oldValue = this._selectedIndex;\n    // Upper bound is only enforced once items are known - this lets a\n    // declarative `selected-index` attribute be accepted before slotchange\n    // has had a chance to populate `_slottedItems`.\n    if (value < -1 || (this._slottedItems.length > 0 && value >= this._slottedItems.length))\n      return;\n    this._selectedIndex = value;\n    this._updateSelectedAttribute();\n    this._scrollSelectedIntoView();\n    // Keep the keyboard-navigation cursor anchored to the current selection,\n    // so left/right always steps from here - not from wherever it was last\n    // left by a stale hover or an earlier keyboard session.\n    this.tickled.setTickled(value === -1 ? undefined : value);\n    if (oldValue !== value) {\n      this._emitChange();\n    }\n  }\n\n  @property({ type: String })\n  get selectedValue(): string | null {\n    const item = this._slottedItems[this._selectedIndex];\n    return item?.getAttribute(`value`) ?? null;\n  }\n\n  set selectedValue(value: string | null) {\n    if (value === null)\n      return;\n    const index = this._slottedItems.findIndex(item => item.getAttribute(`value`) === value);\n    if (index >= 0) {\n      this.selectedIndex = index;\n    }\n  }\n\n  get selectedItem(): HTMLElement | null {\n    return this._slottedItems[this._selectedIndex] ?? null;\n  }\n\n  get items(): HTMLCollection {\n    return this._slottedItems as unknown as HTMLCollection;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        class=\"items scroll-fade-x\"\n        tabindex=\"0\"\n        data-input-mode=${this.tickled.inputMode}\n        @pointerover=${this._handlePointerOver}\n        @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n        @keydown=${this._handleKeyDown}\n        @click=${this._handleClick}\n      >\n        <div class=\"spacer\"></div>\n        <slot @slotchange=${this._onSlotChange}></slot>\n        <div class=\"spacer\"></div>\n      </div>\n    `;\n  }\n\n  override willUpdate(changed: Map<PropertyKey, unknown>): void {\n    super.willUpdate(changed);\n    this.setAttribute(`data-input-mode`, this.tickled.inputMode);\n  }\n\n  private _onSlotChange = (): void => {\n    this._slottedItems = Array.from(\n      this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? [],\n    ) as HTMLElement[];\n\n    // A child's own `selected` attribute (declared in markup) takes priority\n    // over whatever `selected-index` resolved to.\n    const declaredIndex = this._slottedItems.findIndex(item => item.hasAttribute(`selected`));\n    let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;\n\n    if (resolvedIndex >= this._slottedItems.length) {\n      resolvedIndex = this._slottedItems.length - 1;\n    }\n    if (resolvedIndex < 0 && this._slottedItems.length > 0) {\n      resolvedIndex = 0;\n    }\n\n    this.selectedIndex = resolvedIndex;\n  };\n\n  private _syncTickled = (): void => {\n    this._slottedItems.forEach((item, i) => {\n      const isTickled = this.tickled.isTickled(i);\n      item.classList.toggle(`tickled`, isTickled);\n      // Roving tabindex only follows keyboard navigation - a mouse hover\n      // shouldn't relocate where Tab lands next.\n      item.tabIndex = (isTickled && this.tickled.inputMode === `keyboard`) ? 0 : -1;\n    });\n  };\n\n  // Slotted items may contain nested markup (icons, labels, ...), so a\n  // pointer/click target isn't necessarily the item element itself - walk up\n  // to the nearest ancestor that is one of our direct slotted children.\n  private _findSlottedItem = (target: EventTarget | null): HTMLElement | undefined => {\n    let el = target instanceof Element ? target : null;\n    while (el) {\n      if (this._slottedItems.includes(el as HTMLElement))\n        return el as HTMLElement;\n      el = el.parentElement;\n    }\n    return undefined;\n  };\n\n  private _handlePointerOver = (e: PointerEvent): void => {\n    const item = this._findSlottedItem(e.target);\n    if (item) {\n      this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));\n    }\n  };\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === `ArrowLeft`) {\n      e.preventDefault();\n      this.tickled.handleKeyboardNavigation(`previous`);\n      this._applyTickledSelection();\n    } else if (e.key === `ArrowRight`) {\n      e.preventDefault();\n      this.tickled.handleKeyboardNavigation(`next`);\n      this._applyTickledSelection();\n    } else if (e.key === `Home`) {\n      e.preventDefault();\n      this.tickled.handleKeyboardNavigation(`first`);\n      this._applyTickledSelection();\n    } else if (e.key === `End`) {\n      e.preventDefault();\n      this.tickled.handleKeyboardNavigation(`last`);\n      this._applyTickledSelection();\n    }\n  };\n\n  private _applyTickledSelection = (): void => {\n    const id = this.tickled.tickledId;\n    if (id !== undefined && id !== this._selectedIndex) {\n      this.selectedIndex = id;\n    }\n  };\n\n  private _wheelCooldown = false;\n\n  // WheelNudgeMixin contract: direction follows the codebase-wide \"up =\n  // increase\" convention (wheel up/away = +1), which here maps naturally to\n  // \"next\" since selectedIndex increases moving forward through the list -\n  // same direction as every other consumer of this mixin except the\n  // deliberately-inverted rotary-dial case in radial-input.\n  _applyWheelDelta(direction: WheelDirection, _event: WheelEvent): void {\n    if (this._wheelCooldown)\n      return;\n\n    // Trackpads fire many wheel ticks per gesture; a short cooldown collapses\n    // that into one step, matching a single arrow-key press.\n    this._wheelCooldown = true;\n    this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);\n    this._applyTickledSelection();\n    setTimeout(() => {\n      this._wheelCooldown = false;\n    }, 250);\n  }\n\n  private _handleClick = (e: MouseEvent): void => {\n    // Focusing this (shadow-internal) element also focuses the host from the\n    // outside - document.activeElement retargets to the host across an open\n    // shadow boundary - so a single click lets arrow keys take over right away.\n    (e.currentTarget as HTMLElement).focus();\n    const item = this._findSlottedItem(e.target);\n    const index = item ? this._slottedItems.indexOf(item) : -1;\n    if (index >= 0 && index !== this._selectedIndex) {\n      this.selectedIndex = index;\n    }\n  };\n\n  private _updateSelectedAttribute = (): void => {\n    this._slottedItems.forEach((item, i) => {\n      if (i === this._selectedIndex) {\n        item.setAttribute(`selected`, ``);\n      } else {\n        item.removeAttribute(`selected`);\n      }\n    });\n  };\n\n  private _scrollSelectedIntoView = (): void => {\n    const item = this._slottedItems[this._selectedIndex];\n    if (item) {\n      item.scrollIntoView({ inline: `center`, behavior: `smooth` });\n    }\n  };\n\n  private _emitChange = (): void => {\n    this.dispatchEvent(\n      new CustomEvent<SelectHorizChangeDetail>(`change`, {\n        detail: {\n          selectedIndex: this._selectedIndex,\n          selectedItem: this.selectedItem,\n          selectedValue: this.selectedValue,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n}\n"],"mappings":"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"}