@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/date-range-picker.json

@@ -0,0 +1,901 @@
+{
+  "family": "date-range-picker",
+  "ui": "date-range-picker",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Start and end dates with a calendar popover."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "placement": [
+      "bottom-start",
+      "bottom",
+      "bottom-end",
+      "top-start",
+      "top",
+      "top-end"
+    ],
+    "closeOnSelect": [
+      "auto",
+      "always",
+      "never"
+    ],
+    "count": [
+      "days",
+      "nights"
+    ],
+    "position": [
+      "start",
+      "end"
+    ],
+    "calendar": [
+      "gregory"
+    ]
+  },
+  "members": {
+    "dateRangePicker": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "placement": "bottom-start",
+        "closeOnSelect": "auto",
+        "count": "days",
+        "months": 2,
+        "contiguous": true,
+        "calendar": "gregory",
+        "clearable": false
+      },
+      "capabilities": [
+        "value",
+        "open",
+        "current",
+        "placement",
+        "appearance",
+        "size",
+        "content",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "invalid",
+        "readonly",
+        "required",
+        "open",
+        "current",
+        "selected"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "start",
+        "separator",
+        "end",
+        "clear",
+        "trigger",
+        "positioner",
+        "content",
+        "head",
+        "head-start",
+        "head-end",
+        "length",
+        "limit",
+        "panels",
+        "presets",
+        "preset",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "dateRangePicker": {
+      "imports": {
+        "source": "import { DateRangePicker, DateRangePickerDefaultsProvider, DateRangePickerPreset } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The outer box, carrying data-ui=\"date-range-picker\", the size, variant and calendar axes, data-count, data-open and the state attributes. className, style and every native attribute reach it."
+        },
+        {
+          "part": "control",
+          "element": "div",
+          "required": true,
+          "purpose": "The frame around both fields, and the box the calendar is positioned against. It draws the one border, focus ring and invalid state; the two date fields inside it use variant=\"plain\" and draw none. Inside a field, it is a group named by the field’s label and takes the field’s control identifier."
+        },
+        {
+          "part": "start",
+          "element": "div",
+          "required": true,
+          "purpose": "Holds the start date field. Carries data-current while the start is the end being edited, drawn as an underline while the calendar is open or focus is inside the frame."
+        },
+        {
+          "part": "separator",
+          "element": "span",
+          "required": true,
+          "purpose": "The dash between the two fields. It is aria-hidden, because each field has its own name."
+        },
+        {
+          "part": "end",
+          "element": "div",
+          "required": true,
+          "purpose": "Holds the end date field, and carries data-current while the end is being edited."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Empties both ends with the clear reason, drawn with clearable while either end holds a date. It is the only clear button in the frame: the two fields draw none of their own."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "The calendar button. Its accessible name carries both dates in words and the length, because focus returns to it when the calendar closes. It is always drawn, because ChromeOS turns Alt+ArrowDown into PageDown before the browser receives it."
+        },
+        {
+          "part": "positioner",
+          "element": "div, portalled to the end of the document",
+          "required": false,
+          "purpose": "The layer the calendar stands on, drawn while the calendar is open. It carries data-ui=\"date-range-picker\" again, the position the positioner writes, and data-presentation: popover, or sheet on a touch screen narrower than 480 pixels."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"dialog\"",
+          "required": false,
+          "purpose": "The painted surface, with the same accessible name as the trigger. Its width is capped by the room available, so two months that do not fit side by side wrap."
+        },
+        {
+          "part": "head",
+          "element": "div",
+          "required": false,
+          "purpose": "The band above the calendar: both dates as they stand, the length and the limit. It takes the width of the surface and does not widen it."
+        },
+        {
+          "part": "head-start",
+          "element": "span",
+          "required": false,
+          "purpose": "The start date, written short. It carries data-placeholder while there is no start, and data-pending while it shows the start the next press would make instead of a chosen one."
+        },
+        {
+          "part": "head-end",
+          "element": "span",
+          "required": false,
+          "purpose": "The end date, written short, with the same two attributes as head-start."
+        },
+        {
+          "part": "length",
+          "element": "span",
+          "required": false,
+          "purpose": "The length, such as \"4 nights\": of the range the next press would make while the end is pending, else of the value. It is a polite live region, so a screen reader announces it as the focused day moves. It carries data-pending while it describes a pending range."
+        },
+        {
+          "part": "limit",
+          "element": "span",
+          "required": false,
+          "purpose": "The length rule, such as \"2 to 7 nights\", drawn while minLength or maxLength is set, so the band names the rule the calendar enforces."
+        },
+        {
+          "part": "panels",
+          "element": "div",
+          "required": false,
+          "purpose": "The shortcuts and the calendar as a wrapping row: side by side where there is room, the calendar under the shortcuts where there is not."
+        },
+        {
+          "part": "presets",
+          "element": "div",
+          "required": false,
+          "purpose": "A column for your own shortcuts, drawn when presets is set. The Date Range Picker ships the shortcut button and its column, never the list: the ranges belong to your product."
+        },
+        {
+          "part": "preset",
+          "element": "button, or the element render returns",
+          "required": false,
+          "purpose": "One shortcut, DateRangePickerPreset. It writes its range with the select reason and carries data-selected while the value equals its range."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "A row under the calendar for your own actions, drawn when footer is set."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "DateRange | null",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The range, { start, end }, where each end is a PlainDate or null. A range with both ends null is null. Setting it makes the value controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "DateRange | null",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The starting value of an uncontrolled date range picker. Read once, on the first render."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Whether the calendar is showing. Setting it makes the open state controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateRangePicker",
+          "description": "Whether the calendar shows on the first render. Focus does not move into it."
+        },
+        {
+          "name": "position",
+          "type": "'start' | 'end'",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The end being edited: the field that carries data-current, the day the calendar opens on, and the end the next press in the calendar writes. Setting it makes the position controlled."
+        },
+        {
+          "name": "defaultPosition",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "DateRangePicker",
+          "description": "The end being edited on the first render."
+        },
+        {
+          "name": "min",
+          "type": "PlainDate",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The earliest date both fields and the calendar accept. Earlier days are disabled in the calendar, and an earlier typed date marks the date range picker invalid. Once both ends are set, the start field also stops at the end and the end field at the start."
+        },
+        {
+          "name": "max",
+          "type": "PlainDate",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The latest date both fields and the calendar accept. Later days are disabled in the calendar, and a later typed date marks the date range picker invalid."
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "(date: PlainDate) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Returns true for a date the reader cannot choose. The calendar disables it, and a typed range that contains it marks the date range picker invalid."
+        },
+        {
+          "name": "contiguous",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "DateRangePicker",
+          "description": "Whether a range must run without unavailable days. On, once a start is chosen the calendar also disables every day beyond the first unavailable one, searching up to maxLength days, or 366, on each side. Off, only the two ends are checked."
+        },
+        {
+          "name": "minLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The shortest range allowed, in the unit count names. Once a start is chosen, the calendar disables the days that would make a shorter range, and the band names the limit."
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "The longest range allowed, in the unit count names. A typed range outside either limit marks the date range picker invalid."
+        },
+        {
+          "name": "count",
+          "type": "'days' | 'nights'",
+          "defaultValue": "days",
+          "appliesTo": "DateRangePicker",
+          "description": "What the length counts. days counts both ends; nights counts the nights between them. The same day at both ends is 1 day or 0 nights."
+        },
+        {
+          "name": "months",
+          "type": "number",
+          "defaultValue": "2",
+          "appliesTo": "DateRangePicker",
+          "description": "How many months the calendar draws side by side. When they do not fit, they wrap."
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateRangePicker",
+          "description": "Adds a column of ISO 8601 week numbers to the calendar."
+        },
+        {
+          "name": "fixedWeeks",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "DateRangePicker",
+          "description": "Draws six rows for every month, so the surface keeps its height as the reader pages between months."
+        },
+        {
+          "name": "placement",
+          "type": "'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'",
+          "defaultValue": "bottom-start",
+          "appliesTo": "DateRangePicker",
+          "description": "Where the calendar opens relative to the frame. When it does not fit on that side, it opens on the other."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "'auto' | 'always' | 'never'",
+          "defaultValue": "auto",
+          "appliesTo": "DateRangePicker",
+          "description": "When choosing closes the calendar. auto closes it when the range is complete, by a second press or a shortcut, and keeps it open after the first press; always closes it on every press that changes the value; never keeps it open."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the SlottedProvider locale, else en-US",
+          "appliesTo": "DateRangePicker",
+          "description": "A BCP 47 tag. Sets the order, separators and placeholders of both fields, the month and weekday names, the short dates in the band and the dates the trigger announces."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "the browser’s time zone",
+          "appliesTo": "DateRangePicker",
+          "description": "The IANA time zone that decides which day is today. The value itself has no time zone."
+        },
+        {
+          "name": "firstDayOfWeek",
+          "type": "number",
+          "defaultValue": "the locale’s",
+          "appliesTo": "DateRangePicker",
+          "description": "The day the calendar starts each week on, from 0 for Sunday to 6 for Saturday."
+        },
+        {
+          "name": "yearPivot",
+          "type": "number",
+          "defaultValue": "20",
+          "appliesTo": "DateRangePicker",
+          "description": "How a two-digit year typed into either field resolves: with 20, 30 reads as 2030 and 80 as 1980."
+        },
+        {
+          "name": "calendar",
+          "type": "'gregory'",
+          "defaultValue": "gregory",
+          "appliesTo": "DateRangePicker",
+          "description": "The calendar system. Gregorian is the only one today."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "DateRangePicker",
+          "description": "One step of the control scale, for the frame, both fields and the trigger. Inside a field, an unset size follows the field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "DateRangePicker",
+          "description": "How much frame the control draws at rest."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateRangePicker",
+          "description": "Disables both fields, the clear button and the trigger, and takes them out of the tab order."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateRangePicker",
+          "description": "Keeps both dates legible and focusable, and disables the clear button and the trigger."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateRangePicker",
+          "description": "Marks the date range picker invalid. An end before its start, a date outside min and max, an unavailable date in the range or a length outside the limits marks it invalid whatever this says."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateRangePicker",
+          "description": "Sets aria-required on both fields."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateRangePicker",
+          "description": "Adds one clear button to the frame, which empties both ends."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DateRangePickerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Replaces words of the active language, key by key: choose and change for the trigger’s name before and after a range is set (change takes {start}, {end} and {length}), clear, start and end for the two fields’ names and the band’s placeholders, and the counting phrases days.length and nights.length with between, atLeast and atMost for the limits."
+        },
+        {
+          "name": "startName",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Adds a hidden input with this name that submits the start as an ISO 8601 string, such as 2026-09-30."
+        },
+        {
+          "name": "endName",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Adds a hidden input with this name that submits the end as an ISO 8601 string."
+        },
+        {
+          "name": "presets",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Your own shortcuts, as DateRangePickerPreset elements, in a column beside the calendar."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Your own actions, in a row under the calendar."
+        },
+        {
+          "name": "value",
+          "type": "DateRange | (() => DateRange)",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePickerPreset",
+          "description": "The range the shortcut writes, or a function that returns it when the shortcut is pressed, so a relative range such as \"next weekend\" is computed at the press."
+        }
+      ],
+      "composition": [
+        {
+          "name": "DateRangePickerDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, calendar, months, count, closeOnSelect, placement, size and variant for every DateRangePicker under it. A prop on one DateRangePicker wins, and inside a field the field’s size wins."
+        },
+        {
+          "name": "DateRangePickerPreset",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "presets",
+          "description": "One shortcut inside presets. It takes every button prop, runs your onClick first, and takes render to substitute its element."
+        },
+        {
+          "name": "render",
+          "type": "(props: DateRangePickerRootProps) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Renders the root as another element. Spread the props onto it: they carry the ref the date range picker needs."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<DateRangePickerHandle>",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "A handle with focus(position?), which focuses the first segment of one end (the current one by default), and open() and close(), which show and hide the calendar without a controlled open prop. open() moves focus into the calendar."
+        },
+        {
+          "name": "onKeyDown",
+          "type": "KeyboardEventHandler",
+          "defaultValue": "—",
+          "appliesTo": "DateRangePicker",
+          "description": "Runs before Alt+ArrowDown is read. Calling event.preventDefault() keeps the shortcut for the page."
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: DateRange | null, request: ChangeRequest<DateRange | null>)",
+          "when": "Before the value changes. request.reason is keyboard or blur for a typed end, select for a range completed in the calendar or written by a shortcut, and clear for the clear button. The first press in the calendar does not call it: the range is not complete yet. request.cancel() keeps the current value."
+        },
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the calendar opens or closes. request.reason is pointer for the trigger, keyboard for Alt+ArrowDown and for the handle’s open() and close(), escape for the Escape key, outsidePress for a press outside the surface and select for a completed range. request.cancel() keeps the current state."
+        },
+        {
+          "name": "onPositionChange",
+          "payload": "(position: 'start' | 'end', request: ChangeRequest<'start' | 'end'>)",
+          "when": "Before the end being edited changes. request.reason is pointer or keyboard when focus enters a field, select after a press in the calendar or a shortcut, and clear for the clear button."
+        }
+      ],
+      "accessibility": [
+        "The trigger’s accessible name carries both dates in words and the length, such as “Change range, Saturday, September 12, 2026 – Wednesday, September 16, 2026, 4 nights”. Focus returns to the trigger when the calendar closes, so a screen reader announces the range there.",
+        "Opening the calendar from the trigger or from open() moves focus to the day of the end being edited, or to today when that end is empty. Alt+ArrowDown opens it and leaves focus in the field. While the calendar is open, Tab and Shift+Tab cycle through the shortcuts, the calendar and the footer.",
+        "The length is a polite live region. A sighted reader sees it follow the pointer; a screen-reader user hears it follow each arrow key.",
+        "Each field has its own name, from the start and end messages, and the dash between them is aria-hidden. Each field keeps its own spin buttons and its own keys. Inside a field, the frame is a group named by the field’s label, so a screen reader announces “Reporting period” and then “Start” on the way into the first date.",
+        "Escape closes in steps: while the calendar shows the month or year grid, Escape returns to the day grid; on the day grid, it closes the calendar, discards a range that has only its start, and returns focus to the trigger.",
+        "A range that has only its start in the calendar never reaches the value or a form: the first press is shown in the band, and the second press writes the range. A typed open end is a value, because the reader sees it in the field.",
+        "The surface has role=\"dialog\" and the same accessible name as the trigger. The trigger sets aria-expanded, and sets aria-controls only while the surface exists. One day of the calendar is in the tab order, as the grid pattern requires."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-date-range-picker-action-active-background",
+    "--slotted-date-range-picker-action-color",
+    "--slotted-date-range-picker-action-hover-background",
+    "--slotted-date-range-picker-action-size",
+    "--slotted-date-range-picker-background",
+    "--slotted-date-range-picker-border-color",
+    "--slotted-date-range-picker-color",
+    "--slotted-date-range-picker-content-border-color",
+    "--slotted-date-range-picker-content-color",
+    "--slotted-date-range-picker-content-padding",
+    "--slotted-date-range-picker-content-radius",
+    "--slotted-date-range-picker-content-shadow",
+    "--slotted-date-range-picker-current-color",
+    "--slotted-date-range-picker-current-size",
+    "--slotted-date-range-picker-disabled-background",
+    "--slotted-date-range-picker-disabled-border-color",
+    "--slotted-date-range-picker-disabled-color",
+    "--slotted-date-range-picker-hover-border-color",
+    "--slotted-date-range-picker-invalid-border-color",
+    "--slotted-date-range-picker-invalid-edge-width",
+    "--slotted-date-range-picker-invalid-focus-ring-color",
+    "--slotted-date-range-picker-length-color",
+    "--slotted-date-range-picker-limit-color",
+    "--slotted-date-range-picker-pending-color",
+    "--slotted-date-range-picker-placeholder-color",
+    "--slotted-date-range-picker-plain-hover-background",
+    "--slotted-date-range-picker-preset-active-background",
+    "--slotted-date-range-picker-preset-hover-background",
+    "--slotted-date-range-picker-preset-selected-background",
+    "--slotted-date-range-picker-preset-selected-color",
+    "--slotted-date-range-picker-radius",
+    "--slotted-date-range-picker-readonly-background",
+    "--slotted-date-range-picker-separator-color",
+    "--slotted-date-range-picker-shadow",
+    "--slotted-date-range-picker-sheet-inline-size",
+    "--slotted-date-range-picker-subtle-background",
+    "--slotted-date-range-picker-subtle-border-color",
+    "--slotted-date-range-picker-subtle-hover-background",
+    "--slotted-date-range-picker-surface",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-sm",
+    "--slotted-radius-lg",
+    "--slotted-radius-none",
+    "--slotted-radius-xs",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-9",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Check-in and check-out in one frame, driven by the controls below the canvas. Type into either field, or press the trigger and choose two days: while the range is drawn, the band above the calendar says how many nights it holds.",
+      "language": "tsx",
+      "source": "<Field>\n  <FieldLabel>Stay</FieldLabel>\n  <DateRangePicker\n    count=\"nights\"\n    endName=\"checkout\"\n    onValueChange={setValue}\n    startName=\"checkin\"\n    value={value}\n  />\n</Field>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Size",
+      "note": "The three steps of the control scale. Both fields, the dash and the trigger follow the step together, so a range in a dense table shrinks as one control.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerSizes() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Created between</FieldLabel>\n        <DateRangePicker\n          size=\"sm\"\n          defaultValue={{ start: plainDate(2026, 9, 1), end: plainDate(2026, 9, 30) }}\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Billing period</FieldLabel>\n        <DateRangePicker\n          size=\"md\"\n          defaultValue={{ start: plainDate(2026, 10, 1), end: plainDate(2026, 10, 31) }}\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Lease term</FieldLabel>\n        <DateRangePicker\n          size=\"lg\"\n          defaultValue={{ start: plainDate(2026, 11, 1), end: plainDate(2027, 10, 31) }}\n        />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "Variant",
+      "note": "How much frame the control draws at rest. The two fields inside are plain, and the one frame answers hover, focus and invalid for both.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nconst QUARTER = { start: plainDate(2026, 7, 1), end: plainDate(2026, 9, 30) };\n\nexport default function DateRangePickerVariants() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Outline</FieldLabel>\n        <DateRangePicker variant=\"outline\" defaultValue={QUARTER} />\n      </Field>\n      <Field>\n        <FieldLabel>Subtle</FieldLabel>\n        <DateRangePicker variant=\"subtle\" defaultValue={QUARTER} />\n      </Field>\n      <Field>\n        <FieldLabel>Plain</FieldLabel>\n        <DateRangePicker variant=\"plain\" defaultValue={QUARTER} />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "length",
+      "title": "The length while the range is drawn",
+      "note": "Open the calendar and choose a start: the band follows the pointer and the focused day, and says the length of the range the next press would make. count decides the unit: a stay counts nights and a leave request counts days, so the same two dates give 4 nights or 5 days.",
+      "language": "tsx",
+      "source": "<>\n  <DateRangePicker count=\"nights\" />\n  <DateRangePicker count=\"days\" />\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "limits",
+      "title": "Length limits",
+      "note": "A stay of two to seven nights. Once a check-in is chosen, the calendar disables the days that would break the rule and the band names it; a typed range outside it marks the frame invalid. minLength and maxLength count in the unit count names.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nexport default function DateRangePickerLimits() {\n  return (\n    <Field>\n      <FieldLabel>Forklift rental</FieldLabel>\n      <DateRangePicker maxLength={14} minLength={2} />\n      <FieldDescription>Rentals run from 2 to 14 days.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "unavailable",
+      "title": "Unavailable days",
+      "note": "The room is taken from the 15th to the 18th. Choose a check-in before it: the calendar disables the nights past the first taken day, because a range runs without gaps. contiguous={false} lets a range run across an unavailable day and checks only its two ends.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { compareDate, plainDate, type PlainDate } from '@slotted/core/date';\n\nconst BOOKED_FROM = plainDate(2026, 10, 14);\nconst BOOKED_TO = plainDate(2026, 10, 16);\n\nconst isBooked = (date: PlainDate) =>\n  compareDate(date, BOOKED_FROM) >= 0 && compareDate(date, BOOKED_TO) <= 0;\n\nexport default function DateRangePickerUnavailable() {\n  return (\n    <Field>\n      <FieldLabel>Training room</FieldLabel>\n      <DateRangePicker isDateUnavailable={isBooked} />\n      <FieldDescription>\n        Booked October 14 to 16. A booking cannot run across those days.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "presets",
+      "title": "Presets",
+      "note": "The stays a hotel offers by name. Each is a DateRangePickerPreset with its own range; pressing one writes the value and closes the calendar, and the one equal to the value carries data-selected. The list belongs to the product.",
+      "language": "tsx",
+      "source": "import type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker, DateRangePickerPreset } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { addDays, plainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\nconst LAST_30_DAYS: DateRange = { start: addDays(TODAY, -29), end: TODAY };\n\nconst PRESETS: { label: string; range: DateRange }[] = [\n  { label: 'Last 7 days', range: { start: addDays(TODAY, -6), end: TODAY } },\n  { label: 'Last 30 days', range: LAST_30_DAYS },\n  { label: 'This quarter', range: { start: plainDate(2026, 7, 1), end: TODAY } },\n  { label: 'Last quarter', range: { start: plainDate(2026, 4, 1), end: plainDate(2026, 6, 30) } },\n  { label: 'Year to date', range: { start: plainDate(2026, 1, 1), end: TODAY } },\n];\n\nexport default function DateRangePickerPresets() {\n  return (\n    <Field>\n      <FieldLabel>Report period</FieldLabel>\n      <DateRangePicker\n        defaultValue={LAST_30_DAYS}\n        max={TODAY}\n        presets={PRESETS.map((preset) => (\n          <DateRangePickerPreset key={preset.label} value={preset.range}>\n            {preset.label}\n          </DateRangePickerPreset>\n        ))}\n      />\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "open-end",
+      "title": "An open end",
+      "note": "A check-in without a check-out is a value, { start, end: null }, and the field shows it. Open the calendar over it and the first press writes the missing end. required asks for both ends.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerOpenEnd() {\n  return (\n    <Field>\n      <FieldLabel>Price valid</FieldLabel>\n      <DateRangePicker clearable defaultValue={{ start: plainDate(2026, 10, 1), end: null }} />\n      <FieldDescription>Leave the end empty for a price with no end date.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Read-only keeps the dates legible and copyable and disables the buttons; disabled disables everything and keeps the dates readable; a check-out before its check-in is invalid on the end field and on the frame, and the ends are not swapped; required reaches both fields.",
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerStates() {\n  return (\n    <Stack gap={5}>\n      <Field invalid required>\n        <FieldLabel>Campaign dates</FieldLabel>\n        <DateRangePicker\n          defaultValue={{ start: plainDate(2026, 10, 12), end: plainDate(2026, 10, 5) }}\n        />\n        <FieldError>The end date is before the start date.</FieldError>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Fiscal quarter</FieldLabel>\n        <DateRangePicker\n          defaultValue={{ start: plainDate(2026, 7, 1), end: plainDate(2026, 9, 30) }}\n        />\n        <FieldDescription>Set by finance when the quarter opens.</FieldDescription>\n      </Field>\n      <Field disabled>\n        <FieldLabel>Price freeze</FieldLabel>\n        <DateRangePicker\n          defaultValue={{ start: plainDate(2026, 11, 23), end: plainDate(2026, 12, 31) }}\n        />\n        <FieldDescription>Unlocks once the pricing review is approved.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "forms",
+      "title": "Forms",
+      "note": "A plain form post sends two ISO 8601 strings under startName and endName, whether the reader typed the dates or chose them. Choose a stay and submit.",
+      "language": "tsx",
+      "source": "<form onSubmit={reserve}>\n  <DateRangePicker endName=\"checkout\" startName=\"checkin\" required />\n  <Button type=\"submit\">Reserve</Button>\n</form>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "Narrow",
+      "note": "In a column narrower than two dates, the frame stays on one line: each date clips at its own edge and scrolls back into view when focus enters it, and the trigger keeps its place. The surface is capped by the room available, and the second month wraps under the first. On a touch screen narrower than 480 pixels, the surface is a sheet.",
+      "language": "tsx",
+      "source": "import { DateRangePicker, DateRangePickerPreset } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { addDays, plainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\nexport default function DateRangePickerNarrow() {\n  return (\n    <Field>\n      <FieldLabel>Deliveries between</FieldLabel>\n      <DateRangePicker\n        max={TODAY}\n        presets={\n          <>\n            <DateRangePickerPreset value={{ start: TODAY, end: TODAY }}>\n              Today\n            </DateRangePickerPreset>\n            <DateRangePickerPreset value={{ start: addDays(TODAY, -6), end: TODAY }}>\n              Last 7 days\n            </DateRangePickerPreset>\n          </>\n        }\n      />\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "DateRangePickerDefaultsProvider sets the unit and the months for a section, and SlottedProvider sets the language and every word. The handle opens, closes and focuses one end; position and onPositionChange control which end the next press writes.",
+      "language": "tsx",
+      "source": "<DateRangePickerDefaultsProvider count=\"nights\" months={1}>\n  <DateRangePicker ref={handle} />\n</DateRangePickerDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Alt+ArrowDown opens the calendar from either field and leaves focus there. Enter on the trigger opens it on the day of the end being edited; each arrow moves the pending end and the band says the length; Enter twice writes the range. Escape returns to the day grid first, then closes and discards a range that has only its start.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nconst MESSAGES = {\n  choose: 'Choose blackout dates',\n  change: 'Change blackout dates, {start} to {end}, {length}',\n};\n\nexport default function DateRangePickerKeyboard() {\n  const [last, setLast] = useState('Focus either date and press Alt+ArrowDown.');\n\n  return (\n    <Field>\n      <FieldLabel>Shipping blackout</FieldLabel>\n      <DateRangePicker\n        defaultValue={{ start: plainDate(2026, 11, 26), end: plainDate(2026, 11, 29) }}\n        messages={MESSAGES}\n        onOpenChange={(open, request) =>\n          setLast(`${open ? 'Opened' : 'Closed'} by ${request.reason}.`)\n        }\n      />\n      <FieldDescription>{last}</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "across-unavailable",
+      "title": "across-unavailable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { dayOfWeek, toISODate, type PlainDate } from '@slotted/core/date';\n\nconst HOLIDAYS = new Set(['2026-10-12', '2026-11-11', '2026-11-26', '2026-12-25']);\n\nconst isNonWorkingDay = (date: PlainDate) =>\n  dayOfWeek(date) === 0 || dayOfWeek(date) === 6 || HOLIDAYS.has(toISODate(date));\n\nexport default function DateRangePickerAcrossUnavailable() {\n  return (\n    <Field>\n      <FieldLabel>Vacation</FieldLabel>\n      <DateRangePicker contiguous={false} isDateUnavailable={isNonWorkingDay} />\n      <FieldDescription>\n        Start and end on a working day. Weekends and holidays inside the vacation are fine.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nexport default function DateRangePickerBasic() {\n  return (\n    <Field>\n      <FieldLabel>Reporting period</FieldLabel>\n      <DateRangePicker endName=\"periodEnd\" startName=\"periodStart\" />\n      <FieldDescription>Type both dates or choose them from the calendar.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bounds",
+      "title": "bounds.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerBounds() {\n  return (\n    <Field>\n      <FieldLabel>Shipment window</FieldLabel>\n      <DateRangePicker max={plainDate(2026, 12, 31)} min={plainDate(2026, 10, 1)} />\n      <FieldDescription>\n        Carriers accept bookings from October 1 to December 31, 2026.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "clearable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerClearable() {\n  return (\n    <Field>\n      <FieldLabel>Order date</FieldLabel>\n      <DateRangePicker\n        clearable\n        defaultValue={{ start: plainDate(2026, 9, 14), end: plainDate(2026, 9, 27) }}\n      />\n      <FieldDescription>Clear the dates to list orders from any date.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "compare-periods",
+      "title": "compare-periods.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker, DateRangePickerPreset } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { addDays, daysBetween, plainDate, stepYear } from '@slotted/core/date';\n\nconst SEPTEMBER: DateRange = { start: plainDate(2026, 9, 1), end: plainDate(2026, 9, 30) };\n\n/** The run of the same length that ends the day before the period starts. */\nconst previousPeriod = (period: DateRange): DateRange | null => {\n  if (period.start === null || period.end === null) return null;\n  const days = daysBetween(period.start, period.end) + 1;\n  return { start: addDays(period.start, -days), end: addDays(period.start, -1) };\n};\n\nconst lastYear = (period: DateRange): DateRange | null =>\n  period.start === null || period.end === null\n    ? null\n    : { start: stepYear(period.start, -1).date, end: stepYear(period.end, -1).date };\n\nexport default function DateRangePickerComparePeriods() {\n  const [period, setPeriod] = useState<DateRange | null>(SEPTEMBER);\n  const [baseline, setBaseline] = useState<DateRange | null>(previousPeriod(SEPTEMBER));\n\n  const previous = period === null ? null : previousPeriod(period);\n  const sameLastYear = period === null ? null : lastYear(period);\n\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Period</FieldLabel>\n        <DateRangePicker onValueChange={(value) => setPeriod(value)} value={period} />\n      </Field>\n      <Field>\n        <FieldLabel>Compare to</FieldLabel>\n        <DateRangePicker\n          onValueChange={(value) => setBaseline(value)}\n          presets={\n            <>\n              {previous && (\n                <DateRangePickerPreset value={previous}>Previous period</DateRangePickerPreset>\n              )}\n              {sameLastYear && (\n                <DateRangePickerPreset value={sameLastYear}>\n                  Same period last year\n                </DateRangePickerPreset>\n              )}\n            </>\n          }\n          value={baseline}\n        />\n        <FieldDescription>Shortcuts follow the period above.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { endOfMonth, plainDate, startOfMonth, stepMonth, toISODate } from '@slotted/core/date';\n\nconst SEPTEMBER: DateRange = { start: plainDate(2026, 9, 1), end: plainDate(2026, 9, 30) };\nconst FALLBACK = plainDate(2026, 9, 1);\n\n/** The calendar month before or after the one the range starts in. */\nconst shift = (range: DateRange | null, months: number): DateRange => {\n  const first = startOfMonth(stepMonth(range?.start ?? FALLBACK, months).date);\n  return { start: first, end: endOfMonth(first) };\n};\n\nexport default function DateRangePickerControlled() {\n  const [period, setPeriod] = useState<DateRange | null>(SEPTEMBER);\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Statement period</FieldLabel>\n        <DateRangePicker onValueChange={(value) => setPeriod(value)} value={period} />\n        <FieldDescription>\n          {period?.start && period.end\n            ? `Statement from ${toISODate(period.start)} to ${toISODate(period.end)}.`\n            : 'Choose both dates to run the statement.'}\n        </FieldDescription>\n      </Field>\n      <Inline gap={2}>\n        <Button\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          onClick={() => setPeriod(shift(period, -1))}\n        >\n          Previous month\n        </Button>\n        <Button\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          onClick={() => setPeriod(shift(period, 1))}\n        >\n          Next month\n        </Button>\n        <Button size=\"sm\" tone=\"secondary\" variant=\"ghost\" onClick={() => setPeriod(null)}>\n          Clear\n        </Button>\n      </Inline>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "count",
+      "title": "count.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nconst TRIP = { start: plainDate(2026, 10, 12), end: plainDate(2026, 10, 16) };\n\nexport default function DateRangePickerCount() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Hotel stay</FieldLabel>\n        <DateRangePicker count=\"nights\" defaultValue={TRIP} />\n        <FieldDescription>Counted in nights: October 12 to 16 is 4 nights.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel>Trade show leave</FieldLabel>\n        <DateRangePicker count=\"days\" defaultValue={TRIP} />\n        <FieldDescription>Counted in days: October 12 to 16 is 5 days.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker, DateRangePickerDefaultsProvider } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerDefaults() {\n  return (\n    <DateRangePickerDefaultsProvider count=\"nights\" months={1} variant=\"subtle\">\n      <Stack gap={4}>\n        <Field>\n          <FieldLabel>Lisbon hotel</FieldLabel>\n          <DateRangePicker\n            defaultValue={{ start: plainDate(2026, 11, 9), end: plainDate(2026, 11, 12) }}\n          />\n        </Field>\n        <Field>\n          <FieldLabel>Porto hotel</FieldLabel>\n          <DateRangePicker\n            defaultValue={{ start: plainDate(2026, 11, 12), end: plainDate(2026, 11, 14) }}\n          />\n        </Field>\n      </Stack>\n    </DateRangePickerDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dock-booking",
+      "title": "dock-booking.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  createDateFormat,\n  dayOfWeek,\n  plainDate,\n  toISODate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n/** Days another carrier already holds dock 4. */\nconst HELD = new Set(['2026-10-07', '2026-10-08', '2026-10-21', '2026-10-22', '2026-10-23']);\nconst words = createDateFormat({ locale: 'en-US' });\n\nconst isClosed = (date: PlainDate) =>\n  dayOfWeek(date) === 0 || dayOfWeek(date) === 6 || HELD.has(toISODate(date));\n\nexport default function DateRangePickerDockBooking() {\n  const [slot, setSlot] = useState<DateRange | null>(null);\n\n  return (\n    <Field required>\n      <FieldLabel>Dock 4 unloading window</FieldLabel>\n      <DateRangePicker\n        isDateUnavailable={isClosed}\n        max={plainDate(2026, 11, 30)}\n        maxLength={3}\n        min={plainDate(2026, 10, 1)}\n        onValueChange={(value) => setSlot(value)}\n        value={slot}\n      />\n      <FieldDescription>\n        {slot?.start && slot.end\n          ? `Dock 4 is yours from ${words.describe(slot.start)} to ${words.describe(slot.end)}.`\n          : `Book 1 to 3 weekdays from October 1. Booked as of ${words.describe(TODAY)}: Oct 7–8 and Oct 21–23.`}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "first-day",
+      "title": "first-day.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerFirstDay() {\n  return (\n    <Field>\n      <FieldLabel>Sprint 42</FieldLabel>\n      <DateRangePicker\n        defaultValue={{ start: plainDate(2026, 10, 5), end: plainDate(2026, 10, 16) }}\n        firstDayOfWeek={1}\n        weekNumbers\n      />\n      <FieldDescription>Sprints run two ISO weeks, Monday to Friday.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "focus-and-open",
+      "title": "focus-and-open.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateRangePicker, type DateRangePickerHandle } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerFocusAndOpen() {\n  const picker = useRef<DateRangePickerHandle>(null);\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Contract term</FieldLabel>\n        <DateRangePicker\n          ref={picker}\n          defaultValue={{ start: plainDate(2026, 4, 1), end: plainDate(2027, 3, 31) }}\n        />\n      </Field>\n      <Inline gap={2}>\n        <Button\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          onClick={() => picker.current?.focus('end')}\n        >\n          Edit end date\n        </Button>\n        <Button size=\"sm\" tone=\"secondary\" variant=\"outline\" onClick={() => picker.current?.open()}>\n          Open calendar\n        </Button>\n      </Inline>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "footer",
+      "title": "footer.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateRangePicker, type DateRangePickerHandle } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerFooter() {\n  const picker = useRef<DateRangePickerHandle>(null);\n\n  return (\n    <Field>\n      <FieldLabel>Stock count freeze</FieldLabel>\n      <DateRangePicker\n        ref={picker}\n        closeOnSelect=\"never\"\n        defaultValue={{ start: plainDate(2026, 10, 30), end: plainDate(2026, 11, 1) }}\n        footer={\n          <Button size=\"sm\" onClick={() => picker.current?.close()}>\n            Done\n          </Button>\n        }\n      />\n      <FieldDescription>The calendar stays open until you press Done.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { SubmitEvent } from 'react';\nimport { Button } from '@slotted/react/button';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\nimport { compareDate } from '@slotted/core/date';\n\nconst problem = (range: DateRange | null, submitted: boolean) => {\n  if (range?.start && range.end && compareDate(range.end, range.start) < 0) {\n    return 'The end date must be on or after the start date.';\n  }\n  if (submitted && (range?.start == null || range.end == null)) {\n    return 'Enter a start and an end date.';\n  }\n  return '';\n};\n\nexport default function DateRangePickerForm() {\n  const [range, setRange] = useState<DateRange | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [saved, setSaved] = useState<string | null>(null);\n\n  const error = problem(range, submitted);\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    const data = new FormData(event.currentTarget);\n    setSaved(\n      problem(range, true) === ''\n        ? `Freeze saved from ${String(data.get('freezeStart'))} to ${String(data.get('freezeEnd'))}.`\n        : null,\n    );\n  };\n\n  const reset = () => {\n    setRange(null);\n    setSubmitted(false);\n    setSaved(null);\n  };\n\n  return (\n    <form noValidate onSubmit={submit} onReset={reset}>\n      <Stack gap={5}>\n        <Field required invalid={error === '' ? undefined : true}>\n          <FieldLabel>Code freeze</FieldLabel>\n          <DateRangePicker\n            endName=\"freezeEnd\"\n            onValueChange={(value) => setRange(value)}\n            startName=\"freezeStart\"\n            value={range}\n          />\n          <FieldError live=\"polite\" reserve>\n            {error}\n          </FieldError>\n        </Field>\n        <Inline gap={3} align=\"center\">\n          <Button type=\"submit\">Save freeze</Button>\n          <Button type=\"reset\" tone=\"secondary\" variant=\"outline\">\n            Reset\n          </Button>\n          {saved && (\n            <Text size=\"sm\" tone=\"muted\">\n              {saved}\n            </Text>\n          )}\n        </Inline>\n      </Stack>\n    </form>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "locale",
+      "title": "locale.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate } from '@slotted/core/date';\n\nconst SEASON = { start: plainDate(2026, 11, 2), end: plainDate(2026, 12, 23) };\n\nexport default function DateRangePickerLocale() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Peak season, United States (en-US)</FieldLabel>\n        <DateRangePicker defaultValue={SEASON} locale=\"en-US\" />\n      </Field>\n      <Field>\n        <FieldLabel>Peak season, United Kingdom (en-GB)</FieldLabel>\n        <DateRangePicker defaultValue={SEASON} locale=\"en-GB\" />\n      </Field>\n      <Field>\n        <FieldLabel>Peak season, Germany (de-DE)</FieldLabel>\n        <DateRangePicker defaultValue={SEASON} locale=\"de-DE\" />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "months",
+      "title": "months.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate } from '@slotted/core/date';\n\nexport default function DateRangePickerMonths() {\n  return (\n    <Field>\n      <FieldLabel>Promotion window</FieldLabel>\n      <DateRangePicker\n        defaultValue={{ start: plainDate(2026, 10, 5), end: plainDate(2026, 10, 18) }}\n        months={1}\n      />\n      <FieldDescription>Promotions run inside one month.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "position",
+      "title": "position.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, toISODate } from '@slotted/core/date';\n\nexport default function DateRangePickerPosition() {\n  const [rental, setRental] = useState<DateRange | null>({\n    start: plainDate(2026, 10, 5),\n    end: plainDate(2026, 10, 9),\n  });\n\n  return (\n    <Field>\n      <FieldLabel>Scissor lift rental</FieldLabel>\n      <DateRangePicker\n        defaultPosition=\"end\"\n        onValueChange={(value) => setRental(value)}\n        value={rental}\n      />\n      <FieldDescription>\n        {rental?.end\n          ? `Returns ${toISODate(rental.end)}. Open the calendar and press a day to move the return date.`\n          : 'Choose a return date.'}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "reporting-filter",
+      "title": "reporting-filter.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker, DateRangePickerPreset } from '@slotted/react/date-range-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Grid } from '@slotted/react/grid';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  StatCard,\n  StatCardComparison,\n  StatCardDelta,\n  StatCardFigure,\n  StatCardHeader,\n  StatCardLabel,\n  StatCardPeriod,\n  StatCardValue,\n} from '@slotted/react/stat-card';\nimport { addDays, daysBetween, plainDate, type PlainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\nconst LAST_7_DAYS: DateRange = { start: addDays(TODAY, -6), end: TODAY };\nconst PRESETS: { label: string; range: DateRange }[] = [\n  { label: 'Last 7 days', range: LAST_7_DAYS },\n  { label: 'Last 30 days', range: { start: addDays(TODAY, -29), end: TODAY } },\n  { label: 'This quarter', range: { start: plainDate(2026, 7, 1), end: TODAY } },\n];\n\n/** Orders shipped on one day, from the Northwind warehouse feed. */\nconst ordersOn = (date: PlainDate) => 150 + date.month * 6 + ((date.day * 37) % 50);\n\nconst ordersBetween = (start: PlainDate, end: PlainDate) => {\n  let total = 0;\n  for (let date = start; daysBetween(date, end) >= 0; date = addDays(date, 1)) {\n    total += ordersOn(date);\n  }\n  return total;\n};\n\nexport default function DateRangePickerReportingFilter() {\n  const [period, setPeriod] = useState<DateRange | null>(LAST_7_DAYS);\n\n  const whole = period?.start && period.end ? { start: period.start, end: period.end } : null;\n  const days = whole ? daysBetween(whole.start, whole.end) + 1 : 0;\n  const orders = whole ? ordersBetween(whole.start, whole.end) : 0;\n  const previous = whole ? ordersBetween(addDays(whole.start, -days), addDays(whole.start, -1)) : 0;\n  const delta = previous === 0 ? 0 : (orders - previous) / previous;\n\n  return (\n    <Stack gap={5}>\n      <Field size=\"sm\">\n        <FieldLabel>Period</FieldLabel>\n        <DateRangePicker\n          max={TODAY}\n          onValueChange={(value) => setPeriod(value)}\n          presets={PRESETS.map((preset) => (\n            <DateRangePickerPreset key={preset.label} value={preset.range}>\n              {preset.label}\n            </DateRangePickerPreset>\n          ))}\n          value={period}\n        />\n      </Field>\n      <Grid gap={4} minItemWidth=\"sm\">\n        <StatCard delta={delta} goodWhen=\"up\">\n          <StatCardHeader>\n            <StatCardLabel>Orders shipped</StatCardLabel>\n          </StatCardHeader>\n          <StatCardFigure>\n            <StatCardValue value={orders} />\n            <StatCardDelta />\n            <StatCardComparison>\n              from {previous.toLocaleString('en-US')}{' '}\n              <StatCardPeriod>previous {days} days</StatCardPeriod>\n            </StatCardComparison>\n          </StatCardFigure>\n        </StatCard>\n        <StatCard>\n          <StatCardHeader>\n            <StatCardLabel>Orders per day</StatCardLabel>\n          </StatCardHeader>\n          <StatCardFigure>\n            <StatCardValue value={days === 0 ? 0 : Math.round(orders / days)} />\n            <StatCardComparison>\n              over <StatCardPeriod>{days} days</StatCardPeriod>\n            </StatCardComparison>\n          </StatCardFigure>\n        </StatCard>\n      </Grid>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typing",
+      "title": "typing.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { DateRange } from '@slotted/react/calendar';\nimport { DateRangePicker, type DateRangePickerValueReason } from '@slotted/react/date-range-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { toISODate, type PlainDate } from '@slotted/core/date';\n\nconst HOW: Record<DateRangePickerValueReason, string> = {\n  blur: 'completed when the field lost focus',\n  clear: 'cleared',\n  keyboard: 'typed',\n  pointer: 'pressed',\n  programmatic: 'set from code',\n  select: 'chosen in the calendar',\n};\nconst iso = (date: PlainDate | null) => (date === null ? 'open' : toISODate(date));\n\nexport default function DateRangePickerTyping() {\n  const [period, setPeriod] = useState<DateRange | null>(null);\n  const [last, setLast] = useState('Type both dates, or choose two days in the calendar.');\n\n  return (\n    <Field>\n      <FieldLabel>Audit window</FieldLabel>\n      <DateRangePicker\n        onValueChange={(value, request) => {\n          setPeriod(value);\n          setLast(\n            value === null\n              ? `No dates, ${HOW[request.reason as DateRangePickerValueReason]}.`\n              : `${iso(value.start)} to ${iso(value.end)}, ${HOW[request.reason as DateRangePickerValueReason]}.`,\n          );\n        }}\n        value={period}\n      />\n      <FieldDescription>{last}</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}