@tremolo-ui/svelte 0.7.0

package/dist/components/XYPad/Root.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+  import {
+    applyDelta,
+    arrowKeyMove,
+    DEFAULT_DRAG_SENSITIVITY,
+    DEFAULT_KEYBOARD_OPTIONS,
+    DEFAULT_WHEEL_OPTIONS,
+    elementMapping,
+    selectModifier,
+    toXY,
+    valuePercent,
+    wheelMove,
+    type AxisMove,
+    type AxisOptions,
+    type InputEventOption,
+    type ModifierState,
+    type ModifierValue,
+    type XY,
+  } from '@tremolo-ui/dom'
+  import { linearScale } from '@tremolo-ui/functions'
+
+  import { dragValue } from '../../actions/drag-value.js'
+  import { wheel as wheelAction } from '../../actions/wheel.js'
+  import { useCheckSteps } from '../_util/check-steps.svelte.js'
+
+  import { setXYPadContext } from './context.js'
+  import type { XYPadProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = XYPadProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof XYPadProps>
+
+  let {
+    value = $bindable(),
+    min: minProp,
+    max: maxProp,
+    step: stepProp = 1,
+    scale: scaleProp = linearScale,
+    reverse: reverseProp = false,
+    wheel = DEFAULT_WHEEL_OPTIONS,
+    keyboard = DEFAULT_KEYBOARD_OPTIONS,
+    dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
+    externalStyles,
+    disabled = false,
+    readonly = false,
+    onChange,
+    onDragStart,
+    onDragEnd,
+    ref = $bindable(null),
+    children,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  }: Props = $props()
+
+  const inactive = $derived(disabled || readonly)
+  const min = $derived(toXY(minProp))
+  const max = $derived(toXY(maxProp))
+  const step = $derived(toXY(stepProp))
+  const scale = $derived(toXY(scaleProp))
+  const reverse = $derived(toXY(reverseProp))
+
+  const percent = $derived(
+    [0, 1].map((i) =>
+      valuePercent(
+        value[i],
+        { min: min[i], max: max[i], scale: scale[i] },
+        reverse[i],
+      ),
+    ) as XY<number>,
+  )
+  // `reverse` only concerns the drag, where positions follow the screen; the
+  // key and wheel handlers below flip the direction themselves.
+  const axis = $derived(
+    [0, 1].map((i) => ({
+      min: min[i],
+      max: max[i],
+      step: step[i],
+      scale: scale[i],
+      reverse: reverse[i],
+    })) as XY<AxisOptions>,
+  )
+
+  let area: HTMLElement | null = null
+  let thumb: HTMLInputElement | null = null
+
+  useCheckSteps(() => ({
+    component: 'XYPad',
+    axis: 'x',
+    range: axis[0],
+    keyboard,
+    wheel,
+  }))
+  useCheckSteps(() => ({
+    component: 'XYPad',
+    axis: 'y',
+    range: axis[1],
+    keyboard,
+    wheel,
+  }))
+
+  function change(next: XY<number>) {
+    value = next
+    onChange?.(next)
+  }
+
+  /** Move one axis by one press of `option`, in screen coordinates. */
+  function nudge(
+    { axis: i, direction }: AxisMove,
+    option: ModifierValue<InputEventOption>,
+    modifiers: ModifierState,
+  ) {
+    const next = applyDelta(
+      value[i],
+      reverse[i] ? -direction : direction,
+      option,
+      axis[i],
+      modifiers,
+    )
+    change(i === 0 ? [next, value[1]] : [value[0], next])
+  }
+
+  setXYPadContext({
+    get value() {
+      return value
+    },
+    get min() {
+      return min
+    },
+    get max() {
+      return max
+    },
+    get step() {
+      return step
+    },
+    get scale() {
+      return scale
+    },
+    get reverse() {
+      return reverse
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return readonly
+    },
+    get percent() {
+      return percent
+    },
+    change,
+    setArea: (element) => {
+      area = element
+    },
+    setThumb: (input) => {
+      thumb = input
+    },
+  })
+
+  const dragOptions = $derived({
+    axis,
+    mapping: elementMapping(() => area, {
+      sensitivity: (state) =>
+        selectModifier(dragSensitivity, state.event).value,
+    }),
+    updateOnPointerDown: true,
+    cursor: inactive ? undefined : (externalStyles?.cursor ?? 'pointer'),
+    shouldStart: () => !inactive,
+    onChange: (v: XY<number>) => {
+      if (!inactive) change(v)
+    },
+    onDragStart: (v: XY<number>) => {
+      if (inactive) return
+      thumb?.focus()
+      onDragStart?.(v)
+    },
+    onDragEnd: (v: XY<number>) => {
+      if (!inactive) onDragEnd?.(v)
+    },
+  })
+
+  const wheelOptions = $derived({
+    requireFocus: true,
+    onWheel: (event: WheelEvent) => {
+      if (!wheel || inactive) return
+      const move = wheelMove(event)
+      if (!move) return
+      event.preventDefault()
+      nudge(move, wheel, event)
+    },
+  })
+
+  /** Move the focus to the thumb. */
+  export function focus() {
+    if (!disabled) thumb?.focus()
+  }
+
+  /** Take the focus away from the thumb. */
+  export function blur() {
+    thumb?.blur()
+  }
+</script>
+
+<!-- The group handles the pointer and keyboard input shared by its two range
+  controls. -->
+<div
+  bind:this={ref}
+  role="group"
+  tabindex="-1"
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  use:dragValue={dragOptions}
+  use:wheelAction={wheelOptions}
+  onkeydown={(event) => {
+    // The key picks the axis, whichever of the two inputs holds the focus:
+    // the focus lands on the x input, so reading the axis off the input would
+    // leave the y axis with no keys at all.
+    const move = arrowKeyMove(event.key)
+    if (move) {
+      event.preventDefault()
+      if (keyboard && !inactive) nudge(move, keyboard, event)
+    }
+    onkeydown?.(event)
+  }}
+  onfocus={(event) => {
+    if (!disabled) thumb?.focus()
+    onfocus?.(event)
+  }}
+  onblur={(event) => {
+    thumb?.blur()
+    onblur?.(event)
+  }}
+  {...rest}
+>
+  {@render children()}
+</div>

package/dist/components/XYPad/Root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { XYPadProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = XYPadProps & Omit<HTMLAttributes<HTMLDivElement>, keyof XYPadProps>;
+declare const Root: import("svelte").Component<Props, {
+    focus: () => void;
+    blur: () => void;
+}, "ref" | "value">;
+type Root = ReturnType<typeof Root>;
+export default Root;
+//# sourceMappingURL=Root.svelte.d.ts.map

package/dist/components/XYPad/Root.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/Root.svelte.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,UAAU,GACrB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,UAAU,CAAC,CAAC;AAkN3D,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/XYPad/Thumb.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { toXY } from '@tremolo-ui/dom'
+
+  import { checkPlacement } from '../_util/placement.js'
+  import VisuallyHiddenRangeInput from '../_util/VisuallyHiddenRangeInput.svelte'
+
+  import { useXYPadContext } from './context.js'
+  import type { XYPadThumbProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = XYPadThumbProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof XYPadThumbProps>
+
+  let {
+    color,
+    children,
+    style,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-valuetext': ariaValuetext,
+    ...rest
+  }: Props = $props()
+
+  const pad = useXYPadContext()
+  checkPlacement('XYPad.Thumb', 'XYPad.Area')
+
+  // Per axis, since the thumb holds one input for each.
+  const labels = $derived(toXY(ariaLabel))
+  const labelledby = $derived(toXY(ariaLabelledby))
+  const describedby = $derived(toXY(ariaDescribedby))
+  const valueText = $derived(toXY(ariaValuetext))
+
+  let x: HTMLInputElement | null = $state(null)
+  let y: HTMLInputElement | null = $state(null)
+
+  // Root focuses the thumb when a drag starts, wherever it was placed.
+  $effect(() => {
+    pad.setThumb(x)
+    return () => pad.setThumb(null)
+  })
+
+  function onInput(axis: 0 | 1, target: HTMLInputElement) {
+    if (pad.readonly) {
+      target.value = String(pad.value[axis])
+      return
+    }
+    const next = [...pad.value] as [number, number]
+    next[axis] = target.valueAsNumber
+    pad.change(next)
+  }
+
+  /** Move the focus to the x input. */
+  export function focus() {
+    if (!pad.disabled) x?.focus()
+  }
+
+  /** Take the focus away from both inputs. */
+  export function blur() {
+    x?.blur()
+    y?.blur()
+  }
+</script>
+
+<div
+  data-disabled={pad.disabled ? '' : undefined}
+  data-readonly={pad.readonly ? '' : undefined}
+  {...rest}
+  style="position: absolute; translate: var(--translate, -50% -50%); z-index: 100; {style ??
+    ''}"
+  style:--color={color}
+  style:left="{pad.percent[0]}%"
+  style:top="{pad.percent[1]}%"
+>
+  <VisuallyHiddenRangeInput
+    bind:ref={x}
+    data-axis="x"
+    value={pad.value[0]}
+    min={pad.min[0]}
+    max={pad.max[0]}
+    step={pad.step[0]}
+    disabled={pad.disabled}
+    aria-readonly={pad.readonly}
+    aria-orientation="horizontal"
+    aria-label={labels[0] ?? 'x'}
+    aria-labelledby={labelledby[0]}
+    aria-describedby={describedby[0]}
+    aria-valuetext={valueText[0]}
+    oninput={(event) => onInput(0, event.currentTarget)}
+  />
+  <VisuallyHiddenRangeInput
+    bind:ref={y}
+    data-axis="y"
+    value={pad.value[1]}
+    min={pad.min[1]}
+    max={pad.max[1]}
+    step={pad.step[1]}
+    disabled={pad.disabled}
+    aria-readonly={pad.readonly}
+    aria-orientation="vertical"
+    aria-label={labels[1] ?? 'y'}
+    aria-labelledby={labelledby[1]}
+    aria-describedby={describedby[1]}
+    aria-valuetext={valueText[1]}
+    oninput={(event) => onInput(1, event.currentTarget)}
+  />
+  {@render children?.()}
+</div>

package/dist/components/XYPad/Thumb.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { XYPadThumbProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = XYPadThumbProps & Omit<HTMLAttributes<HTMLDivElement>, keyof XYPadThumbProps>;
+declare const Thumb: import("svelte").Component<Props, {
+    focus: () => void;
+    blur: () => void;
+}, "">;
+type Thumb = ReturnType<typeof Thumb>;
+export default Thumb;
+//# sourceMappingURL=Thumb.svelte.d.ts.map

package/dist/components/XYPad/Thumb.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/Thumb.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,eAAe,GAC1B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC;AAyEhE,QAAA,MAAM,KAAK;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/XYPad/context.d.ts

@@ -0,0 +1,25 @@
+import type { XY } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+/** What `XYPad.Root` shares with its parts. Every field is a getter. */
+export interface XYPadContextValue {
+    readonly value: XY<number>;
+    readonly min: XY<number>;
+    readonly max: XY<number>;
+    readonly step: XY<number>;
+    readonly scale: XY<Scale>;
+    readonly reverse: XY<boolean>;
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    /** Where the value sits in the area, as percentages from the left and top. */
+    readonly percent: XY<number>;
+    /** Set the value, as an input on the pad would. */
+    change: (value: XY<number>) => void;
+    /** @internal `XYPad.Area` registers the element the pointer is measured against. */
+    setArea: (element: HTMLElement | null) => void;
+    /** @internal `XYPad.Thumb` registers the input the focus goes to. */
+    setThumb: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `XYPad.Root`, for a part of your own. */
+export declare const useXYPadContext: () => XYPadContextValue;
+export declare const setXYPadContext: (context: XYPadContextValue) => XYPadContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/XYPad/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,wEAAwE;AACxE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACxB,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACxB,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACzB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;IAC7B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,8EAA8E;IAC9E,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IAC5B,mDAAmD;IACnD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACnC,oFAAoF;IACpF,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAID,yEAAyE;AACzE,eAAO,MAAM,eAAe,yBAAM,CAAA;AAClC,eAAO,MAAM,eAAe,mDAAM,CAAA"}

package/dist/components/XYPad/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+const [get, set] = createContext();
+/** The context of the enclosing `XYPad.Root`, for a part of your own. */
+export const useXYPadContext = get;
+export const setXYPadContext = set;

package/dist/components/XYPad/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Area } from './Area.svelte';
+export { default as Root } from './Root.svelte';
+export { default as Thumb } from './Thumb.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/XYPad/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/XYPad/index.js

@@ -0,0 +1,3 @@
+export { default as Area } from './Area.svelte';
+export { default as Root } from './Root.svelte';
+export { default as Thumb } from './Thumb.svelte';

package/dist/components/XYPad/types.d.ts

@@ -0,0 +1,80 @@
+import type { InputEventOption, ModifierValue, XY, XYInput } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+import type { Snippet } from 'svelte';
+/**
+ * The per-axis settings mirror `Slider`, given as `[x, y]` tuples. A plain
+ * value applies to both axes.
+ */
+export interface XYPadProps {
+    /** The current value as `[x, y]`. Bind it or update it from `onChange`. */
+    value: XY<number>;
+    /** The value at the start of the travel, per axis. */
+    min: XYInput<number>;
+    /** The value at the end of the travel, per axis. */
+    max: XYInput<number>;
+    /**
+     * Granularity of the value, per axis.
+     * @default 1
+     */
+    step?: XYInput<number>;
+    /**
+     * How the value is distributed across the travel, per axis.
+     * @default linearScale
+     */
+    scale?: XYInput<Scale>;
+    /**
+     * Grow the value the other way, per axis. `y` grows downwards unless
+     * reversed.
+     * @default false
+     */
+    reverse?: XYInput<boolean>;
+    /**
+     * How much one notch of the wheel moves the value, while the focus is
+     * inside. Scrolling sideways, or with shift held, moves x.
+     * @default ['raw', 1]
+     */
+    wheel?: ModifierValue<InputEventOption> | null;
+    /**
+     * How much a drag moves the value, per modifier key.
+     * @default { default: 1, shift: 0.1 }
+     */
+    dragSensitivity?: ModifierValue<number>;
+    /**
+     * How much one arrow key press moves the value. Left and right move x, up
+     * and down move y.
+     * @default { default: ['raw', 1], shift: ['raw', 0.1] }
+     */
+    keyboard?: ModifierValue<InputEventOption> | null;
+    /**
+     * The cursor to show while dragging.
+     * @default { cursor: 'pointer' }
+     */
+    externalStyles?: {
+        cursor?: string;
+    };
+    /** Make the pad unchangeable and remove it from the tab order. */
+    disabled?: boolean;
+    /** Make the value unchangeable. */
+    readonly?: boolean;
+    onChange?: (value: XY<number>) => void;
+    onDragStart?: (value: XY<number>) => void;
+    onDragEnd?: (value: XY<number>) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    /** The pad renders exactly what you compose here. */
+    children: Snippet;
+}
+export interface XYPadThumbProps {
+    /** Sets `--color`, for the theme to colour the thumb with. */
+    color?: string;
+    /** The accessible name of each axis, as `[x, y]`. */
+    'aria-label'?: XYInput<string | undefined | null>;
+    /** The ids of what labels each axis, as `[x, y]` or one for both. */
+    'aria-labelledby'?: XYInput<string | undefined | null>;
+    /** The ids of what describes each axis, as `[x, y]` or one for both. */
+    'aria-describedby'?: XYInput<string | undefined | null>;
+    /** What the value of each axis means, as `[x, y]` or one for both. */
+    'aria-valuetext'?: XYInput<string | undefined | null>;
+    children?: Snippet;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/XYPad/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,EAAE,EACF,OAAO,EACR,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACjB,sDAAsD;IACtD,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;IACpB,oDAAoD;IACpD,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,cAAc,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACvC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAA;IACjD,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAA;IACtD,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAA;IACvD,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAA;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/XYPad/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/_util/VisuallyHiddenRangeInput.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { visuallyHidden } from './style.js'
+
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  type Props = Omit<HTMLInputAttributes, 'type' | 'style'> & {
+    ref?: HTMLInputElement | null
+  }
+
+  let { ref = $bindable(null), ...rest }: Props = $props()
+</script>
+
+<!--
+  The control underneath a headless part: out of sight, but in the
+  accessibility tree and the tab order, carrying the ARIA and the keyboard.
+-->
+<input bind:this={ref} {...rest} type="range" style={visuallyHidden} />

package/dist/components/_util/VisuallyHiddenRangeInput.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type' | 'style'> & {
+    ref?: HTMLInputElement | null;
+};
+declare const VisuallyHiddenRangeInput: import("svelte").Component<Props, {}, "ref">;
+type VisuallyHiddenRangeInput = ReturnType<typeof VisuallyHiddenRangeInput>;
+export default VisuallyHiddenRangeInput;
+//# sourceMappingURL=VisuallyHiddenRangeInput.svelte.d.ts.map

package/dist/components/_util/VisuallyHiddenRangeInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHiddenRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/_util/VisuallyHiddenRangeInput.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzD,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAC9B,CAAC;AAeJ,QAAA,MAAM,wBAAwB,8CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/components/_util/check-steps.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type CheckStepsOptions } from '@tremolo-ui/dom';
+/**
+ * Warn, in development only, when a key press or a wheel notch cannot produce
+ * a change the user can see. The probing is `checkSteps` in the core; `DEV`
+ * is a constant the bundler folds, so production builds drop the call.
+ *
+ * Takes a getter, so that the check runs again when the settings change.
+ */
+export declare function useCheckSteps(options: () => CheckStepsOptions): void;
+//# sourceMappingURL=check-steps.svelte.d.ts.map

package/dist/components/_util/check-steps.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-steps.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/_util/check-steps.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEpE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,iBAAiB,QAK7D"}

package/dist/components/_util/check-steps.svelte.js

@@ -0,0 +1,17 @@
+import { DEV } from 'esm-env';
+import { checkSteps } from '@tremolo-ui/dom';
+/**
+ * Warn, in development only, when a key press or a wheel notch cannot produce
+ * a change the user can see. The probing is `checkSteps` in the core; `DEV`
+ * is a constant the bundler folds, so production builds drop the call.
+ *
+ * Takes a getter, so that the check runs again when the settings change.
+ */
+export function useCheckSteps(options) {
+    if (!DEV)
+        return;
+    $effect(() => {
+        for (const warning of checkSteps(options()))
+            console.warn(warning);
+    });
+}

package/dist/components/_util/placement.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Mark the children of this component as being inside `name`, for
+ * {@link checkPlacement}. Call it while the component initialises.
+ */
+export declare function setPlacement(name: string): void;
+/**
+ * Warn, in development only, when `child` is rendered outside `parent`.
+ *
+ * A part positioned against its parent still renders anywhere else, so
+ * nothing fails when it is misplaced — its position just comes out wrong.
+ * The names are the ones written in markup (`'Knob.Thumb'`), since they are
+ * what the warning shows. Call it while the component initialises.
+ */
+export declare function checkPlacement(child: string, parent: string): void;
+//# sourceMappingURL=placement.d.ts.map

package/dist/components/_util/placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../../src/components/_util/placement.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,QAExC;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAU3D"}

package/dist/components/_util/placement.js

@@ -0,0 +1,30 @@
+import { DEV } from 'esm-env';
+import { getContext, setContext } from 'svelte';
+const PLACEMENT = Symbol('tremolo-ui placement');
+/**
+ * Mark the children of this component as being inside `name`, for
+ * {@link checkPlacement}. Call it while the component initialises.
+ */
+export function setPlacement(name) {
+    setContext(PLACEMENT, name);
+}
+/**
+ * Warn, in development only, when `child` is rendered outside `parent`.
+ *
+ * A part positioned against its parent still renders anywhere else, so
+ * nothing fails when it is misplaced — its position just comes out wrong.
+ * The names are the ones written in markup (`'Knob.Thumb'`), since they are
+ * what the warning shows. Call it while the component initialises.
+ */
+export function checkPlacement(child, parent) {
+    var _a;
+    if (!DEV)
+        return;
+    const found = (_a = getContext(PLACEMENT)) !== null && _a !== void 0 ? _a : null;
+    if (found === parent)
+        return;
+    console.warn(`[tremolo-ui] ${child} has to be rendered inside ${parent}` +
+        (found === null ? '.' : `, but it is inside ${found}.`) +
+        ' It renders either way, so nothing fails — its position just' +
+        ' comes out wrong.');
+}

package/dist/components/_util/style.d.ts

@@ -0,0 +1,5 @@
+/** A style object as the text of a `style` attribute. */
+export declare function styleText(style: Record<string, string>): string;
+/** `visuallyHiddenStyle` from the core, as a `style` attribute. */
+export declare const visuallyHidden: string;
+//# sourceMappingURL=style.d.ts.map

package/dist/components/_util/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/_util/style.ts"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAO/D;AAED,mEAAmE;AACnE,eAAO,MAAM,cAAc,QAAiD,CAAA"}

package/dist/components/_util/style.js

@@ -0,0 +1,9 @@
+import { visuallyHiddenStyle } from '@tremolo-ui/dom';
+/** A style object as the text of a `style` attribute. */
+export function styleText(style) {
+    return Object.entries(style)
+        .map(([key, value]) => `${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}: ${value}`)
+        .join('; ');
+}
+/** `visuallyHiddenStyle` from the core, as a `style` attribute. */
+export const visuallyHidden = /* @__PURE__ */ styleText(visuallyHiddenStyle);