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

package/docs/time-picker.md

@@ -0,0 +1,315 @@
+<!-- index: ./index.md -->
+# time-picker
+
+`data-ui="time-picker"` · Time field with a picker popover.
+
+## Import
+
+```ts
+import { SlTimePicker, SlTimePickerOption, SlTimePickerPresets, SlTimePickerFooter } from '@slotted/angular/time-picker';
+```
+
+Selector: `[slTimePicker]` · exportAs: `slTimePicker`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<div slField>
+  <label slFieldLabel>Hora de início</label>
+  <div slTimePicker clearable locale="pt-BR" name="inicio" [step]="900"></div>
+</div>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | div, or the element render returns | yes |
+| `control` | div | yes |
+| `trigger` | button | yes |
+| `positioner` | div | no |
+| `content` | div | no |
+| `head` | div | no |
+| `now` | button | no |
+| `presets` | div | no |
+| `list` | div | no |
+| `option` | div | no |
+| `empty` | div | no |
+| `footer` | div | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `PlainTime \| null` | — | SlTimePicker | Present means the consumer owns the value. |
+| `defaultValue` | `PlainTime \| null` | — | SlTimePicker | The value the picker starts from when nobody else writes one. |
+| `open` | `boolean` | — | SlTimePicker | Present means the consumer owns whether the surface is showing. |
+| `defaultOpen` | `boolean` | false | SlTimePicker | Whether the surface starts open. |
+| `highlightedValue` | `PlainTime \| null` | — | SlTimePicker | Where the reader is in the list. The highlight is not the value, and moving it moves nothing. |
+| `defaultHighlightedValue` | `PlainTime \| null` | — | SlTimePicker | Where the highlight starts, before the panel places it on the chosen time. |
+| `min` | `PlainTime` | — | SlTimePicker | The earliest time the list offers and the value accepts. |
+| `max` | `PlainTime` | — | SlTimePicker | The latest time the list offers and the value accepts. |
+| `isTimeUnavailable` | `(time: PlainTime) => boolean` | — | SlTimePicker | Refuses particular times. A refused row is disabled by default rather than dropped. |
+| `step` | `number` | 900 | SlTimePicker | Seconds between two offered times, counting from min when it is stated and from midnight when it is not. Ignored when options states the list. |
+| `options` | `readonly PlainTime[]` | — | SlTimePicker | The times to offer, stated rather than stepped, in the consumer’s own order. It is what makes an irregular list and a second-level set expressible. |
+| `maxOptions` | `number` | 1440 | SlTimePicker | How many rows the list may reach — a whole day at a one-minute step. Beyond it the list is cut and data-truncated says so. |
+| `unavailableOptions` | `'disable' \| 'hide'` | disable | SlTimePicker | What a refused row looks like. Disabling is the default because a list that drops rows is a list whose step nobody can infer. |
+| `locale` | `string` | provideSlotted | SlTimePicker | BCP 47. Decides how every row is written. Unset, the language in force decides. |
+| `timeZone` | `string` | runtime | SlTimePicker | Which zone answers "what time is it now", for the opening position and the now control. |
+| `hourCycle` | `12 \| 24` | locale | SlTimePicker | The question a consumer asks about the clock, passed through to the field and the rows. |
+| `granularity` | `'hour' \| 'minute' \| 'second'` | minute | SlTimePicker | The smallest unit the field draws and the rows carry. |
+| `referenceTime` | `PlainTime` | now | SlTimePicker | What "now" means for the opening position, the now control and the field’s durations. |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | SlTimePicker | The type step, matching the field around it. |
+| `variant` | `'outline' \| 'subtle' \| 'plain'` | outline | SlTimePicker | How much frame the control shows at rest. |
+| `placement` | `'bottom-start' \| 'bottom' \| 'bottom-end' \| 'top-start' \| 'top' \| 'top-end'` | bottom-start | SlTimePicker | Where the surface starts, before the positioner reads the room. |
+| `closeOnSelect` | `'auto' \| 'always' \| 'never'` | auto | SlTimePicker | Whether choosing closes the surface. auto closes, because one press chooses a whole time. |
+| `disabled` | `boolean` | — | SlTimePicker | Unstated rather than false, so the picker defers to the field around it. |
+| `readOnly` | `boolean` | — | SlTimePicker | Readable and focusable, and not changeable. |
+| `invalid` | `boolean` | — | SlTimePicker | Unstated rather than false. Retargets the focus ring. |
+| `required` | `boolean` | — | SlTimePicker | Unstated rather than false. |
+| `clearable` | `boolean` | false | SlTimePicker | Draws the field’s own clear button. |
+| `name` | `string` | — | SlTimePicker | The name the hidden input carries the HH:mm:ss string under. |
+| `messages` | `Partial<TimePickerMessages>` | — | SlTimePicker | Words laid over the language in force, key by key: the trigger’s name while nothing is chosen (choose) and once a time is (change, with a {time} slot), the now control (now), the empty panel (empty) and the description of a list cut short (truncated). |
+| `slTimePickerPresets` | `directive` | — | SlTimePickerPresets | The consumer’s own shortcuts, in a column beside the list. |
+| `slTimePickerFooter` | `directive` | — | SlTimePickerFooter | The consumer’s own actions, under the list. |
+| `provideTimePickerDefaults` | `provider` | — | application | Sets step, maxOptions, unavailableOptions, placement, closeOnSelect, timeZone, hourCycle, granularity, size and variant once for everything under it. The locale and the words come from provideSlotted. |
+| `slTimePickerOption` | `ng-template` | — | SlTimePicker | Draws what is inside one row, with the time as $implicit and label, selected, current and unavailable in the context. It is a template rather than a projected slot because it is re-rendered once per option — the case NgTemplateOutlet exists for. |
+| `exportAs` | `slTimePicker` | — | SlTimePicker | A template reaches the instance for focus(), openSurface() and closeSurface(). |
+| `ng-content` | `slot` | — | SlTimePicker | The presets and the footer are projected content on the consumer’s own elements, so nothing loses its semantics. |
+| `(keydown)` | `EventListener` | — | SlTimePicker | The chord that opens the panel is handled on the control, so a consumer’s own listener on the same element runs first. |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `valueChange` | `TimeFieldChangeRequest \| ChangeRequest<PlainTime \| null>` | Before the value moves, and cancellable. It arrives from the field when a typed run ends, and from the panel when a row is chosen — with reason "select" there. A request that comes through the field carries the segments and whether a duration crossed midnight. |
+| `openChange` | `ChangeRequest<boolean>` | Before the surface opens or closes, and cancellable. The reason says which of pointer, keyboard, escape, outsidePress or select moved it — a boolean cannot, and a consumer who has to guess writes the wrong handler. |
+| `highlightedValueChange` | `ChangeRequest<PlainTime \| null>` | Before the highlight moves. Selection does not follow focus here: a reader arrowing through ninety-six quarter-hours would otherwise emit ninety-six value requests. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `variant` | `outline`, `subtle`, `plain` | `outline` |
+| `placement` | `bottom-start`, `bottom`, `bottom-end`, `top-start`, `top`, `top-end` | `bottom-start` |
+| `closeOnSelect` | `auto`, `always`, `never` | `auto` |
+| `unavailableOptions` | `disable`, `hide` | `disable` |
+| `hourCycle` | `12`, `24` | — |
+| `granularity` | `hour`, `minute`, `second` | `minute` |
+
+## Rules
+
+- The panel is one role="listbox" in every configuration the family has, so the trigger says aria-haspopup="listbox" everywhere and there is no second role a reader has to learn. A column per unit was drawn and withdrawn, and with it the dialog role a popup of several listboxes would have needed.
+- Focus is real inside the list — a roving tabindex, not aria-activedescendant — because the reader is inside the list rather than typing into a control that must keep focus. The pattern’s own rule for where focus lands is taken whole: the selected option, or the first when none is selected.
+- Selection does not follow focus. The listbox pattern lists it as optional and warns it can degrade accessibility, and here it would emit one value request per option as a reader arrows through ninety-six quarter-hours.
+- The trigger’s accessible name carries the chosen time, because focus returns to it when the surface closes — which is where a reader is told what was chosen, and what the APG names as an accessibility feature of its own example.
+- A list cut at maxOptions says so twice: data-truncated in the DOM for a stylesheet, and the panel’s accessible description for a reader, naming that the remaining times are typed into the field rather than listed.
+
+## 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-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-radius-sm`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-9`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-time-picker-content-border-color`, `--slotted-time-picker-content-color`, `--slotted-time-picker-content-min-inline-size`, `--slotted-time-picker-content-padding`, `--slotted-time-picker-content-radius`, `--slotted-time-picker-content-shadow`, `--slotted-time-picker-invalid-focus-ring-color`, `--slotted-time-picker-label-color`, `--slotted-time-picker-list-block-size`, `--slotted-time-picker-now-color`, `--slotted-time-picker-option-current-background`, `--slotted-time-picker-option-hover-background`, `--slotted-time-picker-option-radius`, `--slotted-time-picker-option-selected-background`, `--slotted-time-picker-option-selected-color`, `--slotted-time-picker-option-selected-hover-background`, `--slotted-time-picker-radius`, `--slotted-time-picker-sheet-inline-size`, `--slotted-time-picker-surface`, `--slotted-time-picker-trigger-active-background`, `--slotted-time-picker-trigger-color`, `--slotted-time-picker-trigger-hover-background`, `--slotted-time-picker-trigger-size`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+
+## Examples
+
+### One panel shape
+
+A listbox of whole times, at every step. 09:15 is legible at a glance where a 15 in a column of minutes is legible only beside the column next to it — and one axis is what makes Home, End, type-ahead and the arrows all mean something.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker defaultOpen locale="pt-BR" [step]="1800"></div>
+```
+
+### The times a consumer states
+
+No step describes a clinic open at 09:00, 09:20, 11:40 and 13:45, and a predicate only subtracts from times that fall on one. options hands the panel exactly the times it should offer, in the order it should offer them — and it is half the answer to why this family needs no column panel.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker locale="pt-BR" [options]="clinicHours"></div>
+```
+
+### Seconds, chosen from a surface
+
+The other half of the same answer. A day at a one-second step is 86 400 rows and not a list; a stated set of marks is four. The field beside the panel types any second the list does not offer.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker granularity="second" locale="pt-BR" [options]="marks"></div>
+```
+
+### The step, and where it counts from
+
+A step in seconds, counting from min when it is stated and from midnight when it is not — the platform’s own rule for input[type=time], and one no surveyed panel states. A value off the step is not invalid: the field still types 09:15 when the panel offers 09:07.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker [step]="3600"></div>
+<div slTimePicker [step]="1800"></div>
+<div slTimePicker [min]="opensAt" [step]="900"></div>
+```
+
+### Bounds
+
+min and max fence both the list and the value. The panel offers nothing outside them, and a value outside them is invalid whatever the field around the picker says.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker [min]="opens" [max]="closes"></div>
+```
+
+### Times the product refuses
+
+isTimeUnavailable answers a lunch break or a booked slot. By default the row stays and is disabled — a list that drops rows is a list whose step nobody can infer — and unavailableOptions="hide" is the consumer’s choice to drop it anyway.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker [isTimeUnavailable]="isLunch"></div>
+<div slTimePicker unavailableOptions="hide" [isTimeUnavailable]="isLunch"></div>
+```
+
+### The current time, in one press
+
+The control at the head of the panel writes the time it is now. It is the zero case of the field’s relative expression, drawn as a labelled press so a reader who never discovers + still has it.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker [messages]="{ now: 'Agora' }" [referenceTime]="now"></div>
+```
+
+### The field keeps every key it had
+
+The panel complements the typing and never replaces it, which is what docs/component-features.md §6 asks for. Alt+ArrowDown opens the panel and leaves focus in the segments; + still opens a duration; and the highlight follows what is typed.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker defaultOpen [referenceTime]="afternoon"></div>
+```
+
+### Shortcuts and actions
+
+Two slots the family ships empty: a column of the consumer’s own shortcuts beside the list, and a row of their own actions under it. The surface stops being the anchor’s width when the shortcuts are there, so the times keep a column worth reading.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker>
+  <div slTimePickerPresets>
+    <button type="button">Início do turno</button>
+  </div>
+  <div slTimePickerFooter>
+    <button type="button">Aplicar</button>
+  </div>
+</div>
+```
+
+### Size
+
+The three steps the control can be, and the panel answers each: the row height and the eight-and-a-half-row cap are counted in the same unit, so a dense panel shows the same number of times in less room.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker size="sm"></div>
+<div slTimePicker size="md"></div>
+<div slTimePicker size="lg"></div>
+```
+
+### Variant
+
+How much frame the control shows at rest. The panel does not change with it: a surface floating over the page has its own ground whatever the control below it looks like.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker variant="outline"></div>
+<div slTimePicker variant="subtle"></div>
+<div slTimePicker variant="plain"></div>
+```
+
+### Where it opens
+
+The side and alignment the surface starts from, before the positioner reads the room and moves it. What the engine resolved is written back as data-placement, so a stylesheet can answer the side it actually landed on.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker placement="bottom-start"></div>
+<div slTimePicker placement="top-end"></div>
+```
+
+### States
+
+Read-only keeps the value readable and the panel shut; disabled answers no press at all; invalid retargets the ring on the control and on the trigger together. The row of options has its own four, and the chosen row answers the pointer in its own tone rather than turning grey.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker readOnly></div>
+<div slTimePicker invalid></div>
+<div slTimePicker disabled></div>
+<div slTimePicker required></div>
+```
+
+### In a form
+
+The value reaches a plain form post as an HH:mm:ss string through the field’s hidden input, so a server reads it without any JavaScript touching the control.
+
+Excerpt — not a complete module
+
+```html
+<form [formGroup]="form">
+  <div slField>
+    <label slFieldLabel>Hora de início</label>
+    <div slTimePicker formControlName="inicio" required></div>
+  </div>
+</form>
+```
+
+### Narrow
+
+The panel takes the anchor’s width, floored so a narrow field never produces a column too tight to read a time in and capped so a wide form never stretches one column of times across a page. Below 480 pixels on a finger it becomes a sheet, and the DOM says which it is.
+
+Excerpt — not a complete module
+
+```html
+<div class="slotted-demo-measure">
+  <div slTimePicker locale="pt-BR"></div>
+</div>
+```
+
+### Composition and escape hatches
+
+The provider sets the step and the labels once; renderOption draws the row without owning it; render substitutes the frame; and the ref carries focus(), open() and close().
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker #hora="slTimePicker" locale="pt-BR">
+  <ng-template slTimePickerOption let-time let-label="label">
+    <span>{{ label }}</span>
+  </ng-template>
+</div>
+<button type="button" (click)="hora.openSurface()">Abrir</button>
+```
+
+### The keyboard
+
+Alt+ArrowDown opens the panel from the field and leaves focus there; the trigger’s ArrowDown moves focus into the list; inside it the arrows walk, Home and End reach the ends, PageUp and PageDown cross one hour boundary each, digits jump, and Enter chooses. Escape closes and puts focus back on the trigger.
+
+Excerpt — not a complete module
+
+```html
+<div slTimePicker (keydown)="onKeyDown($event)"></div>
+```

package/docs/time-range-picker.examples.md

@@ -0,0 +1,191 @@
+<!-- index: ./index.md -->
+# time-range-picker
+
+`data-ui="time-range-picker"` · Start and end times with a picker.
+
+## Examples
+
+### One end at a time
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker defaultOpen locale="pt-BR" [defaultValue]="open"></div>
+```
+
+### The duration, while the run is drawn
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker locale="pt-BR" [defaultValue]="open" [lengthLabel]="minutes"></div>
+```
+
+### Limits, explained
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker [maxLength]="4 * 3600" [minLength]="30 * 60"></div>
+```
+
+### Unavailable times
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker [isTimeUnavailable]="isCleaning"></div>
+```
+
+### The step, the bounds, and a stated list
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker [max]="closing" [min]="opening" [step]="1800"></div>
+```
+
+### Now
+
+"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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker [messages]="{ now: 'Agora' }" [referenceTime]="clock"></div>
+```
+
+### Presets
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker>
+  <div slTimeRangePickerPresets>
+    <button [slTimeRangePickerPreset]="morning">Manhã</button>
+    <button [slTimeRangePickerPreset]="nextHour">Próxima hora</button>
+  </div>
+</div>
+```
+
+### One end only
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker clearable [defaultValue]="open"></div>
+```
+
+### Size
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker size="sm"></div>
+<div slTimeRangePicker size="md"></div>
+<div slTimeRangePicker size="lg"></div>
+```
+
+### Variant
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker variant="outline"></div>
+<div slTimeRangePicker variant="subtle"></div>
+<div slTimeRangePicker variant="plain"></div>
+```
+
+### States
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div slTimeRangePicker readOnly [defaultValue]="booking"></div>
+<div slTimeRangePicker disabled [defaultValue]="booking"></div>
+<div slTimeRangePicker [defaultValue]="reversed"></div>
+<div slTimeRangePicker invalid [defaultValue]="booking"></div>
+```
+
+### Forms
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<form [formGroup]="reservation" (ngSubmit)="reserve()">
+  <div slTimeRangePicker formControlName="slot" startName="inicio" endName="fim"></div>
+  <button type="submit">Reservar</button>
+</form>
+```
+
+### Narrow
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div class="slotted-demo-measure">
+  <div slTimeRangePicker locale="pt-BR" [defaultValue]="booking"></div>
+</div>
+```
+
+### Composition
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<div
+  slTimeRangePicker
+  #picker="slTimeRangePicker"
+  [position]="position"
+  (positionChange)="position = $event.value"
+>
+  <ng-template slTimeRangePickerOption let-time let-duration="duration">
+    {{ time.hour }}h{{ time.minute }} <small>{{ duration }}</small>
+  </ng-template>
+</div>
+<button type="button" (click)="picker.openSurface()">Abrir</button>
+```
+
+### Keyboard
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<!-- Enter, Space         open onto the current end's field -->
+<!-- ArrowDown, Alt+Down  open onto the current end's list -->
+<!-- ArrowLeft, Right     on a tab: the other end, and its panel -->
+<!-- Arrows, Home, End    move the highlight; the band says the duration -->
+<!-- PageUp, PageDown     one hour -->
+<!-- Enter, Space         write this end, then the missing one -->
+<!-- Escape               close and abandon the work -->
+<!-- Tab                  tabs, field, now, presets, list, footer, done -->
+<div slTimeRangePicker></div>
+```