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

package/docs/time-range-picker.json

@@ -0,0 +1,924 @@
+{
+  "family": "time-range-picker",
+  "ui": "time-range-picker",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Start and end times with a picker."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "placement": [
+      "bottom-start",
+      "bottom",
+      "bottom-end",
+      "top-start",
+      "top",
+      "top-end"
+    ],
+    "closeOnSelect": [
+      "auto",
+      "always",
+      "never"
+    ],
+    "unavailableOptions": [
+      "disable",
+      "hide"
+    ],
+    "hourCycle": [
+      12,
+      24
+    ],
+    "granularity": [
+      "hour",
+      "minute",
+      "second"
+    ],
+    "position": [
+      "start",
+      "end"
+    ]
+  },
+  "members": {
+    "timeRangePicker": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "placement": "bottom-start",
+        "closeOnSelect": "auto",
+        "step": 900,
+        "maxOptions": 1440,
+        "unavailableOptions": "disable",
+        "granularity": "minute",
+        "contiguous": true,
+        "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",
+        "trigger",
+        "summary",
+        "clear",
+        "hidden-input",
+        "positioner",
+        "content",
+        "head",
+        "tabs",
+        "tab",
+        "tab-label",
+        "tab-value",
+        "field",
+        "now",
+        "hint",
+        "length",
+        "limit",
+        "presets",
+        "preset",
+        "panel",
+        "list",
+        "option",
+        "option-duration",
+        "empty",
+        "footer",
+        "done"
+      ]
+    }
+  },
+  "docs": {
+    "timeRangePicker": {
+      "imports": {
+        "source": "import { SlTimeRangePicker, SlTimeRangePickerPreset, SlTimeRangePickerPresets, SlTimeRangePickerFooter, SlTimeRangePickerOption } from '@slotted/angular/time-range-picker';",
+        "selector": "[slTimeRangePicker]",
+        "exportAs": "slTimeRangePicker"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the consumer’s own element",
+          "required": true,
+          "purpose": "The box the family is selected by. Carries data-ui=\"time-range-picker\", the axes, data-granularity, data-open and the state attributes. The consumer writes this element, so its classes, its attributes and its own directives are its own."
+        },
+        {
+          "part": "control",
+          "element": "div",
+          "required": true,
+          "purpose": "The frame: one line at the control height, at any width, and what the positioner measures. Two segmented fields stood here first and broke it into two lines in a narrow form column; the current end’s field lives in the band now."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "Fills the frame and opens the surface. Its accessible name carries both ends in words and the duration, because focus returns here when the surface closes. The clock glyph sits at its reading end."
+        },
+        {
+          "part": "summary",
+          "element": "span",
+          "required": true,
+          "purpose": "The value written short — \"14:00 – 16:30\" — or the placeholder with data-placeholder. Cut with an ellipsis where it does not fit; the trigger’s name carries it whole."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Empties both ends with the clear reason. Drawn with clearable, and the only clear in the family: the field in the band draws none."
+        },
+        {
+          "part": "hidden-input",
+          "element": "input",
+          "required": true,
+          "purpose": "Two, under startName and endName, carrying HH:mm:ss for a plain form post. They live in the frame because the surface is portalled and unmounted while it is closed."
+        },
+        {
+          "part": "positioner",
+          "element": "div",
+          "required": false,
+          "purpose": "The layer the surface stands on, and what packages/core/src/positioner writes its position and custom properties onto. Carries data-presentation: popover, or sheet on a coarse pointer below 480 pixels."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": false,
+          "purpose": "The painted surface, carrying role=\"dialog\" and the same name as the trigger. The anchor’s width, between sixteen and twenty-two rems, so a column is never too tight to read a time and its duration in."
+        },
+        {
+          "part": "head",
+          "element": "div",
+          "required": false,
+          "purpose": "The band, three rows: the two tabs; the field of the current end and now; the hint, then the duration and the limit. It renders at the surface’s width and contributes nothing to it."
+        },
+        {
+          "part": "tabs",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"tablist\": the two ends, one at a time."
+        },
+        {
+          "part": "tab",
+          "element": "button",
+          "required": false,
+          "purpose": "role=\"tab\", data-position=\"start\" or \"end\". aria-selected and data-current on the current end, painted as an underline; data-placeholder while the end has no value. Its accessible name — the label and the value — names the list."
+        },
+        {
+          "part": "tab-label",
+          "element": "span",
+          "required": false,
+          "purpose": "\"Start\" or \"End\", from the start and end messages."
+        },
+        {
+          "part": "tab-value",
+          "element": "span",
+          "required": false,
+          "purpose": "The end written short — \"14:00\" — or a dash."
+        },
+        {
+          "part": "field",
+          "element": "div",
+          "required": false,
+          "purpose": "Holds the current end’s time-field in variant=\"plain\", data-position. Drawn on a fine pointer only: a segment is a spinbutton and raises no keyboard on a phone."
+        },
+        {
+          "part": "now",
+          "element": "button",
+          "required": false,
+          "purpose": "Beside the field: writes the current time — referenceTime, or the clock — into the current end, and follows the focus rule."
+        },
+        {
+          "part": "hint",
+          "element": "span",
+          "required": false,
+          "purpose": "What the next press should be, or what is wrong — \"End: choose a time\", \"The end must come after the start\" — from the chooseTime, order, length, unavailable and bounds messages. data-invalid while it names a problem; aria-describedby of the list and the field. Empty while the work is whole and valid."
+        },
+        {
+          "part": "length",
+          "element": "span",
+          "required": false,
+          "purpose": "\"2 hr 30 min\": the duration of the run the pending end would make, or of the work. A polite live region, so a screen reader hears it on every arrow. data-pending while it is a proposal."
+        },
+        {
+          "part": "limit",
+          "element": "span",
+          "required": false,
+          "purpose": "\"30 min to 4 hr\", drawn while minLength or maxLength is set."
+        },
+        {
+          "part": "presets",
+          "element": "div",
+          "required": false,
+          "purpose": "The row of the consumer’s own shortcuts, rendered from the presets prop, between the band and the panel; it wraps."
+        },
+        {
+          "part": "preset",
+          "element": "button",
+          "required": false,
+          "purpose": "One shortcut, a TimeRangePickerPreset. Writes its range with the select reason and carries data-selected while the value equals it."
+        },
+        {
+          "part": "panel",
+          "element": "div",
+          "required": false,
+          "purpose": "The current end, one at a time: data-position=\"start\" or \"end\". Its list already refuses what the other end of the work refuses, and choosing an end moves the tab to the other."
+        },
+        {
+          "part": "list",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"listbox\": the times of the current end, at every step, and the only thing that scrolls. Eight rows and half of the ninth, so it is seen to scroll; named by the current tab. data-truncated when it stops at maxOptions."
+        },
+        {
+          "part": "option",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"option\", one whole time. data-selected for the end this list holds, data-current for the highlight, data-disabled and aria-disabled for a time a bound, the predicate or the other end refuses."
+        },
+        {
+          "part": "option-duration",
+          "element": "span",
+          "required": false,
+          "purpose": "Beside the time, the duration the run would have with the other end as it stands — \"15:00 · 1 hr\". A refused row carries none. The slTimeRangePickerOption template replaces the row’s content, this span included."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "Drawn in place of a list when its end has no time available at all."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s own actions, rendered from the footer prop, and done at its reading end."
+        },
+        {
+          "part": "done",
+          "element": "button",
+          "required": false,
+          "purpose": "Closes with what is written: a whole work is emitted as the value first; one end alone stays as it is. Always drawn — a sheet that fills the screen has no outside to press."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "TimeRange | null",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "{ start, end }, each end nullable. Present means the consumer owns it. Both ends null is null."
+        },
+        {
+          "name": "defaultValue",
+          "type": "TimeRange | null",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "What it starts from when nobody else writes one. Read once."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Whether the surface is showing. Present means the consumer owns it."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Whether it opens already showing."
+        },
+        {
+          "name": "position",
+          "type": "'start' | 'end'",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The end being edited: the field and the panel carrying data-current, and where focus lands when the surface opens. Present means the consumer owns it."
+        },
+        {
+          "name": "defaultPosition",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Where editing starts."
+        },
+        {
+          "name": "highlighted",
+          "type": "{ start: PlainTime | null; end: PlainTime | null }",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The highlighted option of each end’s list. Present means the consumer owns it. Moving it moves no value."
+        },
+        {
+          "name": "defaultHighlighted",
+          "type": "{ start: PlainTime | null; end: PlainTime | null }",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Where the highlights start; otherwise a list opens on its end, or on the nearest offered step."
+        },
+        {
+          "name": "min",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The earliest time both fields and both lists accept. Crossed with the work: the start cannot step past the end, nor the end before the start."
+        },
+        {
+          "name": "max",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The latest time any of the four accepts."
+        },
+        {
+          "name": "isTimeUnavailable",
+          "type": "(time: PlainTime) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Refuses particular times. Typed at an end, it makes the control invalid; listed, the row cannot be pressed."
+        },
+        {
+          "name": "contiguous",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Whether a run may cross an unavailable time. On, and with a start chosen, the options beyond the first unavailable one are refused in the end list; the search runs over the list, never over the seconds."
+        },
+        {
+          "name": "minLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The shortest run allowed, in seconds. The lists refuse shorter ones and the band names the limit."
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The longest run allowed, in seconds."
+        },
+        {
+          "name": "lengthLabel",
+          "type": "(seconds: number, locale?: string) => string",
+          "defaultValue": "durationLabel",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "What the band and the rows say for a duration, in the product’s own words. The default writes \"2 hr 30 min\" in the family’s locale."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "900",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Seconds between two offered times, in both lists. Ignored when options states the list. The fields’ arrows move by one of their own unit regardless."
+        },
+        {
+          "name": "options",
+          "type": "readonly PlainTime[]",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The times to offer, stated rather than stepped; the same list for both ends. The bounds and the predicate still refuse."
+        },
+        {
+          "name": "maxOptions",
+          "type": "number",
+          "defaultValue": "1440",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "How many rows a list may reach before it is cut. Cut, the list carries data-truncated and the panel’s description says the rest is typed."
+        },
+        {
+          "name": "unavailableOptions",
+          "type": "'disable' | 'hide'",
+          "defaultValue": "disable",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "What a refused time looks like in a list: drawn muted with aria-disabled, or left out."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "provideSlotted",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "BCP 47. Decides the field order, the digits, the day-period names and the duration’s units. Unset, the language in force decides."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The zone \"now\" is read in."
+        },
+        {
+          "name": "hourCycle",
+          "type": "12 | 24",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Twelve- or twenty-four-hour times. Unset, the locale decides."
+        },
+        {
+          "name": "granularity",
+          "type": "'hour' | 'minute' | 'second'",
+          "defaultValue": "minute",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "How much of a time the fields and the rows write."
+        },
+        {
+          "name": "referenceTime",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "What \"now\" is, for a story or a test; the clock otherwise. Anchors now and the relative expression."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The control scale of the frame."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "How much frame the control shows at rest."
+        },
+        {
+          "name": "placement",
+          "type": "'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'",
+          "defaultValue": "bottom-start",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Where the surface opens, before the positioner has read the room."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "'auto' | 'always' | 'never'",
+          "defaultValue": "auto",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "auto closes when a press completes the work; always closes on any press that changes the value; never closes on none."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Nothing answers; the value stays readable."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Legible and copyable; the trigger and the clear are out of the tab sequence."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The consumer’s own word. Set, it wins; unset, the family’s own rules and the field around it decide."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Reaches both fields as aria-required."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Draws one clear on the frame, which empties both ends."
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Whether the field in the band takes the relative expression — +40, 1h30, = — the way a time-field does."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TimeRangePickerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Words laid over the language in force, key by key: the two ends (start, end), the trigger’s names (choose; change with {start}, {end} and {length}; changeReversed), the hint (chooseTime with {end}; order, length, unavailable, bounds), the limit (limit.between, limit.atLeast, limit.atMost), now, done, clear, and a panel that is empty or cut short (empty, truncated)."
+        },
+        {
+          "name": "startName",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The name of the hidden input carrying the start."
+        },
+        {
+          "name": "endName",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The name of the hidden input carrying the end."
+        },
+        {
+          "name": "slTimeRangePickerPresets",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The consumer’s own shortcuts, as a directive on their own element holding slTimeRangePickerPreset buttons."
+        },
+        {
+          "name": "slTimeRangePickerFooter",
+          "type": "Directive",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The consumer’s own actions, before done in the footer, as a directive on their own element."
+        },
+        {
+          "name": "slTimeRangePickerOption",
+          "type": "Directive on ng-template",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "What one row draws. The context carries the time as $implicit, plus position, label, duration, selected, current and unavailable."
+        },
+        {
+          "name": "slTimeRangePickerPreset",
+          "type": "TimeRange | (() => TimeRange)",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePickerPreset",
+          "description": "The range the press writes, or a function resolving it at the press."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideTimeRangePickerDefaults",
+          "type": "Provider",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, hourCycle, granularity, step, maxOptions, unavailableOptions, closeOnSelect, placement, size, variant and lengthLabel once for everything under the injector. The locale and the words come from provideSlotted."
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "type": "formControl, formControlName, ngModel",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The whole { start, end } is the control’s value, and the family reports what no other validator can see: slottedTimeRangeOrder, slottedTimeRangeMin, slottedTimeRangeMax, slottedTimeRangeUnavailable and slottedTimeRangeLength."
+        },
+        {
+          "name": "exportAs",
+          "type": "slTimeRangePicker",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "Hands a template the instance, so focus(), openSurface(), closeSurface() and choose(range) are reachable without a component of its own."
+        },
+        {
+          "name": "ng-content slots",
+          "type": "slTimeRangePickerPresets, slTimeRangePickerFooter",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeRangePicker",
+          "description": "The two places a consumer fills, as directives on their own elements, so a button, a list or a toolbar all keep their own semantics."
+        },
+        {
+          "name": "slTimeRangePickerOption",
+          "type": "Directive on ng-template",
+          "defaultValue": "—",
+          "appliesTo": "list",
+          "description": "One row’s content, rendered once per option with the time, its label and its duration in the context; the row itself — role, states, keyboard, target size — stays the family’s."
+        },
+        {
+          "name": "slTimeRangePickerPreset",
+          "type": "Directive on button",
+          "defaultValue": "—",
+          "appliesTo": "presets",
+          "description": "One shortcut on the consumer’s own button: it takes the range, writes data-part and type, and composes the click — a handler that calls preventDefault keeps the value where it was."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "ChangeRequest<TimeRange | null>",
+          "when": "Before the value moves, and cancellable. keyboard, blur or clear when an end was typed in the band, select when a press in the list, now, done or a preset completed the work or changed a whole one, clear for the clear button. A press that leaves the work with one end emits nothing. There is no two-way [(value)]: a form control carries it instead."
+        },
+        {
+          "name": "openChange",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the surface opens or closes, and cancellable. pointer for the trigger and for done, keyboard for a key on the trigger, escape for the key, outsidePress for a press elsewhere, select for a press that completed the work."
+        },
+        {
+          "name": "positionChange",
+          "payload": "ChangeRequest<'start' | 'end'>",
+          "when": "Before the current end moves. pointer for a press on a tab, keyboard for the arrows on one, select when a press in the list or a preset moved it, clear for the clear button, programmatic when the panel opened on the first missing end."
+        },
+        {
+          "name": "highlightedChange",
+          "payload": "ChangeRequest<{ start; end }>",
+          "when": "Before a highlight moves in either list. keyboard for the arrows and type-ahead, pointer for a press, programmatic when a list opened or changed under it."
+        }
+      ],
+      "accessibility": [
+        "The trigger’s accessible name carries both ends in words and the duration — \"Change range, 14:00 – 16:30, 2 hr 30 min\". Focus returns to it when the surface closes, so it is where a screen-reader user is told what happened; the summary’s ellipsis removes nothing they cannot hear.",
+        "The two ends are a tablist with automatic activation, and the panel is one end at a time: the list is a listbox named by the current tab, so \"Start, 14:00\" is heard before the first option. The hint is the list’s description, so what to choose next is read with it.",
+        "The duration is a polite live region: a sighted reader sees it beside every row, a screen-reader user hears it on every arrow.",
+        "Typing lives in the band: Enter on the trigger opens onto the first segment of the current end’s field, and the field keeps every key a time-field has, the relative expression included. On a coarse pointer the field is not drawn — a segment raises no keyboard — and Enter opens onto the list.",
+        "The rule datetime-picker wrote, once per end: a press that leaves the work with one end moves the tab to the other and carries focus to its list; the press that completes it closes the panel and returns focus to the trigger. A half-drawn run never reaches a form. Done is the way out when nothing closed it.",
+        "Escape is staged. dismissable-layer listens in the capture phase, so a field with an expression open takes the key first; then the surface closes and the work is abandoned."
+      ]
+    }
+  },
+  "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-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-letter-spacing-wide",
+    "--slotted-line-height-sm",
+    "--slotted-radius-lg",
+    "--slotted-radius-none",
+    "--slotted-radius-pill",
+    "--slotted-radius-sm",
+    "--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-time-range-picker-action-active-background",
+    "--slotted-time-range-picker-action-color",
+    "--slotted-time-range-picker-action-hover-background",
+    "--slotted-time-range-picker-action-size",
+    "--slotted-time-range-picker-background",
+    "--slotted-time-range-picker-border-color",
+    "--slotted-time-range-picker-color",
+    "--slotted-time-range-picker-content-border-color",
+    "--slotted-time-range-picker-content-color",
+    "--slotted-time-range-picker-content-min-inline-size",
+    "--slotted-time-range-picker-content-padding",
+    "--slotted-time-range-picker-content-radius",
+    "--slotted-time-range-picker-content-shadow",
+    "--slotted-time-range-picker-current-color",
+    "--slotted-time-range-picker-current-size",
+    "--slotted-time-range-picker-disabled-background",
+    "--slotted-time-range-picker-disabled-border-color",
+    "--slotted-time-range-picker-disabled-color",
+    "--slotted-time-range-picker-done-active-background",
+    "--slotted-time-range-picker-done-background",
+    "--slotted-time-range-picker-done-color",
+    "--slotted-time-range-picker-done-hover-background",
+    "--slotted-time-range-picker-hint-color",
+    "--slotted-time-range-picker-hover-border-color",
+    "--slotted-time-range-picker-invalid-border-color",
+    "--slotted-time-range-picker-invalid-color",
+    "--slotted-time-range-picker-invalid-edge-width",
+    "--slotted-time-range-picker-invalid-focus-ring-color",
+    "--slotted-time-range-picker-label-color",
+    "--slotted-time-range-picker-length-color",
+    "--slotted-time-range-picker-limit-color",
+    "--slotted-time-range-picker-list-block-size",
+    "--slotted-time-range-picker-now-color",
+    "--slotted-time-range-picker-option-current-background",
+    "--slotted-time-range-picker-option-hover-background",
+    "--slotted-time-range-picker-option-radius",
+    "--slotted-time-range-picker-option-selected-background",
+    "--slotted-time-range-picker-option-selected-color",
+    "--slotted-time-range-picker-option-selected-hover-background",
+    "--slotted-time-range-picker-placeholder-color",
+    "--slotted-time-range-picker-plain-hover-background",
+    "--slotted-time-range-picker-preset-active-background",
+    "--slotted-time-range-picker-preset-background",
+    "--slotted-time-range-picker-preset-hover-background",
+    "--slotted-time-range-picker-preset-radius",
+    "--slotted-time-range-picker-preset-selected-background",
+    "--slotted-time-range-picker-preset-selected-color",
+    "--slotted-time-range-picker-radius",
+    "--slotted-time-range-picker-readonly-background",
+    "--slotted-time-range-picker-shadow",
+    "--slotted-time-range-picker-sheet-inline-size",
+    "--slotted-time-range-picker-subtle-background",
+    "--slotted-time-range-picker-subtle-border-color",
+    "--slotted-time-range-picker-subtle-hover-background",
+    "--slotted-time-range-picker-surface",
+    "--slotted-time-range-picker-tab-block-size",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-active",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A meeting room booked for the afternoon. The frame is one line: press it and the two tabs, the field, the hint and the list of the current end open under it. Every input is on the controls panel.",
+      "language": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Reserva da sala</label>\n  <div\n    slTimeRangePicker\n    clearable\n    locale=\"pt-BR\"\n    [messages]=\"{ start: 'Início', end: 'Fim' }\"\n    [defaultValue]=\"booking\"\n  ></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panel",
+      "title": "One end at a time",
+      "note": "Open it: two tabs say the two ends, and the panel shows the one being chosen. The start is 14:00, so the end tab is current and its list strikes every time before 14:00, writing the duration beside every other. Press one: the meeting is whole and the surface closes.",
+      "language": "html",
+      "source": "<div slTimeRangePicker defaultOpen locale=\"pt-BR\" [defaultValue]=\"open\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "length",
+      "title": "The duration, while the run is drawn",
+      "note": "Move along the end list with the pointer or the arrows: the band says \"1 hr\", \"1 hr 15 min\", \"1 hr 30 min\" for the row under you, and every row says it beside its time. lengthLabel writes it in the product’s own words.",
+      "language": "html",
+      "source": "<div slTimeRangePicker locale=\"pt-BR\" [defaultValue]=\"open\" [lengthLabel]=\"minutes\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "limits",
+      "title": "Limits, explained",
+      "note": "A room is booked for thirty minutes to four hours. With a start chosen, the end list refuses the times that would break the rule and the band says the rule; typed past it, the frame goes invalid. minLength and maxLength are seconds, the unit step is written in.",
+      "language": "html",
+      "source": "<div slTimeRangePicker [maxLength]=\"4 * 3600\" [minLength]=\"30 * 60\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "unavailable",
+      "title": "Unavailable times",
+      "note": "The room is cleaned from 12:00 to 13:00. Choose a start before it: the end list refuses everything past the first cleaning slot, because a booking is contiguous. [contiguous]=\"false\" lets the run jump over it.",
+      "language": "html",
+      "source": "<div slTimeRangePicker [isTimeUnavailable]=\"isCleaning\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "step",
+      "title": "The step, the bounds, and a stated list",
+      "note": "Office hours at half-hour slots: min, max and step shape both lists at once, and the fields still type any minute. options states an irregular list outright, for a room that only opens on the hour before noon.",
+      "language": "html",
+      "source": "<div slTimeRangePicker [max]=\"closing\" [min]=\"opening\" [step]=\"1800\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "now",
+      "title": "Now",
+      "note": "\"Now\" writes the current time into the current end and the focus rule takes over — with the other end missing, the tab moves to it and focus lands in its list. referenceTime fixes the clock for a story or a test.",
+      "language": "html",
+      "source": "<div slTimeRangePicker [messages]=\"{ now: 'Agora' }\" [referenceTime]=\"clock\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "presets",
+      "title": "Presets",
+      "note": "The slots the office books by name. Each is a button with slTimeRangePickerPreset and its own range; pressing one writes the value and closes, and the one equal to the value is marked. The list is the product’s.",
+      "language": "html",
+      "source": "<div slTimeRangePicker>\n  <div slTimeRangePickerPresets>\n    <button [slTimeRangePickerPreset]=\"morning\">Manhã</button>\n    <button [slTimeRangePickerPreset]=\"nextHour\">Próxima hora</button>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "open-end",
+      "title": "One end only",
+      "note": "A start and no end, written where the reader sees it. Open the surface: the end list is the one to finish, and its first press completes the work. The clear empties both ends at once.",
+      "language": "html",
+      "source": "<div slTimeRangePicker clearable [defaultValue]=\"open\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Size",
+      "note": "The three steps the frame takes. Type, height, gutter and the clear’s box follow the control scales, so a booking in a dense table shrinks whole rather than in parts.",
+      "language": "html",
+      "source": "<div slTimeRangePicker size=\"sm\"></div>\n<div slTimeRangePicker size=\"md\"></div>\n<div slTimeRangePicker size=\"lg\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variants",
+      "title": "Variant",
+      "note": "How much frame the control shows at rest. plain is for a box that belongs to something else — a table cell — and draws its ring inward.",
+      "language": "html",
+      "source": "<div slTimeRangePicker variant=\"outline\"></div>\n<div slTimeRangePicker variant=\"subtle\"></div>\n<div slTimeRangePicker variant=\"plain\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Read-only, disabled, invalid from the family and invalid from the consumer. An end before its start is invalid on the end field and on the frame, and nothing is swapped.",
+      "language": "html",
+      "source": "<div slTimeRangePicker readOnly [defaultValue]=\"booking\"></div>\n<div slTimeRangePicker disabled [defaultValue]=\"booking\"></div>\n<div slTimeRangePicker [defaultValue]=\"reversed\"></div>\n<div slTimeRangePicker invalid [defaultValue]=\"booking\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "Forms",
+      "note": "Two hidden inputs under startName and endName send HH:mm:ss with a plain form post, whether the reader typed the times or pressed them.",
+      "language": "html",
+      "source": "<form [formGroup]=\"reservation\" (ngSubmit)=\"reserve()\">\n  <div slTimeRangePicker formControlName=\"slot\" startName=\"inicio\" endName=\"fim\"></div>\n  <button type=\"submit\">Reservar</button>\n</form>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "Narrow",
+      "note": "In a column narrower than the value the frame stays one line and the summary is cut with an ellipsis; the trigger’s name carries it whole. The surface keeps its own width.",
+      "language": "html",
+      "source": "<div class=\"slotted-demo-measure\">\n  <div slTimeRangePicker locale=\"pt-BR\" [defaultValue]=\"booking\"></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "provideTimeRangePickerDefaults sets the step and how a duration is written once, provideSlotted the language and every word; the exported instance opens, closes and focuses; the slTimeRangePickerOption template replaces what a row draws; position — which tab — is the consumer’s to own.",
+      "language": "html",
+      "source": "<div\n  slTimeRangePicker\n  #picker=\"slTimeRangePicker\"\n  [position]=\"position\"\n  (positionChange)=\"position = $event.value\"\n>\n  <ng-template slTimeRangePickerOption let-time let-duration=\"duration\">\n    {{ time.hour }}h{{ time.minute }} <small>{{ duration }}</small>\n  </ng-template>\n</div>\n<button type=\"button\" (click)=\"picker.openSurface()\">Abrir</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Enter opens onto the field of the current end; ArrowDown opens onto its list. ArrowLeft and ArrowRight on a tab move to the other end. In the list, every arrow moves the pending end and the band says the duration; Enter writes the end and moves on to the one that is missing. Escape abandons the work.",
+      "language": "html",
+      "source": "<!-- Enter, Space         open onto the current end's field -->\n<!-- ArrowDown, Alt+Down  open onto the current end's list -->\n<!-- ArrowLeft, Right     on a tab: the other end, and its panel -->\n<!-- Arrows, Home, End    move the highlight; the band says the duration -->\n<!-- PageUp, PageDown     one hour -->\n<!-- Enter, Space         write this end, then the missing one -->\n<!-- Escape               close and abandon the work -->\n<!-- Tab                  tabs, field, now, presets, list, footer, done -->\n<div slTimeRangePicker></div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}