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

package/docs/date-picker.json

@@ -0,0 +1,696 @@
+{
+  "family": "date-picker",
+  "ui": "date-picker",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Date field 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"
+    ],
+    "calendar": [
+      "gregory"
+    ]
+  },
+  "members": {
+    "datePicker": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "placement": "bottom-start",
+        "closeOnSelect": "auto",
+        "calendar": "gregory",
+        "clearable": false
+      },
+      "capabilities": [
+        "value",
+        "open",
+        "placement",
+        "appearance",
+        "size",
+        "content",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "invalid",
+        "readonly",
+        "required",
+        "open"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "trigger",
+        "positioner",
+        "content",
+        "presets",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "datePicker": {
+      "imports": {
+        "source": "import { SlDatePicker, SlDatePickerPresets, SlDatePickerFooter } from '@slotted/angular/date-picker';",
+        "selector": "[slDatePicker]",
+        "exportAs": "slDatePicker"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "your own element carrying slDatePicker",
+          "required": true,
+          "purpose": "The outer box, carrying data-ui=\"date-picker\", the size, variant and calendar axes, 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 box the calendar is positioned against. It draws no frame: the date field inside it draws its own border, focus ring and states."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "The calendar button, in the slDateFieldEnd slot of the date field. Its accessible name carries the chosen date in words, 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, after the control inside the root",
+          "required": true,
+          "purpose": "The layer the calendar stands on, drawn while the calendar is open. It carries data-ui=\"date-picker\" again, data-presentation (popover or sheet) and the position the positioner writes. It takes no pointer events of its own, so a press on the page around the surface reaches the page."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"dialog\"",
+          "required": true,
+          "purpose": "The painted surface, with the same accessible name as the trigger. Its width comes from the calendar inside it, not from the field it opens from."
+        },
+        {
+          "part": "presets",
+          "element": "your own element carrying slDatePickerPresets",
+          "required": false,
+          "purpose": "A column beside the calendar for your own shortcuts. The Date Picker ships no list of shortcuts: the labels and dates belong to your product."
+        },
+        {
+          "part": "footer",
+          "element": "your own element carrying slDatePickerFooter",
+          "required": false,
+          "purpose": "A row under the calendar for your own actions."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "The selected value, whose shape follows selectionMode. Binding it makes the value controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "The starting value of an uncontrolled date picker. Read once, when the date picker initializes."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Whether the calendar is showing. Binding it makes the open state controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDatePicker",
+          "description": "Whether the calendar shows when the date picker initializes. Focus does not move into it."
+        },
+        {
+          "name": "min",
+          "type": "PlainDate",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange."
+        },
+        {
+          "name": "max",
+          "type": "PlainDate",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange."
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "(date: PlainDate) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Returns true for a date the reader cannot choose. The calendar disables it, a typed unavailable date marks the date picker invalid, and a form reports slottedDateUnavailable."
+        },
+        {
+          "name": "selectionMode",
+          "type": "'single' | 'range' | 'multiple'",
+          "defaultValue": "single",
+          "appliesTo": "SlDatePicker",
+          "description": "How many dates the calendar selects, and so the shape of the value. The field shows a single date only; for a start and an end, use slDateRangePicker."
+        },
+        {
+          "name": "months",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "SlDatePicker",
+          "description": "How many months the calendar draws side by side."
+        },
+        {
+          "name": "defaultView",
+          "type": "'day' | 'month' | 'year'",
+          "defaultValue": "day",
+          "appliesTo": "SlDatePicker",
+          "description": "The grid the calendar opens on."
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDatePicker",
+          "description": "Adds a column of ISO 8601 week numbers to the calendar."
+        },
+        {
+          "name": "fixedWeeks",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlDatePicker",
+          "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": "SlDatePicker",
+          "description": "Where the calendar opens relative to the field. When it does not fit on that side, it opens on the other."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "'auto' | 'always' | 'never'",
+          "defaultValue": "auto",
+          "appliesTo": "SlDatePicker",
+          "description": "Whether choosing a day closes the calendar. auto closes it for a single date and keeps it open for a range or several dates, which need more than one press."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the provideSlotted locale, else en-US",
+          "appliesTo": "SlDatePicker",
+          "description": "A BCP 47 tag. Sets the order, separators and placeholders of the segments, the month and weekday names, the first day of the week and the date the trigger announces."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "the browser’s time zone",
+          "appliesTo": "SlDatePicker",
+          "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": "SlDatePicker",
+          "description": "The day the calendar starts each week on, from 0 for Sunday to 6 for Saturday."
+        },
+        {
+          "name": "yearPivot",
+          "type": "number",
+          "defaultValue": "20",
+          "appliesTo": "SlDatePicker",
+          "description": "How a two-digit typed year resolves: a year up to this many years ahead of today is read in this century, and a later one in the previous century."
+        },
+        {
+          "name": "calendar",
+          "type": "'gregory'",
+          "defaultValue": "gregory",
+          "appliesTo": "SlDatePicker",
+          "description": "The calendar system. gregory is the only value today."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlDatePicker",
+          "description": "One step of the control scale for the field and the trigger. Inside slField, an unset size follows the field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "SlDatePicker",
+          "description": "How much frame the field draws at rest: a border, a filled ground, or neither."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Disables the segments and the trigger, and takes both out of the tab order. Read from the form control, then from the enclosing slField, when unset."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Keeps the date legible and focusable and disables the trigger, so the calendar cannot open. Read from the enclosing slField when unset."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Draws the frame and the focus ring in the danger tone and sets aria-invalid. A date outside min and max, or refused by isDateUnavailable, sets it on its own."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Sets aria-required on the field. Read from the enclosing slField when unset. In a form, add Validators.required."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDatePicker",
+          "description": "Adds a clear button to the field while it holds a date. It sets the value to null and returns focus to the field."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Adds a hidden input with this name that submits the date as an ISO 8601 string, such as 2026-09-30."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DatePickerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Replaces the trigger’s accessible name, key by key: choose while no date is set, and change, with the date in its {date} slot, once one is."
+        },
+        {
+          "name": "slDatePickerPresets",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Marks your own element as the shortcuts column beside the calendar."
+        },
+        {
+          "name": "slDatePickerFooter",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Marks your own element as the actions row under the calendar."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideDatePickerDefaults",
+          "type": "Provider",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, placement, closeOnSelect, calendar, size and variant for every slDatePicker under the injector. An input on one date picker wins."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "NG_VALUE_ACCESSOR",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "formControl, formControlName and ngModel bind the value, a form reset empties the field, and the form’s disabled state reaches the date picker."
+        },
+        {
+          "name": "Validator",
+          "type": "NG_VALIDATORS",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "Reports slottedDateRange, with min, max and the date, for a date outside the bounds, and slottedDateUnavailable for a date isDateUnavailable refuses. required is left to Validators.required."
+        },
+        {
+          "name": "exportAs",
+          "type": "slDatePicker",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "A template reference to the instance, with focus(), which focuses the first segment, and openSurface() and closeSurface(), which show and hide the calendar without a bound open input. openSurface() moves focus into the calendar."
+        },
+        {
+          "name": "ng-content slots",
+          "type": "slDatePickerPresets, slDatePickerFooter",
+          "defaultValue": "—",
+          "appliesTo": "SlDatePicker",
+          "description": "The two places you fill, as directives on your own elements, so a button, a list or a toolbar keeps its own semantics."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "ChangeRequest<CalendarValue>",
+          "when": "Before the value changes, from the field or the calendar. reason is keyboard for typing and for the calendar’s keys, pointer for a press on a day, clear for the clear button and blur for a date completed when the field loses focus. cancel() keeps the current value. There is no [(value)] two-way binding: bind [value] and update it from this output."
+        },
+        {
+          "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 chosen day. cancel() keeps the current state."
+        }
+      ],
+      "accessibility": [
+        "The trigger’s accessible name carries the chosen date in words, such as “Change date, Wednesday, September 30, 2026”. Focus returns to the trigger when the calendar closes from a chosen day or from Escape, so a screen reader announces the date there.",
+        "Opening the calendar from the trigger, from Alt+ArrowDown or from openSurface() moves focus to the chosen day, or to today when no date is set. While the calendar is open, Tab and Shift+Tab cycle through the shortcuts, the calendar and the footer.",
+        "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 and returns focus to the trigger.",
+        "Alt+ArrowDown is a shortcut, never the only way in. ChromeOS turns it into PageDown before the browser receives it, so the trigger is always drawn.",
+        "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.",
+        "The field and the calendar refuse the same dates, from the same min, max and isDateUnavailable, so a date the calendar disables marks the field invalid when it is typed."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-width",
+    "--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-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-date-picker-content-border-color",
+    "--slotted-date-picker-content-color",
+    "--slotted-date-picker-content-padding",
+    "--slotted-date-picker-content-radius",
+    "--slotted-date-picker-content-shadow",
+    "--slotted-date-picker-invalid-focus-ring-color",
+    "--slotted-date-picker-radius",
+    "--slotted-date-picker-surface",
+    "--slotted-date-picker-trigger-active-background",
+    "--slotted-date-picker-trigger-color",
+    "--slotted-date-picker-trigger-hover-background",
+    "--slotted-date-picker-trigger-size",
+    "--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-radius-lg",
+    "--slotted-shadow-md",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-9",
+    "--slotted-surface-raised",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A field, a trigger and a calendar, driven by the controls below the canvas. Type into the field, or press the trigger and move through the calendar with the arrow keys: both write the same value.",
+      "language": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Due date</label>\n  <div slDatePicker name=\"dueDate\" (valueChange)=\"onValue($event)\"></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Size",
+      "note": "The three steps of the control scale. The trigger follows the field: its box is the icon plus one step of space, inside the frame, as in every other control with an inner button.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-sizes',\n  imports: [SlDatePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Shipped after</label>\n        <div slDatePicker size=\"sm\" [defaultValue]=\"shippedAfter\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Ship date</label>\n        <div slDatePicker size=\"md\" [defaultValue]=\"shipDate\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Move-in date</label>\n        <div slDatePicker size=\"lg\" [defaultValue]=\"moveIn\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerSizes {\n  protected readonly shippedAfter = plainDate(2026, 9, 1);\n  protected readonly shipDate = plainDate(2026, 9, 30);\n  protected readonly moveIn = plainDate(2026, 11, 2);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "Variant",
+      "note": "How much frame the field draws at rest. The trigger keeps its calendar icon in all three.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-variants',\n  imports: [SlDatePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Invoice date</label>\n        <div slDatePicker variant=\"outline\" [defaultValue]=\"invoiced\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Posting date</label>\n        <div slDatePicker variant=\"subtle\" [defaultValue]=\"invoiced\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Value date</label>\n        <div slDatePicker variant=\"plain\" [defaultValue]=\"valueDate\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerVariants {\n  protected readonly invoiced = plainDate(2026, 9, 30);\n  protected readonly valueDate = plainDate(2026, 10, 1);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Where the surface opens",
+      "note": "A preference: when the calendar does not fit on that side, it opens on the other, and data-placement on the positioner records the side it took.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-placement',\n  imports: [SlDatePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Opens above, from the start edge</label>\n        <div slDatePicker placement=\"top-start\" [defaultValue]=\"today\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Opens below, from the end edge</label>\n        <div slDatePicker placement=\"bottom-end\" [defaultValue]=\"today\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerPlacement {\n  protected readonly today = plainDate(2026, 9, 30);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "range-bounds",
+      "title": "Bounds",
+      "note": "min and max bound the field and the calendar together: the calendar disables the days outside them, and a typed date outside them marks the date picker invalid.",
+      "language": "html",
+      "source": "<div slDatePicker [min]=\"first\" [max]=\"last\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "unavailable",
+      "title": "Days that are refused",
+      "note": "One function reaches the field and the calendar. A refused date marks the date picker invalid when it is typed, and is disabled in the calendar.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { dayOfWeek, plainDate, toISODate, type PlainDate } from '@slotted/core/date';\n\n/** Columbus Day, Veterans Day, Thanksgiving and Christmas Day, 2026. */\nconst HOLIDAYS = new Set(['2026-10-12', '2026-11-11', '2026-11-26', '2026-12-25']);\n\nconst isClosed = (date: PlainDate) =>\n  dayOfWeek(date) === 0 || dayOfWeek(date) === 6 || HOLIDAYS.has(toISODate(date));\n\n@Component({\n  selector: 'app-date-picker-unavailable',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Pickup date</label>\n      <div slDatePicker [defaultValue]=\"pickup\" [isDateUnavailable]=\"isClosed\"></div>\n      <span slFieldDescription>The Reno dock is closed on weekends and federal holidays.</span>\n    </div>\n  `,\n})\nexport class DatePickerUnavailable {\n  protected readonly pickup = plainDate(2026, 10, 13);\n  protected readonly isClosed = isClosed;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "presets",
+      "title": "Shortcuts and actions",
+      "note": "The two slots you fill: shortcuts beside the calendar and actions under it. The Date Picker ships no list of shortcuts, because the labels and dates belong to your product.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker, SlDatePickerPresets } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { addDays, isPlainDate, plainDate, type PlainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\nconst PRESETS = [\n  { label: 'Today', date: TODAY },\n  { label: 'Tomorrow', date: addDays(TODAY, 1) },\n  { label: 'Next Monday', date: plainDate(2026, 10, 5) },\n  { label: 'In 2 weeks', date: addDays(TODAY, 14) },\n];\n\n@Component({\n  selector: 'app-date-picker-presets',\n  imports: [SlButton, SlDatePicker, SlDatePickerPresets, SlField, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Dispatch date</label>\n      <div slDatePicker #picker=\"slDatePicker\" [value]=\"date()\" (valueChange)=\"set($event.value)\">\n        <div slDatePickerPresets>\n          @for (preset of presets; track preset.label) {\n            <button\n              slButton\n              size=\"sm\"\n              variant=\"ghost\"\n              type=\"button\"\n              (click)=\"date.set(preset.date); picker.closeSurface()\"\n            >\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerPresets {\n  protected readonly presets = PRESETS;\n  protected readonly date = signal<PlainDate | null>(TODAY);\n\n  protected set(value: CalendarValue): void {\n    this.date.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Disabled and read-only both disable the trigger, so the calendar cannot open. Invalid draws the frame and the focus ring in the danger tone.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-states',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldError, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField invalid required>\n        <label slFieldLabel>Delivery date</label>\n        <div slDatePicker [defaultValue]=\"delivery\"></div>\n        <span slFieldError>The delivery date is before the order date, September 30, 2026.</span>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Order date</label>\n        <div slDatePicker [defaultValue]=\"ordered\"></div>\n        <span slFieldDescription>Set when the order was placed.</span>\n      </div>\n      <div slField disabled>\n        <label slFieldLabel>Return by</label>\n        <div slDatePicker [defaultValue]=\"returnBy\"></div>\n        <span slFieldDescription>Returns open once the order is delivered.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerStates {\n  protected readonly delivery = plainDate(2026, 9, 28);\n  protected readonly ordered = plainDate(2026, 9, 30);\n  protected readonly returnBy = plainDate(2026, 10, 30);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "name adds a hidden input that submits the date as an ISO 8601 string, so a plain form post sends 2026-09-09 whether the reader typed the date or chose it. formControlName binds it to a reactive form.",
+      "language": "html",
+      "source": "<form action=\"/bookings\" method=\"post\">\n  <div slDatePicker name=\"checkIn\" required></div>\n  <button type=\"submit\">Book</button>\n</form>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "On a narrow touch screen",
+      "note": "Under 480 pixels on a coarse pointer, the calendar opens as a sheet attached to the bottom of the viewport. The markup stays the same, and data-presentation on the positioner records which presentation is showing.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker, SlDatePickerPresets } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { addDays, isPlainDate, plainDate, type PlainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\n@Component({\n  selector: 'app-date-picker-narrow',\n  imports: [SlButton, SlDatePicker, SlDatePickerPresets, SlField, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Proof of delivery date</label>\n      <div slDatePicker #picker=\"slDatePicker\" [value]=\"date()\" (valueChange)=\"set($event.value)\">\n        <div slDatePickerPresets>\n          <button\n            slButton\n            size=\"sm\"\n            variant=\"ghost\"\n            type=\"button\"\n            (click)=\"date.set(today); picker.closeSurface()\"\n          >\n            Today\n          </button>\n          <button\n            slButton\n            size=\"sm\"\n            variant=\"ghost\"\n            type=\"button\"\n            (click)=\"date.set(yesterday); picker.closeSurface()\"\n          >\n            Yesterday\n          </button>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerNarrow {\n  protected readonly today = TODAY;\n  protected readonly yesterday = addDays(TODAY, -1);\n  protected readonly date = signal<PlainDate | null>(null);\n\n  protected set(value: CalendarValue): void {\n    this.date.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition and escape hatches",
+      "note": "provideDatePickerDefaults sets the time zone and the placement once, provideSlotted sets the language and the trigger’s names, exportAs returns focus(), openSurface() and closeSurface(), and cancel() refuses a value before it is applied.",
+      "language": "html",
+      "source": "<div slDatePicker #picker=\"slDatePicker\" (valueChange)=\"$event.cancel()\"></div>\n<button type=\"button\" (click)=\"picker.openSurface()\">Open calendar</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Alt+ArrowDown opens the calendar from the field and moves focus to the chosen day. Escape closes it and returns focus to the trigger; while the calendar shows months or years, Escape first returns to the day grid.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-keyboard',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Dispatch date</label>\n      <div\n        slDatePicker\n        [defaultValue]=\"dispatch\"\n        [messages]=\"messages\"\n        (openChange)=\"record($event)\"\n      ></div>\n      <span slFieldDescription>{{ last() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerKeyboard {\n  protected readonly dispatch = plainDate(2026, 9, 30);\n  protected readonly messages = {\n    choose: 'Choose dispatch date',\n    change: 'Change dispatch date, {date}',\n  };\n  protected readonly last = signal('Focus the field 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": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\n\n@Component({\n  selector: 'app-date-picker-basic',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Requested delivery date</label>\n      <div slDatePicker name=\"deliveryDate\"></div>\n      <span slFieldDescription>Type the date or choose it from the calendar.</span>\n    </div>\n  `,\n})\nexport class DatePickerBasic {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bounds",
+      "title": "bounds.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-bounds',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Delivery window</label>\n      <div slDatePicker [defaultValue]=\"delivery\" [max]=\"last\" [min]=\"first\"></div>\n      <span slFieldDescription>Carriers book October 2026 only.</span>\n    </div>\n  `,\n})\nexport class DatePickerBounds {\n  protected readonly delivery = plainDate(2026, 10, 15);\n  protected readonly first = plainDate(2026, 10, 1);\n  protected readonly last = plainDate(2026, 10, 31);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "clearable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-clearable',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Hold shipment until</label>\n      <div slDatePicker clearable [defaultValue]=\"holdUntil\"></div>\n      <span slFieldDescription>Clear the date to release the shipment.</span>\n    </div>\n  `,\n})\nexport class DatePickerClearable {\n  protected readonly holdUntil = plainDate(2026, 10, 9);\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 type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  addDays,\n  createDateFormat,\n  isPlainDate,\n  plainDate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\nconst words = createDateFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-date-picker-controlled',\n  imports: [SlButton, SlDatePicker, SlField, SlFieldDescription, SlFieldLabel, SlInline, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Follow up with Harbor Freightways</label>\n        <div slDatePicker [value]=\"followUp()\" (valueChange)=\"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)=\"inDays(7)\"\n        >\n          In 1 week\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          type=\"button\"\n          (click)=\"inDays(14)\"\n        >\n          In 2 weeks\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"ghost\"\n          type=\"button\"\n          (click)=\"followUp.set(null)\"\n        >\n          No follow-up\n        </button>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerControlled {\n  protected readonly followUp = signal<PlainDate | null>(addDays(TODAY, 7));\n  protected readonly summary = computed(() => {\n    const date = this.followUp();\n    return date === null ? 'No follow-up scheduled.' : `Reminder on ${words.describe(date)}.`;\n  });\n\n  protected set(value: CalendarValue): void {\n    this.followUp.set(isPlainDate(value) ? value : null);\n  }\n\n  protected inDays(days: number): void {\n    this.followUp.set(addDays(TODAY, days));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "default-view",
+      "title": "default-view.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-default-view',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Date of incorporation</label>\n      <div slDatePicker defaultView=\"year\" [max]=\"today\"></div>\n      <span slFieldDescription>As printed on the certificate of incorporation.</span>\n    </div>\n  `,\n})\nexport class DatePickerDefaultView {\n  protected readonly today = plainDate(2026, 9, 30);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { provideDatePickerDefaults, SlDatePicker } from '@slotted/angular/date-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-picker-defaults',\n  imports: [SlDatePicker, SlField, SlFieldLabel, SlStack],\n  providers: [\n    provideDatePickerDefaults({ size: 'sm', variant: 'subtle', placement: 'bottom-end' }),\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Posted after</label>\n        <div slDatePicker [defaultValue]=\"postedAfter\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Due before</label>\n        <div slDatePicker [defaultValue]=\"dueBefore\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerDefaults {\n  protected readonly postedAfter = plainDate(2026, 9, 1);\n  protected readonly dueBefore = plainDate(2026, 10, 31);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "first-day",
+      "title": "first-day.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-first-day',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Shift starts</label>\n      <div slDatePicker locale=\"en-US\" [defaultValue]=\"shift\" [firstDayOfWeek]=\"1\"></div>\n      <span slFieldDescription>Rosters run Monday to Sunday.</span>\n    </div>\n  `,\n})\nexport class DatePickerFirstDay {\n  protected readonly shift = plainDate(2026, 9, 30);\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 { SlDatePicker } from '@slotted/angular/date-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-picker-focus-and-open',\n  imports: [SlButton, SlDatePicker, SlField, SlFieldLabel, SlInline, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Contract renewal date</label>\n        <div slDatePicker #picker=\"slDatePicker\" [defaultValue]=\"renewal\"></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()\"\n        >\n          Edit 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 DatePickerFocusAndOpen {\n  protected readonly renewal = 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 { SlDatePicker, SlDatePickerFooter } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-footer',\n  imports: [SlButton, SlDatePicker, SlDatePickerFooter, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Stock count date</label>\n      <div slDatePicker #picker=\"slDatePicker\" closeOnSelect=\"never\" [defaultValue]=\"count\">\n        <div slDatePickerFooter>\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 DatePickerFooter {\n  protected readonly count = plainDate(2026, 10, 3);\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, Validators } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDatePicker } from '@slotted/angular/date-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 { plainDate, toISODate, type PlainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-form',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlDatePicker,\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>Delivery date</label>\n          <div\n            slDatePicker\n            name=\"deliveryDate\"\n            formControlName=\"deliveryDate\"\n            [min]=\"earliest\"\n          ></div>\n          <span slFieldError live=\"polite\" reserve>{{ error() }}</span>\n        </div>\n        <div slInline [gap]=\"3\" align=\"center\">\n          <button slButton type=\"submit\">Book delivery</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 DatePickerForm {\n  protected readonly earliest = plainDate(2026, 10, 1);\n  protected readonly form = new FormGroup({\n    deliveryDate: new FormControl<PlainDate | null>(null, Validators.required),\n  });\n  private readonly value = toSignal(this.form.controls.deliveryDate.valueChanges, {\n    initialValue: this.form.controls.deliveryDate.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.deliveryDate;\n    if (control.hasError('slottedDateRange')) return 'Choose October 1, 2026 or later.';\n    if (this.submitted() && control.hasError('required')) return 'Choose a delivery date.';\n    return '';\n  });\n\n  protected submit(): void {\n    this.submitted.set(true);\n    const date = this.form.controls.deliveryDate.value;\n    this.saved.set(\n      this.form.valid && date !== null ? `Delivery booked for ${toISODate(date)}.` : null,\n    );\n  }\n\n  protected clear(): void {\n    this.submitted.set(false);\n    this.saved.set(null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "invoice-due",
+      "title": "invoice-due.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  addDays,\n  createDateFormat,\n  isPlainDate,\n  plainDate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TERMS = [\n  { value: 'receipt', label: 'Due on receipt', days: 0 },\n  { value: 'net-15', label: 'Net 15', days: 15 },\n  { value: 'net-30', label: 'Net 30', days: 30 },\n  { value: 'net-60', label: 'Net 60', days: 60 },\n];\nconst words = createDateFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-date-picker-invoice-due',\n  imports: [\n    SlDatePicker,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlSelect,\n    SlSelectItem,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField required>\n        <label slFieldLabel>Invoice date</label>\n        <div slDatePicker [value]=\"issued()\" (valueChange)=\"setIssued($event.value)\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Payment terms</label>\n        <sl-select [items]=\"terms\" [(value)]=\"term\">\n          @for (option of terms; track option.value) {\n            <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n          }\n        </sl-select>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Due date</label>\n        <div slDatePicker [value]=\"due()\"></div>\n        <span slFieldDescription>{{ summary() }}</span>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerInvoiceDue {\n  protected readonly terms = TERMS;\n  protected readonly issued = signal<PlainDate | null>(plainDate(2026, 9, 30));\n  protected readonly term = signal<SelectSelection>('net-30');\n  protected readonly due = computed(() => {\n    const issued = this.issued();\n    const days = TERMS.find((option) => option.value === this.term())?.days ?? 0;\n    return issued === null ? null : addDays(issued, days);\n  });\n  protected readonly summary = computed(() => {\n    const due = this.due();\n    return due === null ? 'Set the invoice date first.' : `Payment is due ${words.describe(due)}.`;\n  });\n\n  protected setIssued(value: CalendarValue): void {\n    this.issued.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "locale",
+      "title": "locale.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-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-picker-locale',\n  imports: [SlDatePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Ship date, United States (en-US)</label>\n        <div slDatePicker locale=\"en-US\" [defaultValue]=\"shipDate\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Ship date, United Kingdom (en-GB)</label>\n        <div slDatePicker locale=\"en-GB\" [defaultValue]=\"shipDate\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Ship date, Germany (de-DE)</label>\n        <div slDatePicker locale=\"de-DE\" [defaultValue]=\"shipDate\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Ship date, Japan (ja-JP)</label>\n        <div slDatePicker locale=\"ja-JP\" [defaultValue]=\"shipDate\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerLocale {\n  protected readonly shipDate = plainDate(2026, 9, 30);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "months",
+      "title": "months.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-months',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Installation appointment</label>\n      <div slDatePicker [defaultValue]=\"appointment\" [months]=\"2\"></div>\n      <span slFieldDescription>Technicians book up to eight weeks ahead.</span>\n    </div>\n  `,\n})\nexport class DatePickerMonths {\n  protected readonly appointment = plainDate(2026, 10, 20);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "report-date",
+      "title": "report-date.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker, SlDatePickerPresets } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { createDateFormat, isPlainDate, plainDate, type PlainDate } from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\nconst PRESETS = [\n  { label: 'Today', date: TODAY },\n  { label: 'End of last month', date: plainDate(2026, 8, 31) },\n  { label: 'End of last quarter', date: plainDate(2026, 6, 30) },\n  { label: 'End of fiscal 2025', date: plainDate(2025, 12, 31) },\n];\nconst words = createDateFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-date-picker-report-date',\n  imports: [SlButton, SlDatePicker, SlDatePickerPresets, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Balance sheet as of</label>\n      <div\n        slDatePicker\n        #picker=\"slDatePicker\"\n        [max]=\"today\"\n        [value]=\"asOf()\"\n        (valueChange)=\"set($event.value)\"\n      >\n        <div slDatePickerPresets>\n          @for (preset of presets; track preset.label) {\n            <button\n              slButton\n              size=\"sm\"\n              variant=\"ghost\"\n              type=\"button\"\n              (click)=\"asOf.set(preset.date); picker.closeSurface()\"\n            >\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerReportDate {\n  protected readonly today = TODAY;\n  protected readonly presets = PRESETS;\n  protected readonly asOf = signal<PlainDate | null>(plainDate(2026, 8, 31));\n  protected readonly summary = computed(() => {\n    const asOf = this.asOf();\n    return asOf === null\n      ? 'Choose the closing date of the report.'\n      : `Balances close at the end of ${words.describe(asOf)}.`;\n  });\n\n  protected set(value: CalendarValue): void {\n    this.asOf.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "shipping-date",
+      "title": "shipping-date.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  addDays,\n  compareDate,\n  createDateFormat,\n  dayOfWeek,\n  isPlainDate,\n  plainDate,\n  toISODate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst ORDERED = plainDate(2026, 9, 30);\nconst HOLIDAYS = new Set(['2026-10-12', '2026-11-11', '2026-11-26', '2026-12-25']);\nconst words = createDateFormat({ locale: 'en-US' });\n\nconst isBusinessDay = (date: PlainDate) =>\n  dayOfWeek(date) !== 0 && dayOfWeek(date) !== 6 && !HOLIDAYS.has(toISODate(date));\n\nconst addBusinessDays = (from: PlainDate, count: number) => {\n  let date = from;\n  for (let added = 0; added < count;) {\n    date = addDays(date, 1);\n    if (isBusinessDay(date)) added += 1;\n  }\n  return date;\n};\n\nconst businessDaysBetween = (from: PlainDate, to: PlainDate) => {\n  let count = 0;\n  for (let date = addDays(from, 1); compareDate(date, to) <= 0; date = addDays(date, 1)) {\n    if (isBusinessDay(date)) count += 1;\n  }\n  return count;\n};\n\nconst EARLIEST = addBusinessDays(ORDERED, 2);\nconst LATEST = addBusinessDays(ORDERED, 40);\n\n@Component({\n  selector: 'app-date-picker-shipping-date',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField required>\n      <label slFieldLabel>Ship date</label>\n      <div\n        slDatePicker\n        [isDateUnavailable]=\"isClosed\"\n        [max]=\"latest\"\n        [min]=\"earliest\"\n        [value]=\"date()\"\n        (valueChange)=\"set($event.value)\"\n      ></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerShippingDate {\n  protected readonly earliest = EARLIEST;\n  protected readonly latest = LATEST;\n  protected readonly isClosed = (day: PlainDate) => !isBusinessDay(day);\n  protected readonly date = signal<PlainDate | null>(EARLIEST);\n  protected readonly summary = computed(() => {\n    const date = this.date();\n    return date === null\n      ? 'Orders ship 2 to 40 business days after they are placed.'\n      : `Ships ${words.describe(date)}, ${businessDaysBetween(ORDERED, date)} business days after the order.`;\n  });\n\n  protected set(value: CalendarValue): void {\n    this.date.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "time-zones",
+      "title": "time-zones.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\nimport { isPlainDate, plainDate, toISODate, type PlainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-time-zones',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Settlement date, Auckland desk</label>\n        <div\n          slDatePicker\n          timeZone=\"Pacific/Auckland\"\n          [value]=\"date()\"\n          (valueChange)=\"set($event.value)\"\n        ></div>\n        <span slFieldDescription>Today is marked by the date in Auckland.</span>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ readout() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerTimeZones {\n  protected readonly date = signal<PlainDate | null>(plainDate(2026, 9, 30));\n  protected readonly readout = computed(() => {\n    const date = this.date();\n    return date === null\n      ? 'Value: null'\n      : `Value: ${JSON.stringify(date)}, sent as ${toISODate(date)}`;\n  });\n\n  protected set(value: CalendarValue): void {\n    this.date.set(isPlainDate(value) ? value : null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typing",
+      "title": "typing.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { isPlainDate, plainDate, toISODate } from '@slotted/core/date';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nconst REASONS: Record<string, string> = {\n  keyboard: 'from the keyboard',\n  pointer: 'pressed in the calendar',\n  clear: 'cleared',\n  blur: 'completed when the field lost focus',\n};\n\n@Component({\n  selector: 'app-date-picker-typing',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Goods received on</label>\n      <div slDatePicker [defaultValue]=\"received\" (valueChange)=\"record($event)\"></div>\n      <span slFieldDescription>{{ change() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerTyping {\n  protected readonly received = plainDate(2026, 9, 30);\n  protected readonly change = signal('No change yet.');\n\n  protected record(request: ChangeRequest<CalendarValue>): void {\n    const date = isPlainDate(request.value) ? toISODate(request.value) : 'empty';\n    this.change.set(`${date}, ${REASONS[request.reason] ?? request.reason}.`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "week-numbers",
+      "title": "week-numbers.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { isPlainDate, isoWeekNumber, plainDate, type PlainDate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-week-numbers',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Production run</label>\n      <div\n        slDatePicker\n        weekNumbers\n        [firstDayOfWeek]=\"1\"\n        [value]=\"date()\"\n        (valueChange)=\"set($event.value)\"\n      ></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerWeekNumbers {\n  protected readonly date = signal<PlainDate | null>(plainDate(2026, 9, 30));\n\n  protected set(value: CalendarValue): void {\n    this.date.set(isPlainDate(value) ? value : null);\n  }\n\n  protected readonly summary = computed(() => {\n    const date = this.date();\n    return date === null ? 'No week planned.' : `Planned for week ${isoWeekNumber(date)}.`;\n  });\n}\n",
+      "verdict": "example"
+    }
+  ]
+}