@ixfx/components 0.8.7 → 0.8.9

package/dist/{interaction-B9AAlsFO.js → interaction-BskmlA9t.js}

@@ -1,3 +1,3 @@
 import "./tickled-controller-Dh1Uh_vG.js";
 import "./tickled-styles-BrAHEj1q.js";
-import "./list-item-animation-DuiwgN3l.js";
+import "./list-item-animation-BUoEKi5s.js";

package/dist/{labelled-slider-input-BCH9968c.js → labelled-slider-input-aEYDvW2S.js}

@@ -5,7 +5,7 @@ import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
-import "./slider-input-WR8_RwHg.js";
+import "./slider-input-Cb5uSV42.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/editable-label/editable-number.ts
@@ -805,4 +805,4 @@ LabelledSliderInput = __decorate([safeCustomElement(`ixfx-labelled-slider-input`
 //#endregion
 export { EditableNumber as n, LabelledSliderInput as t };
 
-//# sourceMappingURL=labelled-slider-input-BCH9968c.js.map
+//# sourceMappingURL=labelled-slider-input-aEYDvW2S.js.map

package/dist/{labelled-slider-input-BCH9968c.js.map → labelled-slider-input-aEYDvW2S.js.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-slider-input-BCH9968c.js","names":["#lastInputValue","#dragStartY","#dragStartValue","#dragCurrentValue","#dragging","#hasDragged","customElement","customElement"],"sources":["../src/editable-label/editable-number.ts","../src/labelled-slider-input/labelled-slider-input.ts"],"sourcesContent":["/**\n * <ixfx-editable-number> — inline editable number label with Ableton-style drag.\n *\n * Extends <ixfx-editable-label> with:\n *   • Pointer drag to adjust value — drag up to increase, down to decrease,\n *     without entering full text-edit mode.\n *   • Click gives focus; pressing any key while focused enters text-edit mode.\n *   • Optional min/max clamping and step snapping.\n *   • Optional fill-bar visualization behind the label text.\n *\n * Attributes:\n *   min               Minimum value (no clamping if unset)\n *   max               Maximum value (no clamping if unset)\n *   step              Snap increment, also informs decimal-place display (unset = no snapping)\n *   stops             Number of quantised keyboard stops (unset = no snapping). Wins over `step` when > 1.\n *   drag-sensitivity  Steps changed per pixel of drag (default: 1); multiply by step to get units/px\n *   precision         Decimal places applied when rounding drag-produced values (default: 0 = integers).\n *                     Has no effect when step is set (step implies its own precision).\n *                     Typed values are never precision-rounded — the user can always enter finer values.\n *   fill-style        'linear' (default) or 'circular' — shape of the fill visualization\n *   linear-style      'range' (default), 'bipolar', or 'unipolar' — how value maps to fill (linear mode only)\n *   circular-style    'grow' (default), 'offset', or 'dot' — how value maps to fill (circular mode only)\n *   no-drag           Boolean — disables drag interaction; text editing still works\n *   lighttouch        Boolean — wheel adjusts the value on hover instead of requiring focus.\n *                              Wheel is suppressed while the user is typing (`_editing === true`).\n *\n * CSS variables:\n *   --fill-color      Fill bar color (default: var(--accent))\n *   --fill-opacity    Fill bar opacity as 0..1 (default: 0.25)\n *   --value           Current normalized value (0..1)\n *\n * All CSS variables from <ixfx-editable-label> are also inherited.\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired on text-edit commit AND on drag-end (if value changed).\n */\nimport type { CSSResult } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\nimport type { EditableLabelChangeDetail } from './editable-label.js';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { resolveAxisStep } from '../keyboard.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { EditableLabel } from './editable-label.js';\n\nconst DRAG_THRESHOLD_PX = 3;\n\n@customElement(`ixfx-editable-number`)\nexport class EditableNumber extends WheelNudgeMixin(EditableLabel) {\n  @property({ type: Number }) min?: number;\n  @property({ type: Number }) max?: number;\n  @property({ type: Number }) step?: number;\n  /** Quantised stops for keyboard nudging. Overrides `step` when > 1. */\n  @property({ type: Number }) stops?: number;\n  @property({ type: Number, attribute: `drag-sensitivity` }) dragSensitivity = 1;\n  @property({ attribute: `fill-style` }) fillStyle?: `linear` | `circular`;\n  @property({ attribute: `linear-style` }) linearStyle?: `range` | `bipolar` | `unipolar`;\n  @property({ attribute: `circular-style` }) circularStyle?: `grow` | `offset` | `dot`;\n  @property({ type: Boolean, attribute: `no-drag` }) noDrag = false;\n  @property({ type: Number }) precision = 0;\n\n  // ── Drag state (not reactive — managed imperatively to avoid Lit cycles) ──\n  #dragStartY = 0;\n  #dragStartValue = 0;\n  #dragging = false;\n  #hasDragged = false;\n  #dragCurrentValue = 0;\n  #lastInputValue = ``;\n  #firstUpdateComplete = false;\n\n  constructor() {\n    super();\n    // Override parent defaults for a number input context\n    this.mode = `editor`;\n    this.entryMode = `number`;\n    this.value = `0`;\n  }\n\n  // ── Render ───────────────────────────────────────────────────────────────────\n\n  override render() {\n    return html`\n      ${this.fillStyle ? html`<div class=\"track\"></div>` : ``}\n      ${this.fillStyle ? html`<div class=\"value\"><div class=\"bar\"></div></div>` : ``}\n      <div\n        class=\"number\"\n        part=\"content\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        contenteditable=\"${this._editing ? `plaintext-only` : `false`}\"\n        data-placeholder=\"${this.placeholder}\"\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        @keydown=${this._handleKeydown}\n        @beforeinput=${this._handleBeforeInput}\n        @input=${this._stopNativeInput}\n      ></div>\n    `;\n  }\n\n  private _stopNativeInput = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointerdown`, this._onPointerDown);\n    this.addEventListener(`pointermove`, this._onPointerMove);\n    this.addEventListener(`pointerup`, this._onPointerUp);\n    this.addEventListener(`keydown`, this._onKeyDown);\n    this.addEventListener(`click`, this._interceptClick, { capture: true });\n    this.addEventListener(`mouseenter`, this._handleMouseEnter);\n    this.addEventListener(`mouseleave`, this._handleMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointerdown`, this._onPointerDown);\n    this.removeEventListener(`pointermove`, this._onPointerMove);\n    this.removeEventListener(`pointerup`, this._onPointerUp);\n    this.removeEventListener(`keydown`, this._onKeyDown);\n    this.removeEventListener(`click`, this._interceptClick);\n    this.removeEventListener(`mouseenter`, this._handleMouseEnter);\n    this.removeEventListener(`mouseleave`, this._handleMouseLeave);\n  }\n\n  private _handleMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient` || this._editing)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient` || this._editing)\n      return;\n    this._hovering = false;\n    this._clearTransientTimer();\n    if (this._transientShowingValue) {\n      this._transientTimer = window.setTimeout(() => {\n        if (!this._hovering) {\n          this._transientShowingValue = false;\n          this._requestDisplayUpdate();\n        }\n      }, this.disappearDelay);\n    }\n  };\n\n  // ── Override parent interaction — focus only, edit via keypress ───────────\n\n  /** Click just focuses; edit mode is entered by pressing a key while focused. */\n  protected _handleClick = (): void => {\n    if (this.disabled)\n      return;\n    this.renderRoot?.querySelector<HTMLElement>(`.number`)?.focus();\n  };\n\n  /** Suppress auto-edit-on-focus from editor mode; keydown handles it instead. */\n  protected override _handleFocus = (): void => { /* intentional no-op */ };\n\n  /** Override to use .number instead of .content for text display */\n  protected get _contentEl(): HTMLElement | undefined {\n    const el = this.renderRoot?.querySelector<HTMLElement>(`.number`);\n    return el ?? undefined;\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>): void {\n    super.firstUpdated(changedProperties);\n    // For 'show' mode, start by showing displayText at rest\n    if (this.displayTextLogic === `show`) {\n      this._showModeWaitingToHide = true;\n    }\n    this._updateValueCss(this._normalizedValue());\n    this._requestDisplayUpdate();\n  }\n\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic === `show` && !this._editing) {\n      this._clearTransientTimer();\n      this._showModeWaitingToHide = false;\n      this._requestDisplayUpdate();\n      this._transientTimer = window.setTimeout(() => {\n        this._showModeWaitingToHide = true;\n        this._requestDisplayUpdate();\n      }, this.disappearDelay);\n      return;\n    }\n    if (this.displayTextLogic === `transient` && !this._editing) {\n      this._clearTransientTimer();\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n      this._transientTimer = window.setTimeout(() => {\n        if (!this._hovering) {\n          this._transientShowingValue = false;\n          this._requestDisplayUpdate();\n        }\n      }, this.disappearDelay);\n      return;\n    }\n    super._onUserInteraction();\n  }\n\n  private _onValueChange(): void {\n    if (this.displayTextLogic !== `show` || this._editing)\n      return;\n\n    this._clearTransientTimer();\n    this._showModeWaitingToHide = false;\n    this._requestDisplayUpdate();\n    this._transientTimer = window.setTimeout(() => {\n      this._showModeWaitingToHide = true;\n      this._requestDisplayUpdate();\n    }, this.disappearDelay);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    // Note: We do NOT call _onValueChange here for 'show' mode.\n    // The parent class handles display updates via _requestDisplayUpdate\n    // in firstUpdated. Additional value changes are handled via\n    // drag/keyboard events that call _onValueChange directly.\n    if (!this._editing) {\n      this._updateValueCss(this._normalizedValue());\n    }\n  }\n\n  private _updateValueCss(normalized: number): void {\n    this.style.setProperty(`--value`, String(normalized));\n\n    let valueStart = 0;\n    let valueEnd = normalized;\n\n    if (this.linearStyle === `bipolar`) {\n      if (normalized <= 0.5) {\n        valueStart = normalized;\n        valueEnd = 0.5;\n      } else {\n        valueStart = 0.5;\n        valueEnd = normalized;\n      }\n    } else if (this.linearStyle === `unipolar`) {\n      valueStart = 0.5 - normalized * 0.5;\n      valueEnd = 0.5 + normalized * 0.5;\n    }\n\n    this.style.setProperty(`--value-start`, String(valueStart));\n    this.style.setProperty(`--value-end`, String(valueEnd));\n\n    // For circular offset mode, compute pixel offset from center\n    // and set component dimensions for radius calculation\n    if (this.fillStyle === `circular` && this.circularStyle === `offset`) {\n      const h = this.offsetHeight;\n      const w = this.offsetWidth;\n      const r = h / 2 - 2; // radius with margin to prevent clipping at top/bottom\n      // Circle edges must stay 2px inside component edges:\n      // - at value=0: circle left edge at 2px\n      // - at value=1: circle right edge at w-2px\n      const leftEdge = 2;\n      const rightEdge = w - 2;\n      const valueCenterPx = leftEdge + r + normalized * (rightEdge - leftEdge - 2 * r);\n      this.style.setProperty(`--radius`, `${r}px`);\n      this.style.setProperty(`--value-center-px`, `${valueCenterPx}px`);\n      this.style.setProperty(`--component-width-px`, `${w}px`);\n      this.style.setProperty(`--component-height-px`, `${h}px`);\n    }\n  }\n\n  protected override _getDisplayText(): string {\n    // In override mode, always show displayText (even when dragging or editing)\n    if (this._shouldUseDisplayText()) {\n      return this.displayText ?? ``;\n    }\n    // For transient mode, show the drag value while dragging\n    if (this.#dragging) {\n      const formatted = this.step !== undefined\n        ? this._formatNumber(this.#dragCurrentValue)\n        : this.#dragCurrentValue.toFixed(this.precision);\n      return this.formatter ? this.formatter(formatted) : formatted;\n    }\n    // Normal case: when a custom formatter is set, pass raw value so formatter\n    // can apply its own precision logic (e.g. \"0.5\" → \"50%\" without precision loss)\n    if (this.formatter) {\n      const raw = Number.parseFloat(this.value);\n      return this.formatter(Number.isNaN(raw) ? this.value : String(raw));\n    }\n    return this._formatDisplay();\n  }\n\n  // ── Clamp before parent commits (overrides parent's private _tryCommit) ──\n\n  protected override _tryCommit(): void {\n    const el = this.renderRoot?.querySelector<HTMLElement>(`.number`);\n    if (el) {\n      const n = Number.parseFloat(el.textContent?.trim() ?? ``);\n      if (!Number.isNaN(n)) {\n        el.textContent = this._formatNumber(this._clamp(this._snap(n)));\n      }\n    }\n    super._tryCommit();\n  }\n\n  // ── Override parent's input handling — fire 'input' events on each keypress ──\n\n  protected override _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data) {\n      return;\n    }\n\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n      return;\n    }\n\n    const contentEl = this._contentEl;\n    if (!contentEl) {\n      return;\n    }\n\n    const currentContent = contentEl.textContent ?? ``;\n    const insertPosition = (contentEl as HTMLInputElement).selectionStart ?? currentContent.length;\n    const newValue = currentContent.slice(0, insertPosition) + e.data + currentContent.slice(insertPosition);\n\n    if (newValue !== this.#lastInputValue) {\n      this.#lastInputValue = newValue;\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: newValue },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  protected override _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing) {\n      return;\n    }\n\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this.dispatchEvent(new CustomEvent(`cancelled`, {\n        detail: { value: this._prevValue },\n        bubbles: true,\n        composed: true,\n      }));\n      this._cancelEdit();\n      this.dispatchEvent(new CustomEvent(`change`, {\n        detail: { value: this._prevValue },\n        bubbles: true,\n        composed: true,\n      }));\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  // ── Drag event handlers ───────────────────────────────────────────────────\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this._editing || this.disabled)\n      return;\n\n    if (this._handleArrowKey(e)) {\n      return;\n    }\n\n    // Printable characters while focused → enter edit mode.\n    // Enter is intentionally excluded: the parent handles Enter for commit,\n    // and including it here would re-enter edit mode immediately after commit.\n    if (e.key.length === 1) {\n      this._onUserInteraction();\n      this._beginEdit();\n    }\n  };\n\n  private _handleArrowKey(e: KeyboardEvent): boolean {\n    const range = (this.max ?? 100) - (this.min ?? 0);\n    if (range === 0)\n      return false;\n\n    const effectiveStep = resolveAxisStep(range, this.stops, this.step, e.shiftKey);\n\n    let delta = 0;\n    let handled = false;\n\n    switch (e.key) {\n      case `ArrowUp`:\n      case `ArrowRight`:\n        delta = effectiveStep;\n        handled = true;\n        break;\n      case `ArrowDown`:\n      case `ArrowLeft`:\n        delta = -effectiveStep;\n        handled = true;\n        break;\n      case `Home`:\n        delta = -(this._parseValue() - (this.min ?? 0));\n        handled = true;\n        break;\n      case `End`:\n        delta = (this.max ?? 0) - this._parseValue();\n        handled = true;\n        break;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      this._applyDelta(delta);\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Apply a signed delta to the current value, clamp/snap/format, and fire\n   * `input`/`change`. Shared between arrow-key handler and the wheel handler.\n   */\n  private _applyDelta(delta: number): void {\n    const prev = this.value;\n    const current = this._parseValue();\n    const newValue = this._clamp(this._snap(current + delta));\n\n    const newValueStr = this.step !== undefined\n      ? this._formatNumber(newValue)\n      : newValue.toFixed(this.precision);\n\n    this.value = newValueStr;\n\n    this._requestDisplayUpdate();\n    this._updateValueCss(this._normalizedValue(newValue));\n\n    if (newValueStr !== prev) {\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: newValueStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n\n    requestAnimationFrame(() => {\n      if (this.value !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    });\n  }\n\n  // Wheel handler — installed by WheelNudgeMixin on the host. Skipped during\n  // text edit so wheel-scrolling the value doesn't fight with the user's typing.\n  override _shouldHandleWheel(): boolean {\n    if (this._editing)\n      return false;\n    return super._shouldHandleWheel();\n  }\n\n  override _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void {\n    const range = (this.max ?? 100) - (this.min ?? 0);\n    if (range === 0)\n      return;\n    const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);\n    this._applyDelta(direction * effectiveStep);\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (e.button !== 0)\n      return; // left button only\n    if (this._editing)\n      return; // let contenteditable handle it\n    if (this.disabled || this.noDrag)\n      return;\n    e.preventDefault(); // suppress browser text-select / native drag\n    this.renderRoot?.querySelector<HTMLElement>(`.number`)?.focus(); // restore focus manually\n\n    this.#dragStartY = e.clientY;\n    this.#dragStartValue = this._parseValue();\n    this.#dragCurrentValue = this.#dragStartValue;\n    this.#dragging = false;\n    this.#hasDragged = false;\n    this.setPointerCapture(e.pointerId);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!(e.buttons & 1))\n      return; // left button must be held\n    if (this._editing)\n      return;\n    if (this.disabled || this.noDrag)\n      return;\n\n    const deltaY = this.#dragStartY - e.clientY; // up = positive\n    if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX)\n      return;\n\n    this.#dragging = true;\n    this.#hasDragged = true;\n    this.toggleAttribute(`dragging`, true);\n    this._onUserInteraction();\n\n    const raw = this.#dragStartValue + deltaY * this.dragSensitivity * (this.step || 1);\n    const snapped = this._clamp(this._snap(raw));\n    // When step is set, snapping already gives the right precision.\n    // When step is unset, round to `precision` decimal places.\n    this.#dragCurrentValue = this.step !== undefined\n      ? snapped\n      : Number.parseFloat(snapped.toFixed(this.precision));\n\n    const dragValueStr = this.step !== undefined\n      ? this._formatNumber(this.#dragCurrentValue)\n      : this.#dragCurrentValue.toFixed(this.precision);\n\n    if (dragValueStr !== this.#lastInputValue) {\n      this.#lastInputValue = dragValueStr;\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: dragValueStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n\n    // Update display using parent's displayTextLogic handling\n    this._requestDisplayUpdate();\n    this._updateValueCss(this._normalizedValue(this.#dragCurrentValue));\n  };\n\n  private _onPointerUp = (e: PointerEvent): void => {\n    if (this.hasPointerCapture(e.pointerId))\n      this.releasePointerCapture(e.pointerId);\n    if (!this.#dragging)\n      return;\n    if (this.disabled || this.noDrag)\n      return;\n\n    this.#dragging = false;\n    this.toggleAttribute(`dragging`, false);\n    // Format with step-based or precision-based dp so trailing zeros are preserved\n    // in the stored string (e.g. \"5.0\" when precision=1, not \"5\").\n    const finalStr = this.step !== undefined\n      ? this._formatNumber(this.#dragCurrentValue)\n      : this.#dragCurrentValue.toFixed(this.precision);\n    const prev = this.value;\n    this.value = finalStr;\n    if (finalStr !== prev) {\n      this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n        detail: { value: finalStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _interceptClick = (e: MouseEvent): void => {\n    if (this.#hasDragged) {\n      e.stopImmediatePropagation();\n      this.#hasDragged = false;\n    }\n  };\n\n  // ── Number helpers ────────────────────────────────────────────────────────\n\n  private _parseValue(): number {\n    return Number.parseFloat(this.value) || 0;\n  }\n\n  /**\n   * Formats the stored value for display, inferring decimal places from the value\n   * string itself. This preserves typed precision (e.g. \"0.1234\" stays \"0.1234\")\n   * and also respects trailing zeros written by drag storage (e.g. \"5.0\" stays \"5.0\").\n   */\n  private _formatDisplay(): string {\n    const n = Number.parseFloat(this.value);\n    if (Number.isNaN(n))\n      return this.value;\n    if (this.precision !== undefined) {\n      return n.toFixed(this.precision);\n    }\n    const dot = this.value.indexOf(`.`);\n    const dp = dot >= 0 ? this.value.length - dot - 1 : 0;\n    return n.toFixed(dp);\n  }\n\n  private _clamp(n: number): number {\n    if (this.min !== undefined)\n      n = Math.max(this.min, n);\n    if (this.max !== undefined)\n      n = Math.min(this.max, n);\n    return n;\n  }\n\n  private _snap(n: number): number {\n    if (this.stops && this.stops > 1) {\n      const min = this.min ?? 0;\n      const range = (this.max ?? 100) - min;\n      const stopStep = range / this.stops;\n      return Math.round((n - min) / stopStep) * stopStep + min;\n    }\n    if (!this.step)\n      return n;\n    return Math.round(n / this.step) * this.step;\n  }\n\n  private _inferDecimals(n?: number): number {\n    if (this.step !== undefined) {\n      const s = String(this.step);\n      const dot = s.indexOf(`.`);\n      return dot >= 0 ? s.length - dot - 1 : 0;\n    }\n    // No step set: infer from the value being formatted so floats are preserved\n    const s = String(n ?? this._parseValue());\n    const dot = s.indexOf(`.`);\n    return dot >= 0 ? s.length - dot - 1 : 0;\n  }\n\n  private _formatNumber(n: number): string {\n    return n.toFixed(this._inferDecimals(n));\n  }\n\n  /** Returns a 0..1 fraction for the given value within [min, max]. */\n  private _normalizedValue(n = this._parseValue()): number {\n    if (this.min === undefined || this.max === undefined)\n      return 0;\n    if (this.max === this.min)\n      return 0;\n    return Math.max(0, Math.min(1, (n - this.min) / (this.max - this.min)));\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [\n    themeFallbacks,\n    prominenceStyles,\n    ...EditableLabel.styles,\n    css`\n    :host {\n      font-size: var(--text-s,11px);\n      --value: 0;\n      --value-start: 0;\n      --value-end: 0;\n      --_fill-color-alpha: color-mix(\n        in oklch,\n        var(--fill-color, var(--accent, oklch(60% 0.15 140))) calc(var(--fill-opacity, 0.25) * 100%),\n        transparent\n      );\n    }\n\n    /* ── Layout (when fill-style is enabled) ── */\n    :host([fill-style]) {\n      display: grid;\n      position: relative;\n      grid-template-columns: 1fr;\n      grid-template-rows: 1fr;\n      min-height: 1.5em;\n      min-width: 5em;\n    }\n\n    :host([fill-style]) .track,\n    :host([fill-style]) .value {\n      grid-area: 1 / 1;\n      position: absolute;\n      inset: 0;\n    }\n\n    /* Track background styling */\n    :host([fill-style]) .track {\n      z-index: 0;\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([fill-style]) .value {\n      z-index: 1;\n    }\n\n    :host([fill-style=\"linear\"]) .track {\n      border-radius: var(--radius-s, 3px);\n    }\n\n    :host([fill-style=\"circular\"]) .track {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    /* Linear: all linear-styles use .bar positioned via --value-start and --value-end */\n    :host([fill-style=\"linear\"]) .value {\n      overflow: hidden;\n    }\n\n    :host([fill-style=\"linear\"]) .bar {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: calc(var(--value-start, 0) * 100%);\n      width: calc((var(--value-end, 0) - var(--value-start, 0)) * 100%);\n      background: var(--fill-image, var(--_fill-color-alpha));\n    }\n\n    /* Circular grow: filled circle growing from center */\n    :host([fill-style=\"circular\"][circular-style=\"grow\"]) .value,\n    :host([fill-style=\"circular\"]:not([circular-style])) .value {\n      background: var(--fill-image, var(--_fill-color-alpha));\n      clip-path: circle(calc(var(--value) * 50%) at 50% 50%);\n    }\n\n    /* Circular offset: value circle slides left/right from center.\n       Track circle is centered, filling the height.\n       Value circle is same size, offset by --value-offset-px.\n       At value=0.5: value circle centered on track (invisible when overlaid)\n       At value=0: value circle at far left\n       At value=1: value circle at far right\n    */\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) {\n      min-width: 80px;\n      min-height: 26px;\n      overflow: hidden;\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .track {\n      position: absolute;\n      top: 50%;\n      border-radius: 50%;\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      width: calc(var(--radius, 11px) * 2);\n      height: calc(var(--radius, 11px) * 2);\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .value {\n      position: absolute;\n      top: 50%;\n      background: var(--fill-image, var(--_fill-color-alpha));\n      border-radius: 50%;\n      width: calc(var(--radius, 11px) * 2);\n      height: calc(var(--radius, 11px) * 2);\n      transform: translate(calc(var(--value-center-px, 13px) - var(--radius, 11px)), -50%);\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .number {\n      border-radius: 0;\n    }\n\n    /* Circular dot: full circle */\n    :host([fill-style=\"circular\"][circular-style=\"dot\"]) .value {\n      background: var(--fill-image, var(--_fill-color-alpha));\n    }\n\n    /* ── Number (top layer - text display) ── */\n    :host([fill-style]) .number {\n      position: absolute;\n      inset: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: inherit;\n      font-size: inherit;\n      color: inherit;\n      padding: var(--space-xs, 3px) var(--space-s, 4px);\n    }\n\n    :host([fill-style=\"circular\"]) .number {\n      border-radius: 50%;\n    }\n\n    /* Drag cursor + no text selection while not in text-edit mode */\n    :host(:not([disabled]):not([no-drag])) .number:not([contenteditable=\"plaintext-only\"]) {\n      cursor: ns-resize;\n      user-select: none;\n      -webkit-user-select: none;\n      touch-action: none;\n    }\n\n    /* Focus outline */\n    :host .number {\n      outline: none;\n    }\n\n    :host .number:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    /* ── Circular host sizing ── */\n    :host([fill-style=\"circular\"][circular-style=\"grow\"]),\n    :host([fill-style=\"circular\"]:not([circular-style])) {\n      aspect-ratio: 1;\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-number': EditableNumber;\n  }\n}\n","/**\n * <ixfx-labelled-slider-input> — labelled slider input combining ixfx-editable-number and ixfx-slider-input.\n *\n * Layout is driven by container queries on the component's own height:\n *   - height >= 80px → vertical (label above slider) — the default with height: 100px\n *   - height <  80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query;\n * --flow: column stacks at any --height, so a tight --height hugs label + slider\n * with no dead space above/below).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n * Override the slider's band thickness in the stacked layout with --slider-thickness (default: 2.5em);\n * extra component height beyond label + slider is split evenly above and below the group.\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n *   --label-font-size   (default: var(--text-m))\n *   --label-font-family (default: var(--font-family))\n *   --label-color       (default: var(--surface-2-text))\n *   --label-muted-color (default: var(--surface-muted-text))\n *   --label-padding     (default: var(--space-xs) var(--space-s))\n *   --label-radius      (default: var(--radius-s))\n *   --label-align       (default: center)\n *\n * From ixfx-slider-input:\n *   --lane-track-color, --lane-value-color, --lane-color, --lane-<key>-color\n *   --lane-dasharray, --lane-dashoffset, --lane-linecap (round | butt)\n *   --marker-color, --marker-thickness, --marker-length, --marker-offset\n *   --marker-border-width, --marker-border-color, --marker-a-color, etc.\n *   --track-color, --track-width, --track-margin\n *   --midpoint-color, --midpoint-thickness, --midpoint-length\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   stops                   Quantise to N discrete positions (default: undefined)\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   orientation             'horizontal' | 'vertical' (slider orientation)\n *   single-style            'range' | 'bipolar' | 'unipolar' (single mode only)\n *   marker-style            'needle' | 'dot' | 'triangle' | 'none'\n *   disabled                Boolean — disables all interaction\n *   swipeable               Boolean — swipe-to-draw gesture (no pointer capture,\n *                                 for step-sequencer layouts; mirrors ixfx-slider-input)\n *   switch-height           Height threshold for vertical↔horizontal switch (default: 80)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display\n *   lighttouch              Boolean — passed through to the inner slider and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via slider or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { SliderMarkerStyle, SliderSingleStyle } from '../slider-input/types.js';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../editable-label/editable-number.js';\nimport '../slider-input/slider-input.js';\n\n@customElement(`ixfx-labelled-slider-input`)\nexport class LabelledSliderInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-slider-input`;\n\n  @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: String, attribute: `single-style` }) singleStyle: SliderSingleStyle = `range`;\n  @property({ type: String, attribute: `marker-style` }) markerStyle: SliderMarkerStyle = `needle`;\n  @property({ type: Number }) stops: number | undefined = undefined;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) swipeable = false;\n  /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n  protected override _renderEditableNumber() {\n    // Override base implementation to pass lighttouch through to the inner\n    // editable-number. Mirrors the props forwarded in LabelledInputBase.\n    if (this._isMini) {\n      // Mini mode: no editable-number rendered at all (matches base behaviour).\n      return html``;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  protected override _syncValue(v: number): void {\n    super._syncValue(v);\n    // Base applyValue() sets `.value`, but ixfx-slider-input holds its value\n    // in `.valueA` — sync it directly so programmatic changes propagate.\n    const input = this.renderRoot?.querySelector(this.inputSelector) as unknown as { valueA?: number } | null;\n    if (input && typeof input.valueA === `number` && input.valueA !== v) {\n      input.valueA = v;\n    }\n  }\n\n  override render() {\n    // No tooltip on the inner slider: the editable-number already shows the\n    // value, so a slider tooltip would be redundant.\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-slider-input\n          class=\"slider\"\n          ?lighttouch=${this.lighttouch}\n          ?disabled=${this.disabled}\n          ?swipeable=${this.swipeable}\n          .valueA=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .stops=${this.stops}\n          .orientation=${this.orientation}\n          .singleStyle=${this.singleStyle}\n          .markerStyle=${this.markerStyle}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-slider-input>\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = css`\n    :host {\n      display: block;\n      container-type: size;\n      min-height: var(--min-height, 20px);\n      min-width: var(--min-width, 50px);\n      width: var(--width, auto);\n      height: var(--height, 100px);\n    }\n\n    /* One focus ring for the whole control: the inner slider's own ring is\n       suppressed (see ixfx-slider-input below) and re-drawn here so it wraps\n       the label + slider group instead of just the track. */\n    :host(:focus-within) {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n    }\n\n    ixfx-slider-input {\n      flex: 1;\n      min-width: 0;\n      /* Suppress the slider's own focus ring; the wrapper draws one around\n         the whole control via :host(:focus-within) above. */\n      --slider-input-svg-focus-outline: none;\n      --slider-input-svg-focus-outline-offset: 0;\n    }\n\n    /* Default (compact): horizontal — label beside slider */\n    .wrap {\n      flex-direction: var(--flow, row);\n      justify-content: flex-start;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n      --label-min-width: var(--label-width, 5ch);\n      /* Block fill/background variables from reaching editable-number */\n      --fill-color: initial;\n      --fill-opacity: initial;\n      --fill-image: initial;\n    }\n\n    /* Vertically-stacked layout: applied when the container is tall enough\n       to fit label + slider, OR when the author forces it with --flow:\n       column (a style query, so an explicit --flow: column brings the\n       label/slider companion rules too — not just the flex direction — and\n       therefore works at any --height, not only >= 80px). */\n    @container (height >= 80px) or style(--flow: column) {\n      .wrap {\n        flex-direction: var(--flow, column);\n        /* Centre the label+slider group so any height the component is\n           given beyond what the two need is split evenly above and below,\n           rather than dumped into a stretched slider. */\n        justify-content: center;\n        align-items: center;\n      }\n\n      ixfx-editable-number {\n        --label-align: center;\n        /* Stretch (not width: 100%): in the normal stacked column this is\n           visually identical (full-width centered label), but a hardcoded\n           100% width would also apply when --flow forces a row at this\n           height — eating the whole row and squeezing the slider to zero. */\n        align-self: stretch;\n        width: auto;\n      }\n\n      ixfx-slider-input {\n        width: 100%;\n        /* Don't stretch to fill the column. The slider paints its bar\n           thickness as a fraction of the height it's handed, so a fat\n           lane-track-width in a tall slot leaves most of that slot as\n           dead space. Cap it to a sensible band (override with\n           --slider-thickness) and let the centred group absorb the rest. */\n        flex: 0 1 auto;\n        height: var(--slider-thickness, 2.5em);\n        max-height: 100%;\n      }\n    }\n\n    /* Mini mode: slider fills the full component */\n    .wrap.mini {\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-slider-input {\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-slider-input': LabelledSliderInput;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"labelled-slider-input-aEYDvW2S.js","names":["#lastInputValue","#dragStartY","#dragStartValue","#dragCurrentValue","#dragging","#hasDragged","customElement","customElement"],"sources":["../src/editable-label/editable-number.ts","../src/labelled-slider-input/labelled-slider-input.ts"],"sourcesContent":["/**\n * <ixfx-editable-number> — inline editable number label with Ableton-style drag.\n *\n * Extends <ixfx-editable-label> with:\n *   • Pointer drag to adjust value — drag up to increase, down to decrease,\n *     without entering full text-edit mode.\n *   • Click gives focus; pressing any key while focused enters text-edit mode.\n *   • Optional min/max clamping and step snapping.\n *   • Optional fill-bar visualization behind the label text.\n *\n * Attributes:\n *   min               Minimum value (no clamping if unset)\n *   max               Maximum value (no clamping if unset)\n *   step              Snap increment, also informs decimal-place display (unset = no snapping)\n *   stops             Number of quantised keyboard stops (unset = no snapping). Wins over `step` when > 1.\n *   drag-sensitivity  Steps changed per pixel of drag (default: 1); multiply by step to get units/px\n *   precision         Decimal places applied when rounding drag-produced values (default: 0 = integers).\n *                     Has no effect when step is set (step implies its own precision).\n *                     Typed values are never precision-rounded — the user can always enter finer values.\n *   fill-style        'linear' (default) or 'circular' — shape of the fill visualization\n *   linear-style      'range' (default), 'bipolar', or 'unipolar' — how value maps to fill (linear mode only)\n *   circular-style    'grow' (default), 'offset', or 'dot' — how value maps to fill (circular mode only)\n *   no-drag           Boolean — disables drag interaction; text editing still works\n *   lighttouch        Boolean — wheel adjusts the value on hover instead of requiring focus.\n *                              Wheel is suppressed while the user is typing (`_editing === true`).\n *\n * CSS variables:\n *   --fill-color      Fill bar color (default: var(--accent))\n *   --fill-opacity    Fill bar opacity as 0..1 (default: 0.25)\n *   --value           Current normalized value (0..1)\n *\n * All CSS variables from <ixfx-editable-label> are also inherited.\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired on text-edit commit AND on drag-end (if value changed).\n */\nimport type { CSSResult } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\nimport type { EditableLabelChangeDetail } from './editable-label.js';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { resolveAxisStep } from '../keyboard.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { EditableLabel } from './editable-label.js';\n\nconst DRAG_THRESHOLD_PX = 3;\n\n@customElement(`ixfx-editable-number`)\nexport class EditableNumber extends WheelNudgeMixin(EditableLabel) {\n  @property({ type: Number }) min?: number;\n  @property({ type: Number }) max?: number;\n  @property({ type: Number }) step?: number;\n  /** Quantised stops for keyboard nudging. Overrides `step` when > 1. */\n  @property({ type: Number }) stops?: number;\n  @property({ type: Number, attribute: `drag-sensitivity` }) dragSensitivity = 1;\n  @property({ attribute: `fill-style` }) fillStyle?: `linear` | `circular`;\n  @property({ attribute: `linear-style` }) linearStyle?: `range` | `bipolar` | `unipolar`;\n  @property({ attribute: `circular-style` }) circularStyle?: `grow` | `offset` | `dot`;\n  @property({ type: Boolean, attribute: `no-drag` }) noDrag = false;\n  @property({ type: Number }) precision = 0;\n\n  // ── Drag state (not reactive — managed imperatively to avoid Lit cycles) ──\n  #dragStartY = 0;\n  #dragStartValue = 0;\n  #dragging = false;\n  #hasDragged = false;\n  #dragCurrentValue = 0;\n  #lastInputValue = ``;\n  #firstUpdateComplete = false;\n\n  constructor() {\n    super();\n    // Override parent defaults for a number input context\n    this.mode = `editor`;\n    this.entryMode = `number`;\n    this.value = `0`;\n  }\n\n  // ── Render ───────────────────────────────────────────────────────────────────\n\n  override render() {\n    return html`\n      ${this.fillStyle ? html`<div class=\"track\"></div>` : ``}\n      ${this.fillStyle ? html`<div class=\"value\"><div class=\"bar\"></div></div>` : ``}\n      <div\n        class=\"number\"\n        part=\"content\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        contenteditable=\"${this._editing ? `plaintext-only` : `false`}\"\n        data-placeholder=\"${this.placeholder}\"\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        @keydown=${this._handleKeydown}\n        @beforeinput=${this._handleBeforeInput}\n        @input=${this._stopNativeInput}\n      ></div>\n    `;\n  }\n\n  private _stopNativeInput = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointerdown`, this._onPointerDown);\n    this.addEventListener(`pointermove`, this._onPointerMove);\n    this.addEventListener(`pointerup`, this._onPointerUp);\n    this.addEventListener(`keydown`, this._onKeyDown);\n    this.addEventListener(`click`, this._interceptClick, { capture: true });\n    this.addEventListener(`mouseenter`, this._handleMouseEnter);\n    this.addEventListener(`mouseleave`, this._handleMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointerdown`, this._onPointerDown);\n    this.removeEventListener(`pointermove`, this._onPointerMove);\n    this.removeEventListener(`pointerup`, this._onPointerUp);\n    this.removeEventListener(`keydown`, this._onKeyDown);\n    this.removeEventListener(`click`, this._interceptClick);\n    this.removeEventListener(`mouseenter`, this._handleMouseEnter);\n    this.removeEventListener(`mouseleave`, this._handleMouseLeave);\n  }\n\n  private _handleMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient` || this._editing)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient` || this._editing)\n      return;\n    this._hovering = false;\n    this._clearTransientTimer();\n    if (this._transientShowingValue) {\n      this._transientTimer = window.setTimeout(() => {\n        if (!this._hovering) {\n          this._transientShowingValue = false;\n          this._requestDisplayUpdate();\n        }\n      }, this.disappearDelay);\n    }\n  };\n\n  // ── Override parent interaction — focus only, edit via keypress ───────────\n\n  /** Click just focuses; edit mode is entered by pressing a key while focused. */\n  protected _handleClick = (): void => {\n    if (this.disabled)\n      return;\n    this.renderRoot?.querySelector<HTMLElement>(`.number`)?.focus();\n  };\n\n  /** Suppress auto-edit-on-focus from editor mode; keydown handles it instead. */\n  protected override _handleFocus = (): void => { /* intentional no-op */ };\n\n  /** Override to use .number instead of .content for text display */\n  protected get _contentEl(): HTMLElement | undefined {\n    const el = this.renderRoot?.querySelector<HTMLElement>(`.number`);\n    return el ?? undefined;\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>): void {\n    super.firstUpdated(changedProperties);\n    // For 'show' mode, start by showing displayText at rest\n    if (this.displayTextLogic === `show`) {\n      this._showModeWaitingToHide = true;\n    }\n    this._updateValueCss(this._normalizedValue());\n    this._requestDisplayUpdate();\n  }\n\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic === `show` && !this._editing) {\n      this._clearTransientTimer();\n      this._showModeWaitingToHide = false;\n      this._requestDisplayUpdate();\n      this._transientTimer = window.setTimeout(() => {\n        this._showModeWaitingToHide = true;\n        this._requestDisplayUpdate();\n      }, this.disappearDelay);\n      return;\n    }\n    if (this.displayTextLogic === `transient` && !this._editing) {\n      this._clearTransientTimer();\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n      this._transientTimer = window.setTimeout(() => {\n        if (!this._hovering) {\n          this._transientShowingValue = false;\n          this._requestDisplayUpdate();\n        }\n      }, this.disappearDelay);\n      return;\n    }\n    super._onUserInteraction();\n  }\n\n  private _onValueChange(): void {\n    if (this.displayTextLogic !== `show` || this._editing)\n      return;\n\n    this._clearTransientTimer();\n    this._showModeWaitingToHide = false;\n    this._requestDisplayUpdate();\n    this._transientTimer = window.setTimeout(() => {\n      this._showModeWaitingToHide = true;\n      this._requestDisplayUpdate();\n    }, this.disappearDelay);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    // Note: We do NOT call _onValueChange here for 'show' mode.\n    // The parent class handles display updates via _requestDisplayUpdate\n    // in firstUpdated. Additional value changes are handled via\n    // drag/keyboard events that call _onValueChange directly.\n    if (!this._editing) {\n      this._updateValueCss(this._normalizedValue());\n    }\n  }\n\n  private _updateValueCss(normalized: number): void {\n    this.style.setProperty(`--value`, String(normalized));\n\n    let valueStart = 0;\n    let valueEnd = normalized;\n\n    if (this.linearStyle === `bipolar`) {\n      if (normalized <= 0.5) {\n        valueStart = normalized;\n        valueEnd = 0.5;\n      } else {\n        valueStart = 0.5;\n        valueEnd = normalized;\n      }\n    } else if (this.linearStyle === `unipolar`) {\n      valueStart = 0.5 - normalized * 0.5;\n      valueEnd = 0.5 + normalized * 0.5;\n    }\n\n    this.style.setProperty(`--value-start`, String(valueStart));\n    this.style.setProperty(`--value-end`, String(valueEnd));\n\n    // For circular offset mode, compute pixel offset from center\n    // and set component dimensions for radius calculation\n    if (this.fillStyle === `circular` && this.circularStyle === `offset`) {\n      const h = this.offsetHeight;\n      const w = this.offsetWidth;\n      const r = h / 2 - 2; // radius with margin to prevent clipping at top/bottom\n      // Circle edges must stay 2px inside component edges:\n      // - at value=0: circle left edge at 2px\n      // - at value=1: circle right edge at w-2px\n      const leftEdge = 2;\n      const rightEdge = w - 2;\n      const valueCenterPx = leftEdge + r + normalized * (rightEdge - leftEdge - 2 * r);\n      this.style.setProperty(`--radius`, `${r}px`);\n      this.style.setProperty(`--value-center-px`, `${valueCenterPx}px`);\n      this.style.setProperty(`--component-width-px`, `${w}px`);\n      this.style.setProperty(`--component-height-px`, `${h}px`);\n    }\n  }\n\n  protected override _getDisplayText(): string {\n    // In override mode, always show displayText (even when dragging or editing)\n    if (this._shouldUseDisplayText()) {\n      return this.displayText ?? ``;\n    }\n    // For transient mode, show the drag value while dragging\n    if (this.#dragging) {\n      const formatted = this.step !== undefined\n        ? this._formatNumber(this.#dragCurrentValue)\n        : this.#dragCurrentValue.toFixed(this.precision);\n      return this.formatter ? this.formatter(formatted) : formatted;\n    }\n    // Normal case: when a custom formatter is set, pass raw value so formatter\n    // can apply its own precision logic (e.g. \"0.5\" → \"50%\" without precision loss)\n    if (this.formatter) {\n      const raw = Number.parseFloat(this.value);\n      return this.formatter(Number.isNaN(raw) ? this.value : String(raw));\n    }\n    return this._formatDisplay();\n  }\n\n  // ── Clamp before parent commits (overrides parent's private _tryCommit) ──\n\n  protected override _tryCommit(): void {\n    const el = this.renderRoot?.querySelector<HTMLElement>(`.number`);\n    if (el) {\n      const n = Number.parseFloat(el.textContent?.trim() ?? ``);\n      if (!Number.isNaN(n)) {\n        el.textContent = this._formatNumber(this._clamp(this._snap(n)));\n      }\n    }\n    super._tryCommit();\n  }\n\n  // ── Override parent's input handling — fire 'input' events on each keypress ──\n\n  protected override _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data) {\n      return;\n    }\n\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n      return;\n    }\n\n    const contentEl = this._contentEl;\n    if (!contentEl) {\n      return;\n    }\n\n    const currentContent = contentEl.textContent ?? ``;\n    const insertPosition = (contentEl as HTMLInputElement).selectionStart ?? currentContent.length;\n    const newValue = currentContent.slice(0, insertPosition) + e.data + currentContent.slice(insertPosition);\n\n    if (newValue !== this.#lastInputValue) {\n      this.#lastInputValue = newValue;\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: newValue },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  protected override _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing) {\n      return;\n    }\n\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this.dispatchEvent(new CustomEvent(`cancelled`, {\n        detail: { value: this._prevValue },\n        bubbles: true,\n        composed: true,\n      }));\n      this._cancelEdit();\n      this.dispatchEvent(new CustomEvent(`change`, {\n        detail: { value: this._prevValue },\n        bubbles: true,\n        composed: true,\n      }));\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  // ── Drag event handlers ───────────────────────────────────────────────────\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this._editing || this.disabled)\n      return;\n\n    if (this._handleArrowKey(e)) {\n      return;\n    }\n\n    // Printable characters while focused → enter edit mode.\n    // Enter is intentionally excluded: the parent handles Enter for commit,\n    // and including it here would re-enter edit mode immediately after commit.\n    if (e.key.length === 1) {\n      this._onUserInteraction();\n      this._beginEdit();\n    }\n  };\n\n  private _handleArrowKey(e: KeyboardEvent): boolean {\n    const range = (this.max ?? 100) - (this.min ?? 0);\n    if (range === 0)\n      return false;\n\n    const effectiveStep = resolveAxisStep(range, this.stops, this.step, e.shiftKey);\n\n    let delta = 0;\n    let handled = false;\n\n    switch (e.key) {\n      case `ArrowUp`:\n      case `ArrowRight`:\n        delta = effectiveStep;\n        handled = true;\n        break;\n      case `ArrowDown`:\n      case `ArrowLeft`:\n        delta = -effectiveStep;\n        handled = true;\n        break;\n      case `Home`:\n        delta = -(this._parseValue() - (this.min ?? 0));\n        handled = true;\n        break;\n      case `End`:\n        delta = (this.max ?? 0) - this._parseValue();\n        handled = true;\n        break;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      this._applyDelta(delta);\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Apply a signed delta to the current value, clamp/snap/format, and fire\n   * `input`/`change`. Shared between arrow-key handler and the wheel handler.\n   */\n  private _applyDelta(delta: number): void {\n    const prev = this.value;\n    const current = this._parseValue();\n    const newValue = this._clamp(this._snap(current + delta));\n\n    const newValueStr = this.step !== undefined\n      ? this._formatNumber(newValue)\n      : newValue.toFixed(this.precision);\n\n    this.value = newValueStr;\n\n    this._requestDisplayUpdate();\n    this._updateValueCss(this._normalizedValue(newValue));\n\n    if (newValueStr !== prev) {\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: newValueStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n\n    requestAnimationFrame(() => {\n      if (this.value !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    });\n  }\n\n  // Wheel handler — installed by WheelNudgeMixin on the host. Skipped during\n  // text edit so wheel-scrolling the value doesn't fight with the user's typing.\n  override _shouldHandleWheel(): boolean {\n    if (this._editing)\n      return false;\n    return super._shouldHandleWheel();\n  }\n\n  override _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void {\n    const range = (this.max ?? 100) - (this.min ?? 0);\n    if (range === 0)\n      return;\n    const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);\n    this._applyDelta(direction * effectiveStep);\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (e.button !== 0)\n      return; // left button only\n    if (this._editing)\n      return; // let contenteditable handle it\n    if (this.disabled || this.noDrag)\n      return;\n    e.preventDefault(); // suppress browser text-select / native drag\n    this.renderRoot?.querySelector<HTMLElement>(`.number`)?.focus(); // restore focus manually\n\n    this.#dragStartY = e.clientY;\n    this.#dragStartValue = this._parseValue();\n    this.#dragCurrentValue = this.#dragStartValue;\n    this.#dragging = false;\n    this.#hasDragged = false;\n    this.setPointerCapture(e.pointerId);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!(e.buttons & 1))\n      return; // left button must be held\n    if (this._editing)\n      return;\n    if (this.disabled || this.noDrag)\n      return;\n\n    const deltaY = this.#dragStartY - e.clientY; // up = positive\n    if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX)\n      return;\n\n    this.#dragging = true;\n    this.#hasDragged = true;\n    this.toggleAttribute(`dragging`, true);\n    this._onUserInteraction();\n\n    const raw = this.#dragStartValue + deltaY * this.dragSensitivity * (this.step || 1);\n    const snapped = this._clamp(this._snap(raw));\n    // When step is set, snapping already gives the right precision.\n    // When step is unset, round to `precision` decimal places.\n    this.#dragCurrentValue = this.step !== undefined\n      ? snapped\n      : Number.parseFloat(snapped.toFixed(this.precision));\n\n    const dragValueStr = this.step !== undefined\n      ? this._formatNumber(this.#dragCurrentValue)\n      : this.#dragCurrentValue.toFixed(this.precision);\n\n    if (dragValueStr !== this.#lastInputValue) {\n      this.#lastInputValue = dragValueStr;\n      this.dispatchEvent(new CustomEvent(`input`, {\n        detail: { value: dragValueStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n\n    // Update display using parent's displayTextLogic handling\n    this._requestDisplayUpdate();\n    this._updateValueCss(this._normalizedValue(this.#dragCurrentValue));\n  };\n\n  private _onPointerUp = (e: PointerEvent): void => {\n    if (this.hasPointerCapture(e.pointerId))\n      this.releasePointerCapture(e.pointerId);\n    if (!this.#dragging)\n      return;\n    if (this.disabled || this.noDrag)\n      return;\n\n    this.#dragging = false;\n    this.toggleAttribute(`dragging`, false);\n    // Format with step-based or precision-based dp so trailing zeros are preserved\n    // in the stored string (e.g. \"5.0\" when precision=1, not \"5\").\n    const finalStr = this.step !== undefined\n      ? this._formatNumber(this.#dragCurrentValue)\n      : this.#dragCurrentValue.toFixed(this.precision);\n    const prev = this.value;\n    this.value = finalStr;\n    if (finalStr !== prev) {\n      this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n        detail: { value: finalStr },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _interceptClick = (e: MouseEvent): void => {\n    if (this.#hasDragged) {\n      e.stopImmediatePropagation();\n      this.#hasDragged = false;\n    }\n  };\n\n  // ── Number helpers ────────────────────────────────────────────────────────\n\n  private _parseValue(): number {\n    return Number.parseFloat(this.value) || 0;\n  }\n\n  /**\n   * Formats the stored value for display, inferring decimal places from the value\n   * string itself. This preserves typed precision (e.g. \"0.1234\" stays \"0.1234\")\n   * and also respects trailing zeros written by drag storage (e.g. \"5.0\" stays \"5.0\").\n   */\n  private _formatDisplay(): string {\n    const n = Number.parseFloat(this.value);\n    if (Number.isNaN(n))\n      return this.value;\n    if (this.precision !== undefined) {\n      return n.toFixed(this.precision);\n    }\n    const dot = this.value.indexOf(`.`);\n    const dp = dot >= 0 ? this.value.length - dot - 1 : 0;\n    return n.toFixed(dp);\n  }\n\n  private _clamp(n: number): number {\n    if (this.min !== undefined)\n      n = Math.max(this.min, n);\n    if (this.max !== undefined)\n      n = Math.min(this.max, n);\n    return n;\n  }\n\n  private _snap(n: number): number {\n    if (this.stops && this.stops > 1) {\n      const min = this.min ?? 0;\n      const range = (this.max ?? 100) - min;\n      const stopStep = range / this.stops;\n      return Math.round((n - min) / stopStep) * stopStep + min;\n    }\n    if (!this.step)\n      return n;\n    return Math.round(n / this.step) * this.step;\n  }\n\n  private _inferDecimals(n?: number): number {\n    if (this.step !== undefined) {\n      const s = String(this.step);\n      const dot = s.indexOf(`.`);\n      return dot >= 0 ? s.length - dot - 1 : 0;\n    }\n    // No step set: infer from the value being formatted so floats are preserved\n    const s = String(n ?? this._parseValue());\n    const dot = s.indexOf(`.`);\n    return dot >= 0 ? s.length - dot - 1 : 0;\n  }\n\n  private _formatNumber(n: number): string {\n    return n.toFixed(this._inferDecimals(n));\n  }\n\n  /** Returns a 0..1 fraction for the given value within [min, max]. */\n  private _normalizedValue(n = this._parseValue()): number {\n    if (this.min === undefined || this.max === undefined)\n      return 0;\n    if (this.max === this.min)\n      return 0;\n    return Math.max(0, Math.min(1, (n - this.min) / (this.max - this.min)));\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [\n    themeFallbacks,\n    prominenceStyles,\n    ...EditableLabel.styles,\n    css`\n    :host {\n      font-size: var(--text-s,11px);\n      --value: 0;\n      --value-start: 0;\n      --value-end: 0;\n      --_fill-color-alpha: color-mix(\n        in oklch,\n        var(--fill-color, var(--accent, oklch(60% 0.15 140))) calc(var(--fill-opacity, 0.25) * 100%),\n        transparent\n      );\n    }\n\n    /* ── Layout (when fill-style is enabled) ── */\n    :host([fill-style]) {\n      display: grid;\n      position: relative;\n      grid-template-columns: 1fr;\n      grid-template-rows: 1fr;\n      min-height: 1.5em;\n      min-width: 5em;\n    }\n\n    :host([fill-style]) .track,\n    :host([fill-style]) .value {\n      grid-area: 1 / 1;\n      position: absolute;\n      inset: 0;\n    }\n\n    /* Track background styling */\n    :host([fill-style]) .track {\n      z-index: 0;\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([fill-style]) .value {\n      z-index: 1;\n    }\n\n    :host([fill-style=\"linear\"]) .track {\n      border-radius: var(--radius-s, 3px);\n    }\n\n    :host([fill-style=\"circular\"]) .track {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    /* Linear: all linear-styles use .bar positioned via --value-start and --value-end */\n    :host([fill-style=\"linear\"]) .value {\n      overflow: hidden;\n    }\n\n    :host([fill-style=\"linear\"]) .bar {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: calc(var(--value-start, 0) * 100%);\n      width: calc((var(--value-end, 0) - var(--value-start, 0)) * 100%);\n      background: var(--fill-image, var(--_fill-color-alpha));\n    }\n\n    /* Circular grow: filled circle growing from center */\n    :host([fill-style=\"circular\"][circular-style=\"grow\"]) .value,\n    :host([fill-style=\"circular\"]:not([circular-style])) .value {\n      background: var(--fill-image, var(--_fill-color-alpha));\n      clip-path: circle(calc(var(--value) * 50%) at 50% 50%);\n    }\n\n    /* Circular offset: value circle slides left/right from center.\n       Track circle is centered, filling the height.\n       Value circle is same size, offset by --value-offset-px.\n       At value=0.5: value circle centered on track (invisible when overlaid)\n       At value=0: value circle at far left\n       At value=1: value circle at far right\n    */\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) {\n      min-width: 80px;\n      min-height: 26px;\n      overflow: hidden;\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .track {\n      position: absolute;\n      top: 50%;\n      border-radius: 50%;\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      width: calc(var(--radius, 11px) * 2);\n      height: calc(var(--radius, 11px) * 2);\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .value {\n      position: absolute;\n      top: 50%;\n      background: var(--fill-image, var(--_fill-color-alpha));\n      border-radius: 50%;\n      width: calc(var(--radius, 11px) * 2);\n      height: calc(var(--radius, 11px) * 2);\n      transform: translate(calc(var(--value-center-px, 13px) - var(--radius, 11px)), -50%);\n    }\n\n    :host([fill-style=\"circular\"][circular-style=\"offset\"]) .number {\n      border-radius: 0;\n    }\n\n    /* Circular dot: full circle */\n    :host([fill-style=\"circular\"][circular-style=\"dot\"]) .value {\n      background: var(--fill-image, var(--_fill-color-alpha));\n    }\n\n    /* ── Number (top layer - text display) ── */\n    :host([fill-style]) .number {\n      position: absolute;\n      inset: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: inherit;\n      font-size: inherit;\n      color: inherit;\n      padding: var(--space-xs, 3px) var(--space-s, 4px);\n    }\n\n    :host([fill-style=\"circular\"]) .number {\n      border-radius: 50%;\n    }\n\n    /* Drag cursor + no text selection while not in text-edit mode */\n    :host(:not([disabled]):not([no-drag])) .number:not([contenteditable=\"plaintext-only\"]) {\n      cursor: ns-resize;\n      user-select: none;\n      -webkit-user-select: none;\n      touch-action: none;\n    }\n\n    /* Focus outline */\n    :host .number {\n      outline: none;\n    }\n\n    :host .number:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    /* ── Circular host sizing ── */\n    :host([fill-style=\"circular\"][circular-style=\"grow\"]),\n    :host([fill-style=\"circular\"]:not([circular-style])) {\n      aspect-ratio: 1;\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-number': EditableNumber;\n  }\n}\n","/**\n * <ixfx-labelled-slider-input> — labelled slider input combining ixfx-editable-number and ixfx-slider-input.\n *\n * Layout is driven by container queries on the component's own height:\n *   - height >= 80px → vertical (label above slider) — the default with height: 100px\n *   - height <  80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query;\n * --flow: column stacks at any --height, so a tight --height hugs label + slider\n * with no dead space above/below).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n * Override the slider's band thickness in the stacked layout with --slider-thickness (default: 2.5em);\n * extra component height beyond label + slider is split evenly above and below the group.\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n *   --label-font-size   (default: var(--text-m))\n *   --label-font-family (default: var(--font-family))\n *   --label-color       (default: var(--surface-2-text))\n *   --label-muted-color (default: var(--surface-muted-text))\n *   --label-padding     (default: var(--space-xs) var(--space-s))\n *   --label-radius      (default: var(--radius-s))\n *   --label-align       (default: center)\n *\n * From ixfx-slider-input:\n *   --lane-track-color, --lane-value-color, --lane-color, --lane-<key>-color\n *   --lane-dasharray, --lane-dashoffset, --lane-linecap (round | butt)\n *   --marker-color, --marker-thickness, --marker-length, --marker-offset\n *   --marker-border-width, --marker-border-color, --marker-a-color, etc.\n *   --track-color, --track-width, --track-margin\n *   --midpoint-color, --midpoint-thickness, --midpoint-length\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   stops                   Quantise to N discrete positions (default: undefined)\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   orientation             'horizontal' | 'vertical' (slider orientation)\n *   single-style            'range' | 'bipolar' | 'unipolar' (single mode only)\n *   marker-style            'needle' | 'dot' | 'triangle' | 'none'\n *   disabled                Boolean — disables all interaction\n *   swipeable               Boolean — swipe-to-draw gesture (no pointer capture,\n *                                 for step-sequencer layouts; mirrors ixfx-slider-input)\n *   switch-height           Height threshold for vertical↔horizontal switch (default: 80)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display\n *   lighttouch              Boolean — passed through to the inner slider and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via slider or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { SliderMarkerStyle, SliderSingleStyle } from '../slider-input/types.js';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../editable-label/editable-number.js';\nimport '../slider-input/slider-input.js';\n\n@customElement(`ixfx-labelled-slider-input`)\nexport class LabelledSliderInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-slider-input`;\n\n  @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: String, attribute: `single-style` }) singleStyle: SliderSingleStyle = `range`;\n  @property({ type: String, attribute: `marker-style` }) markerStyle: SliderMarkerStyle = `needle`;\n  @property({ type: Number }) stops: number | undefined = undefined;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) swipeable = false;\n  /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n  protected override _renderEditableNumber() {\n    // Override base implementation to pass lighttouch through to the inner\n    // editable-number. Mirrors the props forwarded in LabelledInputBase.\n    if (this._isMini) {\n      // Mini mode: no editable-number rendered at all (matches base behaviour).\n      return html``;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  protected override _syncValue(v: number): void {\n    super._syncValue(v);\n    // Base applyValue() sets `.value`, but ixfx-slider-input holds its value\n    // in `.valueA` — sync it directly so programmatic changes propagate.\n    const input = this.renderRoot?.querySelector(this.inputSelector) as unknown as { valueA?: number } | null;\n    if (input && typeof input.valueA === `number` && input.valueA !== v) {\n      input.valueA = v;\n    }\n  }\n\n  override render() {\n    // No tooltip on the inner slider: the editable-number already shows the\n    // value, so a slider tooltip would be redundant.\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-slider-input\n          class=\"slider\"\n          ?lighttouch=${this.lighttouch}\n          ?disabled=${this.disabled}\n          ?swipeable=${this.swipeable}\n          .valueA=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .stops=${this.stops}\n          .orientation=${this.orientation}\n          .singleStyle=${this.singleStyle}\n          .markerStyle=${this.markerStyle}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-slider-input>\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = css`\n    :host {\n      display: block;\n      container-type: size;\n      min-height: var(--min-height, 20px);\n      min-width: var(--min-width, 50px);\n      width: var(--width, auto);\n      height: var(--height, 100px);\n    }\n\n    /* One focus ring for the whole control: the inner slider's own ring is\n       suppressed (see ixfx-slider-input below) and re-drawn here so it wraps\n       the label + slider group instead of just the track. */\n    :host(:focus-within) {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n    }\n\n    ixfx-slider-input {\n      flex: 1;\n      min-width: 0;\n      /* Suppress the slider's own focus ring; the wrapper draws one around\n         the whole control via :host(:focus-within) above. */\n      --slider-input-svg-focus-outline: none;\n      --slider-input-svg-focus-outline-offset: 0;\n    }\n\n    /* Default (compact): horizontal — label beside slider */\n    .wrap {\n      flex-direction: var(--flow, row);\n      justify-content: flex-start;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n      --label-min-width: var(--label-width, 5ch);\n      /* Block fill/background variables from reaching editable-number */\n      --fill-color: initial;\n      --fill-opacity: initial;\n      --fill-image: initial;\n    }\n\n    /* Vertically-stacked layout: applied when the container is tall enough\n       to fit label + slider, OR when the author forces it with --flow:\n       column (a style query, so an explicit --flow: column brings the\n       label/slider companion rules too — not just the flex direction — and\n       therefore works at any --height, not only >= 80px). */\n    @container (height >= 80px) or style(--flow: column) {\n      .wrap {\n        flex-direction: var(--flow, column);\n        /* Centre the label+slider group so any height the component is\n           given beyond what the two need is split evenly above and below,\n           rather than dumped into a stretched slider. */\n        justify-content: center;\n        align-items: center;\n      }\n\n      ixfx-editable-number {\n        --label-align: center;\n        /* Stretch (not width: 100%): in the normal stacked column this is\n           visually identical (full-width centered label), but a hardcoded\n           100% width would also apply when --flow forces a row at this\n           height — eating the whole row and squeezing the slider to zero. */\n        align-self: stretch;\n        width: auto;\n      }\n\n      ixfx-slider-input {\n        width: 100%;\n        /* Don't stretch to fill the column. The slider paints its bar\n           thickness as a fraction of the height it's handed, so a fat\n           lane-track-width in a tall slot leaves most of that slot as\n           dead space. Cap it to a sensible band (override with\n           --slider-thickness) and let the centred group absorb the rest. */\n        flex: 0 1 auto;\n        height: var(--slider-thickness, 2.5em);\n        max-height: 100%;\n      }\n    }\n\n    /* Mini mode: slider fills the full component */\n    .wrap.mini {\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-slider-input {\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-slider-input': LabelledSliderInput;\n  }\n}\n"],"mappings":"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"}

package/dist/labelled-slider-input.js

@@ -1,2 +1,2 @@
-import { t as LabelledSliderInput } from "./labelled-slider-input-BCH9968c.js";
+import { t as LabelledSliderInput } from "./labelled-slider-input-aEYDvW2S.js";
 export { LabelledSliderInput };

package/dist/{list-item-animation-DuiwgN3l.js → list-item-animation-BUoEKi5s.js}

@@ -88,25 +88,44 @@ function animateListItemIn(el, options = {}) {
 		easing
 	});
 }
+function outResult(finished, animation) {
+	return Object.assign(finished, { animation });
+}
 /**
-* Collapse + fade `el` out. Resolves once the animation finishes (or straight
-* away under reduced motion); the caller detaches the element after. The final
-* collapsed state is held (`fill: forwards`) so there's no flash back to full
-* size in the gap before removal.
+* Start the collapse + fade-out animation for `el` and return the handle.
+* Returns `undefined` when no animation was started (reduced motion or zero
+* size). The caller owns the handle and must `cancel()` it if the removal is
+* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
+* element's ordinary CSS indefinitely.
 */
-function animateListItemOut(el, options = {}) {
-	if (prefersReducedMotion()) return Promise.resolve();
+function startListItemOutAnimation(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
 	const { axis = `block`, easing = `ease` } = options;
 	const duration = resolveDuration(el, options.duration);
 	const size = measure(el, axis);
-	if (size <= 0) return Promise.resolve();
+	if (size <= 0) return void 0;
 	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
 		duration,
 		easing,
 		fill: `forwards`
-	}).finished.then(() => void 0, () => void 0);
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*
+* The returned promise carries an `.animation` handle. If the removal is
+* reversed (the same key becomes visible again), cancel that handle so its
+* filled final frame stops overriding the reused element's style.
+*/
+function animateListItemOut(el, options = {}) {
+	const animation = startListItemOutAnimation(el, options);
+	if (!animation) return outResult(Promise.resolve(), void 0);
+	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
 }
 //#endregion
-export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };
+export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, startListItemOutAnimation as o, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };
 
-//# sourceMappingURL=list-item-animation-DuiwgN3l.js.map
+//# sourceMappingURL=list-item-animation-BUoEKi5s.js.map

package/dist/list-item-animation-BUoEKi5s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-animation-BUoEKi5s.js","names":[],"sources":["../src/interaction/list-item-animation.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared insertion / removal animation for the list & tree components.\n *\n * Two flavours, because the components split into two layout families:\n *\n * - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —\n *   rows sit in normal flow, so a new row can collapse in from zero height and a\n *   leaving row can collapse back to zero, and the rows around it slide to make\n *   or close the gap for free. Use {@link animateListItemIn} /\n *   {@link animateListItemOut} (Web Animations API, exact measured sizes).\n *\n * - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are\n *   absolutely positioned (`transform` / `top`), so collapsing a row's box moves\n *   nothing. Those components instead fade the entering / leaving row with the\n *   {@link listItemFadeKeyframes} keyframes and slide the survivors by\n *   transitioning their position for a short window after the change.\n *\n * Everything here is a no-op under `prefers-reduced-motion: reduce`.\n */\n\n/** Default duration (ms) for both flavours; overridable per call / per component. */\nexport const LIST_ITEM_MOTION_MS = 200;\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== `undefined`\n    && typeof window.matchMedia === `function`\n    && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches\n  );\n}\n\n/**\n * Opacity keyframes for the virtualised components. Each one adds its own\n * one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to\n * these, plus a `prefers-reduced-motion` guard on its own selectors.\n */\nexport const listItemFadeKeyframes = css`\n  @keyframes ixfx-list-item-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @keyframes ixfx-list-item-out {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\nexport interface ListItemMotionOptions {\n  /**\n   * Animation duration in ms. When omitted, the element's\n   * `--ixfx-list-item-move-duration` custom property is used if set (accepts\n   * `ms` or `s`), otherwise {@link LIST_ITEM_MOTION_MS}.\n   */\n  duration?: number;\n  /** Which axis collapses — `block` (height, default) or `inline` (width). */\n  axis?: `block` | `inline`;\n  easing?: string;\n}\n\nfunction measure(el: HTMLElement, axis: `block` | `inline`): number {\n  const rect = el.getBoundingClientRect();\n  return axis === `inline` ? rect.width : rect.height;\n}\n\nfunction resolveDuration(el: HTMLElement, explicit?: number): number {\n  if (explicit !== undefined)\n    return explicit;\n  const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();\n  if (raw) {\n    const n = Number.parseFloat(raw);\n    if (!Number.isNaN(n))\n      return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1000 : n;\n  }\n  return LIST_ITEM_MOTION_MS;\n}\n\nfunction collapsedFrame(axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `0px`, [minProp]: `0px`, opacity: 0, overflow: `hidden` };\n}\n\nfunction fullFrame(size: number, axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `${size}px`, [minProp]: `0px`, opacity: 1, overflow: `hidden` };\n}\n\n/**\n * Collapse + fade `el` in from nothing to its natural size. Call it just after\n * the element has been inserted (it must already be laid out at full size so it\n * can be measured). No-op under reduced motion.\n */\nexport function animateListItemIn(el: HTMLElement, options: ListItemMotionOptions = {}): Animation | undefined {\n  if (prefersReducedMotion())\n    return undefined;\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return undefined;\n  return el.animate([collapsedFrame(axis), fullFrame(size, axis)], { duration, easing });\n}\n\n/**\n * Result of {@link animateListItemOut}: a promise that resolves once the\n * animation finishes, carrying the underlying `Animation` handle (if any) so\n * callers can `cancel()` superseded work. Awaiting / `.then()` behaves like\n * the previous `Promise<void>` return type.\n */\nexport type ListItemOutResult = Promise<void> & {\n  /** The running collapse animation, or `undefined` under reduced motion / zero size. */\n  animation: Animation | undefined;\n};\n\nfunction outResult(finished: Promise<void>, animation: Animation | undefined): ListItemOutResult {\n  return Object.assign(finished, { animation });\n}\n\n/**\n * Start the collapse + fade-out animation for `el` and return the handle.\n * Returns `undefined` when no animation was started (reduced motion or zero\n * size). The caller owns the handle and must `cancel()` it if the removal is\n * reversed — a retained `fill: forwards` frame otherwise keeps overriding the\n * element's ordinary CSS indefinitely.\n */\nexport function startListItemOutAnimation(el: HTMLElement, options: ListItemMotionOptions = {}): Animation | undefined {\n  if (prefersReducedMotion())\n    return undefined;\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return undefined;\n  return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {\n    duration,\n    easing,\n    fill: `forwards`,\n  });\n}\n\n/**\n * Collapse + fade `el` out. Resolves once the animation finishes (or straight\n * away under reduced motion); the caller detaches the element after. The final\n * collapsed state is held (`fill: forwards`) so there's no flash back to full\n * size in the gap before removal.\n *\n * The returned promise carries an `.animation` handle. If the removal is\n * reversed (the same key becomes visible again), cancel that handle so its\n * filled final frame stops overriding the reused element's style.\n */\nexport function animateListItemOut(el: HTMLElement, options: ListItemMotionOptions = {}): ListItemOutResult {\n  const animation = startListItemOutAnimation(el, options);\n  if (!animation)\n    return outResult(Promise.resolve(), undefined);\n  const finished = animation.finished.then(() => undefined, () => undefined);\n  return outResult(finished, animation);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,sBAAsB;AAEnC,SAAgB,uBAAgC;CAC9C,OACE,OAAO,WAAW,eACf,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAE7D;;;;;;AAOA,MAAa,wBAAwB,GAAG;;;;;;;;;;AAuBxC,SAAS,QAAQ,IAAiB,MAAkC;CAClE,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO,SAAS,WAAW,KAAK,QAAQ,KAAK;AAC/C;AAEA,SAAS,gBAAgB,IAAiB,UAA2B;CACnE,IAAI,aAAa,KAAA,GACf,OAAO;CACT,MAAM,MAAM,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,gCAAgC,CAAC,CAAC,KAAK;CACzF,IAAI,KAAK;EACP,MAAM,IAAI,OAAO,WAAW,GAAG;EAC/B,IAAI,CAAC,OAAO,MAAM,CAAC,GACjB,OAAO,IAAI,SAAS,IAAI,IAAI,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI,MAAO;CACnE;CACA,OAAA;AACF;AAEA,SAAS,eAAe,MAAoC;CAC1D,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO;GAAQ,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AAC3E;AAEA,SAAS,UAAU,MAAc,MAAoC;CACnE,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO,GAAG,KAAK;GAAM,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AACjF;;;;;;AAOA,SAAgB,kBAAkB,IAAiB,UAAiC,CAAC,GAA0B;CAC7G,IAAI,qBAAqB,GACvB,OAAO,KAAA;CACT,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,KAAA;CACT,OAAO,GAAG,QAAQ,CAAC,eAAe,IAAI,GAAG,UAAU,MAAM,IAAI,CAAC,GAAG;EAAE;EAAU;CAAO,CAAC;AACvF;AAaA,SAAS,UAAU,UAAyB,WAAqD;CAC/F,OAAO,OAAO,OAAO,UAAU,EAAE,UAAU,CAAC;AAC9C;;;;;;;;AASA,SAAgB,0BAA0B,IAAiB,UAAiC,CAAC,GAA0B;CACrH,IAAI,qBAAqB,GACvB,OAAO,KAAA;CACT,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,KAAA;CACT,OAAO,GAAG,QAAQ,CAAC,UAAU,MAAM,IAAI,GAAG,eAAe,IAAI,CAAC,GAAG;EAC/D;EACA;EACA,MAAM;CACR,CAAC;AACH;;;;;;;;;;;AAYA,SAAgB,mBAAmB,IAAiB,UAAiC,CAAC,GAAsB;CAC1G,MAAM,YAAY,0BAA0B,IAAI,OAAO;CACvD,IAAI,CAAC,WACH,OAAO,UAAU,QAAQ,QAAQ,GAAG,KAAA,CAAS;CAE/C,OAAO,UADU,UAAU,SAAS,WAAW,KAAA,SAAiB,KAAA,CACxC,GAAG,SAAS;AACtC"}

package/dist/list-native-drag-controller-CFyrkKUj.d.ts

@@ -0,0 +1,61 @@
+import { F as ListDragSource, I as ListNativeDragStartDetail, N as ListDragPreviewContext, P as ListDragPreviewRenderer, j as ListDragEntry } from "./tree-component-BW2iCFq9.js";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+//#region src/interaction/list-native-drag-controller.d.ts
+type ListNativeDragControllerConfig<T> = {
+  readonly source: ListDragSource;
+  /** `itemsDraggable && selection usable` */
+  isEnabled: () => boolean;
+  /** Event target → item key, or `undefined` when the drag did not start on an item. */
+  resolveEventToKey: (target: EventTarget | null) => string | undefined;
+  /**
+   * Apply the origin rule (origin ∉ selection ⇒ replace with origin); return
+   * display-ordered `{ origin, selected }` for both modes, or `undefined` when
+   * the origin is not selectable.
+   */
+  prepareSelection: (originKey: string) => {
+    origin: ListDragEntry<T>;
+    selected: Array<ListDragEntry<T>>;
+  } | undefined;
+  getMetrics: () => ListDragPreviewContext<T>[`metrics`];
+  getRenderer: () => ListDragPreviewRenderer<T> | undefined;
+  /** Fire the cancelable `list-native-drag-start`; return `!defaultPrevented`. */
+  dispatch: (detail: ListNativeDragStartDetail<T>) => boolean;
+  /**
+   * Optional: write custom payloads onto the drag's `DataTransfer` (e.g. a
+   * MIME type for same-app drops). Called once, after a non-cancelled dispatch,
+   * inside the synchronous `dragstart` turn.
+   */
+  writeDataTransfer?: (dataTransfer: DataTransfer, detail: ListNativeDragStartDetail<T>) => void;
+  /** Host toggles `data-native-dragging` / `aria-label`, re-renders. */
+  onActiveChange: (active: boolean, originKey?: string) => void;
+  /** Host clears state + starts its post-drag click-suppress timer. */
+  onEnd: () => void;
+  /** Optional: sync `draggable` on light-DOM / slotted children while enabled. */
+  syncLightDomDraggable?: () => void;
+};
+type DragHost = ReactiveControllerHost & HTMLElement;
+/**
+ * Shared native item/row drag-out for list components.
+ *
+ * Owns capture-phase `dragstart` / `dragend` listeners on the host and its
+ * render root, a `MutationObserver` that keeps light-DOM / slotted item `draggable`
+ * attributes in sync, and a single post-dispatch disposal on
+ * `requestAnimationFrame`. All DOM / selection knowledge lives in the host
+ * config callbacks.
+ */
+declare class ListNativeDragController<T> implements ReactiveController {
+  #private;
+  constructor(host: DragHost, config: ListNativeDragControllerConfig<T>);
+  get isDragging(): boolean;
+  /** `"true"` when enabled, else `"false"` — for shadow-row template bindings. */
+  get draggableAttr(): string;
+  /** Re-run the light-DOM `draggable` sync (e.g. after `itemsDraggable` flips). */
+  refreshDraggable(): void;
+  hostConnected(): void;
+  /** `renderRoot` does not exist yet at `hostConnected` for a shadow-DOM host — rebind once it does. */
+  hostUpdated(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { ListNativeDragControllerConfig as n, ListNativeDragController as t };
+//# sourceMappingURL=list-native-drag-controller-CFyrkKUj.d.ts.map

package/dist/list-native-drag-controller-CFyrkKUj.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-native-drag-controller-CFyrkKUj.d.ts","names":[],"sources":["../src/interaction/list-native-drag-controller.ts"],"mappings":";;;KAWY,+BAA+B;WAChC,QAAQ;;EAEjB;;EAEA,oBAAoB,QAAQ;;;;;;EAM5B,mBAAmB;IAAwB,QAAQ,cAAc;IAAI,UAAU,MAAM,cAAc;;EACnG,kBAAkB,uBAAuB;EACzC,mBAAmB,wBAAwB;;EAE3C,WAAW,QAAQ,0BAA0B;;;;;;EAM7C,qBAAqB,cAAc,cAAc,QAAQ,0BAA0B;;EAEnF,iBAAiB,iBAAiB;;EAElC;;EAEA;;KAGG,WAAW,yBAAyB;;;;;;;;;;cAW5B,yBAAyB,cAAc;;EAUtC,YAAA,MAAM,UAAU,QAAQ,+BAA+B;MAM/D;;MAKA;;EASJ;EAQA;;EAYA;EAIA"}