@fusion.dev/helix-headless 0.0.0-dev → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +4513 -4483
- package/dist/accordion/item/accordion-item.d.ts +13 -15
- package/dist/accordion/item/accordion-item.js +15 -17
- package/dist/announcement/root/announcement-root.d.ts +7 -25
- package/dist/announcement/root/announcement-root.js +7 -20
- package/dist/app-header/root/app-header-root.d.ts +10 -17
- package/dist/app-header/root/app-header-root.js +9 -18
- package/dist/avatar/group/avatar-group.d.ts +10 -19
- package/dist/avatar/group/avatar-group.js +12 -17
- package/dist/avatar/root/avatar-root.d.ts +8 -8
- package/dist/avatar/root/avatar-root.js +19 -20
- package/dist/badge/root/badge-root.d.ts +6 -6
- package/dist/badge/root/badge-root.js +13 -13
- package/dist/bar-chart/root/bar-chart-root.d.ts +21 -29
- package/dist/bar-chart/root/bar-chart-root.js +42 -57
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +12 -18
- package/dist/breadcrumbs/breadcrumb/breadcrumb.js +13 -16
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +9 -28
- package/dist/breadcrumbs/root/breadcrumbs-root.js +9 -28
- package/dist/button/root/button-root.d.ts +84 -94
- package/dist/button/root/button-root.js +82 -92
- package/dist/callout/root/callout-root.d.ts +4 -5
- package/dist/carousel/root/carousel-root.d.ts +59 -71
- package/dist/carousel/root/carousel-root.js +73 -101
- package/dist/chat/composer/chat-composer.d.ts +29 -33
- package/dist/chat/composer/chat-composer.js +40 -44
- package/dist/chat/message/chat-message.d.ts +25 -25
- package/dist/chat/message/chat-message.js +26 -26
- package/dist/chat/root/chat-root.d.ts +28 -41
- package/dist/chat/root/chat-root.js +27 -40
- package/dist/checkbox/root/checkbox-root.d.ts +10 -12
- package/dist/checkbox/root/checkbox-root.js +29 -35
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +32 -45
- package/dist/checkbox-group/root/checkbox-group-root.js +53 -79
- package/dist/code-block/root/code-block-root.d.ts +3 -4
- package/dist/code-block/root/code-block-root.js +8 -12
- package/dist/color-input/root/color-input-root.d.ts +36 -37
- package/dist/color-input/root/color-input-root.js +29 -34
- package/dist/color-picker/color.d.ts +7 -8
- package/dist/color-picker/color.js +7 -8
- package/dist/color-picker/root/color-picker-root.d.ts +55 -57
- package/dist/color-picker/root/color-picker-root.js +60 -64
- package/dist/combobox/root/combobox-root.d.ts +53 -58
- package/dist/combobox/root/combobox-root.js +85 -94
- package/dist/command/root/command-root.d.ts +8 -8
- package/dist/command/root/command-root.js +29 -33
- package/dist/copy-button/root/copy-button-root.d.ts +21 -24
- package/dist/copy-button/root/copy-button-root.js +25 -35
- package/dist/data-table/root/data-table-root.d.ts +77 -76
- package/dist/data-table/root/data-table-root.js +95 -84
- package/dist/data-table/root/order.d.ts +2 -2
- package/dist/data-table/root/order.js +1 -3
- package/dist/date-input/root/date-input-root.d.ts +88 -93
- package/dist/date-input/root/date-input-root.js +147 -158
- package/dist/date-picker/root/date-picker-root.d.ts +75 -83
- package/dist/date-picker/root/date-picker-root.js +120 -143
- package/dist/dialog/root/dialog-root.d.ts +41 -24
- package/dist/dialog/root/dialog-root.js +47 -24
- package/dist/divider/root/divider-root.d.ts +5 -6
- package/dist/divider/root/divider-root.js +4 -5
- package/dist/donut-chart/root/donut-chart-root.d.ts +22 -25
- package/dist/donut-chart/root/donut-chart-root.js +37 -51
- package/dist/drawer/root/drawer-root.d.ts +24 -29
- package/dist/drawer/root/drawer-root.js +15 -22
- package/dist/drilldown/item/drilldown-item.d.ts +14 -14
- package/dist/drilldown/item/drilldown-item.js +24 -26
- package/dist/drilldown/root/drilldown-root.d.ts +8 -10
- package/dist/drilldown/root/drilldown-root.js +6 -7
- package/dist/element-events.generated.js +1 -1
- package/dist/file-input/root/file-input-root.d.ts +20 -24
- package/dist/file-input/root/file-input-root.js +42 -57
- package/dist/format-date/root/format-date-root.js +1 -1
- package/dist/heatmap/root/buckets.d.ts +8 -8
- package/dist/heatmap/root/buckets.js +8 -8
- package/dist/heatmap/root/heatmap-root.d.ts +57 -63
- package/dist/heatmap/root/heatmap-root.js +72 -83
- package/dist/icon/root/icon-root.d.ts +4 -4
- package/dist/icon/root/icon-root.js +9 -9
- package/dist/icon-button/root/icon-button-root.d.ts +4 -6
- package/dist/icon-button/root/icon-button-root.js +4 -6
- package/dist/image/root/image-root.d.ts +49 -59
- package/dist/image/root/image-root.js +55 -65
- package/dist/index.d.ts +5 -5
- package/dist/index.js +5 -5
- package/dist/input/root/input-root.d.ts +61 -85
- package/dist/input/root/input-root.js +79 -106
- package/dist/kbd/root/kbd-root.d.ts +8 -7
- package/dist/kbd/root/kbd-root.js +71 -11
- package/dist/legend/root/legend-root.d.ts +1 -1
- package/dist/legend/root/legend-root.js +4 -5
- package/dist/line-chart/root/line-chart-root.d.ts +26 -30
- package/dist/line-chart/root/line-chart-root.js +10 -10
- package/dist/list/item/list-item.d.ts +14 -18
- package/dist/list/item/list-item.js +18 -22
- package/dist/list/root/list-root.d.ts +4 -4
- package/dist/list/root/list-root.js +3 -3
- package/dist/listbox/root/listbox-root.d.ts +31 -58
- package/dist/listbox/root/listbox-root.js +66 -109
- package/dist/megamenu/root/megamenu-root.d.ts +34 -35
- package/dist/megamenu/root/megamenu-root.js +53 -58
- package/dist/menu/item/menu-item.d.ts +39 -53
- package/dist/menu/item/menu-item.js +50 -64
- package/dist/menu/root/menu-root.d.ts +30 -40
- package/dist/menu/root/menu-root.js +49 -82
- package/dist/meter/root/meter-root.d.ts +49 -53
- package/dist/meter/root/meter-root.js +22 -27
- package/dist/navigation/root/navigation-root.js +11 -19
- package/dist/notifications/notification/notification.d.ts +16 -22
- package/dist/notifications/notification/notification.js +21 -27
- package/dist/notifications/root/notifications-root.d.ts +31 -39
- package/dist/notifications/root/notifications-root.js +41 -52
- package/dist/number-input/root/number-input-root.d.ts +31 -33
- package/dist/number-input/root/number-input-root.js +37 -39
- package/dist/option/root/option-root.d.ts +73 -74
- package/dist/option/root/option-root.js +62 -64
- package/dist/outline/root/outline-root.d.ts +38 -44
- package/dist/outline/root/outline-root.js +66 -82
- package/dist/pagination/root/pagination-root.d.ts +87 -92
- package/dist/pagination/root/pagination-root.js +116 -123
- package/dist/pagination/size/pagination-size.d.ts +31 -50
- package/dist/pagination/size/pagination-size.js +35 -55
- package/dist/pagination/summary/pagination-summary.d.ts +12 -12
- package/dist/pagination/summary/pagination-summary.js +18 -18
- package/dist/pin-input/root/pin-input-root.d.ts +53 -70
- package/dist/pin-input/root/pin-input-root.js +74 -94
- package/dist/popover/root/popover-root.d.ts +15 -20
- package/dist/popover/root/popover-root.js +19 -36
- package/dist/progress/root/progress-root.d.ts +12 -14
- package/dist/progress/root/progress-root.js +22 -25
- package/dist/qr-code/root/qr-code-root.d.ts +11 -11
- package/dist/qr-code/root/qr-code-root.js +12 -14
- package/dist/radio/group/radio-group.js +19 -26
- package/dist/radio/root/radio-root.d.ts +12 -13
- package/dist/radio/root/radio-root.js +12 -13
- package/dist/rating/root/rating-root.d.ts +25 -30
- package/dist/rating/root/rating-root.js +43 -50
- package/dist/scroll-area/root/scroll-area-root.d.ts +11 -14
- package/dist/scroll-area/root/scroll-area-root.js +39 -33
- package/dist/select/root/select-root.d.ts +7 -12
- package/dist/select/root/select-root.js +40 -55
- package/dist/slider/root/slider-root.d.ts +53 -60
- package/dist/slider/root/slider-root.js +74 -85
- package/dist/sparkline/root/sparkline-root.d.ts +43 -47
- package/dist/sparkline/root/sparkline-root.js +23 -32
- package/dist/speed-dial/item/speed-dial-item.d.ts +6 -6
- package/dist/speed-dial/item/speed-dial-item.js +9 -9
- package/dist/speed-dial/root/speed-dial-root.d.ts +21 -25
- package/dist/speed-dial/root/speed-dial-root.js +32 -40
- package/dist/splitter/root/splitter-root.d.ts +98 -111
- package/dist/splitter/root/splitter-root.js +96 -123
- package/dist/stat/root/stat-root.d.ts +2 -7
- package/dist/stat/root/stat-root.js +0 -5
- package/dist/steps/step/step.d.ts +19 -24
- package/dist/steps/step/step.js +27 -32
- package/dist/switch/root/switch-root.js +2 -2
- package/dist/table/column/table-column.d.ts +54 -60
- package/dist/table/column/table-column.js +95 -68
- package/dist/table/root/table-root.d.ts +5 -6
- package/dist/table/root/table-root.js +7 -10
- package/dist/tabs/panel/tab-panel.d.ts +21 -25
- package/dist/tabs/panel/tab-panel.js +25 -29
- package/dist/tabs/root/tabs-root.d.ts +25 -34
- package/dist/tabs/root/tabs-root.js +22 -28
- package/dist/tabs/tab/tab.d.ts +12 -12
- package/dist/tabs/tab/tab.js +19 -20
- package/dist/textarea/root/textarea-root.d.ts +36 -36
- package/dist/textarea/root/textarea-root.js +43 -47
- package/dist/time-input/root/time-input-root.d.ts +58 -68
- package/dist/time-input/root/time-input-root.js +62 -77
- package/dist/time-picker/root/time-picker-root.d.ts +73 -79
- package/dist/time-picker/root/time-picker-root.js +72 -84
- package/dist/timeline/item/timeline-item.d.ts +8 -11
- package/dist/timeline/item/timeline-item.js +8 -11
- package/dist/timeline/root/timeline-root.d.ts +5 -7
- package/dist/timeline/root/timeline-root.js +5 -7
- package/dist/toast/item/toast-item.d.ts +9 -27
- package/dist/toast/item/toast-item.js +19 -41
- package/dist/toast/root/toast-root.d.ts +10 -14
- package/dist/toast/root/toast-root.js +4 -5
- package/dist/toggle/group/toggle-group.d.ts +6 -15
- package/dist/toggle/group/toggle-group.js +21 -36
- package/dist/toggle/root/toggle-root.d.ts +26 -27
- package/dist/toggle/root/toggle-root.js +30 -31
- package/dist/toolbar/root/toolbar-root.d.ts +7 -10
- package/dist/toolbar/root/toolbar-root.js +10 -14
- package/dist/tooltip/root/tooltip-root.d.ts +52 -59
- package/dist/tooltip/root/tooltip-root.js +98 -93
- package/dist/tour/root/tour-root.d.ts +19 -23
- package/dist/tour/root/tour-root.js +31 -41
- package/dist/tour/stop/tour-stop.d.ts +14 -15
- package/dist/tour/stop/tour-stop.js +31 -34
- package/dist/tree/item/tree-item.d.ts +30 -35
- package/dist/tree/item/tree-item.js +43 -55
- package/dist/tree/root/tree-root.d.ts +7 -10
- package/dist/tree/root/tree-root.js +33 -42
- package/dist/trend/root/trend-root.d.ts +3 -5
- package/dist/trend/root/trend-root.js +5 -9
- package/dist/video/root/video-root.d.ts +100 -124
- package/dist/video/root/video-root.js +142 -176
- package/dist/video-playlist/item/video-playlist-item.d.ts +16 -16
- package/dist/video-playlist/item/video-playlist-item.js +24 -24
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +5 -8
- package/dist/video-playlist/menu/video-playlist-menu.js +20 -29
- package/dist/video-playlist/root/video-playlist-root.d.ts +16 -11
- package/dist/video-playlist/root/video-playlist-root.js +21 -25
- package/dist/virtual-list/root/virtual-list-root.d.ts +8 -12
- package/dist/virtual-list/root/virtual-list-root.js +11 -16
- package/jsx.d.ts +9797 -12561
- package/package.json +6 -6
- package/vue.d.ts +2684 -3228
|
@@ -83,33 +83,6 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
|
|
|
83
83
|
* @csspart option-text - The words and the caption, as one column.
|
|
84
84
|
*/
|
|
85
85
|
export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
|
|
86
|
-
/**
|
|
87
|
-
* Whether the current selection fails validation.
|
|
88
|
-
*
|
|
89
|
-
* A flag rather than a message, which is the split Date Picker already drew and
|
|
90
|
-
* these two now follow. A flat picker has no room of its own for a sentence:
|
|
91
|
-
* the field that wraps one owns the label, the hint and the feedback, and a
|
|
92
|
-
* second message inside the panel would be the same error said twice. What is
|
|
93
|
-
* left for the picker is the one thing the field cannot draw from outside, the
|
|
94
|
-
* mark on the answer itself.
|
|
95
|
-
*/
|
|
96
|
-
invalid: boolean;
|
|
97
|
-
/**
|
|
98
|
-
* How far apart the offered times are, in minutes.
|
|
99
|
-
*
|
|
100
|
-
* Fifteen, which is four rows an hour and ninety-six in a day: enough that a
|
|
101
|
-
* reader scrolls rather than hunts, and few enough that the list is a list.
|
|
102
|
-
* Anything under five is a thousand rows and wants a field instead.
|
|
103
|
-
*/
|
|
104
|
-
step: number;
|
|
105
|
-
/**
|
|
106
|
-
* Earliest time offered, as `HH:mm`.
|
|
107
|
-
*/
|
|
108
|
-
min: string;
|
|
109
|
-
/**
|
|
110
|
-
* Latest time offered, as `HH:mm`.
|
|
111
|
-
*/
|
|
112
|
-
max: string;
|
|
113
86
|
/**
|
|
114
87
|
* Times that cannot be chosen, comma separated, as `HH:mm`.
|
|
115
88
|
*
|
|
@@ -123,6 +96,20 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
123
96
|
* reached honestly rather than by handing over an empty range.
|
|
124
97
|
*/
|
|
125
98
|
disableTimes: string;
|
|
99
|
+
/**
|
|
100
|
+
* Whether the current selection fails validation.
|
|
101
|
+
*
|
|
102
|
+
* A flag rather than a message, the same split Date Picker draws. A flat
|
|
103
|
+
* picker has no room of its own for a sentence: the field that wraps one owns
|
|
104
|
+
* the label, the hint and the feedback, and a second message inside the panel
|
|
105
|
+
* would be the same error said twice. What is left for the picker is the one
|
|
106
|
+
* thing the field cannot draw from outside, the mark on the answer itself.
|
|
107
|
+
*/
|
|
108
|
+
invalid: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Accessible name for the list, which has no visible one of its own.
|
|
111
|
+
*/
|
|
112
|
+
label: string;
|
|
126
113
|
/**
|
|
127
114
|
* Language tag the times are written in.
|
|
128
115
|
*
|
|
@@ -130,9 +117,13 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
130
117
|
*/
|
|
131
118
|
locale: string;
|
|
132
119
|
/**
|
|
133
|
-
*
|
|
120
|
+
* Latest time offered, as `HH:mm`.
|
|
134
121
|
*/
|
|
135
|
-
|
|
122
|
+
max: string;
|
|
123
|
+
/**
|
|
124
|
+
* Earliest time offered, as `HH:mm`.
|
|
125
|
+
*/
|
|
126
|
+
min: string;
|
|
136
127
|
/**
|
|
137
128
|
* How many times can be held at once.
|
|
138
129
|
*
|
|
@@ -146,7 +137,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
146
137
|
* separate "from" and "to" control, is two answers to what a product asks as
|
|
147
138
|
* one, and it makes the between part impossible to show.
|
|
148
139
|
*
|
|
149
|
-
* **Neither works on wheels and the
|
|
140
|
+
* **Neither works on wheels and the variant falls back.** A range on
|
|
150
141
|
* wheels is two sets of wheels, which is two controls; a multiple is a set,
|
|
151
142
|
* and a wheel has exactly one value by construction. Rather than draw
|
|
152
143
|
* something that cannot say what it holds, `wheels` renders as a list
|
|
@@ -154,32 +145,23 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
154
145
|
*/
|
|
155
146
|
mode?: 'multiple' | 'range';
|
|
156
147
|
/**
|
|
157
|
-
* Whether the
|
|
158
|
-
*
|
|
159
|
-
* `list` is the default and offers whole times, which is what a product with
|
|
160
|
-
* opening hours or slots actually has. `wheels` splits them into an hour, a
|
|
161
|
-
* minute and, where the locale uses one, a meridiem: three short columns
|
|
162
|
-
* instead of ninety-six rows, and the only way to reach `23:45` without
|
|
163
|
-
* scrolling most of a day.
|
|
164
|
-
*
|
|
165
|
-
* The trade is that a wheel cannot say which *combinations* are on offer. A
|
|
166
|
-
* list of half hours from nine to five is seventeen rows and every one of them
|
|
167
|
-
* is a time the product has; the same thing as columns is an hour column and a
|
|
168
|
-
* minute column, and nothing in either says the two are only valid together.
|
|
169
|
-
* The bounds are still enforced, so a reader can be refused after the fact,
|
|
170
|
-
* which is worse than not being offered it.
|
|
148
|
+
* Whether the control refuses changes while still submitting its value.
|
|
171
149
|
*
|
|
172
|
-
*
|
|
173
|
-
*
|
|
150
|
+
* **Enforced by refusing every request in one place**, which is the seam this
|
|
151
|
+
* component already has: `requestValue` is what every path here comes through,
|
|
152
|
+
* and gating it once is what stops the next call site from being written
|
|
153
|
+
* without the check.
|
|
174
154
|
*
|
|
175
|
-
*
|
|
176
|
-
*
|
|
177
|
-
*
|
|
178
|
-
*
|
|
179
|
-
* attribute *is* the list, which the stylesheet reads as the base rule, so
|
|
180
|
-
* only the departure has to be named.
|
|
155
|
+
* Not `disabled`, which is the confusion worth naming: a disabled control
|
|
156
|
+
* submits nothing and leaves the tab order, and a read-only one submits its
|
|
157
|
+
* value and stays reachable, which is what a form showing a value somebody
|
|
158
|
+
* else set needs.
|
|
181
159
|
*/
|
|
182
|
-
|
|
160
|
+
readOnly: boolean;
|
|
161
|
+
/**
|
|
162
|
+
* Whether the form refuses to submit while nothing is chosen.
|
|
163
|
+
*/
|
|
164
|
+
required: boolean;
|
|
183
165
|
/**
|
|
184
166
|
* Every time on offer, as minutes since midnight.
|
|
185
167
|
*
|
|
@@ -255,25 +237,42 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
255
237
|
*/
|
|
256
238
|
reveal(): void;
|
|
257
239
|
/**
|
|
258
|
-
*
|
|
259
|
-
*
|
|
260
|
-
* **Enforced by refusing every request in one place**, which is the seam this
|
|
261
|
-
* component already has: `requestValue` is what every path here comes through,
|
|
262
|
-
* and gating it once is what stops the next call site from being written
|
|
263
|
-
* without the check.
|
|
240
|
+
* How far apart the offered times are, in minutes.
|
|
264
241
|
*
|
|
265
|
-
*
|
|
266
|
-
*
|
|
267
|
-
*
|
|
268
|
-
* else set needs.
|
|
242
|
+
* Fifteen, which is four rows an hour and ninety-six in a day: enough that a
|
|
243
|
+
* reader scrolls rather than hunts, and few enough that the list is a list.
|
|
244
|
+
* Anything under five is a thousand rows and wants a field instead.
|
|
269
245
|
*/
|
|
270
|
-
|
|
246
|
+
step: number;
|
|
271
247
|
/** Refuses every change while read-only. See `readOnly`. */
|
|
272
248
|
requestValue(next: string): boolean;
|
|
273
249
|
/**
|
|
274
|
-
* Whether the
|
|
250
|
+
* Whether the times are one list or a column each.
|
|
251
|
+
*
|
|
252
|
+
* `list` is the default and offers whole times, which is what a product with
|
|
253
|
+
* opening hours or slots actually has. `wheels` splits them into an hour, a
|
|
254
|
+
* minute and, where the locale uses one, a meridiem: three short columns
|
|
255
|
+
* instead of ninety-six rows, and the only way to reach `23:45` without
|
|
256
|
+
* scrolling most of a day.
|
|
257
|
+
*
|
|
258
|
+
* The trade is that a wheel cannot say which *combinations* are on offer. A
|
|
259
|
+
* list of half hours from nine to five is seventeen rows and every one of them
|
|
260
|
+
* is a time the product has; the same thing as columns is an hour column and a
|
|
261
|
+
* minute column, and nothing in either says the two are only valid together.
|
|
262
|
+
* The bounds are still enforced, so a reader can be refused after the fact,
|
|
263
|
+
* which is worse than not being offered it.
|
|
264
|
+
*
|
|
265
|
+
* So: `list` where the set is the point, `wheels` where any time is allowed
|
|
266
|
+
* and the range is a whole day.
|
|
267
|
+
*
|
|
268
|
+
* **Optional rather than defaulted, which is not a style preference.** A
|
|
269
|
+
* reflecting property with a default writes its attribute onto every host the
|
|
270
|
+
* moment the element upgrades, including the ones a consumer rendered and did
|
|
271
|
+
* not touch, and React reads that as a hydration mismatch. The absent
|
|
272
|
+
* attribute *is* the list, which the stylesheet reads as the base rule, so
|
|
273
|
+
* only the departure has to be named.
|
|
275
274
|
*/
|
|
276
|
-
|
|
275
|
+
variant?: 'list' | 'wheels';
|
|
277
276
|
/**
|
|
278
277
|
* Reports "required and empty", or clears it.
|
|
279
278
|
*
|
|
@@ -288,14 +287,6 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
288
287
|
/**
|
|
289
288
|
* Reports the times to the form, one entry each.
|
|
290
289
|
*
|
|
291
|
-
* **This element was form-associated, took a `name`, held a `value` and
|
|
292
|
-
* reported `valueMissing`, and never called `setFormValue` at all.** So
|
|
293
|
-
* `<helix-time-picker name="start" required>` refused the submit until a
|
|
294
|
-
* reader filled it and then submitted nothing, which is the worst shape the
|
|
295
|
-
* omission takes: every visible signal says the control is participating.
|
|
296
|
-
* Measured before the fix, one form holding both pickers, both named and
|
|
297
|
-
* both seeded: the entry list carried the date and no time.
|
|
298
|
-
*
|
|
299
290
|
* `FormData` and one entry per time, which is `DatePicker.report` exactly.
|
|
300
291
|
* `mode="multiple"` is genuinely several answers, and a server reading
|
|
301
292
|
* `times=09:00,17:00` would have to split it on a convention this library
|
|
@@ -319,9 +310,9 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
319
310
|
* sat at `scrollTop: 0` with the answer nine rows down, which reads as a wheel
|
|
320
311
|
* showing the wrong time rather than as one that failed to scroll.
|
|
321
312
|
*
|
|
322
|
-
*
|
|
323
|
-
*
|
|
324
|
-
*
|
|
313
|
+
* Whatever opens a panel calls `reveal` again afterwards, for the separate
|
|
314
|
+
* reason that method documents. Flat on a page there is no panel and no
|
|
315
|
+
* second call.
|
|
325
316
|
*
|
|
326
317
|
* Safe to run on every update: the listbox stops as soon as the chosen row is
|
|
327
318
|
* within a pixel of center, so a call with nothing to do costs two rect reads
|
|
@@ -334,7 +325,10 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
334
325
|
/** Puts the keyboard on the list, which is the only control here. */
|
|
335
326
|
focus(options?: FocusOptions): void;
|
|
336
327
|
/**
|
|
337
|
-
* One wheel.
|
|
328
|
+
* One wheel, which is a listbox like the whole list is.
|
|
329
|
+
*
|
|
330
|
+
* `protected` rather than `private`, which is the whole of what a seam is
|
|
331
|
+
* here: a tier above has to be able to reach it.
|
|
338
332
|
*
|
|
339
333
|
* `barred` is passed per column rather than read from `disableTimes` here,
|
|
340
334
|
* because a column holds a third of a time and only the caller knows the
|
|
@@ -346,7 +340,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
|
|
|
346
340
|
protected renderColumn(part: 'hour' | 'meridiem' | 'minute', label: string, values: string[], written: (one: string) => string, value: string, barred?: (one: string) => boolean): TemplateResult;
|
|
347
341
|
private renderSpinner;
|
|
348
342
|
/**
|
|
349
|
-
* The flat list of times, for the
|
|
343
|
+
* The flat list of times, for the variant that is not wheels, behind a seam the styled tier can move.
|
|
350
344
|
*
|
|
351
345
|
* A method rather than a fragment inline, so a tier above can render its own,
|
|
352
346
|
* wrap this one, pass it a property the base does not know about, or leave it
|
|
@@ -129,33 +129,6 @@ const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, {
|
|
|
129
129
|
let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
|
|
130
130
|
constructor() {
|
|
131
131
|
super(...arguments);
|
|
132
|
-
/**
|
|
133
|
-
* Whether the current selection fails validation.
|
|
134
|
-
*
|
|
135
|
-
* A flag rather than a message, which is the split Date Picker already drew and
|
|
136
|
-
* these two now follow. A flat picker has no room of its own for a sentence:
|
|
137
|
-
* the field that wraps one owns the label, the hint and the feedback, and a
|
|
138
|
-
* second message inside the panel would be the same error said twice. What is
|
|
139
|
-
* left for the picker is the one thing the field cannot draw from outside, the
|
|
140
|
-
* mark on the answer itself.
|
|
141
|
-
*/
|
|
142
|
-
this.invalid = false;
|
|
143
|
-
/**
|
|
144
|
-
* How far apart the offered times are, in minutes.
|
|
145
|
-
*
|
|
146
|
-
* Fifteen, which is four rows an hour and ninety-six in a day: enough that a
|
|
147
|
-
* reader scrolls rather than hunts, and few enough that the list is a list.
|
|
148
|
-
* Anything under five is a thousand rows and wants a field instead.
|
|
149
|
-
*/
|
|
150
|
-
this.step = 15;
|
|
151
|
-
/**
|
|
152
|
-
* Earliest time offered, as `HH:mm`.
|
|
153
|
-
*/
|
|
154
|
-
this.min = '00:00';
|
|
155
|
-
/**
|
|
156
|
-
* Latest time offered, as `HH:mm`.
|
|
157
|
-
*/
|
|
158
|
-
this.max = '23:59';
|
|
159
132
|
/**
|
|
160
133
|
* Times that cannot be chosen, comma separated, as `HH:mm`.
|
|
161
134
|
*
|
|
@@ -169,6 +142,20 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
169
142
|
* reached honestly rather than by handing over an empty range.
|
|
170
143
|
*/
|
|
171
144
|
this.disableTimes = '';
|
|
145
|
+
/**
|
|
146
|
+
* Whether the current selection fails validation.
|
|
147
|
+
*
|
|
148
|
+
* A flag rather than a message, the same split Date Picker draws. A flat
|
|
149
|
+
* picker has no room of its own for a sentence: the field that wraps one owns
|
|
150
|
+
* the label, the hint and the feedback, and a second message inside the panel
|
|
151
|
+
* would be the same error said twice. What is left for the picker is the one
|
|
152
|
+
* thing the field cannot draw from outside, the mark on the answer itself.
|
|
153
|
+
*/
|
|
154
|
+
this.invalid = false;
|
|
155
|
+
/**
|
|
156
|
+
* Accessible name for the list, which has no visible one of its own.
|
|
157
|
+
*/
|
|
158
|
+
this.label = 'Time';
|
|
172
159
|
/**
|
|
173
160
|
* Language tag the times are written in.
|
|
174
161
|
*
|
|
@@ -176,9 +163,31 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
176
163
|
*/
|
|
177
164
|
this.locale = '';
|
|
178
165
|
/**
|
|
179
|
-
*
|
|
166
|
+
* Latest time offered, as `HH:mm`.
|
|
180
167
|
*/
|
|
181
|
-
this.
|
|
168
|
+
this.max = '23:59';
|
|
169
|
+
/**
|
|
170
|
+
* Earliest time offered, as `HH:mm`.
|
|
171
|
+
*/
|
|
172
|
+
this.min = '00:00';
|
|
173
|
+
/**
|
|
174
|
+
* Whether the control refuses changes while still submitting its value.
|
|
175
|
+
*
|
|
176
|
+
* **Enforced by refusing every request in one place**, which is the seam this
|
|
177
|
+
* component already has: `requestValue` is what every path here comes through,
|
|
178
|
+
* and gating it once is what stops the next call site from being written
|
|
179
|
+
* without the check.
|
|
180
|
+
*
|
|
181
|
+
* Not `disabled`, which is the confusion worth naming: a disabled control
|
|
182
|
+
* submits nothing and leaves the tab order, and a read-only one submits its
|
|
183
|
+
* value and stays reachable, which is what a form showing a value somebody
|
|
184
|
+
* else set needs.
|
|
185
|
+
*/
|
|
186
|
+
this.readOnly = false;
|
|
187
|
+
/**
|
|
188
|
+
* Whether the form refuses to submit while nothing is chosen.
|
|
189
|
+
*/
|
|
190
|
+
this.required = false;
|
|
182
191
|
/**
|
|
183
192
|
* Takes what the list announced and constrains it to what the mode allows.
|
|
184
193
|
*
|
|
@@ -191,12 +200,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
191
200
|
*/
|
|
192
201
|
this.handleChange = (event) => {
|
|
193
202
|
event.stopPropagation();
|
|
194
|
-
/*
|
|
195
|
-
the
|
|
196
|
-
|
|
197
|
-
listbox is told as well, which is what grays it and takes it out of the
|
|
198
|
-
tab order, and this refuses at the source so every path in is covered by
|
|
199
|
-
one check.
|
|
203
|
+
/* The listbox is told as well, which is what grays it and takes it out of
|
|
204
|
+
the tab order, and this refuses at the source so every path in is covered
|
|
205
|
+
by one check.
|
|
200
206
|
`isDisabled` rather than `disabled`, which is only the half a consumer
|
|
201
207
|
wrote: an ancestor `<fieldset disabled>` is the other half. */
|
|
202
208
|
if (this.isDisabled) {
|
|
@@ -261,23 +267,13 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
261
267
|
this.requestValue(whole);
|
|
262
268
|
};
|
|
263
269
|
/**
|
|
264
|
-
*
|
|
265
|
-
*
|
|
266
|
-
* **Enforced by refusing every request in one place**, which is the seam this
|
|
267
|
-
* component already has: `requestValue` is what every path here comes through,
|
|
268
|
-
* and gating it once is what stops the next call site from being written
|
|
269
|
-
* without the check.
|
|
270
|
+
* How far apart the offered times are, in minutes.
|
|
270
271
|
*
|
|
271
|
-
*
|
|
272
|
-
*
|
|
273
|
-
*
|
|
274
|
-
* else set needs.
|
|
275
|
-
*/
|
|
276
|
-
this.readOnly = false;
|
|
277
|
-
/**
|
|
278
|
-
* Whether the form refuses to submit while nothing is chosen.
|
|
272
|
+
* Fifteen, which is four rows an hour and ninety-six in a day: enough that a
|
|
273
|
+
* reader scrolls rather than hunts, and few enough that the list is a list.
|
|
274
|
+
* Anything under five is a thousand rows and wants a field instead.
|
|
279
275
|
*/
|
|
280
|
-
this.
|
|
276
|
+
this.step = 15;
|
|
281
277
|
}
|
|
282
278
|
/**
|
|
283
279
|
* Every time on offer, as minutes since midnight.
|
|
@@ -413,11 +409,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
413
409
|
this.internals.setValidity({ valueMissing: true }, 'Choose a time.', anchor);
|
|
414
410
|
return;
|
|
415
411
|
}
|
|
416
|
-
/* A value the wheels cannot read is bad input, the same as on the calendar
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
412
|
+
/* A value the wheels cannot read is bad input, the same as on the calendar:
|
|
413
|
+
`value="not-a-time"` marks no row, and would otherwise report `:valid` and
|
|
414
|
+
be handed to the form. `asTime` rejects the hours and minutes that are
|
|
415
|
+
shaped right and out of range as well as the ones that are not shaped
|
|
416
|
+
right at all. */
|
|
421
417
|
const held = this.held;
|
|
422
418
|
if (held.length > 0 && held.some((one) => asTime(one) === null)) {
|
|
423
419
|
this.internals.setValidity({ badInput: true }, this.mode === undefined
|
|
@@ -430,14 +426,6 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
430
426
|
/**
|
|
431
427
|
* Reports the times to the form, one entry each.
|
|
432
428
|
*
|
|
433
|
-
* **This element was form-associated, took a `name`, held a `value` and
|
|
434
|
-
* reported `valueMissing`, and never called `setFormValue` at all.** So
|
|
435
|
-
* `<helix-time-picker name="start" required>` refused the submit until a
|
|
436
|
-
* reader filled it and then submitted nothing, which is the worst shape the
|
|
437
|
-
* omission takes: every visible signal says the control is participating.
|
|
438
|
-
* Measured before the fix, one form holding both pickers, both named and
|
|
439
|
-
* both seeded: the entry list carried the date and no time.
|
|
440
|
-
*
|
|
441
429
|
* `FormData` and one entry per time, which is `DatePicker.report` exactly.
|
|
442
430
|
* `mode="multiple"` is genuinely several answers, and a server reading
|
|
443
431
|
* `times=09:00,17:00` would have to split it on a convention this library
|
|
@@ -472,9 +460,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
472
460
|
* sat at `scrollTop: 0` with the answer nine rows down, which reads as a wheel
|
|
473
461
|
* showing the wrong time rather than as one that failed to scroll.
|
|
474
462
|
*
|
|
475
|
-
*
|
|
476
|
-
*
|
|
477
|
-
*
|
|
463
|
+
* Whatever opens a panel calls `reveal` again afterwards, for the separate
|
|
464
|
+
* reason that method documents. Flat on a page there is no panel and no
|
|
465
|
+
* second call.
|
|
478
466
|
*
|
|
479
467
|
* Safe to run on every update: the listbox stops as soon as the chosen row is
|
|
480
468
|
* within a pixel of center, so a call with nothing to do costs two rect reads
|
|
@@ -510,9 +498,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
510
498
|
focus(options) {
|
|
511
499
|
this.renderRoot?.querySelector('[part="list"]')?.focus(options);
|
|
512
500
|
}
|
|
513
|
-
/* One wheel, which is a listbox like the whole list is. */
|
|
514
501
|
/**
|
|
515
|
-
* One wheel.
|
|
502
|
+
* One wheel, which is a listbox like the whole list is.
|
|
503
|
+
*
|
|
504
|
+
* `protected` rather than `private`, which is the whole of what a seam is
|
|
505
|
+
* here: a tier above has to be able to reach it.
|
|
516
506
|
*
|
|
517
507
|
* `barred` is passed per column rather than read from `disableTimes` here,
|
|
518
508
|
* because a column holds a third of a time and only the caller knows the
|
|
@@ -521,8 +511,6 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
521
511
|
* barred only when every minute in it is, since one free minute is a reason to
|
|
522
512
|
* open the wheel rather than to close it.
|
|
523
513
|
*/
|
|
524
|
-
/* `protected` rather than `private`, which is the whole of what a seam is
|
|
525
|
-
here: the method already existed and a tier above could not reach it. */
|
|
526
514
|
renderColumn(part, label, values, written, value, barred = () => false) {
|
|
527
515
|
return html `<${this.tag('listbox')}
|
|
528
516
|
part="column"
|
|
@@ -563,7 +551,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
563
551
|
</div>`;
|
|
564
552
|
}
|
|
565
553
|
/**
|
|
566
|
-
* The flat list of times, for the
|
|
554
|
+
* The flat list of times, for the variant that is not wheels, behind a seam the styled tier can move.
|
|
567
555
|
*
|
|
568
556
|
* A method rather than a fragment inline, so a tier above can render its own,
|
|
569
557
|
* wrap this one, pass it a property the base does not know about, or leave it
|
|
@@ -630,39 +618,39 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
|
|
|
630
618
|
this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
|
|
631
619
|
}
|
|
632
620
|
};
|
|
621
|
+
__decorate([
|
|
622
|
+
property({ attribute: 'disable-times' })
|
|
623
|
+
], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
|
|
633
624
|
__decorate([
|
|
634
625
|
property({ reflect: true, type: Boolean })
|
|
635
626
|
], HelixHeadlessTimePicker.prototype, "invalid", void 0);
|
|
636
|
-
__decorate([
|
|
637
|
-
property({ type: Number })
|
|
638
|
-
], HelixHeadlessTimePicker.prototype, "step", void 0);
|
|
639
627
|
__decorate([
|
|
640
628
|
property()
|
|
641
|
-
], HelixHeadlessTimePicker.prototype, "
|
|
629
|
+
], HelixHeadlessTimePicker.prototype, "label", void 0);
|
|
642
630
|
__decorate([
|
|
643
631
|
property()
|
|
644
|
-
], HelixHeadlessTimePicker.prototype, "
|
|
645
|
-
__decorate([
|
|
646
|
-
property({ attribute: 'disable-times' })
|
|
647
|
-
], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
|
|
632
|
+
], HelixHeadlessTimePicker.prototype, "locale", void 0);
|
|
648
633
|
__decorate([
|
|
649
634
|
property()
|
|
650
|
-
], HelixHeadlessTimePicker.prototype, "
|
|
635
|
+
], HelixHeadlessTimePicker.prototype, "max", void 0);
|
|
651
636
|
__decorate([
|
|
652
637
|
property()
|
|
653
|
-
], HelixHeadlessTimePicker.prototype, "
|
|
638
|
+
], HelixHeadlessTimePicker.prototype, "min", void 0);
|
|
654
639
|
__decorate([
|
|
655
640
|
property({ reflect: true })
|
|
656
641
|
], HelixHeadlessTimePicker.prototype, "mode", void 0);
|
|
657
|
-
__decorate([
|
|
658
|
-
property({ reflect: true })
|
|
659
|
-
], HelixHeadlessTimePicker.prototype, "variant", void 0);
|
|
660
642
|
__decorate([
|
|
661
643
|
property({ attribute: 'readonly', reflect: true, type: Boolean })
|
|
662
644
|
], HelixHeadlessTimePicker.prototype, "readOnly", void 0);
|
|
663
645
|
__decorate([
|
|
664
646
|
property({ reflect: true, type: Boolean })
|
|
665
647
|
], HelixHeadlessTimePicker.prototype, "required", void 0);
|
|
648
|
+
__decorate([
|
|
649
|
+
property({ type: Number })
|
|
650
|
+
], HelixHeadlessTimePicker.prototype, "step", void 0);
|
|
651
|
+
__decorate([
|
|
652
|
+
property({ reflect: true })
|
|
653
|
+
], HelixHeadlessTimePicker.prototype, "variant", void 0);
|
|
666
654
|
HelixHeadlessTimePicker = __decorate([
|
|
667
655
|
customElement('helix-headless-time-picker')
|
|
668
656
|
], HelixHeadlessTimePicker);
|
|
@@ -16,7 +16,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
16
16
|
* settles with no index, no counting parent and no script. `Steps` and
|
|
17
17
|
* `Breadcrumbs` both do it this way and for the same reason.
|
|
18
18
|
*
|
|
19
|
-
* `tone` says what kind of event it was, and it is the only thing that
|
|
19
|
+
* `tone` says what kind of event it was, and it is the only thing that colors
|
|
20
20
|
* the mark. It takes `Announcement`'s vocabulary rather than a second one.
|
|
21
21
|
*
|
|
22
22
|
* @since 0.1.0
|
|
@@ -27,9 +27,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
27
27
|
*
|
|
28
28
|
* @slot - What happened.
|
|
29
29
|
* @slot marker - The mark on the line. Falls back to a dot, which is the slot's
|
|
30
|
-
* own fallback content
|
|
31
|
-
*
|
|
32
|
-
* answers it by rendering what is inside the slot when nothing replaced it.
|
|
30
|
+
* own fallback content: whether a consumer slotted a mark is a question only the
|
|
31
|
+
* platform can answer, and it answers it at assignment time.
|
|
33
32
|
* @slot time - When it happened, as a reader should see it written.
|
|
34
33
|
*
|
|
35
34
|
* @csspart connector - The line arriving at this entry.
|
|
@@ -56,13 +55,11 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
|
|
|
56
55
|
/**
|
|
57
56
|
* The mark for an entry that slotted none, which the tone decides.
|
|
58
57
|
*
|
|
59
|
-
* **A `protected render…()` and
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* not markup a tier would redraw,
|
|
63
|
-
*
|
|
64
|
-
* the same hole the check's own comment records closing for a static helper,
|
|
65
|
-
* reopened by a different spelling of the same thing.
|
|
58
|
+
* **A seam is a `protected render…()` and never a getter.** A slot's fallback
|
|
59
|
+
* answers a consumer and a seam answers the tier above, and a getter answers
|
|
60
|
+
* neither. The check tests for parentheses, `${this.x}` being permitted
|
|
61
|
+
* because a property is not markup a tier would redraw, so a getter returning
|
|
62
|
+
* a template reads as a bare reference and is let through.
|
|
66
63
|
*
|
|
67
64
|
* Toned entries are reporting something, so they take the circle with a
|
|
68
65
|
* center, which is `Steps` drawing the stage a reader is standing on. Untoned
|
|
@@ -25,7 +25,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
|
25
25
|
* settles with no index, no counting parent and no script. `Steps` and
|
|
26
26
|
* `Breadcrumbs` both do it this way and for the same reason.
|
|
27
27
|
*
|
|
28
|
-
* `tone` says what kind of event it was, and it is the only thing that
|
|
28
|
+
* `tone` says what kind of event it was, and it is the only thing that colors
|
|
29
29
|
* the mark. It takes `Announcement`'s vocabulary rather than a second one.
|
|
30
30
|
*
|
|
31
31
|
* @since 0.1.0
|
|
@@ -36,9 +36,8 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
|
36
36
|
*
|
|
37
37
|
* @slot - What happened.
|
|
38
38
|
* @slot marker - The mark on the line. Falls back to a dot, which is the slot's
|
|
39
|
-
* own fallback content
|
|
40
|
-
*
|
|
41
|
-
* answers it by rendering what is inside the slot when nothing replaced it.
|
|
39
|
+
* own fallback content: whether a consumer slotted a mark is a question only the
|
|
40
|
+
* platform can answer, and it answers it at assignment time.
|
|
42
41
|
* @slot time - When it happened, as a reader should see it written.
|
|
43
42
|
*
|
|
44
43
|
* @csspart connector - The line arriving at this entry.
|
|
@@ -67,13 +66,11 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
|
|
|
67
66
|
/**
|
|
68
67
|
* The mark for an entry that slotted none, which the tone decides.
|
|
69
68
|
*
|
|
70
|
-
* **A `protected render…()` and
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
* not markup a tier would redraw,
|
|
74
|
-
*
|
|
75
|
-
* the same hole the check's own comment records closing for a static helper,
|
|
76
|
-
* reopened by a different spelling of the same thing.
|
|
69
|
+
* **A seam is a `protected render…()` and never a getter.** A slot's fallback
|
|
70
|
+
* answers a consumer and a seam answers the tier above, and a getter answers
|
|
71
|
+
* neither. The check tests for parentheses, `${this.x}` being permitted
|
|
72
|
+
* because a property is not markup a tier would redraw, so a getter returning
|
|
73
|
+
* a template reads as a bare reference and is let through.
|
|
77
74
|
*
|
|
78
75
|
* Toned entries are reporting something, so they take the circle with a
|
|
79
76
|
* center, which is `Steps` drawing the stage a reader is standing on. Untoned
|
|
@@ -21,13 +21,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
|
|
|
21
21
|
* reason `Steps` gives: the entries are the consumer's elements in the light
|
|
22
22
|
* DOM, so a list element here would be a list whose items are somewhere else.
|
|
23
23
|
*
|
|
24
|
-
* **It runs down the page and has no horizontal form.**
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* of this was a second component rendering the same picture from thinner data.
|
|
30
|
-
* A run of stages along a page is `Steps`.
|
|
24
|
+
* **It runs down the page and has no horizontal form.** Laid along a line there
|
|
25
|
+
* is no room for the time or the sentence that are the whole reason to reach for
|
|
26
|
+
* a timeline, so what survives is a mark and a short label, and that is a
|
|
27
|
+
* stepper. `Steps` is already horizontal by default and already draws it. A run
|
|
28
|
+
* of stages along a page is `Steps`.
|
|
31
29
|
*
|
|
32
30
|
* @since 0.1.0
|
|
33
31
|
* @status stable
|
|
@@ -28,13 +28,11 @@ import { property } from 'lit/decorators.js';
|
|
|
28
28
|
* reason `Steps` gives: the entries are the consumer's elements in the light
|
|
29
29
|
* DOM, so a list element here would be a list whose items are somewhere else.
|
|
30
30
|
*
|
|
31
|
-
* **It runs down the page and has no horizontal form.**
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
* of this was a second component rendering the same picture from thinner data.
|
|
37
|
-
* A run of stages along a page is `Steps`.
|
|
31
|
+
* **It runs down the page and has no horizontal form.** Laid along a line there
|
|
32
|
+
* is no room for the time or the sentence that are the whole reason to reach for
|
|
33
|
+
* a timeline, so what survives is a mark and a short label, and that is a
|
|
34
|
+
* stepper. `Steps` is already horizontal by default and already draws it. A run
|
|
35
|
+
* of stages along a page is `Steps`.
|
|
38
36
|
*
|
|
39
37
|
* @since 0.1.0
|
|
40
38
|
* @status stable
|