@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/dist/components/TimePicker.svelte

@@ -0,0 +1,148 @@
+<!--
+/**
+ * TimePicker — a themed time field: an {@link Input}-framed trigger (clock icon) that opens a compact
+ * {@link TimeSpinner} (iOS-style hour/minute/AM·PM stepper) in a {@link Popup} (top layer, dismisses on
+ * Escape/outside). The field shows a locale-formatted time; a hidden input carries the 24h `HH:MM`
+ * value for forms. Use this instead of a bare `<input type=time>` so the field AND its popup match.
+ *
+ * The footer mirrors DatePicker's Today/Done: "Now" sets the current time, "Done" closes.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { resolveStep, type StepSpec } from "../types/time.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+  import Input from "./Input.svelte";
+  import Popup from "./Popup.svelte";
+  import TimeSpinner from "./TimeSpinner.svelte";
+  import IconClock from "~icons/mdi/clock-outline";
+
+  interface Props extends Omit<HTMLInputAttributes, "value" | "size" | "min" | "max" | "step"> {
+    /** 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or ''. Bindable. */
+    value?: string;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Add a seconds column; value becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from the app's own config. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the popup (focus ring, "Now" action, current value). Default primary. */
+    variant?: Variant;
+    disabled?: boolean;
+    name?: string;
+    placeholder?: string;
+    class?: string;
+  }
+
+  let {
+    value = $bindable(""),
+    step = 1,
+    seconds = false,
+    min = "00:00",
+    max = "23:59",
+    meridiem = true,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    size = "md",
+    variant = "primary",
+    disabled = false,
+    name,
+    placeholder = "Select a time",
+    class: cls = "",
+    ...rest
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+  // Popup surface padding + text scale with size, so the popup honours `size` like the field does.
+  const pad = $derived(responsiveClasses(size, { sm: "p-1.5", md: "p-2", lg: "p-3" }));
+  const footText = $derived(
+    responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" }),
+  );
+
+  let open = $state(false);
+  let anchorEl = $state<HTMLDivElement>();
+
+  const display = $derived.by(() => {
+    if (!value) return "";
+    const [h, m, s] = value.split(":").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: seconds ? "2-digit" : undefined,
+      hour12: meridiem,
+    }).format(new Date(2000, 0, 1, h, m, s || 0));
+  });
+
+  function toggle() {
+    if (!disabled) open = !open;
+  }
+  function onKey(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open = true;
+    }
+  }
+  function now() {
+    const d = new Date();
+    // Snap minutes to the nearest minute-step so "Now" lands on a real spinner value; keep real seconds.
+    const ms = resolveStep(step).minute;
+    const mins = Math.round((d.getHours() * 60 + d.getMinutes()) / ms) * ms;
+    const hhmm = `${String(Math.floor(mins / 60) % 24).padStart(2, "0")}:${String(mins % 60).padStart(2, "0")}`;
+    value = seconds ? `${hhmm}:${String(d.getSeconds()).padStart(2, "0")}` : hhmm;
+    open = false; // a time is a complete selection — set and close (like DatePicker's Today)
+  }
+
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+</script>
+
+<div bind:this={anchorEl} class="w-full {cls}">
+  <Input
+    value={display}
+    readonly
+    {size}
+    {disabled}
+    {placeholder}
+    icon={clockIcon}
+    iconPosition="right"
+    iconClickable
+    onIconClick={toggle}
+    onclick={toggle}
+    onkeydown={onKey}
+    inputClass="cursor-pointer"
+    {...rest}
+  />
+  {#if name}<input type="hidden" {name} value={value ?? ""} />{/if}
+</div>
+
+{#snippet clockIcon()}<IconClock />{/snippet}
+
+<Popup anchor={anchorEl} bind:open offset={6}>
+  <div
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    style="--accent: {accent}"
+  >
+    <div class="grid place-items-center py-1">
+      <TimeSpinner bind:value {step} {seconds} {min} {max} {meridiem} {locale} {size} {variant} />
+    </div>
+    <div
+      class="mt-2 flex items-center justify-between border-t pt-2 {footText} [border-color:var(--ui-border-color)]"
+    >
+      <button
+        type="button"
+        class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+        onclick={now}>Now</button
+      >
+      <button
+        type="button"
+        class="rounded px-2 py-1 {subtle} hover:underline"
+        onclick={() => (open = false)}>Done</button
+      >
+    </div>
+  </div>
+</Popup>

package/dist/components/TimePicker.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type StepSpec } from "../types/time.js";
+import { type Variant } from "../types/variants.js";
+interface Props extends Omit<HTMLInputAttributes, "value" | "size" | "min" | "max" | "step"> {
+    /** 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or ''. Bindable. */
+    value?: string;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Add a seconds column; value becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from the app's own config. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the popup (focus ring, "Now" action, current value). Default primary. */
+    variant?: Variant;
+    disabled?: boolean;
+    name?: string;
+    placeholder?: string;
+    class?: string;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/TimeRangeInput.svelte

@@ -0,0 +1,203 @@
+<!--
+/**
+ * TimeRangeInput — a themed time-interval field: an {@link Input}-framed trigger (clock icon) that
+ * opens two compact {@link TimeSpinner}s (Start / End) side by side in a {@link Popup}. The field
+ * shows "9:00 AM – 5:00 PM"; the spinners are cross-bounded so End can't precede Start. Value is
+ * `{ start, end }` with 24h `HH:MM` strings (mirrors DatePicker's range shape).
+ *
+ * The footer mirrors DatePicker's Today/Done: "Now" sets the start to the current time, "Done" closes.
+ */
+-->
+<script lang="ts">
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { resolveStep, type StepSpec } from "../types/time.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+  import Input from "./Input.svelte";
+  import Popup from "./Popup.svelte";
+  import TimeSpinner from "./TimeSpinner.svelte";
+  import IconClock from "~icons/mdi/clock-outline";
+
+  type RangeValue = { start: string | null; end: string | null };
+  interface Props {
+    /** `{ start, end }` with 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or null. Bindable. */
+    value?: RangeValue | null;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Add a seconds column to both spinners; values become `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from the app's own config. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    placeholder?: string;
+    class?: string;
+  }
+
+  let {
+    value = $bindable(),
+    step = 1,
+    seconds = false,
+    min = "00:00",
+    max = "23:59",
+    meridiem = true,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    size = "md",
+    variant = "primary",
+    disabled = false,
+    placeholder = "Select a time range",
+    class: cls = "",
+    ...rest
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+  const pad = $derived(responsiveClasses(size, { sm: "p-1.5", md: "p-2", lg: "p-3" }));
+  const footText = $derived(
+    responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" }),
+  );
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+
+  const rv = $derived(value ?? { start: null, end: null });
+
+  let open = $state(false);
+  let anchorEl = $state<HTMLDivElement>();
+
+  const fmt = (t: string | null) => {
+    if (!t) return "";
+    const [h, m, s] = t.split(":").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: seconds ? "2-digit" : undefined,
+      hour12: meridiem,
+    }).format(new Date(2000, 0, 1, h, m, s || 0));
+  };
+  const label = $derived(rv.start ? `${fmt(rv.start)} – ${rv.end ? fmt(rv.end) : "…"}` : "");
+  const hasValue = $derived(!!(rv.start || rv.end));
+
+  // Keep the interval ordered: nudging start past end drags end along, and vice-versa.
+  function setStart(t: string) {
+    value = { start: t, end: rv.end && rv.end < t ? t : rv.end };
+  }
+  function setEnd(t: string) {
+    value = { start: rv.start && rv.start > t ? t : rv.start, end: t };
+  }
+  function now() {
+    const d = new Date();
+    const ms = resolveStep(step).minute;
+    const mins = Math.round((d.getHours() * 60 + d.getMinutes()) / ms) * ms;
+    const hhmm = `${String(Math.floor(mins / 60) % 24).padStart(2, "0")}:${String(mins % 60).padStart(2, "0")}`;
+    setStart(seconds ? `${hhmm}:${String(d.getSeconds()).padStart(2, "0")}` : hhmm);
+  }
+  function clear() {
+    value = { start: null, end: null };
+    open = false;
+  }
+  function toggle() {
+    if (!disabled) open = !open;
+  }
+  function onKey(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open = true;
+    }
+  }
+</script>
+
+<div bind:this={anchorEl} class="w-full {cls}">
+  <Input
+    value={label}
+    readonly
+    {size}
+    {disabled}
+    {placeholder}
+    onclick={toggle}
+    onkeydown={onKey}
+    inputClass="cursor-pointer"
+    actions={trailing}
+    {...rest}
+  />
+</div>
+
+{#snippet trailing()}
+  {#if hasValue && !disabled}
+    <button
+      type="button"
+      aria-label="Clear"
+      tabindex="-1"
+      class="grid size-5 place-items-center rounded {subtle} hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"
+      onclick={(e) => {
+        e.stopPropagation();
+        clear();
+      }}>×</button
+    >
+  {/if}
+  <button
+    type="button"
+    tabindex="-1"
+    aria-label="Open time range"
+    {disabled}
+    class="inline-flex items-center [color:var(--ui-color-secondary)] disabled:opacity-50"
+    onclick={toggle}><IconClock /></button
+  >
+{/snippet}
+
+<Popup anchor={anchorEl} bind:open offset={6}>
+  <div
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    style="--accent: {accent}"
+  >
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-3">
+        <span class="w-10 shrink-0 text-xs {subtle}">Start</span>
+        <TimeSpinner
+          value={rv.start ?? ""}
+          {step}
+          {seconds}
+          {min}
+          max={rv.end ?? max}
+          {meridiem}
+          {locale}
+          {size}
+          {variant}
+          onchange={setStart}
+        />
+      </div>
+      <div class="border-t [border-color:var(--ui-border-color)]"></div>
+      <div class="flex items-center gap-3">
+        <span class="w-10 shrink-0 text-xs {subtle}">End</span>
+        <TimeSpinner
+          value={rv.end ?? ""}
+          {step}
+          {seconds}
+          min={rv.start ?? min}
+          {max}
+          {meridiem}
+          {locale}
+          {size}
+          {variant}
+          onchange={setEnd}
+        />
+      </div>
+    </div>
+    <div
+      class="mt-2 flex items-center justify-between border-t pt-2 {footText} [border-color:var(--ui-border-color)]"
+    >
+      <button
+        type="button"
+        class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+        onclick={now}>Now</button
+      >
+      <button
+        type="button"
+        class="rounded px-2 py-1 {subtle} hover:underline"
+        onclick={() => (open = false)}>Done</button
+      >
+    </div>
+  </div>
+</Popup>

package/dist/components/TimeRangeInput.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type StepSpec } from "../types/time.js";
+import { type Variant } from "../types/variants.js";
+type RangeValue = {
+    start: string | null;
+    end: string | null;
+};
+interface Props {
+    /** `{ start, end }` with 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or null. Bindable. */
+    value?: RangeValue | null;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Add a seconds column to both spinners; values become `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from the app's own config. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    placeholder?: string;
+    class?: string;
+}
+declare const TimeRangeInput: import("svelte").Component<Props, {}, "value">;
+type TimeRangeInput = ReturnType<typeof TimeRangeInput>;
+export default TimeRangeInput;

package/dist/components/TimeSpinner.svelte

@@ -0,0 +1,202 @@
+<!--
+/**
+ * TimeSpinner — a compact iOS-style time stepper: a single row of HOUR : MINUTE : (AM·PM) columns,
+ * each showing just the current value with an up-chevron above and a down-chevron below. Tiny footprint,
+ * so it tucks under a Calendar in a combined date/time picker. 24h mode drops the meridiem column.
+ *
+ * Each column steps its own unit (wrapping), driven by the chevrons, the mouse wheel, or ↑/↓ when
+ * focused. Values are 24h `HH:MM`; labels follow the locale. Minute steps by `step`; `min`/`max`
+ * disable the chevrons that would leave range. Sibling of {@link TimeList} (the flat slot list).
+ */
+-->
+<script lang="ts">
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+  import { resolveStep, type StepSpec } from "../types/time.js";
+  import IconUp from "~icons/mdi/chevron-up";
+  import IconDown from "~icons/mdi/chevron-down";
+
+  interface Props {
+    /** Selected time, 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or ''. Bindable. */
+    value?: string;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Show a seconds column; value becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem column (12h). `false` = 24h. Default true; the app supplies this from
+     *  its own (server-side) locale/format config rather than sniffing the browser. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the focus ring. Default primary. */
+    variant?: Variant;
+    class?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(""),
+    step = 1,
+    seconds = false,
+    min,
+    max,
+    meridiem = true,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    onchange,
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+
+  const pad = (n: number) => String(n).padStart(2, "0");
+  // Compose a value in the active format (adds :SS only when `seconds`).
+  const mk = (h: number, m: number, s: number = curS) =>
+    seconds ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}`;
+  // Bounds may be given as HH:MM even in seconds mode — normalize so the string compare lines up.
+  const normB = (b: string | undefined) =>
+    b && seconds && b.split(":").length === 2 ? `${b}:00` : b;
+  const lo = $derived(normB(min));
+  const hi = $derived(normB(max));
+  // Pull a candidate into range. Independent columns mean a single step can momentarily land out of
+  // range (e.g. AM→PM keeping the hour) — clamp instead of rejecting, so it settles on the nearest
+  // valid time rather than trapping the user.
+  const clamp = (t: string) => (lo && t < lo ? lo : hi && t > hi ? hi : t);
+
+  const is12 = $derived(meridiem);
+
+  const base = $derived(value || min || (seconds ? "12:00:00" : "12:00"));
+  const curH = $derived(Number(base.split(":")[0])); // 0..23
+  const curM = $derived(Number(base.split(":")[1]));
+  const curS = $derived(Number(base.split(":")[2] ?? 0));
+  const curMer = $derived<"AM" | "PM">(curH < 12 ? "AM" : "PM");
+  const dispHour = $derived(is12 ? (curH % 12 === 0 ? 12 : curH % 12) : curH);
+
+  const steps = $derived(resolveStep(step));
+  // A 0..59 grid on `by`, always including the current (possibly off-grid) value so it stays selectable.
+  const grid60 = (by: number, cur: number) => {
+    const out: number[] = [];
+    for (let n = 0; n < 60; n += by) out.push(n);
+    if (!out.includes(cur)) {
+      out.push(cur);
+      out.sort((a, b) => a - b);
+    }
+    return out;
+  };
+  const minutes = $derived(grid60(steps.minute, curM));
+  const secondsGrid = $derived(grid60(steps.second, curS));
+
+  // Candidate value after stepping one column. HOUR steps in 24h space (wrapping 0–23) so it crosses
+  // noon naturally — 11 AM → 12 PM → 1 PM … — with the AM/PM display flipping as a consequence, rather
+  // than looping within one half-day. AM/PM flips a half-day (±12h). Minute/second wrap within their grid.
+  const stepHour = (dir: 1 | -1) => mk((curH + dir * steps.hour + 24) % 24, curM);
+  const stepMinute = (dir: 1 | -1) => {
+    const i = minutes.indexOf(curM);
+    return mk(curH, minutes[(i + dir + minutes.length) % minutes.length]);
+  };
+  const stepSecond = (dir: 1 | -1) => {
+    const i = secondsGrid.indexOf(curS);
+    return mk(curH, curM, secondsGrid[(i + dir + secondsGrid.length) % secondsGrid.length]);
+  };
+  const stepMer = () => mk((curH + 12) % 24, curM);
+
+  type Col = { display: string; label: string; up: string; down: string; colon?: boolean };
+  const cols = $derived.by<Col[]>(() => {
+    const list: Col[] = [
+      {
+        display: is12 ? String(dispHour) : pad(curH),
+        label: "Hour",
+        up: stepHour(1),
+        down: stepHour(-1),
+      },
+      { display: pad(curM), label: "Minute", up: stepMinute(1), down: stepMinute(-1), colon: true },
+    ];
+    if (seconds)
+      list.push({
+        display: pad(curS),
+        label: "Second",
+        up: stepSecond(1),
+        down: stepSecond(-1),
+        colon: true,
+      });
+    if (is12) list.push({ display: curMer, label: "AM/PM", up: stepMer(), down: stepMer() });
+    return list;
+  });
+
+  function apply(cand: string) {
+    value = clamp(cand);
+    onchange?.(value);
+  }
+  // A chevron is dead only when stepping can't move off the current value (already at that bound).
+  const noStep = (cand: string) => clamp(cand) === base;
+
+  // Each field is a per-Size class map → responsiveClasses() so `size` may be scalar OR responsive.
+  const valMap: Record<Size, string> = {
+    sm: "text-base w-9 py-0.5",
+    md: "text-lg w-11 py-1",
+    lg: "text-2xl w-14 py-1.5",
+  };
+  const chevMap: Record<Size, string> = { sm: "size-5", md: "size-6", lg: "size-7" };
+  const colMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-sm" };
+  const sizing = $derived({
+    val: responsiveClasses(size, valMap),
+    chev: responsiveClasses(size, chevMap),
+    col: responsiveClasses(size, colMap),
+  });
+  const chevBtn =
+    "grid place-items-center rounded-[var(--ui-border-radius)] [color:color-mix(in_srgb,var(--ui-color-text)_55%,transparent)] transition-colors enabled:hover:[background-color:var(--ui-color-hover)] enabled:active:[background-color:var(--ui-color-active)] enabled:hover:[color:var(--ui-color-text)] disabled:opacity-25 disabled:cursor-not-allowed";
+</script>
+
+<div
+  class="inline-flex items-center gap-1 [color:var(--ui-color-text)] {cls}"
+  style="--accent: {accent}"
+>
+  {#each cols as c (c.label)}
+    {#if c.colon}<span class="{sizing.val} grid place-items-center pb-0 font-semibold opacity-60"
+        >:</span
+      >{/if}
+    <div class="flex flex-col items-center">
+      <button
+        type="button"
+        aria-label={`${c.label} up`}
+        class="{chevBtn} {sizing.chev} w-full"
+        disabled={noStep(c.up)}
+        onclick={() => apply(c.up)}><IconUp /></button
+      >
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <div
+        role="spinbutton"
+        aria-label={c.label}
+        aria-valuetext={c.display}
+        tabindex="0"
+        class="{sizing.val} grid cursor-ns-resize place-items-center rounded-[var(--ui-border-radius)] text-center font-semibold tabular-nums select-none focus:outline-none focus-visible:[outline:2px_solid_var(--accent)]"
+        onwheel={(e) => {
+          e.preventDefault();
+          apply(e.deltaY > 0 ? c.down : c.up);
+        }}
+        onkeydown={(e) => {
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            apply(c.up);
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            apply(c.down);
+          }
+        }}
+      >
+        {c.display}
+      </div>
+      <button
+        type="button"
+        aria-label={`${c.label} down`}
+        class="{chevBtn} {sizing.chev} w-full"
+        disabled={noStep(c.down)}
+        onclick={() => apply(c.down)}><IconDown /></button
+      >
+    </div>
+  {/each}
+</div>

package/dist/components/TimeSpinner.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+import { type StepSpec } from "../types/time.js";
+interface Props {
+    /** Selected time, 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or ''. Bindable. */
+    value?: string;
+    /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */
+    step?: StepSpec;
+    /** Show a seconds column; value becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    min?: string;
+    max?: string;
+    /** Show the AM/PM meridiem column (12h). `false` = 24h. Default true; the app supplies this from
+     *  its own (server-side) locale/format config rather than sniffing the browser. */
+    meridiem?: boolean;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the focus ring. Default primary. */
+    variant?: Variant;
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const TimeSpinner: import("svelte").Component<Props, {}, "value">;
+type TimeSpinner = ReturnType<typeof TimeSpinner>;
+export default TimeSpinner;