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

package/docs/date-range-picker.json

@@ -0,0 +1,903 @@
+{
+  "family": "date-range-picker",
+  "ui": "date-range-picker",
+  "binding": "angular",
+  "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 { SlDateRangePicker, SlDateRangePickerPreset, SlDateRangePickerPresets, SlDateRangePickerFooter, provideDateRangePickerDefaults } from '@slotted/angular/date-range-picker';",
+        "selector": "[slDateRangePicker]",
+        "exportAs": "slDateRangePicker"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "your own element",
+          "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. You write this element, so its classes, attributes and other directives stay yours."
+        },
+        {
+          "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",
+          "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": "your own element with slDateRangePickerPresets",
+          "required": false,
+          "purpose": "A column for your own shortcuts. The Date Range Picker ships the shortcut directive and its column, never the list: the ranges belong to your product."
+        },
+        {
+          "part": "preset",
+          "element": "your own button with slDateRangePickerPreset",
+          "required": false,
+          "purpose": "One shortcut. It writes its range with the select reason and carries data-selected while the value equals its range."
+        },
+        {
+          "part": "footer",
+          "element": "your own element with slDateRangePickerFooter",
+          "required": false,
+          "purpose": "A row under the calendar for your own actions."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "DateRange | null",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "The range, { start, end }, where each end is a PlainDate or null. A range with both ends null is null. Binding it makes the value controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "DateRange | null",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "The starting value of an uncontrolled date range picker. Read once, on init."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Whether the calendar is showing. Binding it makes the open state controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Whether the calendar shows on the first render. Focus does not move into it."
+        },
+        {
+          "name": "position",
+          "type": "'start' | 'end'",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "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. Binding it makes the position controlled."
+        },
+        {
+          "name": "defaultPosition",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "SlDateRangePicker",
+          "description": "The end being edited on the first render."
+        },
+        {
+          "name": "min",
+          "type": "PlainDate",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "How many months the calendar draws side by side. When they do not fit, they wrap."
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Adds a column of ISO 8601 week numbers to the calendar."
+        },
+        {
+          "name": "fixedWeeks",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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 provideSlotted locale, else en-US",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "The day the calendar starts each week on, from 0 for Sunday to 6 for Saturday."
+        },
+        {
+          "name": "yearPivot",
+          "type": "number",
+          "defaultValue": "20",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "The calendar system. Gregorian is the only one today."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "How much frame the control draws at rest."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Disables both fields, the clear button and the trigger, and takes them out of the tab order. A form control’s disabled state sets it too."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Keeps both dates legible and focusable, and disables the clear button and the trigger."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "Sets aria-required on both fields."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Adds one clear button to the frame, which empties both ends."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DateRangePickerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "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": "SlDateRangePicker",
+          "description": "Adds a hidden input with this name that submits the end as an ISO 8601 string."
+        },
+        {
+          "name": "slDateRangePickerPresets",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Marks your own element as the column of shortcuts beside the calendar. It holds buttons with slDateRangePickerPreset."
+        },
+        {
+          "name": "slDateRangePickerFooter",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Marks your own element as the row of actions under the calendar."
+        },
+        {
+          "name": "slDateRangePickerPreset",
+          "type": "DateRange | (() => DateRange)",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePickerPreset",
+          "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": "provideDateRangePickerDefaults",
+          "type": "Provider",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, calendar, months, count, closeOnSelect, placement, size and variant for every date range picker under the injector. An input on one date range picker wins, and inside a field the field’s size wins."
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "type": "formControl, formControlName, ngModel",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "The whole { start, end } is the control’s value. The date range picker reports slottedDateRangeOrder, slottedDateRangeMin, slottedDateRangeMax, slottedDateRangeUnavailable and slottedDateRangeLength, and leaves required to Validators.required, which accepts a range with one open end."
+        },
+        {
+          "name": "exportAs",
+          "type": "slDateRangePicker",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "Gives a template the instance, with focus(position?), which focuses the first segment of one end (the current one by default), openSurface() and closeSurface(), which show and hide the calendar without a bound open, and choose(range), which writes a range as a shortcut does. openSurface() moves focus into the calendar."
+        },
+        {
+          "name": "Content slots",
+          "type": "slDateRangePickerPresets, slDateRangePickerFooter",
+          "defaultValue": "—",
+          "appliesTo": "SlDateRangePicker",
+          "description": "The two places you fill, as directives on your own elements, so a button, a list or a toolbar keeps its own semantics."
+        },
+        {
+          "name": "slDateRangePickerPreset",
+          "type": "Directive on button",
+          "defaultValue": "—",
+          "appliesTo": "presets",
+          "description": "One shortcut on your own button. It takes the range and sets data-part and type. A click handler that calls preventDefault() keeps the current value."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "ChangeRequest<DateRange | null>",
+          "when": "Before the value changes. 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 emit: the range is not complete yet. cancel() keeps the current value. There is no two-way [(value)] binding, because the request carries the reason; bind a form control for two-way binding."
+        },
+        {
+          "name": "openChange",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the calendar opens or closes. reason is pointer for the trigger, keyboard for Alt+ArrowDown, programmatic for openSurface() and closeSurface(), escape for the Escape key, outsidePress for a press outside the surface and select for a completed range. cancel() keeps the current state."
+        },
+        {
+          "name": "positionChange",
+          "payload": "ChangeRequest<'start' | 'end'>",
+          "when": "Before the end being edited changes. 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 openSurface() 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": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Stay</label>\n  <div\n    slDateRangePicker\n    count=\"nights\"\n    startName=\"checkin\"\n    endName=\"checkout\"\n    [value]=\"value\"\n    (valueChange)=\"value = $event.value\"\n  ></div>\n</div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-sizes',\n  imports: [SlDateRangePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Created between</label>\n        <div slDateRangePicker size=\"sm\" [defaultValue]=\"created\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Billing period</label>\n        <div slDateRangePicker size=\"md\" [defaultValue]=\"billing\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Lease term</label>\n        <div slDateRangePicker size=\"lg\" [defaultValue]=\"lease\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerSizes {\n  protected readonly created = { start: plainDate(2026, 9, 1), end: plainDate(2026, 9, 30) };\n  protected readonly billing = { start: plainDate(2026, 10, 1), end: plainDate(2026, 10, 31) };\n  protected readonly lease = { start: plainDate(2026, 11, 1), end: plainDate(2027, 10, 31) };\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-variants',\n  imports: [SlDateRangePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Outline</label>\n        <div slDateRangePicker variant=\"outline\" [defaultValue]=\"quarter\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Subtle</label>\n        <div slDateRangePicker variant=\"subtle\" [defaultValue]=\"quarter\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Plain</label>\n        <div slDateRangePicker variant=\"plain\" [defaultValue]=\"quarter\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerVariants {\n  protected readonly quarter = { start: plainDate(2026, 7, 1), end: plainDate(2026, 9, 30) };\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": "html",
+      "source": "<div slDateRangePicker count=\"nights\"></div>\n<div slDateRangePicker count=\"days\"></div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\n\n@Component({\n  selector: 'app-date-range-picker-limits',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Forklift rental</label>\n      <div slDateRangePicker [minLength]=\"2\" [maxLength]=\"14\"></div>\n      <span slFieldDescription>Rentals run from 2 to 14 days.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerLimits {}\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-unavailable',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Training room</label>\n      <div slDateRangePicker [isDateUnavailable]=\"isBooked\"></div>\n      <span slFieldDescription>\n        Booked October 14 to 16. A booking cannot run across those days.\n      </span>\n    </div>\n  `,\n})\nexport class DateRangePickerUnavailable {\n  protected readonly isBooked = isBooked;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "presets",
+      "title": "Presets",
+      "note": "The stays a hotel offers by name. Each is a button with slDateRangePickerPreset and 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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlDateRangePicker,\n  SlDateRangePickerPreset,\n  SlDateRangePickerPresets,\n  type DateRange,\n} from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-presets',\n  imports: [\n    SlDateRangePicker,\n    SlDateRangePickerPreset,\n    SlDateRangePickerPresets,\n    SlField,\n    SlFieldLabel,\n  ],\n  template: `\n    <div slField>\n      <label slFieldLabel>Report period</label>\n      <div slDateRangePicker [defaultValue]=\"last30Days\" [max]=\"today\">\n        <div slDateRangePickerPresets>\n          @for (preset of presets; track preset.label) {\n            <button [slDateRangePickerPreset]=\"preset.range\">{{ preset.label }}</button>\n          }\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerPresets {\n  protected readonly today = TODAY;\n  protected readonly last30Days = LAST_30_DAYS;\n  protected readonly presets = PRESETS;\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-open-end',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Price valid</label>\n      <div slDateRangePicker clearable [defaultValue]=\"validity\"></div>\n      <span slFieldDescription>Leave the end empty for a price with no end date.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerOpenEnd {\n  protected readonly validity = { start: plainDate(2026, 10, 1), end: null };\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-states',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldError, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField invalid required>\n        <label slFieldLabel>Campaign dates</label>\n        <div slDateRangePicker [defaultValue]=\"campaign\"></div>\n        <span slFieldError>The end date is before the start date.</span>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Fiscal quarter</label>\n        <div slDateRangePicker [defaultValue]=\"quarter\"></div>\n        <span slFieldDescription>Set by finance when the quarter opens.</span>\n      </div>\n      <div slField disabled>\n        <label slFieldLabel>Price freeze</label>\n        <div slDateRangePicker [defaultValue]=\"freeze\"></div>\n        <span slFieldDescription>Unlocks once the pricing review is approved.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerStates {\n  protected readonly campaign = { start: plainDate(2026, 10, 12), end: plainDate(2026, 10, 5) };\n  protected readonly quarter = { start: plainDate(2026, 7, 1), end: plainDate(2026, 9, 30) };\n  protected readonly freeze = { start: plainDate(2026, 11, 23), end: plainDate(2026, 12, 31) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "forms",
+      "title": "Forms",
+      "note": "The whole range is the form control’s value, and a plain form post also sends two ISO 8601 strings under startName and endName. Choose a stay and submit.",
+      "language": "html",
+      "source": "<form [formGroup]=\"reservation\" (ngSubmit)=\"reserve()\">\n  <div slDateRangePicker formControlName=\"stay\" startName=\"checkin\" endName=\"checkout\"></div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlDateRangePicker,\n  SlDateRangePickerPreset,\n  SlDateRangePickerPresets,\n} from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { addDays, plainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\n@Component({\n  selector: 'app-date-range-picker-narrow',\n  imports: [\n    SlDateRangePicker,\n    SlDateRangePickerPreset,\n    SlDateRangePickerPresets,\n    SlField,\n    SlFieldLabel,\n  ],\n  template: `\n    <div slField>\n      <label slFieldLabel>Deliveries between</label>\n      <div slDateRangePicker [max]=\"today\">\n        <div slDateRangePickerPresets>\n          <button [slDateRangePickerPreset]=\"todayOnly\">Today</button>\n          <button [slDateRangePickerPreset]=\"lastWeek\">Last 7 days</button>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerNarrow {\n  protected readonly today = TODAY;\n  protected readonly todayOnly = { start: TODAY, end: TODAY };\n  protected readonly lastWeek = { start: addDays(TODAY, -6), end: TODAY };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "provideDateRangePickerDefaults sets the unit and the months for a section, and provideSlotted sets the language and every word. The instance opens, closes and focuses one end; [position] and (positionChange) control which end the next press writes.",
+      "language": "html",
+      "source": "<div\n  slDateRangePicker\n  #picker=\"slDateRangePicker\"\n  [position]=\"position\"\n  (positionChange)=\"position = $event.value\"\n></div>\n<button type=\"button\" (click)=\"picker.openSurface()\">Open</button>\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\nimport type { ChangeRequest } from '@slotted/core/state';\n\n@Component({\n  selector: 'app-date-range-picker-keyboard',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Shipping blackout</label>\n      <div\n        slDateRangePicker\n        [defaultValue]=\"blackout\"\n        [messages]=\"messages\"\n        (openChange)=\"record($event)\"\n      ></div>\n      <span slFieldDescription>{{ last() }}</span>\n    </div>\n  `,\n})\nexport class DateRangePickerKeyboard {\n  protected readonly blackout = { start: plainDate(2026, 11, 26), end: plainDate(2026, 11, 29) };\n  protected readonly messages = {\n    choose: 'Choose blackout dates',\n    change: 'Change blackout dates, {start} to {end}, {length}',\n  };\n  protected readonly last = signal('Focus either date and press Alt+ArrowDown.');\n\n  protected record(request: ChangeRequest<boolean>): void {\n    this.last.set(`${request.value ? 'Opened' : 'Closed'} by ${request.reason}.`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "across-unavailable",
+      "title": "across-unavailable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-across-unavailable',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Vacation</label>\n      <div slDateRangePicker [contiguous]=\"false\" [isDateUnavailable]=\"isNonWorkingDay\"></div>\n      <span slFieldDescription>\n        Start and end on a working day. Weekends and holidays inside the vacation are fine.\n      </span>\n    </div>\n  `,\n})\nexport class DateRangePickerAcrossUnavailable {\n  protected readonly isNonWorkingDay = isNonWorkingDay;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\n\n@Component({\n  selector: 'app-date-range-picker-basic',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Reporting period</label>\n      <div slDateRangePicker startName=\"periodStart\" endName=\"periodEnd\"></div>\n      <span slFieldDescription>Type both dates or choose them from the calendar.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerBasic {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bounds",
+      "title": "bounds.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-bounds',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Shipment window</label>\n      <div slDateRangePicker [min]=\"earliest\" [max]=\"latest\"></div>\n      <span slFieldDescription>Carriers accept bookings from October 1 to December 31, 2026.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerBounds {\n  protected readonly earliest = plainDate(2026, 10, 1);\n  protected readonly latest = plainDate(2026, 12, 31);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "clearable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-clearable',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Order date</label>\n      <div slDateRangePicker clearable [defaultValue]=\"ordered\"></div>\n      <span slFieldDescription>Clear the dates to list orders from any date.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerClearable {\n  protected readonly ordered = { start: plainDate(2026, 9, 14), end: plainDate(2026, 9, 27) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "compare-periods",
+      "title": "compare-periods.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport {\n  SlDateRangePicker,\n  SlDateRangePickerPreset,\n  SlDateRangePickerPresets,\n  type DateRange,\n} from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-compare-periods',\n  imports: [\n    SlDateRangePicker,\n    SlDateRangePickerPreset,\n    SlDateRangePickerPresets,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Period</label>\n        <div slDateRangePicker [value]=\"period()\" (valueChange)=\"period.set($event.value)\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Compare to</label>\n        <div slDateRangePicker [value]=\"baseline()\" (valueChange)=\"baseline.set($event.value)\">\n          <div slDateRangePickerPresets>\n            @if (previous(); as range) {\n              <button [slDateRangePickerPreset]=\"range\">Previous period</button>\n            }\n            @if (sameLastYear(); as range) {\n              <button [slDateRangePickerPreset]=\"range\">Same period last year</button>\n            }\n          </div>\n        </div>\n        <span slFieldDescription>Shortcuts follow the period above.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerComparePeriods {\n  protected readonly period = signal<DateRange | null>(SEPTEMBER);\n  protected readonly baseline = signal<DateRange | null>(previousPeriod(SEPTEMBER));\n  protected readonly previous = computed(() => {\n    const period = this.period();\n    return period === null ? null : previousPeriod(period);\n  });\n  protected readonly sameLastYear = computed(() => {\n    const period = this.period();\n    return period === null ? null : lastYear(period);\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateRangePicker, type DateRange } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-controlled',\n  imports: [\n    SlButton,\n    SlDateRangePicker,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Statement period</label>\n        <div slDateRangePicker [value]=\"period()\" (valueChange)=\"period.set($event.value)\"></div>\n        <span slFieldDescription>{{ summary() }}</span>\n      </div>\n      <div slInline [gap]=\"2\">\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          type=\"button\"\n          (click)=\"move(-1)\"\n        >\n          Previous month\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          type=\"button\"\n          (click)=\"move(1)\"\n        >\n          Next month\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"ghost\"\n          type=\"button\"\n          (click)=\"period.set(null)\"\n        >\n          Clear\n        </button>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerControlled {\n  protected readonly period = signal<DateRange | null>(SEPTEMBER);\n  protected readonly summary = computed(() => {\n    const period = this.period();\n    return period?.start && period.end\n      ? `Statement from ${toISODate(period.start)} to ${toISODate(period.end)}.`\n      : 'Choose both dates to run the statement.';\n  });\n\n  protected move(months: number): void {\n    this.period.set(shift(this.period(), months));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "count",
+      "title": "count.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-count',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Hotel stay</label>\n        <div slDateRangePicker count=\"nights\" [defaultValue]=\"trip\"></div>\n        <span slFieldDescription>Counted in nights: October 12 to 16 is 4 nights.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Trade show leave</label>\n        <div slDateRangePicker count=\"days\" [defaultValue]=\"trip\"></div>\n        <span slFieldDescription>Counted in days: October 12 to 16 is 5 days.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerCount {\n  protected readonly trip = { start: plainDate(2026, 10, 12), end: plainDate(2026, 10, 16) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  provideDateRangePickerDefaults,\n  SlDateRangePicker,\n} from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-defaults',\n  imports: [SlDateRangePicker, SlField, SlFieldLabel, SlStack],\n  providers: [provideDateRangePickerDefaults({ count: 'nights', months: 1, variant: 'subtle' })],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Lisbon hotel</label>\n        <div slDateRangePicker [defaultValue]=\"lisbon\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Porto hotel</label>\n        <div slDateRangePicker [defaultValue]=\"porto\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerDefaults {\n  protected readonly lisbon = { start: plainDate(2026, 11, 9), end: plainDate(2026, 11, 12) };\n  protected readonly porto = { start: plainDate(2026, 11, 12), end: plainDate(2026, 11, 14) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dock-booking",
+      "title": "dock-booking.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlDateRangePicker, type DateRange } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-dock-booking',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField required>\n      <label slFieldLabel>Dock 4 unloading window</label>\n      <div\n        slDateRangePicker\n        [isDateUnavailable]=\"isClosed\"\n        [max]=\"latest\"\n        [maxLength]=\"3\"\n        [min]=\"earliest\"\n        [value]=\"slot()\"\n        (valueChange)=\"slot.set($event.value)\"\n      ></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DateRangePickerDockBooking {\n  protected readonly isClosed = isClosed;\n  protected readonly earliest = plainDate(2026, 10, 1);\n  protected readonly latest = plainDate(2026, 11, 30);\n  protected readonly slot = signal<DateRange | null>(null);\n  protected readonly summary = computed(() => {\n    const slot = this.slot();\n    return 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  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "first-day",
+      "title": "first-day.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-first-day',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Sprint 42</label>\n      <div slDateRangePicker weekNumbers [defaultValue]=\"sprint\" [firstDayOfWeek]=\"1\"></div>\n      <span slFieldDescription>Sprints run two ISO weeks, Monday to Friday.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerFirstDay {\n  protected readonly sprint = { start: plainDate(2026, 10, 5), end: plainDate(2026, 10, 16) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "focus-and-open",
+      "title": "focus-and-open.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-focus-and-open',\n  imports: [SlButton, SlDateRangePicker, SlField, SlFieldLabel, SlInline, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Contract term</label>\n        <div slDateRangePicker #picker=\"slDateRangePicker\" [defaultValue]=\"term\"></div>\n      </div>\n      <div slInline [gap]=\"2\">\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          type=\"button\"\n          (click)=\"picker.focus('end')\"\n        >\n          Edit end date\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          type=\"button\"\n          (click)=\"picker.openSurface()\"\n        >\n          Open calendar\n        </button>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerFocusAndOpen {\n  protected readonly term = { start: plainDate(2026, 4, 1), end: plainDate(2027, 3, 31) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "footer",
+      "title": "footer.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateRangePicker, SlDateRangePickerFooter } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-footer',\n  imports: [\n    SlButton,\n    SlDateRangePicker,\n    SlDateRangePickerFooter,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n  ],\n  template: `\n    <div slField>\n      <label slFieldLabel>Stock count freeze</label>\n      <div\n        slDateRangePicker\n        #picker=\"slDateRangePicker\"\n        closeOnSelect=\"never\"\n        [defaultValue]=\"freeze\"\n      >\n        <div slDateRangePickerFooter>\n          <button slButton size=\"sm\" type=\"button\" (click)=\"picker.closeSurface()\">Done</button>\n        </div>\n      </div>\n      <span slFieldDescription>The calendar stays open until you press Done.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerFooter {\n  protected readonly freeze = { start: plainDate(2026, 10, 30), end: plainDate(2026, 11, 1) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule, type ValidatorFn } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateRangePicker, type DateRange } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\nimport { toISODate } from '@slotted/core/date';\n\n/** Both ends present: Validators.required accepts a range with one end open. */\nconst bothEnds: ValidatorFn = (control) => {\n  const range = control.value as DateRange | null;\n  return range?.start && range.end ? null : { bothEnds: true };\n};\n\n@Component({\n  selector: 'app-date-range-picker-form',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlDateRangePicker,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <form novalidate [formGroup]=\"form\" (ngSubmit)=\"submit()\" (reset)=\"clear()\">\n      <div slStack [gap]=\"5\">\n        <div slField required [invalid]=\"error() === '' ? undefined : true\">\n          <label slFieldLabel>Code freeze</label>\n          <div\n            slDateRangePicker\n            startName=\"freezeStart\"\n            endName=\"freezeEnd\"\n            formControlName=\"freeze\"\n          ></div>\n          <span slFieldError live=\"polite\" reserve>{{ error() }}</span>\n        </div>\n        <div slInline [gap]=\"3\" align=\"center\">\n          <button slButton type=\"submit\">Save freeze</button>\n          <button slButton type=\"reset\" tone=\"secondary\" variant=\"outline\">Reset</button>\n          @if (saved(); as message) {\n            <span slText size=\"sm\" tone=\"muted\">{{ message }}</span>\n          }\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class DateRangePickerForm {\n  protected readonly form = new FormGroup({\n    freeze: new FormControl<DateRange | null>(null, bothEnds),\n  });\n  private readonly value = toSignal(this.form.controls.freeze.valueChanges, {\n    initialValue: this.form.controls.freeze.value,\n  });\n  private readonly submitted = signal(false);\n  protected readonly saved = signal<string | null>(null);\n  protected readonly error = computed(() => {\n    this.value();\n    const control = this.form.controls.freeze;\n    if (control.hasError('slottedDateRangeOrder')) {\n      return 'The end date must be on or after the start date.';\n    }\n    if (this.submitted() && control.hasError('bothEnds')) return 'Enter a start and an end date.';\n    return '';\n  });\n\n  protected submit(): void {\n    this.submitted.set(true);\n    const range = this.form.controls.freeze.value;\n    this.saved.set(\n      this.form.valid && range?.start && range.end\n        ? `Freeze saved from ${toISODate(range.start)} to ${toISODate(range.end)}.`\n        : null,\n    );\n  }\n\n  protected clear(): void {\n    this.submitted.set(false);\n    this.saved.set(null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "locale",
+      "title": "locale.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-locale',\n  imports: [SlDateRangePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Peak season, United States (en-US)</label>\n        <div slDateRangePicker locale=\"en-US\" [defaultValue]=\"season\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Peak season, United Kingdom (en-GB)</label>\n        <div slDateRangePicker locale=\"en-GB\" [defaultValue]=\"season\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Peak season, Germany (de-DE)</label>\n        <div slDateRangePicker locale=\"de-DE\" [defaultValue]=\"season\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerLocale {\n  protected readonly season = { start: plainDate(2026, 11, 2), end: plainDate(2026, 12, 23) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "months",
+      "title": "months.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateRangePicker } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-months',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Promotion window</label>\n      <div slDateRangePicker [defaultValue]=\"promotion\" [months]=\"1\"></div>\n      <span slFieldDescription>Promotions run inside one month.</span>\n    </div>\n  `,\n})\nexport class DateRangePickerMonths {\n  protected readonly promotion = { start: plainDate(2026, 10, 5), end: plainDate(2026, 10, 18) };\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "position",
+      "title": "position.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlDateRangePicker, type DateRange } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, toISODate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-range-picker-position',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Scissor lift rental</label>\n      <div\n        slDateRangePicker\n        defaultPosition=\"end\"\n        [value]=\"rental()\"\n        (valueChange)=\"rental.set($event.value)\"\n      ></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DateRangePickerPosition {\n  protected readonly rental = signal<DateRange | null>({\n    start: plainDate(2026, 10, 5),\n    end: plainDate(2026, 10, 9),\n  });\n  protected readonly summary = computed(() => {\n    const end = this.rental()?.end;\n    return end\n      ? `Returns ${toISODate(end)}. Open the calendar and press a day to move the return date.`\n      : 'Choose a return date.';\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "reporting-filter",
+      "title": "reporting-filter.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport {\n  SlDateRangePicker,\n  SlDateRangePickerPreset,\n  SlDateRangePickerPresets,\n  type DateRange,\n} from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlGrid } from '@slotted/angular/grid';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlStatCard,\n  SlStatCardComparison,\n  SlStatCardDelta,\n  SlStatCardFigure,\n  SlStatCardHeader,\n  SlStatCardLabel,\n  SlStatCardPeriod,\n  SlStatCardValue,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-date-range-picker-reporting-filter',\n  imports: [\n    SlDateRangePicker,\n    SlDateRangePickerPreset,\n    SlDateRangePickerPresets,\n    SlField,\n    SlFieldLabel,\n    SlGrid,\n    SlStack,\n    SlStatCard,\n    SlStatCardComparison,\n    SlStatCardDelta,\n    SlStatCardFigure,\n    SlStatCardHeader,\n    SlStatCardLabel,\n    SlStatCardPeriod,\n    SlStatCardValue,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField size=\"sm\">\n        <label slFieldLabel>Period</label>\n        <div\n          slDateRangePicker\n          [max]=\"today\"\n          [value]=\"period()\"\n          (valueChange)=\"period.set($event.value)\"\n        >\n          <div slDateRangePickerPresets>\n            @for (preset of presets; track preset.label) {\n              <button [slDateRangePickerPreset]=\"preset.range\">{{ preset.label }}</button>\n            }\n          </div>\n        </div>\n      </div>\n      <div slGrid [gap]=\"4\" minItemWidth=\"sm\">\n        <div slStatCard goodWhen=\"up\" [delta]=\"figures().delta\">\n          <div slStatCardHeader><span slStatCardLabel>Orders shipped</span></div>\n          <div slStatCardFigure>\n            <span slStatCardValue [value]=\"figures().orders\"></span>\n            <span slStatCardDelta></span>\n            <p slStatCardComparison>\n              from {{ figures().previous.toLocaleString('en-US') }}\n              <span slStatCardPeriod>previous {{ figures().days }} days</span>\n            </p>\n          </div>\n        </div>\n        <div slStatCard>\n          <div slStatCardHeader><span slStatCardLabel>Orders per day</span></div>\n          <div slStatCardFigure>\n            <span slStatCardValue [value]=\"figures().perDay\"></span>\n            <p slStatCardComparison>\n              over <span slStatCardPeriod>{{ figures().days }} days</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DateRangePickerReportingFilter {\n  protected readonly today = TODAY;\n  protected readonly presets = PRESETS;\n  protected readonly period = signal<DateRange | null>(LAST_7_DAYS);\n  protected readonly figures = computed(() => {\n    const period = this.period();\n    if (!period?.start || !period.end)\n      return { days: 0, orders: 0, previous: 0, delta: 0, perDay: 0 };\n    const days = daysBetween(period.start, period.end) + 1;\n    const orders = ordersBetween(period.start, period.end);\n    const previous = ordersBetween(addDays(period.start, -days), addDays(period.start, -1));\n    return {\n      days,\n      orders,\n      previous,\n      delta: previous === 0 ? 0 : (orders - previous) / previous,\n      perDay: Math.round(orders / days),\n    };\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typing",
+      "title": "typing.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlDateRangePicker, type DateRange } from '@slotted/angular/date-range-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { toISODate, type PlainDate } from '@slotted/core/date';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nconst HOW: Record<string, 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\n@Component({\n  selector: 'app-date-range-picker-typing',\n  imports: [SlDateRangePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Audit window</label>\n      <div slDateRangePicker [value]=\"period()\" (valueChange)=\"record($event)\"></div>\n      <span slFieldDescription>{{ last() }}</span>\n    </div>\n  `,\n})\nexport class DateRangePickerTyping {\n  protected readonly period = signal<DateRange | null>(null);\n  protected readonly last = signal('Type both dates, or choose two days in the calendar.');\n\n  protected record(request: ChangeRequest<DateRange | null>): void {\n    const value = request.value;\n    this.period.set(value);\n    this.last.set(\n      value === null\n        ? `No dates, ${HOW[request.reason]}.`\n        : `${iso(value.start)} to ${iso(value.end)}, ${HOW[request.reason]}.`,\n    );\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}