@fusion.dev/helix-headless 0.105.0 → 0.107.0

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.
Files changed (162) hide show
  1. package/custom-elements.json +7324 -3890
  2. package/dist/accordion/item/accordion-item.d.ts +17 -16
  3. package/dist/accordion/root/accordion-root.d.ts +13 -17
  4. package/dist/announcement/root/announcement-root.d.ts +24 -31
  5. package/dist/app-header/root/app-header-root.d.ts +14 -14
  6. package/dist/area-chart/root/area-chart-root.d.ts +29 -48
  7. package/dist/avatar/group/avatar-group.d.ts +6 -8
  8. package/dist/avatar/root/avatar-root.d.ts +11 -11
  9. package/dist/badge/root/badge-root.d.ts +14 -15
  10. package/dist/bar-chart/root/bar-chart-root.d.ts +40 -44
  11. package/dist/blockquote/root/blockquote-root.d.ts +5 -7
  12. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +25 -33
  13. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +12 -11
  14. package/dist/button/root/button-root.d.ts +16 -17
  15. package/dist/button-group/root/button-group-root.d.ts +9 -10
  16. package/dist/callout/root/callout-root.d.ts +10 -15
  17. package/dist/canvas/edge/canvas-edge.d.ts +21 -21
  18. package/dist/canvas/node/canvas-node.d.ts +43 -45
  19. package/dist/canvas/root/canvas-root.d.ts +100 -99
  20. package/dist/card/root/card-root.d.ts +10 -12
  21. package/dist/carousel/root/carousel-root.d.ts +32 -33
  22. package/dist/chat/composer/chat-composer.d.ts +24 -26
  23. package/dist/chat/message/chat-message.d.ts +30 -33
  24. package/dist/chat/root/chat-root.d.ts +63 -80
  25. package/dist/checkbox/root/checkbox-root.d.ts +30 -32
  26. package/dist/checkbox-group/root/checkbox-group-root.d.ts +25 -25
  27. package/dist/code/root/code-root.d.ts +6 -10
  28. package/dist/code-block/root/code-block-root.d.ts +35 -48
  29. package/dist/color-input/root/color-input-root.d.ts +52 -56
  30. package/dist/color-picker/root/color-picker-root.d.ts +49 -49
  31. package/dist/combobox/root/combobox-root.d.ts +52 -53
  32. package/dist/command/root/command-root.d.ts +35 -40
  33. package/dist/copy-button/root/copy-button-root.d.ts +24 -26
  34. package/dist/data-table/root/data-table-root.d.ts +106 -107
  35. package/dist/date-input/root/date-input-root.d.ts +54 -53
  36. package/dist/date-picker/root/date-picker-root.d.ts +25 -21
  37. package/dist/description-list/item/description-list-item.d.ts +7 -7
  38. package/dist/description-list/root/description-list-root.d.ts +10 -15
  39. package/dist/dialog/root/dialog-root.d.ts +22 -19
  40. package/dist/divider/root/divider-root.d.ts +12 -13
  41. package/dist/donut-chart/root/donut-chart-root.d.ts +19 -20
  42. package/dist/drawer/root/drawer-root.d.ts +19 -18
  43. package/dist/drilldown/item/drilldown-item.d.ts +28 -28
  44. package/dist/drilldown/root/drilldown-root.d.ts +22 -28
  45. package/dist/element-events.generated.js +7 -0
  46. package/dist/empty/root/empty-root.d.ts +16 -19
  47. package/dist/file-input/root/file-input-root.d.ts +32 -32
  48. package/dist/filter-input/chip/filter-chip.d.ts +36 -39
  49. package/dist/filter-input/field/filter-field.d.ts +25 -31
  50. package/dist/filter-input/menu/filter-menu.d.ts +50 -47
  51. package/dist/filter-input/operator/filter-operator.d.ts +15 -20
  52. package/dist/filter-input/root/filter-input-root.d.ts +80 -98
  53. package/dist/format-date/root/format-date-root.d.ts +19 -27
  54. package/dist/heatmap/root/heatmap-root.d.ts +40 -41
  55. package/dist/icon/root/icon-root.d.ts +21 -23
  56. package/dist/icon-button/root/icon-button-root.d.ts +12 -14
  57. package/dist/image/root/image-root.d.ts +30 -30
  58. package/dist/input/root/input-root.d.ts +36 -35
  59. package/dist/kbd/root/kbd-root.d.ts +13 -15
  60. package/dist/legend/root/legend-root.d.ts +18 -16
  61. package/dist/lightbox/item/lightbox-item.d.ts +13 -15
  62. package/dist/lightbox/root/lightbox-root.d.ts +40 -41
  63. package/dist/line-chart/root/line-chart-root.d.ts +20 -29
  64. package/dist/list/item/list-item.d.ts +17 -22
  65. package/dist/list/root/list-root.d.ts +6 -7
  66. package/dist/listbox/root/listbox-root.d.ts +42 -41
  67. package/dist/loader/root/loader-root.d.ts +16 -20
  68. package/dist/map/area/map-area.d.ts +6 -0
  69. package/dist/map/area/map-area.js +3 -0
  70. package/dist/map/buildings/map-buildings.d.ts +45 -0
  71. package/dist/map/buildings/map-buildings.js +37 -0
  72. package/dist/map/contours/map-contours.d.ts +61 -0
  73. package/dist/map/contours/map-contours.js +54 -0
  74. package/dist/map/index.d.ts +7 -0
  75. package/dist/map/index.js +5 -0
  76. package/dist/map/landcover/map-landcover.d.ts +47 -0
  77. package/dist/map/landcover/map-landcover.js +37 -0
  78. package/dist/map/marker/map-marker.d.ts +11 -4
  79. package/dist/map/marker/map-marker.js +13 -1
  80. package/dist/map/points/map-points.d.ts +7 -1
  81. package/dist/map/points/map-points.js +3 -0
  82. package/dist/map/raster/map-raster.d.ts +84 -0
  83. package/dist/map/raster/map-raster.js +96 -0
  84. package/dist/map/root/map-root.d.ts +169 -7
  85. package/dist/map/root/map-root.js +352 -4
  86. package/dist/map/route/map-route.d.ts +6 -0
  87. package/dist/map/route/map-route.js +3 -0
  88. package/dist/map/terrain/map-terrain.d.ts +68 -0
  89. package/dist/map/terrain/map-terrain.js +58 -0
  90. package/dist/megamenu/root/megamenu-root.d.ts +27 -25
  91. package/dist/menu/item/menu-item.d.ts +30 -31
  92. package/dist/menu/root/menu-root.d.ts +25 -29
  93. package/dist/meter/root/meter-root.d.ts +22 -21
  94. package/dist/navigation/root/navigation-root.d.ts +13 -16
  95. package/dist/notifications/group/notification-group.d.ts +27 -28
  96. package/dist/notifications/notification/notification.d.ts +35 -42
  97. package/dist/notifications/root/notifications-root.d.ts +22 -24
  98. package/dist/number-input/root/number-input-root.d.ts +46 -50
  99. package/dist/object-inspector/root/object-inspector-root.d.ts +46 -58
  100. package/dist/option/group/option-group.d.ts +11 -11
  101. package/dist/option/root/option-root.d.ts +28 -33
  102. package/dist/outline/root/outline-root.d.ts +18 -17
  103. package/dist/pagination/root/pagination-root.d.ts +37 -39
  104. package/dist/pagination/size/pagination-size.d.ts +37 -43
  105. package/dist/pagination/summary/pagination-summary.d.ts +12 -14
  106. package/dist/pin-input/root/pin-input-root.d.ts +32 -38
  107. package/dist/popover/root/popover-root.d.ts +16 -21
  108. package/dist/progress/root/progress-root.d.ts +16 -14
  109. package/dist/qr-code/root/qr-code-root.d.ts +22 -25
  110. package/dist/quote/root/quote-root.d.ts +5 -6
  111. package/dist/radio/group/radio-group.d.ts +26 -28
  112. package/dist/radio/root/radio-root.d.ts +24 -28
  113. package/dist/rating/root/rating-root.d.ts +27 -30
  114. package/dist/scatter-chart/root/scatter-chart-root.d.ts +43 -55
  115. package/dist/scroll-area/root/scroll-area-root.d.ts +15 -21
  116. package/dist/select/root/select-root.d.ts +41 -44
  117. package/dist/skeleton/root/skeleton-root.d.ts +7 -8
  118. package/dist/skip-link/root/skip-link-root.d.ts +21 -28
  119. package/dist/slider/root/slider-root.d.ts +36 -39
  120. package/dist/sparkline/root/sparkline-root.d.ts +22 -28
  121. package/dist/speed-dial/item/speed-dial-item.d.ts +21 -21
  122. package/dist/speed-dial/root/speed-dial-root.d.ts +25 -27
  123. package/dist/splitter/root/splitter-root.d.ts +37 -41
  124. package/dist/stat/group/stat-group.d.ts +4 -4
  125. package/dist/stat/root/stat-root.d.ts +8 -9
  126. package/dist/steps/root/steps-root.d.ts +11 -14
  127. package/dist/steps/step/step.d.ts +22 -29
  128. package/dist/switch/root/switch-root.d.ts +20 -24
  129. package/dist/table/cell/table-cell.d.ts +18 -8
  130. package/dist/table/cell/table-cell.js +5 -1
  131. package/dist/table/column/table-column.d.ts +62 -55
  132. package/dist/table/root/table-root.d.ts +16 -17
  133. package/dist/table/row/table-row.d.ts +3 -3
  134. package/dist/tabs/panel/tab-panel.d.ts +3 -3
  135. package/dist/tabs/root/tabs-root.d.ts +19 -17
  136. package/dist/tabs/tab/tab.d.ts +6 -6
  137. package/dist/tag/root/tag-root.d.ts +11 -12
  138. package/dist/textarea/root/textarea-root.d.ts +29 -32
  139. package/dist/time-input/root/time-input-root.d.ts +70 -69
  140. package/dist/time-picker/root/time-picker-root.d.ts +58 -66
  141. package/dist/timeline/item/timeline-item.d.ts +18 -24
  142. package/dist/timeline/root/timeline-root.d.ts +13 -21
  143. package/dist/toast/item/toast-item.d.ts +21 -22
  144. package/dist/toast/root/toast-root.d.ts +18 -23
  145. package/dist/toggle/group/toggle-group.d.ts +23 -25
  146. package/dist/toggle/root/toggle-root.d.ts +8 -8
  147. package/dist/toolbar/root/toolbar-root.d.ts +7 -10
  148. package/dist/tooltip/root/tooltip-root.d.ts +41 -47
  149. package/dist/tour/root/tour-root.d.ts +24 -26
  150. package/dist/tour/stop/tour-stop.d.ts +39 -48
  151. package/dist/tree/item/tree-item.d.ts +23 -25
  152. package/dist/tree/root/tree-root.d.ts +13 -12
  153. package/dist/trend/root/trend-root.d.ts +18 -19
  154. package/dist/video/root/video-root.d.ts +108 -101
  155. package/dist/video-playlist/item/video-playlist-item.d.ts +23 -28
  156. package/dist/video-playlist/menu/video-playlist-menu.d.ts +17 -21
  157. package/dist/video-playlist/root/video-playlist-root.d.ts +21 -25
  158. package/dist/virtual-list/root/virtual-list-root.d.ts +27 -26
  159. package/package.json +5 -5
  160. package/types/jsx.d.ts +10363 -9520
  161. package/types/svelte.d.ts +5 -0
  162. package/types/vue.d.ts +1440 -1032
@@ -4,40 +4,31 @@ import '../../listbox/index.js';
4
4
  import '../../option/index.js';
5
5
  declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
6
6
  /**
7
- * @summary Picks a time, from a list of them.
7
+ * @summary A control for choosing a time from a list or from wheels.
8
8
  *
9
9
  * @description
10
- * **A list rather than three wheels**, and the reason is what a list already
11
- * is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
12
- * the announcement of a set of options, and a time at a step is a set of
13
- * options. Three little wheels for hours, minutes and a meridiem are three
14
- * controls to build, three to test, and a tab stop each for something a reader
15
- * answers once.
10
+ * Shows the times at each `step` as a `Listbox`, which provides the keyboard
11
+ * behavior, typeahead, scrolling into view, and announcements for a set of
12
+ * options. `variant="wheels"` shows a column each for the hour, the minute, and
13
+ * the meridiem.
16
14
  *
17
- * **A step is what makes it a list at all.** Fifteen minutes is ninety-six rows,
18
- * which a reader scrolls or types into; one minute is one thousand four hundred
19
- * and forty, which is a listbox in name only. So the list is for the times a
20
- * product actually offers, and arbitrary times are the field's job in Input
21
- * Time, the same division Date Input draws between typing a date and using the
22
- * calendar.
15
+ * The step keeps the list usable. At the default of 15 minutes a day is 96
16
+ * rows, which people can scroll or type into. At 1 minute it is 1,440. Use the
17
+ * list for the times your product offers, and Time Input for any time, the same
18
+ * way Date Input separates typing a date from picking one on the calendar.
23
19
  *
24
- * **The value is `HH:mm` on a twenty-four hour clock, always.** That is what a
25
- * form submits and what `min` and `max` compare against, and it sorts as a
26
- * string, which is the whole reason the shape is that one. What each row *says*
27
- * is the reader's own convention, from `Intl`.
20
+ * The value is always `HH:mm` on a 24-hour clock. A form submits that shape,
21
+ * `min` and `max` compare against it, and it sorts as a string. Each row's text
22
+ * follows the person's own conventions, from `Intl`.
28
23
  *
29
- * **The chosen row is marked in the markup, not worked out on upgrade.** The
30
- * listbox is handed the answer as `.value`, and lit-ssr serializes no property
31
- * binding, so a served `value="09:30"` shipped ninety-six rows with nothing on
32
- * any of them saying which one it was: the mark arrived when the listbox
33
- * upgraded and ran `place`. So each option is given `selected` as well, which
34
- * is an attribute binding and does serve, and which the listbox then agrees
35
- * with rather than fights, `place` writing the same answer from the same value.
36
- * `selected` is the declaration a consumer writes on `Option` anywhere else in
37
- * the library, and Date Picker expresses its own choice as markup for the same
38
- * reason: a picker whose answer is invisible until a script runs is a picker
39
- * whose answer is not served at all. Both readings do it, the list and the
40
- * wheels, a wheel being a listbox like the list is.
24
+ * The chosen row is marked in the served markup. The listbox gets the answer as
25
+ * `.value`, and Lit SSR serializes no property binding, so without more the 96
26
+ * served rows would carry no mark until the listbox upgrades and runs `place`.
27
+ * Each option also gets `selected`, an attribute binding that does serialize,
28
+ * and `place` then writes the same answer from the same value. This is the same
29
+ * `selected` you write on `Option` elsewhere in Helix, and Date Picker marks
30
+ * its choice in markup for the same reason. The list and the wheels both do
31
+ * this, because each wheel is also a listbox.
41
32
  *
42
33
  * @since 0.1.0
43
34
  * @status stable
@@ -45,47 +36,47 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
45
36
  * @aliases Time, TimeList
46
37
  * @documentation https://fusion.dev/helix/components/time-picker
47
38
  *
48
- * @event {Event} change - Announced once the value has moved.
49
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes. Cancelable: refusing it takes the decision and nothing moves.
50
- * @event {Event} input - Announced once the value has moved.
39
+ * @event {Event} change - Fired after the value changes.
40
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes, and cancelable. Canceling it keeps the current time.
41
+ * @event {Event} input - Fired after the value changes.
51
42
  *
52
- * @csspart column - One of them.
53
- * @csspart column-empty - Shown when a filter has hidden everything.
54
- * @csspart column-feedback - What is wrong with it.
55
- * @csspart column-filter-icon - The mark beside that field.
56
- * @csspart column-filter-mark - The glyph beside the filter field, where none is slotted.
43
+ * @csspart column - One column of the wheels.
44
+ * @csspart column-empty - The text shown when the filter hides every option.
45
+ * @csspart column-feedback - The message that says what is wrong with the value.
46
+ * @csspart column-filter-icon - The icon beside the filter field.
47
+ * @csspart column-filter-mark - The default icon beside the filter field, shown when none is slotted.
57
48
  * @csspart column-hint - Help under the list.
58
- * @csspart column-items - The list itself.
59
- * @csspart column-label - The question, over the list.
60
- * @csspart column-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
61
- * @csspart column-loading - Shown while the options are still on their way.
62
- * @csspart column-search - The region holding the field that narrows the list.
63
- * @csspart column-search-field - The field itself.
49
+ * @csspart column-items - The list of options.
50
+ * @csspart column-label - The label above the list.
51
+ * @csspart column-live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
52
+ * @csspart column-loading - The text shown while the options load.
53
+ * @csspart column-search - The region that holds the filter field.
54
+ * @csspart column-search-field - The filter field.
64
55
  * @csspart columns - The row of columns, in `wheels`.
65
56
  * @csspart list - The listbox holding the times, in `list`.
66
- * @csspart list-empty - Shown when a filter has hidden everything.
67
- * @csspart list-feedback - What is wrong with it.
68
- * @csspart list-filter-icon - The mark beside that field.
69
- * @csspart list-filter-mark - The glyph beside the filter field, where none is slotted.
57
+ * @csspart list-empty - The text shown when the filter hides every option.
58
+ * @csspart list-feedback - The message that says what is wrong with the value.
59
+ * @csspart list-filter-icon - The icon beside the filter field.
60
+ * @csspart list-filter-mark - The default icon beside the filter field, shown when none is slotted.
70
61
  * @csspart list-hint - Help under the list.
71
- * @csspart list-items - The list itself.
72
- * @csspart list-label - The question, over the list.
73
- * @csspart list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
74
- * @csspart list-loading - Shown while the options are still on their way.
75
- * @csspart list-search - The region holding the field that narrows the list.
76
- * @csspart list-search-field - The field itself.
77
- * @csspart option - One time in it. Carries `data-between` inside a range.
78
- * @csspart option-between - A time inside a chosen range, short of either end, beside `option`.
79
- * @csspart option-description - The caption under the words, when there is one.
62
+ * @csspart list-items - The list of options.
63
+ * @csspart list-label - The label above the list.
64
+ * @csspart list-live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
65
+ * @csspart list-loading - The text shown while the options load.
66
+ * @csspart list-search - The region that holds the filter field.
67
+ * @csspart list-search-field - The filter field.
68
+ * @csspart option - One time in the list. It carries `data-between` inside a range.
69
+ * @csspart option-between - A time inside a chosen range, excluding its ends, beside `option`.
70
+ * @csspart option-description - The caption under the time's label, when there is one.
80
71
  * @csspart option-item - The row.
81
72
  * @csspart option-item-active - The row the keyboard is on.
82
73
  * @csspart option-item-selected - The row of a chosen time: the one time, or either end of a range.
83
- * @csspart option-label - The words.
84
- * @csspart option-text - The words and the caption, as one column.
74
+ * @csspart option-label - The time's label.
75
+ * @csspart option-text - The label and the caption, as one column.
85
76
  */
86
77
  export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
87
78
  /**
88
- * What a reader is told when the value holds something that is not a time.
79
+ * The validation message for a value that is not a time.
89
80
  *
90
81
  * **Every sentence a control raises in the browser's bubble is a property**,
91
82
  * named for the validity flag it reports, so a form in another language
@@ -154,7 +145,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
154
145
  */
155
146
  mode?: 'multiple' | 'range';
156
147
  /**
157
- * Whether the control refuses changes while still submitting its value.
148
+ * Blocks changes to the time. The value is still submitted with the form.
158
149
  *
159
150
  * **Enforced by refusing every request in one place**, which is the seam this
160
151
  * component already has: `requestValue` is what every path here comes through,
@@ -168,7 +159,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
168
159
  */
169
160
  readOnly: boolean;
170
161
  /**
171
- * Whether the form refuses to submit while nothing is chosen.
162
+ * Stops the form from submitting while no time is chosen.
172
163
  */
173
164
  required: boolean;
174
165
  /**
@@ -235,8 +226,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
235
226
  /** Every minute offered within the hour currently shown. */
236
227
  private get minutes();
237
228
  /**
238
- * Each wheel comes to rest on its own answer, and the list on the time it
239
- * holds.
229
+ * Scrolls each wheel to its selected value, and the list to its selected
230
+ * time.
240
231
  *
241
232
  * A dial that opens at midnight when it holds ten in the evening is a dial
242
233
  * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
@@ -272,11 +263,12 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
272
263
  /** Refuses every change while read-only. See `readOnly`. */
273
264
  requestValue(next: string): boolean;
274
265
  /**
275
- * What a reader is told when a time is required and none is chosen.
266
+ * The validation message for a required time picker with no time chosen.
276
267
  */
277
268
  valueMissingMessage?: string;
278
269
  /**
279
- * Whether the times are one list or a column each.
270
+ * Shows the times as one `list`, or as `wheels` with a column for each part
271
+ * of the time.
280
272
  *
281
273
  * `list` is the default and offers whole times, which is what a product with
282
274
  * opening hours or slots actually has. `wheels` splits them into an hour, a
@@ -356,7 +348,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
356
348
  private listRevealed;
357
349
  protected willUpdate(changed: PropertyValues): void;
358
350
  protected updated(changed: PropertyValues): void;
359
- /** Puts the keyboard on the list, which is the only control here. */
351
+ /** Moves focus to the list, which is the only control in the picker. */
360
352
  focus(options?: FocusOptions): void;
361
353
  /**
362
354
  * One wheel, which is a listbox like the whole list is.
@@ -4,20 +4,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
4
4
  * @summary One event on a timeline: when it happened, and what it was.
5
5
  *
6
6
  * @description
7
- * **The time is a `<time>`, and only when there is a time to put in it.** Given
8
- * `datetime`, the label a consumer wrote is wrapped in the element the platform
9
- * has for exactly this, so the machine-readable instant travels with the human
10
- * one: a crawler, a reader's own tooling and a copy-paste all get "2026-08-19",
11
- * where "yesterday" on its own is a word. Given no `datetime`, it stays a span,
12
- * because a `<time>` with nothing to be precise about is markup pretending.
7
+ * Given `datetime`, the label you write is wrapped in a `<time>` element, so a
8
+ * machine-readable value such as "2026-08-19" travels with a label such as
9
+ * "yesterday". Without `datetime`, the label is a `<span>`.
13
10
  *
14
- * **The connector is this element's, not the list's.** Each entry draws the line
15
- * that arrives at it and hides it when it is first, which `:host(:first-child)`
16
- * settles with no index, no counting parent and no script. `Steps` and
17
- * `Breadcrumbs` both do it this way and for the same reason.
11
+ * Each entry draws the connector line that arrives at it and hides it when it
12
+ * is the first entry, using `:host(:first-child)`. This needs no index, no
13
+ * counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
18
14
  *
19
- * `tone` says what kind of event it was, and it is the only thing that colors
20
- * the mark. It takes `Announcement`'s vocabulary rather than a second one.
15
+ * `tone` sets the kind of event and is the only thing that colors the mark. It
16
+ * uses the same values as `Announcement`.
21
17
  *
22
18
  * @since 0.1.0
23
19
  * @status stable
@@ -26,24 +22,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
26
22
  * @documentation https://fusion.dev/helix/components/timeline
27
23
  *
28
24
  * @slot - What happened.
29
- * @slot marker - The mark on the line. Falls back to a dot, which is the slot's
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.
32
- * @slot time - When it happened, as a reader should see it written.
25
+ * @slot marker - The mark on the line. Defaults to a dot, which is the slot's fallback
26
+ * content.
27
+ * @slot time - When it happened, written the way you want it shown.
33
28
  *
34
29
  * @csspart content - What happened, and the time above it.
35
- * @csspart dot - The mark drawn where nothing was slotted for one.
30
+ * @csspart dot - The dot drawn when no marker is slotted.
36
31
  * @csspart marker - The mark on the line.
37
- * @csspart rail - The column holding the mark and the line. Both halves of the
38
- * line are drawn on the rail, which is `::part(rail)::before` and `::after` from
39
- * a consumer's sheet: this tier ships no CSS, so a box it renders for one to
40
- * paint is an empty child costing whatever the consumer's own layout charges for
41
- * a child. `ListItem` measured that.
32
+ * @csspart rail - The column that holds the mark and the line. Draw the two halves of the
33
+ * line with `::part(rail)::before` and `::part(rail)::after` in your stylesheet. This
34
+ * tier ships no CSS and renders no extra box for the line.
42
35
  * @csspart time - When it happened.
43
36
  */
44
37
  export declare class HelixHeadlessTimelineItem extends HelixElement {
45
38
  /**
46
- * When it happened, machine-readable.
39
+ * When it happened, in machine-readable form. Setting it wraps the time in a
40
+ * `<time>` element.
47
41
  *
48
42
  * Whatever `<time>` accepts, which is a date, a time, both, a duration or a
49
43
  * week. Unset, the label is written as it was given and nothing claims to
@@ -51,7 +45,7 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
51
45
  */
52
46
  datetime: string;
53
47
  /**
54
- * What kind of event it was, which decides the mark's color and nothing else.
48
+ * The kind of event. It sets the color of the mark and nothing else.
55
49
  */
56
50
  tone?: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
57
51
  protected willUpdate(changed: PropertyValues): void;
@@ -1,31 +1,23 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  /**
4
- * @summary A record of what happened, in the order it happened.
4
+ * @summary A list of events, in the order they happened.
5
5
  *
6
6
  * @description
7
- * **Not `Steps`, and the difference is what the thing is for.** A stepper is a
8
- * process a reader is moving through: it has a stage they are on, stages they
9
- * have finished, and stages ahead, so it carries `active` and `complete` and
10
- * numbers itself. A timeline is a record of events that already happened, or are
11
- * scheduled to. Nothing is current, nothing is complete, and what each entry
12
- * carries instead is a time. Building this as an appearance of `Steps` would
13
- * have meant a stepper with no step you are on.
7
+ * A timeline is a record of events that happened or are scheduled. Each entry
8
+ * carries a time, and no entry is current or complete. For a process you move
9
+ * through, with a current stage and `active` and `complete` states, use
10
+ * `Steps`.
14
11
  *
15
- * What it does take from `Steps` is the connector. Each entry draws the line
16
- * that arrives at it and hides it when it is first, which needs neither an index
17
- * nor a parent that counts: `:host(:first-child)` is the whole of it, resolved
18
- * at layout with no script, so a server's markup is right before anything runs.
12
+ * Each entry draws the connector line that arrives at it and hides it when it
13
+ * is first, using `:host(:first-child)`. This resolves at layout with no
14
+ * script, so the server markup is correct before anything runs.
19
15
  *
20
- * `role="list"` on the host rather than an `<ol>` in the shadow root, for the
21
- * reason `Steps` gives: the entries are the consumer's elements in the light
22
- * DOM, so a list element here would be a list whose items are somewhere else.
16
+ * The host has `role="list"`, because the entries are your elements in the
17
+ * light DOM. `Steps` does the same.
23
18
  *
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`.
19
+ * A timeline runs down the page and has no horizontal layout. For stages laid
20
+ * out horizontally, use `Steps`, which is horizontal by default.
29
21
  *
30
22
  * @since 0.1.0
31
23
  * @status stable
@@ -37,7 +29,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
37
29
  */
38
30
  export declare class HelixHeadlessTimeline extends HelixElement {
39
31
  /**
40
- * Names the record, for a reader arriving at it out of context.
32
+ * Accessible name for the timeline, for people who reach it out of context.
41
33
  */
42
34
  label: string;
43
35
  protected render(): TemplateResult;
@@ -5,35 +5,33 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
5
5
  * @summary One message in the toast region.
6
6
  *
7
7
  * @description
8
- * An element rather than a slot, because it carries a timeout, a tone, a
9
- * dismiss control and a lifetime that pauses: behavior, state and API.
8
+ * Each message is an element because it has a timeout, a tone, a dismiss
9
+ * control, and a lifetime that pauses.
10
10
  *
11
- * **The timer is the item's own.** Held by the region, one message arriving
12
- * would restart another's, so a stack of three would go from three seconds each
13
- * to nine for the last.
11
+ * **Each item runs its own timer.** A timer held by the region would restart
12
+ * with each new message, and the last of three messages would stay for nine
13
+ * seconds.
14
14
  *
15
- * **A message is the opposite of the page it is over.** Inverted by default, so
16
- * a thing arriving in a corner is told apart from the page before it is read,
17
- * and by a flip of `color-scheme` rather than by spending a color that means
18
- * something.
15
+ * **Messages are inverted by default.** The item flips `color-scheme`, so a new
16
+ * message stands out from the page without using a color that carries meaning.
19
17
  *
20
18
  * @since 0.1.0
21
19
  * @status stable
22
20
  * @documentation https://fusion.dev/helix/components/toast
23
21
  *
24
22
  * @slot - The message.
25
- * @slot actions - What to do about it, usually a button or a link.
23
+ * @slot actions - Actions for the message, usually a button or a link.
26
24
  * @slot dismiss-icon - Replaces the glyph inside the dismiss control.
27
- * @slot icon - Replaces the tone mark. Matches `Callout`, which is why the
28
- * dismiss control's own glyph is `dismiss-icon` rather than this: two slots
29
- * cannot share a name, assignment goes to whichever comes first in the tree,
30
- * and the tone mark is the one a consumer reaches for.
25
+ * @slot icon - Replaces the tone mark. The name matches `Callout`. The dismiss
26
+ * control's glyph uses `dismiss-icon`, because two slots cannot share a name:
27
+ * content goes to whichever slot comes first in the tree, and the tone mark is
28
+ * the one you are more likely to replace.
31
29
  *
32
- * @event {HelixDismissEvent} helix-dismiss - Fired when it asks to go, whether by the control or by its timer. Cancelable: refusing it takes the decision and nothing moves.
30
+ * @event {HelixDismissEvent} helix-dismiss - Fired when the message is dismissed, by the control or by its timer, and cancelable. Canceling it keeps the message.
33
31
  *
34
- * @csspart actions - The region holding what to do about it.
32
+ * @csspart actions - The region that holds the actions.
35
33
  * @csspart content - The message.
36
- * @csspart dismiss - The control that asks to close.
34
+ * @csspart dismiss - The control that dismisses the message.
37
35
  * @csspart dismiss-mark - The glyph on the dismiss control, where none is slotted.
38
36
  * @csspart icon - The tone mark, where the message has one.
39
37
  * @csspart icon-mark - The tone glyph, where none is slotted.
@@ -44,7 +42,8 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
44
42
  */
45
43
  export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
46
44
  /**
47
- * How long it stays, in milliseconds. Absent means until it is dismissed.
45
+ * How long the message stays, in milliseconds. When it is not set, the
46
+ * message stays until it is dismissed.
48
47
  *
49
48
  * Read once when the item is first rendered. Changing it afterwards does not
50
49
  * restart a message the reader is already partway through.
@@ -71,7 +70,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
71
70
  private remaining;
72
71
  private timer;
73
72
  /**
74
- * What kind of message it is, which picks the mark and its name.
73
+ * The kind of message, which sets its mark and the mark's accessible name.
75
74
  *
76
75
  * A subset of the tone axis: a toast reports a status and never a brand role.
77
76
  */
@@ -79,7 +78,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
79
78
  /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
80
79
  private openState;
81
80
  /**
82
- * Asks to be taken away, and reports whether the request stood.
81
+ * Dismisses the message, and returns whether the dismissal went ahead.
83
82
  *
84
83
  * Announced before anything happens, so `preventDefault()` is a refusal and
85
84
  * the message stays. The event still carries the label, because a consumer
@@ -87,9 +86,9 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
87
86
  * true whether or not the item hid itself first.
88
87
  */
89
88
  dismiss(): boolean;
90
- /** Stops the clock, leaving whatever is left of it. */
89
+ /** Pauses the dismiss timer and keeps the time that is left. */
91
90
  pause(): void;
92
- /** Starts it again from where it stopped. */
91
+ /** Restarts the dismiss timer from where it paused. */
93
92
  resume(): void;
94
93
  /**
95
94
  * How many reasons there are to hold the clock, rather than whether there is
@@ -1,32 +1,27 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  /**
4
- * @summary The region messages arrive in, and the only thing that announces them.
4
+ * @summary The region that holds toast messages, and the only element that announces them.
5
5
  *
6
6
  * @description
7
- * **The region is why this is one family rather than two.** A live region has
8
- * to be in the document *before* a message is put into it: assistive technology
9
- * subscribes to the region, and a region that arrives already holding its
10
- * message is frequently not announced at all. So the container is a part of the
11
- * family and not an arranger of complete things, which is the same reasoning
12
- * that puts `Radio.Group` inside its own family.
7
+ * The region and its items are one family because a live region must be in the
8
+ * document before a message is added to it. Assistive technology often does not
9
+ * announce a region that arrives already holding its message. `Radio.Group` is
10
+ * part of its family for the same reason.
13
11
  *
14
- * **Polite, never assertive.** `role="alert"` interrupts whatever a reader is
15
- * being told, and almost nothing that arrives in a corner of the screen has
16
- * earned that. Something that genuinely cannot wait is a `Dialog`, which stops
17
- * the page for everyone rather than only for the people who cannot see it.
12
+ * **The region is polite, never assertive.** `role="alert"` interrupts whatever
13
+ * a screen reader is reading. For something that cannot wait, use a `Dialog`,
14
+ * which stops the page for every user.
18
15
  *
19
- * **It never creates or destroys anything.** The consumer renders items and
20
- * removes them; asking to go is a cancelable `helix-dismiss` from the item. An
21
- * item that has gone hides itself and stays in the tree, so a consumer whose
22
- * state still lists it does not have their framework fighting a node this
23
- * component took away. It hides without waiting to be told, unless the consumer
24
- * declared `open` and said the state is theirs.
25
- * There is no `toast.show()`, because an imperative queue inside a component is
26
- * a second copy of the application's state that nothing can render from: an app
27
- * that wants a `toast()` function writes a thin one over the state it already
28
- * has, and keeps the ability to render the same messages on the server, in a
29
- * test, or twice.
16
+ * **The region never creates or removes items.** You render items and remove
17
+ * them. An item requests closing with a cancelable `helix-dismiss` event. A
18
+ * dismissed item hides itself and stays in the DOM, so your framework's state
19
+ * and the DOM stay in sync. It hides on its own unless you set `open`, which
20
+ * makes the state yours.
21
+ *
22
+ * There is no `toast.show()`. For a `toast()` function, write a small one over
23
+ * your app's state, which also lets you render the same messages on the server,
24
+ * in a test, or more than once.
30
25
  *
31
26
  * @since 0.1.0
32
27
  * @status stable
@@ -36,7 +31,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
36
31
  *
37
32
  * @slot - The messages.
38
33
  *
39
- * @event {HelixDismissEvent} helix-dismiss - A message asking to go, by its control or by its timer, dispatched by the message and heard here because the stack is what a consumer holds. Cancelable: refusing it takes the decision and the message stays.
34
+ * @event {HelixDismissEvent} helix-dismiss - A message is being dismissed, by its control or by its timer. The message sends it, and you can listen for it on the region. Cancelable: canceling it keeps the message.
40
35
  *
41
36
  * @csspart region - The stack the messages are in.
42
37
  */
@@ -5,15 +5,14 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
5
5
  * @summary A row of options with the selection marked by a moving indicator.
6
6
  *
7
7
  * @description
8
- * The indicator is one element that travels, not a background that appears on
9
- * whichever item is current. A fill that swaps is two things changing at once
10
- * and reads as a flicker; one that moves is a single object the eye follows,
11
- * and it says where the selection came from as well as where it went.
8
+ * The indicator is one element that moves to the selected item. A single moving
9
+ * object is easier to follow than a fill that swaps, and it shows where the
10
+ * selection came from.
12
11
  *
13
- * Its box is measured from the selected item and written onto the indicator as
14
- * custom properties, labels being different lengths. Measurement is client-side
15
- * by necessity, so the server renders the indicator hidden and it fades in once
16
- * it has somewhere to be, which is the harmless direction.
12
+ * Its size and position are measured from the selected item and written to the
13
+ * indicator as custom properties, because labels have different lengths.
14
+ * Measurement happens on the client, so the server renders the indicator hidden
15
+ * and it fades in once measured.
17
16
  *
18
17
  * @since 0.1.0
19
18
  * @status stable
@@ -21,26 +20,25 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
21
20
  * @documentation https://fusion.dev/helix/components/toggle
22
21
  *
23
22
  * @slot - The group's items.
24
- * @slot end - Whatever sits after the track on its own line, such as a count or a reset.
25
- * @slot start - Whatever sits before the track on its own line, such as an icon or a caption.
23
+ * @slot end - Content after the track, on the same line, such as a count or a reset.
24
+ * @slot start - Content before the track, on the same line, such as an icon or a caption.
26
25
  *
27
- * @event {Event} change - Announced once the value has moved.
28
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the answer moves, and cancelable. The only way to refuse one.
29
- * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.
30
- * @event {Event} input - Announced once the value has moved.
26
+ * @event {Event} change - Fired after the value changes.
27
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the choice changes. Cancelable: call `preventDefault()` to keep the current choice. It is the only way to block a change.
28
+ * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. The item sends it, and you listen for it on the group. Cancelable: call `preventDefault()` to keep the current choice.
29
+ * @event {Event} input - Fired after the value changes.
31
30
  *
32
- * @csspart feedback - What is wrong with it.
33
- * @csspart hint - Help under the row, while nothing is wrong.
31
+ * @csspart feedback - The error message under the row.
32
+ * @csspart hint - The help text under the row, shown while there is no error.
34
33
  * @csspart indicator - The moving marker behind the selected item.
35
- * @csspart label - The question, over the row.
36
- * @csspart row - The line the track sits on, with whatever flanks it.
37
- * @csspart track - The bar the items sit in. The rule after an inline label,
38
- * separating it from the items, is drawn on the bar, which is
39
- * `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a
40
- * box it renders for one to paint is an empty child costing whatever the
41
- * consumer's own layout charges for a child. `ListItem` measured that.
34
+ * @csspart label - The label above the row.
35
+ * @csspart row - The line that holds the track and the content on either side of it.
36
+ * @csspart track - The bar the items sit in. Draw the line between an inline
37
+ * label and the items with `::part(track)::before` in your stylesheet. This tier
38
+ * ships no CSS, so it renders no separate element for the line, which would add
39
+ * an empty child to your layout.
42
40
  *
43
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
41
+ * @cssstate invalid - The group has an error to show, from the browser's validation or from your `feedback`.
44
42
  */
45
43
  export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_base {
46
44
  /**
@@ -110,7 +108,7 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
110
108
  */
111
109
  private validate;
112
110
  /**
113
- * Where the group's label sits, `start` putting it on the track's line.
111
+ * Where the group's label sits. `start` puts it on the track's line.
114
112
  *
115
113
  * Absent is above, which is what a field looks like and what almost every
116
114
  * group wants. `start` is for a row of controls that are labeled rather than
@@ -5,11 +5,11 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
5
5
  * @summary One option in a toggle group.
6
6
  *
7
7
  * @description
8
- * Renders a `<button role="radio">`. This is a form control and nothing else.
8
+ * Renders a `<button role="radio">` for use as a form control.
9
9
  *
10
- * Navigation is not this. It is links marked with `aria-current` and styled by
11
- * the `data-navigation-item` recipe in the base layer, which carries the same look
12
- * without radio semantics announcing destinations as choices.
10
+ * Do not use it for navigation. For navigation, use links marked with
11
+ * `aria-current` and styled by the `data-navigation-item` recipe in the base
12
+ * layer. The recipe has the same look, and links are not announced as choices.
13
13
  *
14
14
  * @since 0.1.0
15
15
  * @status stable
@@ -19,15 +19,15 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
19
19
  *
20
20
  * @slot - The item's label.
21
21
  *
22
- * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
22
+ * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
23
23
  *
24
24
  * @csspart item - The radio button.
25
25
  *
26
- * @cssstate selected - While it is on.
26
+ * @cssstate selected - The item is chosen.
27
27
  */
28
28
  export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
29
29
  /**
30
- * Whether the markup declared this one chosen, which is what a reset returns to.
30
+ * Whether the markup declares the item chosen. A form reset returns to it.
31
31
  *
32
32
  * `<option selected>` reflects to `defaultSelected` and `option.selected` is
33
33
  * live state that does not reflect, and those are two different facts. This
@@ -56,7 +56,7 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
56
56
  get defaultSelected(): boolean;
57
57
  set defaultSelected(next: boolean);
58
58
  /**
59
- * Whether this item holds the group's tab stop while nothing is chosen.
59
+ * Whether the item holds the group's tab stop while nothing is chosen.
60
60
  *
61
61
  * The stop normally rides on the selection, and an unanswered group has no
62
62
  * selection, so without this the keyboard cannot reach it. Written by the