@tremolo-ui/svelte 0.7.0

package/dist/components/Slider/MarksOption.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarksOption.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/MarksOption.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAoDvE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Slider/Root.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  import {
+    applyDelta,
+    arrowKeyDirection,
+    DEFAULT_DRAG_SENSITIVITY,
+    DEFAULT_KEYBOARD_OPTIONS,
+    DEFAULT_WHEEL_OPTIONS,
+    elementMapping,
+    selectModifier,
+    valuePercent,
+    wheelDirection,
+    type AxisOptions,
+    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 { setSliderContext } from './context.js'
+  import type { SliderProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = SliderProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SliderProps>
+
+  let {
+    value = $bindable(),
+    min,
+    max,
+    step = 1,
+    scale = linearScale,
+    vertical = false,
+    reverse = false,
+    externalStyles,
+    wheel = DEFAULT_WHEEL_OPTIONS,
+    keyboard = DEFAULT_KEYBOARD_OPTIONS,
+    dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
+    disabled = false,
+    readonly = false,
+    onChange,
+    onDragStart,
+    onDragEnd,
+    ref = $bindable(null),
+    children,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  }: Props = $props()
+
+  const inactive = $derived(disabled || readonly)
+  // Measured from the left or the top, as CSS places things:
+  // normal -> normal (right)
+  // vertical -> reversed (up)
+  // reverse -> reversed (left)
+  // vertical & reverse -> normal (down)
+  const displayReversed = $derived(vertical !== reverse)
+  const percent = $derived(
+    valuePercent(value, { min, max, scale }, displayReversed),
+  )
+  // The pointer is normalized against the track on both axes; only the one
+  // the slider runs along is read back.
+  const axis: AxisOptions = $derived({
+    min,
+    max,
+    step,
+    scale,
+    reverse: displayReversed,
+  })
+
+  let track: HTMLElement | null = null
+  let thumb: HTMLInputElement | null = null
+
+  useCheckSteps(() => ({ component: 'Slider', range: axis, keyboard, wheel }))
+
+  function change(next: number) {
+    value = next
+    onChange?.(next)
+  }
+
+  setSliderContext({
+    get value() {
+      return value
+    },
+    get min() {
+      return min
+    },
+    get max() {
+      return max
+    },
+    get step() {
+      return step
+    },
+    get scale() {
+      return scale
+    },
+    get vertical() {
+      return vertical
+    },
+    get reverse() {
+      return reverse
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return readonly
+    },
+    get percent() {
+      return percent
+    },
+    change,
+    setTrack: (element) => {
+      track = element
+    },
+    setThumb: (input) => {
+      thumb = input
+    },
+  })
+
+  const valueOf = (v: XY<number>) => v[vertical ? 1 : 0]
+
+  const dragOptions = $derived({
+    axis,
+    mapping: elementMapping(() => track, {
+      sensitivity: (state) =>
+        selectModifier(dragSensitivity, state.event).value,
+    }),
+    cursor: inactive ? undefined : (externalStyles?.cursor ?? 'pointer'),
+    shouldStart: () => !inactive,
+    updateOnPointerDown: true,
+    onChange: (v: XY<number>) => {
+      if (!inactive) change(valueOf(v))
+    },
+    onDragStart: (v: XY<number>) => {
+      if (inactive) return
+      thumb?.focus()
+      onDragStart?.(valueOf(v))
+    },
+    onDragEnd: (v: XY<number>) => {
+      if (!inactive) onDragEnd?.(valueOf(v))
+    },
+  })
+
+  const wheelOptions = $derived({
+    requireFocus: true,
+    onWheel: (event: WheelEvent) => {
+      if (!wheel || inactive) return
+      // A notch the slider does not read — a sideways scroll on a vertical
+      // slider — is left to the page rather than swallowed.
+      const direction = wheelDirection(event, { horizontal: !vertical })
+      if (direction === null) return
+      event.preventDefault()
+      change(
+        applyDelta(value, reverse ? -direction : direction, wheel, axis, 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 is the pointer and keyboard event area; the range input inside
+  the thumb carries the control semantics. A press lands on the track or the
+  thumb, neither of which can hold focus, and the browser answers that by
+  clearing the focus — tabindex -1 keeps it inside, and onfocus passes it to
+  the input. -->
+<div
+  bind:this={ref}
+  role="group"
+  tabindex="-1"
+  data-orientation={vertical ? 'vertical' : 'horizontal'}
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  use:dragValue={dragOptions}
+  use:wheelAction={wheelOptions}
+  onkeydown={(event) => {
+    const direction = arrowKeyDirection(event.key)
+    if (direction !== null) {
+      event.preventDefault()
+      if (keyboard && !inactive) {
+        change(
+          applyDelta(
+            value,
+            reverse ? -direction : direction,
+            keyboard,
+            axis,
+            event,
+          ),
+        )
+      }
+    }
+    onkeydown?.(event)
+  }}
+  onfocus={(event) => {
+    if (!disabled) thumb?.focus()
+    onfocus?.(event)
+  }}
+  onblur={(event) => {
+    thumb?.blur()
+    onblur?.(event)
+  }}
+  {...rest}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { SliderProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = SliderProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SliderProps>;
+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/Slider/Root.svelte.d.ts.map

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

package/dist/components/Slider/Thumb.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { checkPlacement } from '../_util/placement.js'
+  import VisuallyHiddenRangeInput from '../_util/VisuallyHiddenRangeInput.svelte'
+
+  import { useSliderContext } from './context.js'
+  import type { SliderThumbProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = SliderThumbProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SliderThumbProps>
+
+  let {
+    color,
+    children,
+    style,
+    // Pulled out so that they land on the range input: the input is the
+    // control and takes the focus, and a name on a plain div is ignored.
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-valuetext': ariaValuetext,
+    ...rest
+  }: Props = $props()
+
+  const slider = useSliderContext()
+  checkPlacement('Slider.Thumb', 'Slider.Track')
+
+  let input: HTMLInputElement | null = $state(null)
+
+  // Root focuses the thumb when a drag starts, wherever it was placed.
+  $effect(() => {
+    slider.setThumb(input)
+    return () => slider.setThumb(null)
+  })
+
+  /** Move the focus to the thumb's input. */
+  export function focus() {
+    if (!slider.disabled) input?.focus()
+  }
+
+  /** Take the focus away from the thumb's input. */
+  export function blur() {
+    input?.blur()
+  }
+</script>
+
+<!-- Placed by a percentage of the track, measured from its own centre;
+  `--translate` is there for a thumb that should hang off its edge. Where it
+  sits is the component's decision, so it comes after the caller's style. -->
+<div
+  data-disabled={slider.disabled ? '' : undefined}
+  data-readonly={slider.readonly ? '' : undefined}
+  {...rest}
+  style="position: absolute; translate: var(--translate, -50% -50%); z-index: 100; {style ??
+    ''}"
+  style:--color={color}
+  style:top={slider.vertical ? `${slider.percent}%` : '50%'}
+  style:left={slider.vertical ? '50%' : `${slider.percent}%`}
+>
+  <VisuallyHiddenRangeInput
+    bind:ref={input}
+    value={slider.value}
+    min={slider.min}
+    max={slider.max}
+    step={slider.step}
+    disabled={slider.disabled}
+    aria-readonly={slider.readonly}
+    aria-orientation={slider.vertical ? 'vertical' : 'horizontal'}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
+    aria-describedby={ariaDescribedby}
+    aria-valuetext={ariaValuetext}
+    oninput={(event) => {
+      const target = event.currentTarget
+      if (slider.readonly) {
+        target.value = String(slider.value)
+        return
+      }
+      slider.change(target.valueAsNumber)
+    }}
+  />
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { SliderThumbProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = SliderThumbProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SliderThumbProps>;
+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/Slider/Thumb.svelte.d.ts.map

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

package/dist/components/Slider/Track.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { cssLength } from '@tremolo-ui/dom'
+
+  import { setPlacement } from '../_util/placement.js'
+
+  import { useSliderContext } from './context.js'
+  import type { SliderTrackProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = SliderTrackProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SliderTrackProps>
+
+  let {
+    length,
+    thickness,
+    active,
+    inactive,
+    ref = $bindable(null),
+    children,
+    style,
+    ...rest
+  }: Props = $props()
+
+  const slider = useSliderContext()
+  setPlacement('Slider.Track')
+
+  // The track is what the pointer position is normalized against.
+  $effect(() => {
+    slider.setTrack(ref)
+    return () => slider.setTrack(null)
+  })
+</script>
+
+<!-- `--percent` is where the value sits, for the theme to paint the fill
+  with: the one number CSS cannot work out on its own. -->
+<div
+  bind:this={ref}
+  data-disabled={slider.disabled ? '' : undefined}
+  data-orientation={slider.vertical ? 'vertical' : 'horizontal'}
+  data-flipped={slider.vertical !== slider.reverse ? '' : undefined}
+  style="position: relative; {style ?? ''}"
+  style:--active={active}
+  style:--inactive={inactive}
+  style:--length={cssLength(length)}
+  style:--thickness={cssLength(thickness)}
+  style:--percent="{slider.percent}%"
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/Slider/Track.svelte.d.ts

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

package/dist/components/Slider/Track.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Track.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Track.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,gBAAgB,GAC3B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAwCjE,QAAA,MAAM,KAAK,8CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,28 @@
+import type { Scale } from '@tremolo-ui/functions';
+/**
+ * What `Slider.Root` shares with its parts. Every field is a getter, so
+ * reading one follows the value as it changes.
+ */
+export interface SliderContextValue {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly scale: Scale;
+    readonly vertical: boolean;
+    readonly reverse: boolean;
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    /** Where the value sits along the track, as a percentage from the top or left. */
+    readonly percent: number;
+    /** Set the value, as an input on the slider would. */
+    change: (value: number) => void;
+    /** @internal `Slider.Track` registers the element the pointer is measured against. */
+    setTrack: (element: HTMLElement | null) => void;
+    /** @internal `Slider.Thumb` registers the input the focus goes to. */
+    setThumb: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `Slider.Root`, for a part of your own. */
+export declare const useSliderContext: () => SliderContextValue;
+export declare const setSliderContext: (context: SliderContextValue) => SliderContextValue;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;IACrB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,kFAAkF;IAClF,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,sDAAsD;IACtD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,sFAAsF;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAID,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,0BAAM,CAAA;AACnC,eAAO,MAAM,gBAAgB,qDAAM,CAAA"}

package/dist/components/Slider/context.js

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

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

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

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

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

package/dist/components/Slider/index.js

@@ -0,0 +1,5 @@
+export { default as Marks } from './Marks.svelte';
+export { default as MarksOption } from './MarksOption.svelte';
+export { default as Root } from './Root.svelte';
+export { default as Thumb } from './Thumb.svelte';
+export { default as Track } from './Track.svelte';

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

@@ -0,0 +1,138 @@
+import type { InputEventOption, MarksOptions, ModifierValue } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+import type { Snippet } from 'svelte';
+export interface SliderProps {
+    /** The current value. Bind it (`bind:value`) or update it from `onChange`. */
+    value: number;
+    /** The value at the start of the travel. */
+    min: number;
+    /** The value at the end of the travel. */
+    max: number;
+    /**
+     * Granularity of the value. A drag, the wheel and the arrow keys snap it to
+     * multiples of `step`.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * How the value is distributed across the travel. Pick one of the scales
+     * from `@tremolo-ui/functions`.
+     * @default linearScale
+     */
+    scale?: Scale;
+    /**
+     * Run the slider vertically, with the value growing upwards.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Grow the value the other way: leftwards, or downwards when `vertical`.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The cursor to show while dragging.
+     * @default { cursor: 'pointer' }
+     */
+    externalStyles?: {
+        cursor?: string;
+    };
+    /**
+     * How much one notch of the wheel moves the value, while the focus is
+     * inside. `null` turns the wheel off.
+     * @default ['raw', 1]
+     */
+    wheel?: ModifierValue<InputEventOption> | null;
+    /**
+     * How much a drag moves the value, per modifier key. `1` follows the
+     * pointer; anything else turns the drag relative.
+     * @default { default: 1, shift: 0.1 }
+     */
+    dragSensitivity?: ModifierValue<number>;
+    /**
+     * How much one arrow key press moves the value. `null` turns the arrow
+     * keys off.
+     * @default { default: ['raw', 1], shift: ['raw', 0.1] }
+     */
+    keyboard?: ModifierValue<InputEventOption> | null;
+    /**
+     * Make the slider unchangeable and remove it from the tab order.
+     * The parts carry `data-disabled` while it is set.
+     */
+    disabled?: boolean;
+    /**
+     * Make the value unchangeable. The parts carry `data-readonly` while it is
+     * set.
+     */
+    readonly?: boolean;
+    /** Called with the new value when a drag, the wheel or an arrow key moves it. */
+    onChange?: (value: number) => void;
+    /** Called when a drag starts, with the value where the track was pressed. */
+    onDragStart?: (value: number) => void;
+    /** Called when the drag ends, with the value it ended on. */
+    onDragEnd?: (value: number) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    /** The slider renders exactly what you compose here. */
+    children: Snippet;
+}
+export interface SliderTrackProps {
+    /** How long the track is along the axis the slider runs. Sets `--length`. */
+    length?: number | string;
+    /** How thick the track is across that axis. Sets `--thickness`. */
+    thickness?: number | string;
+    /** Colour of the part from `min` to the value. Sets `--active`. */
+    active?: string;
+    /** Colour of the rest of the track. Sets `--inactive`. */
+    inactive?: string;
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+}
+export interface SliderThumbProps {
+    /** Sets `--color`, for the theme to colour the thumb with. */
+    color?: string;
+    children?: Snippet;
+}
+export interface SliderMarksProps {
+    /** Space between the marks and the track. Sets `--gap`. */
+    gap?: number | string;
+    /**
+     * Build the marks instead of writing `Slider.MarksOption` out: a number
+     * puts one every that many, `'step'` one every `step`, and
+     * `{ per, mark, label }` also turns the mark or the label off for all of
+     * them. `children` is ignored while it is set.
+     */
+    options?: MarksOptions;
+    children?: Snippet;
+}
+export interface SliderMarksOptionProps {
+    /** Where the mark sits, on the same scale as the thumb. */
+    value: number;
+    /**
+     * Draw the mark itself.
+     * @default true
+     */
+    mark?: boolean;
+    /**
+     * Text shown next to the mark. Leave it out to show the value; `null`
+     * leaves the label out.
+     */
+    label?: number | string | null;
+    /** Thickness of the mark. Sets `--thickness`. */
+    thickness?: number | string;
+    /** Length of the mark. Sets `--length`. */
+    length?: number | string;
+    /** Space between the mark and the label. Sets `--gap`. */
+    gap?: number | string;
+    /** Classes for the mark and the label inside the option. */
+    classes?: {
+        mark?: string;
+        label?: string;
+    };
+    /** Styles for the mark and the label inside the option. */
+    styles?: {
+        mark?: string;
+        label?: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"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"}

package/dist/components/Slider/types.js

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

package/dist/components/XYPad/Area.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { setPlacement } from '../_util/placement.js'
+
+  import { useXYPadContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null
+    children?: Snippet
+  }
+
+  let { ref = $bindable(null), children, style, ...rest }: Props = $props()
+
+  const pad = useXYPadContext()
+  setPlacement('XYPad.Area')
+
+  // The area is what the pointer position is normalized against.
+  $effect(() => {
+    pad.setArea(ref)
+    return () => pad.setArea(null)
+  })
+</script>
+
+<!-- The thumb inside is placed against this box. -->
+<div bind:this={ref} style="position: relative; {style ?? ''}" {...rest}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+};
+declare const Area: import("svelte").Component<Props, {}, "ref">;
+type Area = ReturnType<typeof Area>;
+export default Area;
+//# sourceMappingURL=Area.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Area.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/XYPad/Area.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA6BJ,QAAA,MAAM,IAAI,8CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}