@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/fields/RadioGroup.svelte

@@ -0,0 +1,88 @@
+<!-- @component
+One choice from a short, known list, on bits-ui’s `RadioGroup`.
+-->
+<!--
+  RadioGroup — one choice from a short, known list, on bits-ui's `RadioGroup`.
+
+  bits-ui owns what is genuinely hard here: the roving tabindex (the group is
+  ONE tab stop, and the arrow keys move within it), wrap-around, and the
+  `aria-checked` bookkeeping. Hand-rolled radio groups get the tab stop wrong
+  almost every time.
+
+  ARIA contract: bits-ui renders `role="radiogroup"` around `role="radio"`
+  buttons, and this adds `aria-orientation` beside the `data-orientation`
+  bits-ui sets, so the arrow keys a reader is told to use match the ones that
+  work. A `role` element cannot be named by a `<legend>` — the legend names
+  the `<fieldset>`, which is a different node — so the group renders its
+  question as a heading-ish `<span>` and points `aria-labelledby` at it. That
+  is why this is the one field group NOT built on `Fieldset`, and the hint and
+  errors hang off the radiogroup element itself through `aria-describedby`.
+  It is a whole frame (question, hint, errors), not a control a `FormField`
+  wraps, so it keeps its own `legend` rather than taking a `FieldControl`'s
+  `labelId`: inside a `FormField` it would render two labels.
+
+  The marker is drawn rather than delegated to daisyUI's `.radio`, because
+  that class styles an `<input type="radio">` through `:checked` and bits-ui's
+  radio is a `<button>`. It is two spans of semantic tokens; `checked` comes
+  from bits-ui's own snippet prop, so the visual and the accessibility tree
+  cannot disagree.
+-->
+<script lang="ts">import { RadioGroup } from "bits-ui";
+import FieldErrors from "./FieldErrors.svelte";
+import { toFieldOptions } from "./field-types.js";
+let { legend, options, value = $bindable(""), orientation = "vertical", name, hint, errors = [], required = false, requiredLabel = "(required)", disabled = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const legendId = `${uid}-legend`;
+const hintId = `${uid}-hint`;
+const errorId = `${uid}-error`;
+const entries = $derived(toFieldOptions(options));
+const invalid = $derived(errors.length > 0);
+const describedBy = $derived([hint === undefined ? "" : hintId, invalid ? errorId : ""].filter((part) => part !== "").join(" "));
+</script>
+
+<div {...rest} class={['fieldset', className]}>
+  <span id={legendId} class="fieldset-legend">
+    {legend}
+    {#if required}
+      <span class="text-error" aria-hidden="true">*</span>
+      <span class="sr-only">{requiredLabel}</span>
+    {/if}
+  </span>
+  <RadioGroup.Root
+    bind:value
+    {orientation}
+    {...name === undefined ? {} : { name }}
+    {required}
+    {disabled}
+    aria-labelledby={legendId}
+    aria-orientation={orientation}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    class={['flex gap-3', orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col']}
+  >
+    {#each entries as option (option.value)}
+      <RadioGroup.Item
+        value={option.value}
+        disabled={option.disabled === true}
+        class="rounded-field focus-visible:outline-primary flex cursor-pointer items-center gap-3 text-left focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {#snippet children({ checked })}
+          <span
+            aria-hidden="true"
+            class={[
+              'grid size-4 shrink-0 place-items-center rounded-full border-2',
+              checked ? 'border-primary' : 'border-base-content/40',
+            ]}
+          >
+            {#if checked}<span class="bg-primary size-2 rounded-full"></span>{/if}
+          </span>
+          <span>{option.label}</span>
+        {/snippet}
+      </RadioGroup.Item>
+    {/each}
+  </RadioGroup.Root>
+  {#if hint !== undefined}
+    <p class="fieldset-label" id={hintId}>{hint}</p>
+  {/if}
+  <FieldErrors {errors} id={errorId} />
+</div>

package/dist/fields/RadioGroup.svelte.d.ts

@@ -0,0 +1,41 @@
+import { RadioGroup } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FieldOptionInput } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The question the options answer; names the group. */
+    legend: string;
+    /** Full options, or bare strings when value and label are the same. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The chosen value; empty string when nothing is chosen.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Lay the options out in a column or a row.
+     * @defaultValue `'vertical'`
+     */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Posted field name — bits-ui renders the hidden input when it is set. */
+    name?: string | undefined;
+    /** Guidance rendered under the legend. */
+    hint?: string | undefined;
+    /**
+     * Validation messages; any at all marks the group invalid.
+     * @defaultValue `[]`
+     */
+    errors?: readonly string[] | undefined;
+    /** Marks the group required and reads `requiredLabel` after the legend. */
+    required?: boolean | undefined;
+    /**
+     * Read out after the legend when `required`.
+     * @defaultValue `'(required)'`
+     */
+    requiredLabel?: string | undefined;
+    /** Disables every option. */
+    disabled?: boolean | undefined;
+}
+/** One choice from a short, known list, on bits-ui’s `RadioGroup`. */
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/fields/RangeCalendar.svelte

@@ -0,0 +1,51 @@
+<!-- @component
+An inline, always-visible month grid for picking a start–end date range, on bits-ui's `RangeCalendar`.
+-->
+<!--
+  RangeCalendar — `Calendar`'s range sibling: the first chosen day starts
+  the range, the second ends it, and the days between are drawn as one band.
+  `minDays` / `maxDays` bound the length; `excludeDisabled` decides whether a
+  range may run across disabled days. It shares everything else — props,
+  header, grids, day styling — with `Calendar` (`calendar-props.ts`,
+  `CalendarMonths.svelte`), so the ARIA contract is the same: see
+  `Calendar`'s header. bits-ui adds `data-range-start` / `-middle` / `-end`
+  to the days, which is all the band styling reads.
+
+  The value is `{ start, end }` of `DateValue`s, either side `undefined`
+  while the reader is still choosing.
+-->
+<script lang="ts">import { RangeCalendar } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import CalendarMonths from "./CalendarMonths.svelte";
+import { calendarRoot, definedProps } from "./calendar-props.js";
+let { value = $bindable(), month = $bindable(), minDays, maxDays, excludeDisabled = false, ...props } = $props();
+const context = getComponentsContext();
+const shared = $derived(calendarRoot(props, context.locale()));
+const lengths = $derived(definedProps({
+	minDays,
+	maxDays
+}));
+</script>
+
+<RangeCalendar.Root
+  {...shared.root}
+  {...lengths}
+  {excludeDisabled}
+  bind:placeholder={
+    // Unset, bits-ui picks the value's month or today's.
+    () => month as DateValue,
+    (next: DateValue) => {
+      month = next;
+    }
+  }
+  bind:value={
+    () => value ?? { start: undefined, end: undefined },
+    (next) => {
+      value = next;
+    }
+  }
+>
+  {#snippet children({ months, weekdays })}
+    <CalendarMonths parts={RangeCalendar} {...shared.months} {months} {weekdays} />
+  {/snippet}
+</RangeCalendar.Root>

package/dist/fields/RangeCalendar.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DateValue } from '@internationalized/date';
+import { RangeCalendar } from 'bits-ui';
+import { type CalendarBaseProps } from './calendar-props.ts';
+interface Props extends CalendarBaseProps {
+    /** `{ start, end }`; either side `undefined` while choosing. Bindable. */
+    value?: {
+        start: DateValue | undefined;
+        end: DateValue | undefined;
+    } | undefined;
+    /** Shortest allowed range, in days. */
+    minDays?: number | undefined;
+    /** Longest allowed range, in days. */
+    maxDays?: number | undefined;
+    /**
+     * Refuse a range that would span a disabled day.
+     * @defaultValue `false`
+     */
+    excludeDisabled?: boolean | undefined;
+}
+/** An inline, always-visible month grid for picking a start–end date range, on bits-ui's `RangeCalendar`. */
+declare const RangeCalendar: import("svelte").Component<Props, {}, "value" | "month">;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/fields/Rating.svelte

@@ -0,0 +1,127 @@
+<!-- @component
+A score out of N as stars: an input on bits-ui's `RatingGroup` that binds a number (optionally in half steps) and posts under `name`, or, with `readonly`, a static display named "4.5 out of 5".
+-->
+<!--
+  Rating — one component, two branches.
+
+  Input (the default): bits-ui's `RatingGroup`. Its root is `role="slider"`
+  (bits-ui 2.20, `rating-group.svelte.js`) — one Tab stop, with the stars
+  `role="presentation"` — so there is no "radio button 4 of 5" with no
+  context. There is no APG rating pattern; bits-ui follows the slider one.
+  bits-ui supplies the role, `aria-valuenow` / `min` / `max`,
+  `aria-valuetext` (from `formatValue` here), `aria-readonly`,
+  `aria-disabled`, `aria-required`, the hidden input under `name`, the
+  arrow / Home / End / Page keys, digit keys (with `allowHalf`, "3" then
+  ".5" gives 3.5), and half-step pointer handling. This file adds the
+  accessible name, `aria-describedby` and `aria-invalid`.
+
+  Naming: a `<label for>` cannot name a `div`, so inside a `FormField` the
+  root takes `aria-labelledby={labelId}` (`FieldControl.labelId`, #179) and
+  `FormField` forwards a label click to it. Outside one, `label` becomes the
+  root's `aria-label`.
+
+  Clearing: bits-ui clears the value to 0 when the first star is clicked
+  while the value already equals it (pointer only; no key clears below
+  `min`, which is 0). That is left as bits-ui ships it, not hand-patched.
+
+  Read-only display (`readonly`): plain markup with no bits-ui root mounted —
+  `role="img"` with `aria-label={formatValue(value, max)}`, every star
+  `aria-hidden`, nothing focusable, nothing posted. It rounds to the nearest
+  half star whatever `allowHalf` says, because a display usually shows an
+  average ("4.5 out of 5"). The label still says the exact value.
+
+  Styling: daisyUI's `rating-*` size classes set `--size`; each star is two
+  `mask mask-star-2` halves (`mask-half-1` / `mask-half-2`, which flip in
+  RTL), filled in the tone's background or left at `bg-base-content/20`.
+  daisyUI's `rating` class itself is not used: its `.rating *` rules style
+  every descendant, which fights bits-ui's item wrappers.
+-->
+<script lang="ts">import { RatingGroup } from "bits-ui";
+import { backgroundTone } from "../ui/tones.js";
+import { ratingSize } from "./field-types.js";
+let { value = $bindable(0), max = 5, allowHalf = false, readonly = false, hoverPreview = true, formatValue = (score, outOf) => `${score} out of ${outOf}`, name, disabled = false, tone = "warning", size = "md", item, label = "Rating", id: idProp, labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+const fill = $derived(backgroundTone[tone]);
+// bits-ui types `name` as a bare optional, so it is omitted rather than passed as `undefined`.
+const nameProp = $derived(name === undefined ? {} : { name });
+/** The display's stars: the value rounded to the nearest half. */
+const displayStates = $derived.by(() => {
+	const shown = Math.round(value * 2) / 2;
+	return Array.from({ length: max }, (_, index) => {
+		if (shown >= index + 1) return "active";
+		return shown >= index + .5 ? "partial" : "inactive";
+	});
+});
+</script>
+
+{#snippet star(state: StarState)}
+  <span aria-hidden="true" class="flex">
+    {#if item}
+      {@render item({ state })}
+    {:else}
+      <span
+        class={[
+          'mask mask-star-2 mask-half-1 h-[calc(var(--size))] w-[calc(var(--size)*0.5)]',
+          state === 'inactive' ? 'bg-base-content/20' : fill,
+        ]}
+      ></span>
+      <span
+        class={[
+          'mask mask-star-2 mask-half-2 h-[calc(var(--size))] w-[calc(var(--size)*0.5)]',
+          state === 'active' ? fill : 'bg-base-content/20',
+        ]}
+      ></span>
+    {/if}
+  </span>
+{/snippet}
+
+{#if readonly}
+  <div
+    {...rest}
+    {id}
+    role="img"
+    aria-label={formatValue(value, max)}
+    class={['inline-flex align-middle', ratingSize[size], className]}
+  >
+    {#each displayStates as state, index (index)}
+      {@render star(state)}
+    {/each}
+  </div>
+{:else}
+  <RatingGroup.Root
+    {...rest}
+    bind:value
+    {id}
+    {max}
+    {allowHalf}
+    {hoverPreview}
+    {...nameProp}
+    {disabled}
+    {required}
+    aria-valuetext={formatValue}
+    aria-label={labelId === undefined ? label : undefined}
+    aria-labelledby={labelId}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    class={[
+      'inline-flex rounded-field align-middle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary data-[disabled]:opacity-50',
+      invalid && 'outline-2 outline-offset-2 outline-error',
+      ratingSize[size],
+      className,
+    ]}
+  >
+    {#snippet children({ items })}
+      {#each items as entry (entry.index)}
+        <RatingGroup.Item
+          index={entry.index}
+          class="cursor-pointer data-[disabled]:cursor-not-allowed"
+        >
+          {#snippet children({ state })}
+            {@render star(state)}
+          {/snippet}
+        </RatingGroup.Item>
+      {/each}
+    {/snippet}
+  </RatingGroup.Root>
+{/if}

package/dist/fields/Rating.svelte.d.ts

@@ -0,0 +1,86 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Size, type Tone } from '../ui/tones.ts';
+/** How much of one star is filled. */
+type StarState = 'active' | 'partial' | 'inactive';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dir'> {
+    /**
+     * The score. Bindable.
+     * @defaultValue `0`
+     */
+    value?: number | undefined;
+    /**
+     * Number of stars.
+     * @defaultValue `5`
+     */
+    max?: number | undefined;
+    /**
+     * Allow half-star values (bits-ui `allowHalf`).
+     * @defaultValue `false`
+     */
+    allowHalf?: boolean | undefined;
+    /**
+     * Render a static, unfocusable display instead of an input.
+     * @defaultValue `false`
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Preview the hovered value before it is chosen (bits-ui `hoverPreview`).
+     * @defaultValue `true`
+     */
+    hoverPreview?: boolean | undefined;
+    /**
+     * The spoken value (the input's `aria-valuetext`); also the display's accessible name.
+     * @defaultValue `(value, max) => \`${value} out of ${max}\``
+     */
+    formatValue?: ((value: number, max: number) => string) | undefined;
+    /** Posts the value under this name (input only). */
+    name?: string | undefined;
+    /**
+     * Blocks keys and clicks, and posts nothing.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Colour of the filled stars.
+     * @defaultValue `'warning'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI `rating` size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** Replace the star glyph (a heart, a leaf); receives how much of it is filled. It is rendered inside an `aria-hidden` wrapper. */
+    item?: Snippet<[{
+        state: StarState;
+    }]> | undefined;
+    /**
+     * Accessible name, for a rating outside a `FormField`; ignored when `labelId` is set.
+     * @defaultValue `'Rating'`
+     */
+    label?: string | undefined;
+    /** `FieldControl`: the root's `id`. Minted when omitted. */
+    id?: string | undefined;
+    /** `FieldControl`: the visible label's id; the root is `aria-labelledby` it. */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and an error outline.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: sets `aria-required` and the hidden input's `required`.
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+}
+/** A score out of N as stars: an input on bits-ui's `RatingGroup` that binds a number (optionally in half steps) and posts under `name`, or, with `readonly`, a static display named "4.5 out of 5". */
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/fields/SearchInput.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A `type="search"` field with a leading icon, a clear button while there is text, and a spinner while `pending`. `name` defaults to `'q'` and `placeholder` to `'Search'`.
+-->
+<!--
+  SearchInput — a `type="search"` field in daisyUI's composite `input`
+  wrapper, with a leading icon, a clear button while there is text, and a
+  spinner while `pending`.
+
+  The wrapper is a `<div>`, not a `<label>`: the clear button lives inside it,
+  and a button inside a label is both mis-named (the label's text becomes part
+  of ITS name) and label-activated (clicking it also focuses the field). The
+  visible label is optional — `label` always supplies the accessible name.
+
+  ARIA contract: the leading magnifier is `aria-hidden`, because the field's
+  own name already says what it is; the clear button is a real button with a
+  visually-hidden name rather than a bare glyph; the spinner is `aria-hidden`,
+  because a busy state must not change the field's accessible name.
+
+  `onInput` fires on every keystroke (feed it to whatever debounce the app
+  uses) and `onSubmit` on Enter.
+-->
+<script lang="ts">import { Search, X } from "@lucide/svelte";
+import Spinner from "../ui/Spinner.svelte";
+import { inputSize } from "./field-types.js";
+let { label, value = $bindable(""), onInput, onSubmit, onClear, pending = false, clearLabel = "Clear search", size = "md", name = "q", placeholder = "Search", class: className, ...rest } = $props();
+const clear = () => {
+	value = "";
+	onInput?.("");
+	onClear?.();
+};
+</script>
+
+<div class={['input w-full', inputSize[size], className]}>
+  <Search class="size-4 opacity-60" aria-hidden="true" />
+  <input
+    {...rest}
+    type="search"
+    {name}
+    {placeholder}
+    aria-label={label}
+    bind:value
+    oninput={() => onInput?.(value)}
+    onkeydown={(event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        onSubmit?.(value);
+      }
+    }}
+  />
+  {#if pending}
+    <Spinner decorative size="xs" />
+  {:else if value !== ''}
+    <button type="button" class="btn btn-ghost btn-xs btn-circle" onclick={clear}>
+      <X class="size-3.5" aria-hidden="true" />
+      <span class="sr-only">{clearLabel}</span>
+    </button>
+  {/if}
+</div>

package/dist/fields/SearchInput.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size'> {
+    /** Accessible name of the field. */
+    label: string;
+    /**
+     * The query. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Fires on every change with the current text. */
+    onInput?: ((query: string) => void) | undefined;
+    /** Fires on Enter with the current text. */
+    onSubmit?: ((query: string) => void) | undefined;
+    /** Fires after the clear button empties the field. */
+    onClear?: (() => void) | undefined;
+    /** A search is in flight. */
+    pending?: boolean | undefined;
+    /**
+     * Accessible name of the clear button.
+     * @defaultValue `'Clear search'`
+     */
+    clearLabel?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+}
+/** A `type="search"` field with a leading icon, a clear button while there is text, and a spinner while `pending`. `name` defaults to `'q'` and `placeholder` to `'Search'`. */
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/fields/SegmentGroup.svelte

@@ -0,0 +1,91 @@
+<!-- @component
+The segment group the bits-ui date and time controls share; internal, not exported.
+-->
+<!--
+  SegmentGroup — the `role="group"` of spinbutton segments inside a bits-ui
+  `DateField`, `TimeField`, `DatePicker` or `DateRangePicker` root, written
+  once for all four. `parts` is the bits-ui namespace in use; each exposes
+  `Input` and `Segment` (a range's `Input` also takes `type`).
+
+  `<label for>` cannot name a `role="group"`, so the group is
+  `aria-labelledby` the `FormField`'s label (`labelId`), and each segment is
+  labelled by its own part name ("day, ") followed by that label, so a
+  reader landing on one hears "day, Sown on". bits-ui would name them from
+  its own `Label`, which a `FormField` has no use for, so the segments are
+  rendered through their `child` snippet with our `aria-labelledby` last.
+  The literal separators ("/", ":") are `aria-hidden`: the spinbutton names
+  already say which part is which.
+
+  Two shapes. By default the group IS the field: the `input` shell, named
+  by the label, carrying `describedBy` / `invalid`, with an optional
+  `trailing` snippet (the picker's calendar button) inside it. With
+  `range`, it is one half of a `DateRangePicker`, whose root draws the
+  shell: a bare inline group named by `range.label` ("Start date"), whose
+  segments read "day, <label> Start date".
+-->
+<script lang="ts">import { inputSize } from "./field-types.js";
+let { parts, group, range, trailing } = $props();
+const { class: className, ...attributes } = $derived(group.attributes);
+// SAFETY: the namespaces' `Segment`s differ only in the `part` union they
+// accept, and every `part` rendered here comes from the same root's own
+// `segments`, so a TimeField segment is only ever handed a time part.
+const Segment = $derived(parts.Segment);
+// SAFETY: every `Input` takes `id`, `name` and `child`; only the range's
+// also takes `type`, which is passed only when `range` is set, and a range
+// is only ever rendered with `DateRangePicker`'s parts.
+const Input = $derived(parts.Input);
+const inputProps = $derived({
+	...group.id === undefined || range !== undefined ? {} : { id: group.id },
+	name: (range === undefined ? group.name : range.name) ?? "",
+	...range === undefined ? {} : { type: range.type }
+});
+</script>
+
+{#snippet segmentList(segments: readonly { part: string; value: string }[], names: string | undefined)}
+  {#each segments as { part, value }, index (index)}
+    <Segment part={part as 'literal'}>
+      {#snippet child({ props: segmentProps })}
+        {#if part === 'literal'}
+          <span {...segmentProps} aria-hidden="true" class="text-base-content/60 px-px">{value}</span>
+        {:else}
+          <span
+            {...segmentProps}
+            aria-labelledby={names === undefined ? undefined : `${String(segmentProps['id'])} ${names}`}
+            class="focus:bg-primary focus:text-primary-content rounded-sm px-0.5 outline-none aria-[valuetext=Empty]:text-base-content/50"
+            >{value}</span
+          >
+        {/if}
+      {/snippet}
+    </Segment>
+  {/each}
+{/snippet}
+
+<Input {...inputProps}>
+  {#snippet child({ props, segments })}
+    {#if range !== undefined}
+      {@const ownId = String(props['id'])}
+      <div {...props} role="group" aria-label={range.label} class="inline-flex items-center">
+        {@render segmentList(segments, [group.labelId, ownId].filter(Boolean).join(' '))}
+      </div>
+    {:else}
+      <div
+        {...attributes}
+        {...props}
+        aria-labelledby={group.labelId}
+        aria-describedby={group.describedBy === '' ? undefined : group.describedBy}
+        aria-invalid={group.invalid ? 'true' : undefined}
+        class={[
+          'input inline-flex w-auto items-center gap-0 tabular-nums',
+          inputSize[group.size],
+          group.invalid && 'input-error',
+          'data-invalid:input-error',
+          group.disabled && 'opacity-50',
+          className,
+        ]}
+      >
+        {@render segmentList(segments, group.labelId)}
+        {@render trailing?.()}
+      </div>
+    {/if}
+  {/snippet}
+</Input>

package/dist/fields/SegmentGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { DateField, DatePicker, DateRangePicker, TimeField } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { SegmentGroupOptions } from './segmented-field.ts';
+interface Props {
+    /** The bits-ui namespace whose parts to render. */
+    parts: typeof DateField | typeof TimeField | typeof DatePicker | typeof DateRangePicker;
+    group: SegmentGroupOptions;
+    /** One half of a range: which half, its name, and its posted field name. */
+    range?: {
+        readonly type: 'start' | 'end';
+        readonly label: string;
+        readonly name?: string | undefined;
+    } | undefined;
+    /** Rendered inside the shell after the segments (a picker's trigger). */
+    trailing?: Snippet<[]> | undefined;
+}
+/** The segment group the bits-ui date and time controls share; internal, not exported. */
+declare const SegmentGroup: import("svelte").Component<Props, {}, "">;
+type SegmentGroup = ReturnType<typeof SegmentGroup>;
+export default SegmentGroup;

package/dist/fields/Select.svelte

@@ -0,0 +1,36 @@
+<!-- @component
+A native `<select>` in daisyUI styling over a list of options, with an optional placeholder and `FieldControl` wiring.
+-->
+<!--
+  Select — a native `<select>` in daisyUI `select` styling over a list of
+  options, with a bindable `value`, an optional placeholder option (disabled,
+  selected while `value` is empty) and the `FieldControl` wiring.
+
+  Native, not bits-ui, and deliberately: a native select is keyboard-complete
+  and typeahead-complete without a line of script, and on a phone it opens the
+  platform picker. The rich alternative is `Combobox`, which exists for the
+  case a select genuinely cannot serve — a list too long to scroll, or one
+  that has to be fetched.
+
+  ARIA contract: the platform's. `describedBy` and `invalid` are the only
+  attributes added.
+-->
+<script lang="ts">import { selectSize, toFieldOptions } from "./field-types.js";
+let { options, value = $bindable(""), placeholder, size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
+const entries = $derived(toFieldOptions(options));
+</script>
+
+<select
+  {...rest}
+  bind:value
+  aria-invalid={invalid ? 'true' : undefined}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  class={['select w-full', selectSize[size], invalid && 'select-error', className]}
+>
+  {#if placeholder !== undefined}
+    <option value="" disabled>{placeholder}</option>
+  {/if}
+  {#each entries as option (option.value)}
+    <option value={option.value} disabled={option.disabled === true}>{option.label}</option>
+  {/each}
+</select>