@thomasfosterau/components 0.1.0 → 0.2.0

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

@@ -0,0 +1,43 @@
+import type { DateValue } from '@internationalized/date';
+import { DateRangePicker } from 'bits-ui';
+import { type PickerProps, type SegmentedFieldProps } from './segmented-field.ts';
+/** A start–end span; either end `undefined` while incomplete. */
+interface DateRangeValue {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+interface Props extends Omit<SegmentedFieldProps, 'name'>, PickerProps {
+    /** The span. Bindable. */
+    value?: DateRangeValue | undefined;
+    /** Earliest valid date. */
+    minValue?: DateValue | undefined;
+    /** Latest valid date. */
+    maxValue?: DateValue | undefined;
+    /** Shortest span in days. */
+    minDays?: number | undefined;
+    /** Longest span in days. */
+    maxDays?: number | undefined;
+    /**
+     * Close the popover once the span is complete.
+     * @defaultValue `true`
+     */
+    closeOnRangeSelect?: boolean | undefined;
+    /** Form field name of the start date (ISO), posted through a hidden input. */
+    startName?: string | undefined;
+    /** Form field name of the end date (ISO), posted through a hidden input. */
+    endName?: string | undefined;
+    /**
+     * Name of the start half.
+     * @defaultValue `'Start date'`
+     */
+    startLabel?: string | undefined;
+    /**
+     * Name of the end half.
+     * @defaultValue `'End date'`
+     */
+    endLabel?: string | undefined;
+}
+/** Two segmented date fields, a start and an end, with a range-calendar popover, on bits-ui `DateRangePicker`. */
+declare const DateRangePicker: import("svelte").Component<Props, {}, "value" | "open">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/fields/Dropzone.svelte

@@ -0,0 +1,232 @@
+<!-- @component
+Choose one or many files by dropping them on a target or through a "Choose files" button, with a removable file list and explained rejections; never uploads.
+-->
+<!--
+  Dropzone — a drop target plus a real "Choose files" button, a list of the
+  chosen files (name, size, optional thumbnail) each with a remove button,
+  and client-side `accept` / `maxBytes` / `maxFiles` checks whose rejections
+  are explained. It binds a `File[]` and never uploads: the transfer is the
+  caller's, as with `FileInput`.
+
+  Hand-rolled, and why (AGENTS.md): no bits-ui primitive exists for file
+  drops, and the contract is small — one button, one list, one alert —
+  pinned by `tests/fields/Dropzone.test.ts`. The checks are the pure helpers
+  in `file-validation.ts`, shared with `FileInput`.
+
+  A real `<input type="file">` sits inside, visually hidden, carrying
+  `name`, `accept`, `multiple` and `required`. Every change to `files` — a
+  pick, a drop, a removal, the caller's own write — is synced into it through
+  a `DataTransfer`, so a plain form POST posts exactly the listed files.
+  A drop is NOT filtered by the browser against `accept`, which is why the
+  checks run on drops too.
+
+  ARIA contract (no APG pattern; these are the guarantees):
+  - The drop area is never the only way in. The "Choose files" `<button>`
+    opens the native picker, and it carries the `FieldControl` id, so
+    `FormField`'s `<label for>` names it, plus `aria-describedby`
+    (`describedBy`, then the rejection alert). It takes no `aria-invalid` —
+    the `button` role does not support it — so `invalid` reaches assistive
+    technology through `FormField`'s error text in that description. The drop
+    area itself is not focusable; `promptLabel` sits in front of the button.
+  - Drag-over is visual only (`data-dragging`), never announced.
+  - The files are a `<ul>` of `<li>`; each remove button is named by
+    `removeLabel(file)`. After a removal, focus moves to the next remove
+    button, else the previous one, else the choose button.
+  - Rejections from the last selection render in one `role="alert"`
+    region (`FieldErrors`), cleared by the next selection.
+  - A polite live region says how many files are selected after each
+    selection or drop, since a drop otherwise produces no announcement.
+
+  Previews: an image file gets an object-URL thumbnail when `previews` is
+  on; every URL is revoked when its file leaves the list and when the
+  component is destroyed.
+-->
+<script lang="ts">import { tick, untrack } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { getComponentsContext } from "../context.svelte.js";
+import FieldErrors from "./FieldErrors.svelte";
+import { acceptMatches, exceedsSize, formatFileSize } from "./file-validation.js";
+let { files = $bindable([]), accept, maxBytes, maxFiles, multiple = true, name, onSelect, previews = true, promptLabel = "Drop files here or", chooseLabel = "Choose files", removeLabel = (file) => `Remove ${file.name}`, tooLargeMessage = (file) => `${file.name} is too large.`, wrongTypeMessage = (file) => `${file.name} is not an accepted file type.`, tooManyMessage = (max) => `Choose at most ${max} files.`, selectedMessage = (count) => count === 1 ? "1 file selected" : `${count} files selected`, locales = getComponentsContext().locale(), file: fileRow, disabled = false, id: idProp, labelId: _labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const buttonId = $derived(idProp ?? uid);
+const errorsId = $derived(`${uid}-errors`);
+let input = $state(null);
+let chooseButton = $state(null);
+let root = $state(null);
+let dragging = $state(false);
+let rejections = $state([]);
+let announcement = $state("");
+const previewUrls = new SvelteMap();
+const cap = $derived(multiple ? maxFiles : 1);
+const messages = $derived(rejectionMessages(rejections));
+const described = $derived([describedBy, messages.length > 0 ? errorsId : ""].filter((part) => part !== "").join(" "));
+function rejectionMessages(list) {
+	const out = list.filter((rejection) => rejection.reason !== "too-many").map((rejection) => rejection.reason === "too-large" ? tooLargeMessage(rejection.file) : wrongTypeMessage(rejection.file));
+	if (cap !== undefined && list.some((rejection) => rejection.reason === "too-many")) {
+		out.push(tooManyMessage(cap));
+	}
+	return out;
+}
+/** Which rule, if any, refuses `candidate` once `taken` files are already in. */
+function refusal(candidate, taken) {
+	if (!acceptMatches(candidate, accept)) return "wrong-type";
+	if (exceedsSize(candidate, maxBytes)) return "too-large";
+	if (cap !== undefined && taken >= cap) return "too-many";
+	return undefined;
+}
+/** Check a pick or a drop, keep what passes, explain what does not. */
+function take(incoming) {
+	const base = multiple ? files : [];
+	const accepted = [];
+	const rejected = [];
+	for (const candidate of incoming) {
+		const reason = refusal(candidate, base.length + accepted.length);
+		if (reason === undefined) accepted.push(candidate);
+		else rejected.push({
+			file: candidate,
+			reason
+		});
+	}
+	if (accepted.length > 0 || !multiple) files = [...base, ...accepted];
+	rejections = rejected;
+	announcement = selectedMessage(files.length);
+	onSelect?.(accepted, rejected);
+}
+async function remove(index) {
+	files = files.filter((_, at) => at !== index);
+	announcement = selectedMessage(files.length);
+	// Let the list re-render before choosing where focus goes.
+	await tick();
+	const left = [...root?.querySelectorAll("[data-dropzone-remove]") ?? []];
+	(left[index] ?? left[index - 1] ?? chooseButton)?.focus();
+}
+/** Mirror `files` into the native input, so a form POST sends exactly the listed files. */
+function syncInput(current) {
+	if (input === null) return;
+	const transfer = new DataTransfer();
+	for (const entry of current) transfer.items.add(entry);
+	input.files = transfer.files;
+}
+$effect(() => {
+	const current = files;
+	untrack(() => {
+		for (const entry of current) {
+			if (previews && entry.type.startsWith("image/") && !previewUrls.has(entry)) {
+				previewUrls.set(entry, URL.createObjectURL(entry));
+			}
+		}
+		for (const [entry, url] of previewUrls) {
+			if (!current.includes(entry)) {
+				URL.revokeObjectURL(url);
+				previewUrls.delete(entry);
+			}
+		}
+		syncInput(current);
+	});
+});
+$effect(() => () => {
+	for (const url of previewUrls.values()) URL.revokeObjectURL(url);
+});
+function dragOver(event) {
+	event.preventDefault();
+	if (disabled) return;
+	dragging = true;
+	if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "copy";
+}
+function dragLeave(event) {
+	const target = event.currentTarget;
+	if (event.relatedTarget instanceof Node && target.contains(event.relatedTarget)) return;
+	dragging = false;
+}
+function drop(event) {
+	event.preventDefault();
+	dragging = false;
+	if (disabled) return;
+	take([...event.dataTransfer?.files ?? []]);
+}
+function picked(event) {
+	const chosen = [...event.currentTarget.files ?? []];
+	// The native input now holds only the new pick; `take` decides the list,
+	// and the sync effect writes it back.
+	take(chosen);
+	syncInput(files);
+}
+</script>
+
+{#snippet row(entry: File, index: number)}
+  {@const preview = previewUrls.get(entry)}
+  {#if preview !== undefined}
+    <img src={preview} alt="" class="rounded-field size-10 object-cover" />
+  {/if}
+  <span class="min-w-0 grow truncate">{entry.name}</span>
+  <span class="text-base-content/70 text-sm tabular-nums">{formatFileSize(entry.size, locales)}</span>
+  <button
+    data-dropzone-remove
+    type="button"
+    {disabled}
+    class="btn btn-ghost btn-sm"
+    onclick={() => void remove(index)}
+  >
+    {removeLabel(entry)}
+  </button>
+{/snippet}
+
+<div
+  {...rest}
+  bind:this={root}
+  data-dragging={dragging ? '' : undefined}
+  ondragenter={dragOver}
+  ondragover={dragOver}
+  ondragleave={dragLeave}
+  ondrop={drop}
+  class={[
+    'rounded-box bg-base-100 border-2 border-dashed p-4',
+    invalid || messages.length > 0 ? 'border-error' : 'border-base-300',
+    'data-[dragging]:border-primary data-[dragging]:bg-base-200',
+    disabled && 'opacity-50',
+    className,
+  ]}
+>
+  <div class="flex flex-wrap items-center justify-center gap-2 py-4 text-center">
+    <span>{promptLabel}</span>
+    <button
+      bind:this={chooseButton}
+      id={buttonId}
+      type="button"
+      {disabled}
+      aria-describedby={described === '' ? undefined : described}
+      class="btn btn-sm"
+      onclick={() => input?.click()}
+    >
+      {chooseLabel}
+    </button>
+  </div>
+  <input
+    bind:this={input}
+    type="file"
+    class="sr-only"
+    tabindex="-1"
+    aria-hidden="true"
+    {name}
+    {accept}
+    {multiple}
+    {required}
+    {disabled}
+    onchange={picked}
+  />
+  {#if files.length > 0}
+    <ul class="mt-2 flex flex-col gap-2">
+      {#each files as entry, index (entry)}
+        <li class="flex items-center gap-3">
+          {#if fileRow}
+            {@render fileRow(entry, { remove: () => void remove(index) })}
+          {:else}
+            {@render row(entry, index)}
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <FieldErrors errors={messages} id={errorsId} />
+  <p class="sr-only" aria-live="polite">{announcement}</p>
+</div>

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

@@ -0,0 +1,103 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FileRejection } from './file-validation.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'ondrop' | 'id'> {
+    /**
+     * The chosen files. Bindable.
+     * @defaultValue `[]`
+     */
+    files?: File[] | undefined;
+    /** The native `accept` syntax (`image/*`, `.pdf`, `application/json`); also enforced on drop. */
+    accept?: string | undefined;
+    /** Per-file size cap, in bytes. Omitted, there is no cap. */
+    maxBytes?: number | undefined;
+    /** Cap on the number of files; extra files are rejected with `tooManyMessage`. */
+    maxFiles?: number | undefined;
+    /**
+     * Allow more than one file. Off, a new choice replaces the current file.
+     * @defaultValue `true`
+     */
+    multiple?: boolean | undefined;
+    /** Posts the files under this name through the inner native input. */
+    name?: string | undefined;
+    /** Called after each pick or drop with the files accepted and the ones refused. */
+    onSelect?: ((accepted: readonly File[], rejected: readonly FileRejection[]) => void) | undefined;
+    /**
+     * Show a thumbnail for image files.
+     * @defaultValue `true`
+     */
+    previews?: boolean | undefined;
+    /**
+     * Text in front of the choose button.
+     * @defaultValue `'Drop files here or'`
+     */
+    promptLabel?: string | undefined;
+    /**
+     * The choose button's text.
+     * @defaultValue `'Choose files'`
+     */
+    chooseLabel?: string | undefined;
+    /**
+     * Accessible name of a file's remove button.
+     * @defaultValue `(file) => \`Remove ${file.name}\``
+     */
+    removeLabel?: ((file: File) => string) | undefined;
+    /**
+     * Shown for a file over `maxBytes`.
+     * @defaultValue `(file) => \`${file.name} is too large.\``
+     */
+    tooLargeMessage?: ((file: File) => string) | undefined;
+    /**
+     * Shown for a file `accept` refuses.
+     * @defaultValue `(file) => \`${file.name} is not an accepted file type.\``
+     */
+    wrongTypeMessage?: ((file: File) => string) | undefined;
+    /**
+     * Shown once when a selection would pass `maxFiles`.
+     * @defaultValue `(max) => \`Choose at most ${max} files.\``
+     */
+    tooManyMessage?: ((max: number) => string) | undefined;
+    /**
+     * Live-region text after a selection or drop.
+     * @defaultValue `(count) => count === 1 ? '1 file selected' : \`${count} files selected\``
+     */
+    selectedMessage?: ((count: number) => string) | undefined;
+    /** BCP 47 locale(s) for the file sizes; falls back to the context's `locale()`. */
+    locales?: string | readonly string[] | undefined;
+    /** Replaces a file row's body, e.g. to add upload progress the caller tracks. */
+    file?: Snippet<[File, {
+        remove: () => void;
+    }]> | undefined;
+    /**
+     * Disables the button, the drop target and the remove buttons.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the choose button's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the choose button is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for the button's `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — draws the error border (the message reaches the button through `describedBy`).
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: at least one file is required (on the native input).
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+}
+/** Choose one or many files by dropping them on a target or through a "Choose files" button, with a removable file list and explained rejections; never uploads. */
+declare const Dropzone: import("svelte").Component<Props, {}, "files">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

package/dist/fields/Fieldset.svelte

@@ -13,6 +13,10 @@ The `FormField` frame — legend, hint, errors — for a group of controls rathe
   the implicit `group` role does not support it, so the invalid state is a
   `data-invalid` hook for styling and the error region is what announces it.
 
+  The `children` snippet receives a `FieldsetControl`, the `<legend>`'s id as
+  `labelId`, for a role-based control inside the group to point
+  `aria-labelledby` at.
+
   `CheckboxGroup` is built on this. `RadioGroup` is not — bits-ui's radio
   group renders its own `role="radiogroup"` element, and a role inside a
   `<fieldset>` would be named by nothing, so it names itself from a heading it
@@ -21,6 +25,7 @@ The `FormField` frame — legend, hint, errors — for a group of controls rathe
 <script lang="ts">import FieldErrors from "./FieldErrors.svelte";
 let { legend, hint, errors = [], required = false, requiredLabel = "(required)", children, class: className, ...rest } = $props();
 const uid = $props.id();
+const labelId = `${uid}-legend`;
 const hintId = `${uid}-hint`;
 const errorId = `${uid}-error`;
 const invalid = $derived(errors.length > 0);
@@ -33,14 +38,14 @@ const describedBy = $derived([hint === undefined ? "" : hintId, invalid ? errorI
   data-invalid={invalid ? '' : undefined}
   class={['fieldset', className]}
 >
-  <legend class="fieldset-legend">
+  <legend class="fieldset-legend" id={labelId}>
     {legend}
     {#if required}
       <span class="text-error" aria-hidden="true">*</span>
       <span class="sr-only">{requiredLabel}</span>
     {/if}
   </legend>
-  {@render children()}
+  {@render children({ labelId })}
   {#if hint !== undefined}
     <p class="fieldset-label" id={hintId}>{hint}</p>
   {/if}

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldsetControl } from './field-types.ts';
 interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'children'> {
     /** The group's `<legend>`; names every control inside it. */
     legend: string;
@@ -17,8 +18,8 @@ interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'children'> {
      * @defaultValue `'(required)'`
      */
     requiredLabel?: string | undefined;
-    /** The grouped controls. */
-    children: Snippet<[]>;
+    /** The grouped controls; receives the legend's id as `labelId`. */
+    children: Snippet<[FieldsetControl]>;
 }
 /** The `FormField` frame — legend, hint, errors — for a group of controls rather than one. */
 declare const Fieldset: import("svelte").Component<Props, {}, "">;

package/dist/fields/FileInput.svelte

@@ -23,7 +23,8 @@ A native file input in daisyUI `file-input` styling, with the chosen `File` bind
 -->
 <script lang="ts">import FieldErrors from "./FieldErrors.svelte";
 import { fileInputSize } from "./field-types.js";
-let { file = $bindable(), accept, maxBytes, tooLargeMessage = "That file is too large.", onSelect, size = "md", invalid = false, describedBy = "", class: className, ...rest } = $props();
+import { exceedsSize } from "./file-validation.js";
+let { file = $bindable(), accept, maxBytes, tooLargeMessage = "That file is too large.", onSelect, size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
 const uid = $props.id();
 const tooLargeId = `${uid}-too-large`;
 let tooLarge = $state(false);
@@ -36,7 +37,7 @@ const choose = (control) => {
 		onSelect?.(undefined);
 		return;
 	}
-	if (maxBytes !== undefined && chosen.size > maxBytes) {
+	if (exceedsSize(chosen, maxBytes)) {
 		tooLarge = true;
 		// Clear the control too: leaving the name of a file that was refused
 		// showing in the field is how someone submits and wonders what happened.

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

@@ -26,6 +26,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | '
      * @defaultValue `''`
      */
     describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — this control is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
 }
 /** A native file input in daisyUI `file-input` styling, with the chosen `File` bindable and a client-side size cap. */
 declare const FileInput: import("svelte").Component<Props, {}, "file">;

package/dist/fields/FormField.svelte

@@ -4,7 +4,7 @@ The label, hint and errors frame around one control, handing it the `FieldContro
 <!--
   FormField — the label + hint + errors frame around one control.
 
-  The control is a snippet that receives a `FieldControl` (`id`,
+  The control is a snippet that receives a `FieldControl` (`id`, `labelId`,
   `describedBy`, `invalid`, `required`) to spread onto the primitive, so the
   label's `for`, the control's `aria-describedby` and `aria-invalid`, and the
   error region's `role="alert"` all stay wired together from a single `id`.
@@ -12,7 +12,13 @@ The label, hint and errors frame around one control, handing it the `FieldContro
   drop any of the field primitives — or their own `<input>` — into the slot.
 
   ARIA contract: `<label for>` names the control (so clicking the text focuses
-  it); `describedBy` lists the hint's id then the error region's id, in that
+  it). `<label for>` only reaches a labelable element (`input`, `select`,
+  `textarea`, `button`, `meter`, `output`, `progress`), so the label also
+  carries an id — `labelId` — for a role-based control (a slider thumb, a
+  `group` / `radiogroup` root) to point `aria-labelledby` at, and a click on
+  the label is forwarded to such a control: it focuses the control itself if
+  it is focusable, else its first focusable descendant (a roving group's
+  current tab stop). `describedBy` lists the hint's id then the error region's id, in that
   reading order, and is empty when there is neither; `invalid` is true exactly
   when there is at least one error. The required marker is a `*` that is
   `aria-hidden` beside a visually-hidden `requiredLabel`, both inside the
@@ -27,19 +33,37 @@ The label, hint and errors frame around one control, handing it the `FieldContro
 let { id: idProp, label, hint, errors = [], required = false, requiredLabel = "(required)", children, class: className, ...rest } = $props();
 const uid = $props.id();
 const id = $derived(idProp ?? uid);
+const labelId = $derived(`${id}-label`);
 const hintId = $derived(`${id}-hint`);
 const errorId = $derived(`${id}-error`);
 const invalid = $derived(errors.length > 0);
 const control = $derived({
 	id,
+	labelId,
 	describedBy: [hint === undefined ? "" : hintId, invalid ? errorId : ""].filter((part) => part !== "").join(" "),
 	invalid,
 	required
 });
+// The elements a `<label for>` can name; the platform handles those.
+const LABELABLE = "button, input, meter, output, progress, select, textarea";
+// `<label for>` does nothing for a role-based control, so forward the click:
+// focus the control if it is focusable, else its first focusable descendant.
+const forwardClick = () => {
+	const control = document.getElementById(id);
+	if (control === null || control.matches(LABELABLE)) return;
+	const focusable = (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled");
+	const target = focusable(control) ? control : Array.from(control.querySelectorAll("*")).find(focusable);
+	target?.focus();
+};
 </script>
 
 <div {...rest} class={['fieldset', className]}>
-  <label class="label" for={id}>
+  <!-- The click handler restores what `<label for>` does natively — a pointer
+       shortcut to the control — for a control `for` cannot reach. Keyboard
+       users reach the control itself with Tab, as with any label, so there is
+       no key handler to add and the label stays non-interactive. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+  <label class="label" for={id} id={labelId} onclick={forwardClick}>
     <span>{label}</span>
     {#if required}
       <span class="text-error" aria-hidden="true">*</span>

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

@@ -32,6 +32,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | '
     invalid?: boolean | undefined;
     /** `FieldControl`: space-separated ids for `aria-describedby`. */
     describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the file input is
+     * labelable, so `<label for>` names it; passed through to `FileInput`,
+     * which drops it.
+     */
+    labelId?: string | undefined;
 }
 /** A `FileInput` that also measures the chosen image and previews it. */
 declare const ImageInput: import("svelte").Component<Props, {}, "height" | "width" | "file">;

package/dist/fields/MultiSelect.svelte

@@ -0,0 +1,112 @@
+<!-- @component
+Several choices from a known list in a compact trigger that summarises them, on bits-ui's `Select` (`type="multiple"`).
+-->
+<!--
+  MultiSelect — any number of options from a medium-sized known list: the
+  trigger summarises the selection ("Full sun, Well-drained, +1"), a listbox
+  popover holds the options with checkmarks. Built on bits-ui's `Select`
+  with `type="multiple"`, bound to a `string[]`.
+
+  When to use which: `CheckboxGroup` puts every option on screen (right for
+  about seven or fewer); `Select` is the native single-choice `<select>`;
+  `MultiSelect` is for a longer list where several may be chosen. It takes
+  the same `options` shape as `Select`, so the two swap at the call site. It
+  is a separate component rather than a mode on `Select` because `Select`'s
+  point is to be the native control, with no script and the platform picker.
+
+  ARIA contract (APG select-only combobox / listbox): bits-ui gives the
+  trigger `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded` and
+  `aria-controls`; the content `role="listbox"` with `aria-multiselectable`;
+  each option `role="option"` with `aria-selected` (and `aria-disabled`,
+  which bits-ui 2.20 leaves out, added here); typeahead (fed from
+  `options` through bits-ui's `items`), Home / End, and Escape / Tab closing
+  with focus back on the trigger. Selecting an option keeps the listbox open.
+  This file adds the trigger's name (the `FieldControl` id goes on the
+  trigger, so `FormField`'s `<label for>` names it), `aria-describedby`,
+  `aria-invalid`, `aria-required`, the summary text and the `aria-hidden`
+  check icon.
+
+  The summary is plain text, not removable badges: focusable children inside
+  a button-like trigger are an accessibility trap.
+
+  `values` is always kept in `options` order, whatever order the reader
+  clicked in, so the summary is stable. `name` posts one hidden input per
+  value, in option order (and nothing at all while none is selected).
+-->
+<script lang="ts">import { Check } from "@lucide/svelte";
+import { Select } from "bits-ui";
+import { selectSize, toFieldOptions } from "./field-types.js";
+let { options, values = $bindable([]), placeholder = "Select…", name, maxShown = 2, formatOverflow = (hidden) => `+${hidden}`, option, portal = true, disabled = false, size = "md", id, labelId: _labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const triggerId = $derived(id ?? uid);
+const entries = $derived(toFieldOptions(options));
+const items = $derived(entries.map((entry) => ({
+	...entry,
+	disabled: entry.disabled === true
+})));
+const selectedEntries = $derived(entries.filter((entry) => values.includes(entry.value)));
+const selectedLabels = $derived(selectedEntries.map((entry) => entry.label));
+const summary = $derived(selectedLabels.length <= maxShown ? selectedLabels.join(", ") : [...selectedLabels.slice(0, maxShown), formatOverflow(selectedLabels.length - maxShown)].join(", "));
+const triggerText = $derived(selectedLabels.length === 0 ? placeholder : summary);
+const ariaDescribedBy = $derived(describedBy === "" ? undefined : describedBy);
+/** Keep `values` in option order, whatever order they were clicked in. */
+function setValues(next) {
+	values = entries.map((entry) => entry.value).filter((value) => next.includes(value));
+}
+</script>
+
+{#snippet optionBody(entry: FieldOption, selected: boolean)}
+  <Check class={['size-4 shrink-0', !selected && 'invisible']} aria-hidden="true" />
+  {#if option}
+    {@render option(entry, { selected })}
+  {:else}
+    <span>{entry.label}</span>
+  {/if}
+{/snippet}
+
+<div {...rest} class={['w-full', className]}>
+  <Select.Root
+    type="multiple"
+    bind:value={() => values, setValues}
+    {items}
+    {disabled}
+    {required}
+  >
+    <Select.Trigger
+      id={triggerId}
+      aria-describedby={ariaDescribedBy}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-required={required ? 'true' : undefined}
+      class={['select w-full text-start', selectSize[size], invalid && 'select-error']}
+    >
+      <span class={['truncate', selectedLabels.length === 0 && 'text-base-content/60']}>
+        {triggerText}
+      </span>
+    </Select.Trigger>
+    <Select.Portal disabled={!portal}>
+      <Select.Content
+        sideOffset={4}
+        class="menu bg-base-100 rounded-box border-base-300 z-50 max-h-72 w-(--bits-select-anchor-width) min-w-48 overflow-auto border p-2 shadow-lg"
+      >
+        <Select.Viewport>
+          {#each entries as entry (entry.value)}
+            <Select.Item
+              value={entry.value}
+              label={entry.label}
+              disabled={entry.disabled === true}
+              aria-disabled={entry.disabled === true ? 'true' : undefined}
+              class="rounded-field data-highlighted:bg-base-200 data-disabled:opacity-50 flex cursor-pointer items-center gap-2 px-3 py-2"
+            >
+              {#snippet children({ selected })}{@render optionBody(entry, selected)}{/snippet}
+            </Select.Item>
+          {/each}
+        </Select.Viewport>
+      </Select.Content>
+    </Select.Portal>
+  </Select.Root>
+  {#if name !== undefined}
+    {#each selectedEntries as entry (entry.value)}
+      <input type="hidden" {name} value={entry.value} {disabled} />
+    {/each}
+  {/if}
+</div>