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

package/docs/time-field.json

@@ -0,0 +1,584 @@
+{
+  "family": "time-field",
+  "ui": "time-field",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Typed time input split into segments."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "hourCycle": [
+      12,
+      24
+    ],
+    "granularity": [
+      "hour",
+      "minute",
+      "second"
+    ]
+  },
+  "members": {
+    "timeField": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "granularity": "minute",
+        "clearable": false,
+        "relative": true
+      },
+      "capabilities": [
+        "value",
+        "appearance",
+        "size",
+        "content",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "invalid",
+        "readonly",
+        "required"
+      ],
+      "parts": [
+        "root",
+        "segments",
+        "segment",
+        "literal",
+        "duration",
+        "preview",
+        "value-text",
+        "start",
+        "end",
+        "clear",
+        "hidden-input"
+      ]
+    }
+  },
+  "docs": {
+    "timeField": {
+      "imports": {
+        "source": "import { SlTimeField, SlTimeFieldStart, SlTimeFieldEnd } from '@slotted/angular/time-field';",
+        "selector": "[slTimeField]",
+        "exportAs": "slTimeField"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The frame. Carries data-ui=\"time-field\", the axes, data-cycle, data-granularity and the state attributes. It has no role of its own: the group inside is what a screen reader meets. className, style and every native attribute reach this element."
+        },
+        {
+          "part": "segments",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\", whose accessible name is the whole time in words. The APG’s spin-button example names the group as the thing that tells a screen-reader user that the buttons are one time, so a reader hears \"14:30\" without visiting every field and remembering each."
+        },
+        {
+          "part": "segment",
+          "element": "div",
+          "required": true,
+          "purpose": "One field of the time, as role=\"spinbutton\" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext. There is one per field the locale writes, in the locale’s own order, and exactly one of them is in the tab sequence. data-field says which field it holds and data-placeholder says it holds nothing yet."
+        },
+        {
+          "part": "literal",
+          "element": "span",
+          "required": true,
+          "purpose": "The separator the locale writes between two fields — a colon, a space before the day period. It is aria-hidden: the group already carries the time in words, and a screen reader reading \"colon\" between two numbers is reading punctuation aloud."
+        },
+        {
+          "part": "duration",
+          "element": "input",
+          "required": false,
+          "purpose": "The relative expression, in place of the segments. A real text input, so a mobile keyboard opens and the platform supplies every editing key the reader knows. It appears when +, - or = is pressed on a segment, and leaves on Enter or Escape."
+        },
+        {
+          "part": "preview",
+          "element": "span",
+          "required": false,
+          "purpose": "What the expression resolves to, drawn before anything commits. role=\"status\" with aria-live=\"polite\", so a reader who cannot see it hears the resolved time as well. data-crosses-midnight says the duration ran into the next day."
+        },
+        {
+          "part": "value-text",
+          "element": "span",
+          "required": true,
+          "purpose": "The whole time in words, hidden from sight and referenced by the group’s own aria-labelledby. It is what makes the group’s accessible name the value rather than a label alone."
+        },
+        {
+          "part": "start",
+          "element": "span",
+          "required": false,
+          "purpose": "An adornment before the time in the reading direction: a clock mark, a label, an icon. It is its own bidi run, and any icon inside it is sized from the control’s own glyph scale."
+        },
+        {
+          "part": "end",
+          "element": "span",
+          "required": false,
+          "purpose": "An adornment after the time in the reading direction: a zone abbreviation, a note."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Empties every segment with reason \"clear\" and returns focus to the first one. Drawn only when there is something to clear and the reader may change it, and never smaller than 24 CSS pixels."
+        },
+        {
+          "part": "hidden-input",
+          "element": "input",
+          "required": true,
+          "purpose": "type=\"hidden\", carrying the value as an ISO 8601 HH:mm:ss string under the name prop. It is what makes the control work in a plain form post without JavaScript reading it."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "PlainTime | null",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Present means the consumer owns the value. The control asks and waits rather than moving it."
+        },
+        {
+          "name": "defaultValue",
+          "type": "PlainTime | null",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The value the control starts from when nobody else writes one. Read once, in ngOnInit."
+        },
+        {
+          "name": "min",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The earliest time the control accepts. Reported through aria-valuemin, and as slottedTimeRange to a reactive form."
+        },
+        {
+          "name": "max",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The latest time the control accepts. Reported through aria-valuemax, and as slottedTimeRange to a reactive form."
+        },
+        {
+          "name": "isTimeUnavailable",
+          "type": "(time: PlainTime) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Refuses particular times — a lunch break, a booked slot, a closed shop. Reported as slottedTimeUnavailable to a reactive form."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "provideSlotted",
+          "appliesTo": "SlTimeField",
+          "description": "BCP 47. Decides the field order, the separators, the placeholder and whether a day period is drawn at all. Unset, the language in force decides."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "runtime",
+          "appliesTo": "SlTimeField",
+          "description": "Which zone answers \"what time is it now\", and nothing else. The value itself is a wall-clock time and carries no zone."
+        },
+        {
+          "name": "hourCycle",
+          "type": "12 | 24",
+          "defaultValue": "locale",
+          "appliesTo": "SlTimeField",
+          "description": "The question a consumer asks about the clock. Which variant of each — h11 or h12, h23 or h24 — is the locale’s own."
+        },
+        {
+          "name": "granularity",
+          "type": "'hour' | 'minute' | 'second'",
+          "defaultValue": "minute",
+          "appliesTo": "SlTimeField",
+          "description": "The smallest unit the field draws and takes. Seconds exist only when the value has them."
+        },
+        {
+          "name": "referenceTime",
+          "type": "PlainTime",
+          "defaultValue": "now",
+          "appliesTo": "SlTimeField",
+          "description": "What an empty segment steps from and what a duration resolves against. Stating it is what makes a story and a spec deterministic."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlTimeField",
+          "description": "The type step, matching the field around it."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "SlTimeField",
+          "description": "How much frame the control shows at rest."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Unstated rather than false, so the control defers to the field — and to the form, which sets it through setDisabledState."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Readable, copyable and focusable, and not changeable. Arrow keys still walk between fields; nothing steps."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Unstated rather than false. Retargets the focus ring."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Unstated rather than false. Reaches the group as aria-required; the form’s own Validators.required states the rule."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlTimeField",
+          "description": "Draws a button that empties the value and returns focus to the first segment."
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlTimeField",
+          "description": "Whether +, - and = open the duration expression. Set it false and the three keys do nothing."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TimeFieldMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "Words laid over the language in force, key by key: the clear button’s name (clear), the expression region’s name (duration) and the preview of a time past midnight (nextDay, with a {time} slot)."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The name the hidden input carries the HH:mm:ss string under, for a plain form post."
+        },
+        {
+          "name": "slTimeFieldStart",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeFieldStart",
+          "description": "An adornment before the time in the reading direction, on the consumer’s own element."
+        },
+        {
+          "name": "slTimeFieldEnd",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeFieldEnd",
+          "description": "An adornment after the time in the reading direction, on the consumer’s own element."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideTimeFieldDefaults",
+          "type": "provider",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, hourCycle, granularity, relative, size and variant once for everything under it. A control that states any of them itself still wins. The locale and the words come from provideSlotted."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "interface",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The control belongs in a reactive form and in a template form. It is the integration point React has no equivalent of, and the asymmetry is recorded rather than levelled away."
+        },
+        {
+          "name": "Validator",
+          "type": "interface",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "slottedTimeRange and slottedTimeUnavailable are validity this control owns and no other validator can see. required is left to Angular’s own, because a form already has a word for it."
+        },
+        {
+          "name": "exportAs",
+          "type": "slTimeField",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "A template reaches the instance for focus(), focusEntry() and clear(), and reads the derived time() signal."
+        },
+        {
+          "name": "(keydown)",
+          "type": "EventListener",
+          "defaultValue": "—",
+          "appliesTo": "SlTimeField",
+          "description": "The family handles the keys on the host, so a consumer’s own listener on the same element runs first — which is the composition React gets by calling the consumer’s handler before acting."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "TimeFieldChangeRequest",
+          "when": "Before the value moves, and cancellable. The request carries the new value, the value it replaces, the segments, whether a duration crossed midnight, the reason and the originating event. It arrives when a run of typed digits ends — never on every keystroke inside one, because typing 23 into an hour passes through 2 on the way. There is no two-way [(value)]: one slot could carry none of that, and a form gets the same movement through ControlValueAccessor."
+        }
+      ],
+      "accessibility": [
+        "The fields are a role=\"group\" whose accessible name is the whole time in words, which is what the APG’s spin-button example names as the thing that lets a screen-reader user perceive a time without visiting every button and remembering each.",
+        "Each field is a role=\"spinbutton\" carrying aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext — and the day period is why aria-valuetext is not optional: aria-valuenow there is 0 or 1, which is not a name in any language.",
+        "Exactly one field is in the tab sequence at a time; the arrows walk between them and mirror in a right-to-left document, because the keys are physical and the order they walk is the writing order.",
+        "The expression region is a real input with its own accessible name, and its preview is a polite live region: a reader is being asked to accept a value they did not write, so the resolved time has to be perceivable before Enter — including to a reader who cannot see it.",
+        "A step wraps inside its own field and never carries: 23:59 stepping the minute up reaches 23:00 rather than midnight, which is the example’s stated rule and the difference between one arrow press changing one field and changing two."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--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-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-radius-none",
+    "--slotted-radius-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-time-field-action-active-background",
+    "--slotted-time-field-action-color",
+    "--slotted-time-field-action-hover-background",
+    "--slotted-time-field-action-size",
+    "--slotted-time-field-adornment-color",
+    "--slotted-time-field-background",
+    "--slotted-time-field-border-color",
+    "--slotted-time-field-color",
+    "--slotted-time-field-disabled-background",
+    "--slotted-time-field-disabled-border-color",
+    "--slotted-time-field-disabled-color",
+    "--slotted-time-field-hover-border-color",
+    "--slotted-time-field-icon-size-min",
+    "--slotted-time-field-invalid-border-color",
+    "--slotted-time-field-invalid-edge-width",
+    "--slotted-time-field-invalid-focus-ring-color",
+    "--slotted-time-field-literal-color",
+    "--slotted-time-field-period-min-inline-size",
+    "--slotted-time-field-placeholder-color",
+    "--slotted-time-field-plain-hover-background",
+    "--slotted-time-field-preview-color",
+    "--slotted-time-field-preview-next-color",
+    "--slotted-time-field-radius",
+    "--slotted-time-field-readonly-background",
+    "--slotted-time-field-relative-border-color",
+    "--slotted-time-field-segment-focus-background",
+    "--slotted-time-field-segment-focus-color",
+    "--slotted-time-field-segment-min-inline-size",
+    "--slotted-time-field-segment-padding-inline",
+    "--slotted-time-field-segment-radius",
+    "--slotted-time-field-shadow",
+    "--slotted-time-field-subtle-background",
+    "--slotted-time-field-subtle-border-color",
+    "--slotted-time-field-subtle-hover-background",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One control with every axis on it, driven by the controls below the canvas. Type into it: each field takes digits, the arrows step it, and pressing + turns it into a duration from now.",
+      "language": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Hora de início</label>\n  <div slTimeField clearable locale=\"pt-BR\" name=\"inicio\"></div>\n  <span slFieldDescription>A reunião começa nesta hora.</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "locale",
+      "title": "The locale writes the time",
+      "note": "The same component in four locales. The field order, the separators, the placeholder and whether a day period exists all come from Intl — nobody writes a format string.",
+      "language": "html",
+      "source": "<div slTimeField locale=\"pt-BR\"></div>\n<div slTimeField locale=\"en-US\"></div>\n<div slTimeField locale=\"ja-JP\"></div>\n<div slTimeField locale=\"ar-EG\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hour-cycle",
+      "title": "Four hour cycles, not a boolean",
+      "note": "Intl resolves h11, h12, h23 and h24, and a boolean can say two of them. Ask for 12 in ja-JP and the hour runs from zero beside 午前, because that is what the locale writes. The public axis stays 12 | 24.",
+      "language": "html",
+      "source": "<div slTimeField locale=\"en-US\" [hourCycle]=\"12\"></div>\n<div slTimeField locale=\"ja-JP\" [hourCycle]=\"12\"></div>\n<div slTimeField locale=\"en-US\" [hourCycle]=\"24\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "granularity",
+      "title": "Granularity",
+      "note": "How much of the time is drawn, and how much of it is typed. Seconds exist only when the value has them; an hour-granularity field is one spin button and one value.",
+      "language": "html",
+      "source": "<div slTimeField granularity=\"hour\" locale=\"pt-BR\"></div>\n<div slTimeField granularity=\"minute\" locale=\"pt-BR\"></div>\n<div slTimeField granularity=\"second\" locale=\"pt-BR\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "relative",
+      "title": "A time written as a duration",
+      "note": "Press +, - or = on any segment and the field takes an expression instead: +40m, 1h30, -15, 0. What it resolves to is drawn beside it before Enter commits anything, and Escape puts the segments back untouched. No surveyed implementation offers it.",
+      "language": "html",
+      "source": "<div slTimeField locale=\"pt-BR\" [referenceTime]=\"afternoon\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "midnight",
+      "title": "A duration that crosses midnight",
+      "note": "+90m at 23:00 is 00:30 the next day, and this library holds no day beside a time. The preview changes tone, says so in words, and the request carries crossesMidnight — so a consumer holding a PlainDateTime knows to add one. Nothing else surveyed says anything at all.",
+      "language": "html",
+      "source": "<div\n  slTimeField\n  locale=\"pt-BR\"\n  [messages]=\"{ nextDay: '{time} no dia seguinte' }\"\n  [referenceTime]=\"late\"\n  (valueChange)=\"save($event.value, $event.crossesMidnight)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Size",
+      "note": "The three steps a field can be. A control inside a field takes the field’s step, so a form cannot end up with a small field holding a medium control on one row.",
+      "language": "html",
+      "source": "<div slTimeField size=\"sm\"></div>\n<div slTimeField size=\"md\"></div>\n<div slTimeField size=\"lg\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variants",
+      "title": "Variant",
+      "note": "How much frame the control shows. outline takes the ground it is on, subtle sinks into the page, and plain shows nothing until it is used — which is what a dense table needs.",
+      "language": "html",
+      "source": "<div slTimeField variant=\"outline\"></div>\n<div slTimeField variant=\"subtle\"></div>\n<div slTimeField variant=\"plain\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "range",
+      "title": "Bounds",
+      "note": "min and max fence the value and reach the spin buttons as aria-valuemin and aria-valuemax. A time outside them is invalid whatever the field around it says, because the control is the only thing that knows.",
+      "language": "html",
+      "source": "<div slTimeField [min]=\"opens\" [max]=\"closes\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "unavailable",
+      "title": "Times the product refuses",
+      "note": "isTimeUnavailable answers a lunch break, a booked slot, a closed shop — anything a pair of bounds cannot say. A predicate reaches every time; three lists of numbers reach only the ones on a unit boundary.",
+      "language": "html",
+      "source": "<div slTimeField locale=\"pt-BR\" [isTimeUnavailable]=\"isLunch\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Read-only stays focusable and copyable and never looks disabled; disabled answers no key and no pointer; invalid keeps its focus ring and retargets its colour. Tab through the row to see each one answer.",
+      "language": "html",
+      "source": "<div slTimeField readOnly></div>\n<div slTimeField invalid></div>\n<div slTimeField disabled></div>\n<div slTimeField required></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "clear",
+      "title": "Clearing",
+      "note": "The button appears only once a segment holds something, and pressing it empties every field, emits the clear reason and puts focus back on the first segment rather than leaving it nowhere.",
+      "language": "html",
+      "source": "<div slTimeField clearable [messages]=\"{ clear: 'Limpar a hora' }\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "adornments",
+      "title": "Adornments",
+      "note": "The two slots take an icon, a mark or a word, and both are named for the reading direction rather than for a side, so the same markup reads correctly in a right-to-left document. A time zone label belongs here: the value itself is a wall-clock time and carries no zone.",
+      "language": "html",
+      "source": "<div slTimeField>\n  <span slTimeFieldStart><span slIcon></span></span>\n  <span slTimeFieldEnd>BRT</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "The value reaches a plain form post as an HH:mm:ss string through a hidden input, so a server reads it without any JavaScript touching the control. A half-typed time posts nothing at all, because it is not a time.",
+      "language": "html",
+      "source": "<form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n  <div slField>\n    <label slFieldLabel>Hora de início</label>\n    <div slTimeField formControlName=\"inicio\" required></div>\n  </div>\n</form>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A day period written as a word rather than as two letters, a second granularity in a narrow column, and a right-to-left document — where the sequence still reads 14:30 rather than 30:14, because a clock time is a numeric run and bidi renders one left to right.",
+      "language": "html",
+      "source": "<div slTimeField granularity=\"second\" locale=\"es-MX\" [hourCycle]=\"12\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition and escape hatches",
+      "note": "The provider sets the clock once for everything under it, provideSlotted the language; render substitutes the frame’s element; and the ref carries focus(), clear() and which field holds focus.",
+      "language": "html",
+      "source": "<div slTimeField #hora=\"slTimeField\" locale=\"pt-BR\"></div>\n<button type=\"button\" (click)=\"hora.focus()\">Focar</button>\n<button type=\"button\" (click)=\"hora.clear()\">Limpar</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Every key the spin-button pattern lists, plus the two the pattern has no example for: the arrows across, which are logical rather than physical, and the three characters that open a duration. Put focus in the field and try them.",
+      "language": "html",
+      "source": "<div slTimeField (keydown)=\"onKeyDown($event)\"></div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}