@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/feedback/Dialog.svelte

@@ -21,57 +21,27 @@ A modal on bits-ui’s `Dialog`, wearing daisyUI’s `modal-box`.
   `trigger` receives the props to spread, so an existing `Button` keeps its
   own markup and its own accessible name; `actions` receives `close`, so the
   action row's buttons can dismiss without reaching for the bindable `open`.
+
+  The modal itself is `DialogFrame`, shared with `Drawer`: this file only
+  chooses the centred `modal-box`.
 -->
-<script lang="ts">import { X } from "@lucide/svelte";
-import { Dialog } from "bits-ui";
-import Button from "../ui/Button.svelte";
-import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+<script lang="ts">import DialogFrame from "./DialogFrame.svelte";
 import { dialogSize } from "./sizes.js";
 let { open = $bindable(false), title, description, closeLabel = "Close", size = "md", class: className, trigger, actions, children } = $props();
-const close = () => {
-	open = false;
-};
 </script>
 
-<Dialog.Root bind:open>
-  {#if trigger}
-    <Dialog.Trigger>
-      {#snippet child({ props })}
-        {@render trigger({ props })}
-      {/snippet}
-    </Dialog.Trigger>
-  {/if}
-  <Dialog.Portal>
-    <!-- daisyUI's `modal-backdrop` is a child of an open `.modal`; this is
-         the same scrim as an element bits-ui can animate and dismiss from. -->
-    <Dialog.Overlay class="bg-base-300/60 fixed inset-0 z-40" />
-    <Dialog.Content
-      class={[
-        'modal-box fixed top-1/2 left-1/2 z-50 max-h-[calc(100svh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2',
-        dialogSize[size],
-        className,
-      ]}
-    >
-      <div class="flex items-start justify-between gap-4">
-        <Dialog.Title class="text-lg font-semibold">{title}</Dialog.Title>
-        <Dialog.Close>
-          {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="sm" class="btn-square -mt-1 -mr-1">
-              <X class="size-4" aria-hidden="true" />
-              <VisuallyHidden>{closeLabel}</VisuallyHidden>
-            </Button>
-          {/snippet}
-        </Dialog.Close>
-      </div>
-      {#if description !== undefined}
-        <Dialog.Description class="text-base-content/70 mt-1 text-sm leading-6">
-          {description}
-        </Dialog.Description>
-      {/if}
-      <div class="py-4">{@render children()}</div>
-      {#if actions}
-        <div class="modal-action">{@render actions({ close })}</div>
-      {/if}
-    </Dialog.Content>
-  </Dialog.Portal>
-</Dialog.Root>
+<DialogFrame
+  bind:open
+  {title}
+  {description}
+  {closeLabel}
+  {trigger}
+  {actions}
+  {children}
+  layout="modal"
+  contentClass={[
+    'modal-box fixed top-1/2 left-1/2 z-50 max-h-[calc(100svh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2',
+    dialogSize[size],
+    className,
+  ]}
+/>

package/dist/feedback/Dialog.svelte.d.ts

@@ -1,4 +1,3 @@
-import { Dialog } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import { type DialogSize } from './sizes.ts';
 interface Props {

package/dist/feedback/DialogFrame.svelte

@@ -0,0 +1,64 @@
+<!-- @component
+The modal body `Dialog` and `Drawer` share; internal, not exported.
+-->
+<!--
+  DialogFrame — one implementation of everything that makes a modal a
+  modal, on bits-ui's `Dialog`: the trigger, overlay, focus trap and
+  return, Escape, scroll lock, the title and description wiring, the
+  labelled close button and the `actions({ close })` row. `Dialog` (a
+  centred `modal-box`) and `Drawer` (a panel at an edge) differ only in
+  `layout` and the content classes they pass, so the two cannot drift on
+  focus, dismissal or labelling.
+
+  `hideTitle` keeps the title as the accessible name but hides it
+  visually: a mobile navigation drawer needs a name, not a heading.
+-->
+<script lang="ts">import { X } from "@lucide/svelte";
+import { Dialog } from "bits-ui";
+import Button from "../ui/Button.svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { open = $bindable(false), title, description, closeLabel, hideTitle = false, layout, contentClass, trigger, actions, children } = $props();
+const close = () => {
+	open = false;
+};
+const sheet = $derived(layout === "sheet");
+</script>
+
+<Dialog.Root bind:open>
+  {#if trigger}
+    <Dialog.Trigger>
+      {#snippet child({ props })}
+        {@render trigger({ props })}
+      {/snippet}
+    </Dialog.Trigger>
+  {/if}
+  <Dialog.Portal>
+    <!-- daisyUI's `modal-backdrop` is a child of an open `.modal`; this is
+         the same scrim as an element bits-ui can animate and dismiss from. -->
+    <Dialog.Overlay class="bg-base-300/60 fixed inset-0 z-40" />
+    <Dialog.Content class={contentClass}>
+      <div class={['flex items-start justify-between gap-4', sheet && 'px-4 pt-4']}>
+        <Dialog.Title class={hideTitle ? 'sr-only' : 'text-lg font-semibold'}>{title}</Dialog.Title>
+        <Dialog.Close>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="sm" class="btn-square -mt-1 -mr-1 ms-auto">
+              <X class="size-4" aria-hidden="true" />
+              <VisuallyHidden>{closeLabel}</VisuallyHidden>
+            </Button>
+          {/snippet}
+        </Dialog.Close>
+      </div>
+      {#if description !== undefined}
+        <Dialog.Description class={['text-base-content/70 mt-1 text-sm leading-6', sheet && 'px-4']}>
+          {description}
+        </Dialog.Description>
+      {/if}
+      <div class={sheet ? 'min-h-0 flex-1 overflow-y-auto p-4' : 'py-4'}>{@render children()}</div>
+      {#if actions}
+        <div class={sheet ? 'border-base-300 flex justify-end gap-2 border-t p-4' : 'modal-action'}>
+          {@render actions({ close })}
+        </div>
+      {/if}
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/dist/feedback/DialogFrame.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    open?: boolean | undefined;
+    title: string;
+    description?: string | undefined;
+    closeLabel: string;
+    hideTitle?: boolean | undefined;
+    /** `modal`: daisyUI `modal-box` flow. `sheet`: a column with a scrolling body and a pinned footer. */
+    layout: 'modal' | 'sheet';
+    contentClass: ClassValue;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    actions?: Snippet<[{
+        close: () => void;
+    }]> | undefined;
+    children: Snippet<[]>;
+}
+/** The modal body `Dialog` and `Drawer` share; internal, not exported. */
+declare const DialogFrame: import("svelte").Component<Props, {}, "open">;
+type DialogFrame = ReturnType<typeof DialogFrame>;
+export default DialogFrame;

package/dist/feedback/Drawer.svelte

@@ -0,0 +1,43 @@
+<!-- @component
+A modal panel that slides in from an edge: a filters sheet, a mobile action sheet, mobile navigation.
+-->
+<!--
+  Drawer — `Dialog`'s contract at an edge of the screen. It shares
+  `DialogFrame` with `Dialog`, so the focus trap and return, Escape and
+  overlay dismissal, scroll lock, `aria-modal`, the title as the accessible
+  name and the labelled close button are one implementation.
+
+  Not daisyUI's `drawer`: that is driven by a hidden checkbox and a
+  `<label>` overlay, which gives no focus trap, no focus move or return, no
+  Escape, no `aria-modal` and no name, and leaves the page behind it in the
+  Tab order. Only daisyUI's look is borrowed here.
+
+  The panel is a column: the title row, a body that scrolls on its own, and
+  an `actions({ close })` footer that stays put. `start` / `end` follow
+  the writing direction, so a `start` drawer opens from the right in RTL.
+  It does not animate, so there is no motion to reduce; swipe-to-dismiss is
+  out of v1.
+-->
+<script lang="ts">import DialogFrame from "./DialogFrame.svelte";
+import { drawerHeight, drawerSide, drawerWidth } from "./sizes.js";
+let { open = $bindable(false), title, description, side = "end", size = "md", closeLabel = "Close", hideTitle = false, class: className, trigger, actions, children } = $props();
+const horizontal = $derived(side === "start" || side === "end");
+</script>
+
+<DialogFrame
+  bind:open
+  {title}
+  {description}
+  {closeLabel}
+  {hideTitle}
+  {trigger}
+  {actions}
+  {children}
+  layout="sheet"
+  contentClass={[
+    'bg-base-100 fixed z-50 flex flex-col shadow-xl outline-none',
+    drawerSide[side],
+    horizontal ? drawerWidth[size] : drawerHeight[size],
+    className,
+  ]}
+/>

package/dist/feedback/Drawer.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import { type DrawerSide, type DrawerSize } from './sizes.ts';
+interface Props {
+    /** Whether the drawer is shown. Bindable. */
+    open?: boolean | undefined;
+    /** Heading — the panel's accessible name. */
+    title: string;
+    /** Supporting line under the heading — the accessible description. */
+    description?: string | undefined;
+    /**
+     * The edge the panel enters from.
+     * @defaultValue `'end'`
+     */
+    side?: DrawerSide | undefined;
+    /**
+     * Width at `start` / `end`, height at `top` / `bottom`.
+     * @defaultValue `'md'`
+     */
+    size?: DrawerSize | undefined;
+    /**
+     * Accessible name of the corner close button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /** Hide the title visually; it stays the accessible name (mobile navigation). */
+    hideTitle?: boolean | undefined;
+    /** Extra classes on the panel. */
+    class?: string | undefined;
+    /** The opening control — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** A footer row that stays in view; receives `close`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]> | undefined;
+    /** The panel body; it scrolls when long. */
+    children: Snippet<[]>;
+}
+/** A modal panel that slides in from an edge: a filters sheet, a mobile action sheet, mobile navigation. */
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/feedback/SegmentBar.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../ui/tones.ts';
 import { type BarSize } from './sizes.ts';
+/** One part of a `SegmentBar`: its label, its share of the bar, and its colour. */
 export interface BarSegment {
     /** Read out for this segment in the bar's accessible label. */
     readonly label: string;

package/dist/feedback/StatTile.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+/** The change line a `StatTile` shows under its value: a signed amount, how to render it, and trailing words. */
 export interface StatDelta {
     /**
      * The change. Positive is up. With `unit: 'percent'` it is read as a

package/dist/feedback/Steps.svelte

@@ -0,0 +1,72 @@
+<!-- @component
+The stages of a multi-step flow as daisyUI `steps`, with the current one marked.
+-->
+<!--
+  Steps — a short, fixed sequence (a sign-up wizard, an order's fulfilment,
+  "Plan → Sow → Transplant → Harvest") where position and state are the
+  content. Unlike `Timeline`, which is dated, open-ended history.
+
+  Each step's state comes from its own `state`, or, when that is omitted,
+  from the list's `current` index: before it is complete, at it is current,
+  after it is upcoming. An explicit `state` always wins, so an `error` step
+  can sit in a `current`-driven wizard.
+
+  ARIA contract: an `<ol>` named by `label`, because order is the content.
+  Colour carries nothing on its own (WCAG 1.4.1): each step reads its label
+  followed by a visually hidden state ("Sow, Completed"). The marker, the
+  step number or a ✓ / ✕ glyph, is always a real `step-icon` span with
+  `aria-hidden`. Rendering one suppresses daisyUI's `::after` number, and
+  CSS generated content would otherwise join the accessible name. The
+  current step carries `aria-current="step"`: on its link in link mode, on
+  the `<li>` otherwise. Only steps with an `href` are links; whether an
+  upcoming step is navigable is the caller's call, not this component's.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { stepTone } from "../ui/tones.js";
+import { stepsOrientation } from "./sizes.js";
+let { items, label, current, orientation = "horizontal", tone = "primary", completeLabel = "Completed", currentLabel = "Current step", upcomingLabel = "Not started", errorLabel = "Error", marker, class: className, ...rest } = $props();
+const context = getComponentsContext();
+function stateOf(step, index) {
+	if (step.state !== undefined) return step.state;
+	if (current === undefined || index > current) return "upcoming";
+	return index < current ? "complete" : "current";
+}
+const stateLabels = $derived({
+	complete: completeLabel,
+	current: currentLabel,
+	upcoming: upcomingLabel,
+	error: errorLabel
+});
+const stateClasses = $derived({
+	complete: stepTone[tone],
+	current: stepTone[tone],
+	upcoming: "",
+	error: stepTone.error
+});
+const glyphs = {
+	complete: "✓",
+	error: "✕"
+};
+</script>
+
+<ol {...rest} aria-label={label} class={['steps', stepsOrientation[orientation], className]}>
+  {#each items as step, index (step.id)}
+    {@const state = stateOf(step, index)}
+    {@const ariaCurrent = state === 'current' ? 'step' : undefined}
+    <li
+      class={['step', stateClasses[state]]}
+      aria-current={step.href === undefined ? ariaCurrent : undefined}
+    >
+      <span class="step-icon" aria-hidden="true">
+        {#if marker}{@render marker(step, index)}{:else}{glyphs[state] ?? index + 1}{/if}
+      </span>
+      {#if step.href !== undefined}
+        <a href={context.href(step.href)} class="link link-hover" aria-current={ariaCurrent}>
+          {step.label}<span class="sr-only">, {stateLabels[state]}</span>
+        </a>
+      {:else}
+        <span>{step.label}<span class="sr-only">, {stateLabels[state]}</span></span>
+      {/if}
+    </li>
+  {/each}
+</ol>

package/dist/feedback/Steps.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+import type { HTMLOlAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+import { type StepsOrientation } from './sizes.ts';
+/** Where a step stands in the flow. */
+export type StepState = 'complete' | 'current' | 'upcoming' | 'error';
+/** One stage of a `Steps` list. */
+export interface StepItem {
+    /** Stable key for the step. */
+    readonly id: string;
+    /** The step's name, read first. */
+    readonly label: string;
+    /** Overrides the state derived from the list's `current` index. */
+    readonly state?: StepState | undefined;
+    /** Makes the step a link (to revisit it), resolved through the components context's `href`. */
+    readonly href?: string | undefined;
+}
+interface Props extends Omit<HTMLOlAttributes, 'children'> {
+    /** The steps, in order. */
+    items: readonly StepItem[];
+    /** Accessible name of the list, e.g. `'Checkout progress'`. */
+    label: string;
+    /**
+     * Index of the current step. Steps before it are complete and steps after
+     * it upcoming, unless a step sets its own `state`.
+     */
+    current?: number | undefined;
+    /** @defaultValue `'horizontal'` */
+    orientation?: StepsOrientation | undefined;
+    /**
+     * Tone of the complete and current steps.
+     * @defaultValue `'primary'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * Read after a complete step's label.
+     * @defaultValue `'Completed'`
+     */
+    completeLabel?: string | undefined;
+    /**
+     * Read after the current step's label.
+     * @defaultValue `'Current step'`
+     */
+    currentLabel?: string | undefined;
+    /**
+     * Read after an upcoming step's label.
+     * @defaultValue `'Not started'`
+     */
+    upcomingLabel?: string | undefined;
+    /**
+     * Read after a failed step's label.
+     * @defaultValue `'Error'`
+     */
+    errorLabel?: string | undefined;
+    /** Custom marker content per step (an icon), rendered in the `aria-hidden` `step-icon`. */
+    marker?: Snippet<[StepItem, number]> | undefined;
+}
+/** The stages of a multi-step flow as daisyUI `steps`, with the current one marked. */
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/feedback/Timeline.svelte.d.ts

@@ -1,12 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLOlAttributes } from 'svelte/elements';
+/** One end of a `Timeline` entry's span: display text plus an optional machine-readable `datetime`. */
 export interface TimelineDate {
     /** Display text, e.g. `March 1996`. */
     readonly label: string;
     /** Machine-readable `<time datetime>` value, e.g. `1996-03-02`. */
     readonly dateTime?: string | undefined;
 }
+/** One dated entry of a `Timeline`: a label, a start, an optional end and link, and an optional theme colour. */
 export interface TimelineEntry {
+    /** Stable key for the entry. */
     readonly id: string;
     /** The entry itself — the line in the box. */
     readonly label: string;

package/dist/feedback/index.d.ts

@@ -16,16 +16,19 @@
  */
 export { default as ConfirmDialog } from './ConfirmDialog.svelte';
 export { default as Dialog } from './Dialog.svelte';
+export { default as Drawer } from './Drawer.svelte';
 export { default as LoadingBoundary } from './LoadingBoundary.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
 export { default as SegmentBar } from './SegmentBar.svelte';
 export { default as StatTile } from './StatTile.svelte';
 export { default as Stats } from './Stats.svelte';
+export { default as Steps } from './Steps.svelte';
 export { default as Timeline } from './Timeline.svelte';
 export { default as Toaster } from './Toaster.svelte';
 export type { ConfirmForm } from './ConfirmDialog.svelte';
 export type { BarSegment } from './SegmentBar.svelte';
 export type { StatDelta } from './StatTile.svelte';
+export type { StepItem, StepState } from './Steps.svelte';
 export type { TimelineDate, TimelineEntry } from './Timeline.svelte';
 export * from './sizes.ts';
 export * from './toaster.ts';

package/dist/feedback/index.js

@@ -16,11 +16,13 @@
  */
 export { default as ConfirmDialog } from './ConfirmDialog.svelte';
 export { default as Dialog } from './Dialog.svelte';
+export { default as Drawer } from './Drawer.svelte';
 export { default as LoadingBoundary } from './LoadingBoundary.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
 export { default as SegmentBar } from './SegmentBar.svelte';
 export { default as StatTile } from './StatTile.svelte';
 export { default as Stats } from './Stats.svelte';
+export { default as Steps } from './Steps.svelte';
 export { default as Timeline } from './Timeline.svelte';
 export { default as Toaster } from './Toaster.svelte';
 export * from "./sizes.js";

package/dist/feedback/sizes.d.ts

@@ -25,3 +25,17 @@ export declare const barSize: Record<BarSize, string>;
 export type StatsOrientation = 'horizontal' | 'vertical' | 'responsive';
 /** Literal daisyUI class per `StatsOrientation` for `Stats`; a lookup table so Tailwind's scanner sees every class. */
 export declare const statsOrientation: Record<StatsOrientation, string>;
+/** How a `Steps` list lays its steps out. */
+export type StepsOrientation = 'horizontal' | 'vertical' | 'responsive';
+/** Literal daisyUI class per `StepsOrientation` for `Steps`; a lookup table so Tailwind's scanner sees every class. */
+export declare const stepsOrientation: Record<StepsOrientation, string>;
+/** The edge a `Drawer` enters from; `start` / `end` follow the writing direction. */
+export type DrawerSide = 'start' | 'end' | 'top' | 'bottom';
+/** Literal placement classes per `DrawerSide`; a lookup table so Tailwind's scanner sees every class. */
+export declare const drawerSide: Record<DrawerSide, string>;
+/** Size steps of a `Drawer`: its width at `start` / `end`, its height at `top` / `bottom`. */
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/** Literal width class per `DrawerSize` for a `start` / `end` drawer. */
+export declare const drawerWidth: Record<DrawerSize, string>;
+/** Literal height class per `DrawerSize` for a `top` / `bottom` drawer. */
+export declare const drawerHeight: Record<DrawerSize, string>;

package/dist/feedback/sizes.js

@@ -39,3 +39,31 @@ export const statsOrientation = {
     // dashboard reached for by hand.
     responsive: 'stats-vertical sm:stats-horizontal',
 };
+/** Literal daisyUI class per `StepsOrientation` for `Steps`; a lookup table so Tailwind's scanner sees every class. */
+export const stepsOrientation = {
+    horizontal: 'steps-horizontal',
+    vertical: 'steps-vertical',
+    // A column on a phone, a row from `sm` up, as `statsOrientation` does.
+    responsive: 'steps-vertical sm:steps-horizontal',
+};
+/** Literal placement classes per `DrawerSide`; a lookup table so Tailwind's scanner sees every class. */
+export const drawerSide = {
+    start: 'inset-y-0 start-0 h-full max-w-[calc(100vw-2rem)]',
+    end: 'inset-y-0 end-0 h-full max-w-[calc(100vw-2rem)]',
+    top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-box',
+    bottom: 'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-box',
+};
+/** Literal width class per `DrawerSize` for a `start` / `end` drawer. */
+export const drawerWidth = {
+    sm: 'w-72',
+    md: 'w-96',
+    lg: 'w-[32rem]',
+    full: 'w-screen max-w-none',
+};
+/** Literal height class per `DrawerSize` for a `top` / `bottom` drawer. */
+export const drawerHeight = {
+    sm: 'h-[33dvh]',
+    md: 'h-[50dvh]',
+    lg: 'h-[75dvh]',
+    full: 'h-dvh max-h-none rounded-none',
+};

package/dist/fields/Calendar.svelte

@@ -0,0 +1,60 @@
+<!-- @component
+An inline, always-visible month grid for picking a date, on bits-ui's `Calendar`.
+-->
+<!--
+  Calendar — a month (or several side by side) to choose one date from,
+  inline rather than in a popover: a booking sidebar, a "sown on" planner, an
+  availability view. The popover pickers compose it. `DateInput` (the native
+  control) stays the default for a single date on a form; this is for when
+  the reader benefits from seeing the month.
+
+  The value is a `DateValue` from `@internationalized/date`, bits-ui's own
+  type: lossless, and it carries its calendar system. Convert at the edge with
+  `parseDate('2026-10-23')` and `value.toString()`, both re-exported from the
+  `./dates` entry.
+
+  ARIA contract (APG date-picker grid), from bits-ui: a `role="application"`
+  wrapper named by `calendarLabel` and the visible month, one `role="grid"`
+  per month, `gridcell`s with `aria-selected` / `aria-disabled`, a roving
+  tabindex, and the keys — arrows by day and week, Home / End to the week's
+  ends, Page Up / Page Down by month, Enter / Space to select. This file
+  adds the labelled previous / next buttons (`previousLabel` / `nextLabel`),
+  each grid's name ("October 2026"), a struck-through
+  unavailable day, and the `FieldControl` wiring: inside a `FormField` the
+  root is `aria-labelledby` the label (`labelId`) and `aria-describedby` the
+  hint and errors. `invalid` draws the error border; the `application` role
+  does not take `aria-invalid`, so the error text reaches it through
+  `describedBy`.
+-->
+<script lang="ts">import { Calendar } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import CalendarMonths from "./CalendarMonths.svelte";
+import { calendarRoot } from "./calendar-props.js";
+let { value = $bindable(), month = $bindable(), ...props } = $props();
+const context = getComponentsContext();
+const shared = $derived(calendarRoot(props, context.locale()));
+</script>
+
+<Calendar.Root
+  {...shared.root}
+  type="single"
+  bind:placeholder={
+    // Unset, bits-ui picks the value's month or today's.
+    () => month as DateValue,
+    (next: DateValue) => {
+      month = next;
+    }
+  }
+  bind:value={
+    // bits-ui declares `value?: DateValue` (no `| undefined`) but reads an
+    // unset value as `undefined` at runtime; the binding passes it through.
+    () => value as DateValue,
+    (next: DateValue | undefined) => {
+      value = next;
+    }
+  }
+>
+  {#snippet children({ months, weekdays })}
+    <CalendarMonths parts={Calendar} {...shared.months} {months} {weekdays} />
+  {/snippet}
+</Calendar.Root>

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

@@ -0,0 +1,11 @@
+import type { DateValue } from '@internationalized/date';
+import { Calendar } from 'bits-ui';
+import { type CalendarBaseProps } from './calendar-props.ts';
+interface Props extends CalendarBaseProps {
+    /** The selected date; `undefined` when none. Bindable. */
+    value?: DateValue | undefined;
+}
+/** An inline, always-visible month grid for picking a date, on bits-ui's `Calendar`. */
+declare const Calendar: import("svelte").Component<Props, {}, "value" | "month">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;