@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
@@ -5,15 +5,16 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
5
5
  * @summary A row of tabs and the panel each one shows.
6
6
  *
7
7
  * @description
8
- * Selection is coordinated by event, the same shape the accordion and the tree
9
- * use: a tab dispatches `helix-select` and the root pairs it with the panel of
10
- * the same value. Nothing registers with anything, so tabs added later work
11
- * without the root being told.
8
+ * Selection works through an event, the same as in the accordion and the tree.
9
+ * A tab dispatches `helix-select`, and the root pairs it with the panel of the
10
+ * same value. Nothing registers with anything, so tabs added later work with no
11
+ * extra setup.
12
12
  *
13
- * The tab list is a single tab stop, moved with the arrow keys through
14
- * `KeyboardNavigationController`, the same one the radio and toggle groups use.
15
- * Selection follows focus, which is the right default for a small set where
16
- * showing a panel is cheap; a set where it is not should use `manual`.
13
+ * The tab list is a single tab stop, and the arrow keys move between tabs
14
+ * through `KeyboardNavigationController`, the same as in the radio and toggle
15
+ * groups. Selection follows focus, which suits a small set where showing a
16
+ * panel is cheap. Set `manual` when showing a panel is expensive, so focus can
17
+ * move without selecting.
17
18
  *
18
19
  * @since 0.1.0
19
20
  * @status stable
@@ -21,14 +22,14 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
21
22
  * @aliases TabList, Segmented control
22
23
  * @documentation https://fusion.dev/helix/components/tabs
23
24
  *
24
- * @slot - The tabs, which are this element's own children.
25
- * @slot panels - The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
25
+ * @slot - The tabs, as direct children of this element.
26
+ * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
26
27
  *
27
- * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
28
- * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current tab moves, and cancelable. The only way to refuse one.
29
- * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. Dispatched by the tab and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
28
+ * @event {HelixActivateEvent} helix-activate - Fired after the active tab changes, so the element already holds the new value.
29
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
30
+ * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. The tab sends it and the root handles it, so you can listen on the root. Cancelable: canceling it stops the change and leaves the decision to you.
30
31
  *
31
- * @csspart indicator - The mark that travels to the selected tab.
32
+ * @csspart indicator - The marker that moves to the selected tab.
32
33
  * @csspart panels - The panel container.
33
34
  * @csspart tabs - The tab list.
34
35
  */
@@ -36,11 +37,12 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
36
37
  protected readonly keys: KeyboardNavigationController;
37
38
  private readonly indicator;
38
39
  /**
39
- * Accessible name for the tab list.
40
+ * The tab list's name, read by screen readers.
40
41
  */
41
42
  label: string;
42
43
  /**
43
- * Whether arrowing to a tab also selects it.
44
+ * Stops the arrow keys from selecting each tab they move to. By default,
45
+ * arrowing to a tab also selects it.
44
46
  *
45
47
  * Automatic is the default because showing a panel is usually cheap. Set this
46
48
  * where it is not, so a reader arrowing past four tabs does not load four
@@ -48,7 +50,7 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
48
50
  */
49
51
  manual: boolean;
50
52
  /**
51
- * How the row reads.
53
+ * How the row of tabs is drawn.
52
54
  *
53
55
  * Unset is a raised pill on the selected tab with nothing behind the row,
54
56
  * which is what a set sitting inside other chrome wants. `underlined` is a
@@ -5,12 +5,12 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
5
5
  * @summary One tab in a tab list.
6
6
  *
7
7
  * @description
8
- * An element rather than a slot because it owns selection and its own tab stop.
8
+ * A tab is an element, because it manages selection and its own tab stop.
9
9
  *
10
- * Its id and the id it controls are both derived from `value`, so the pairing
11
- * between a tab and its panel survives server rendering. A generated id would
12
- * differ between the server's render and the client's and break the link, and
13
- * `aria-controls` pointing at nothing is worse than not being there.
10
+ * Its id and the id it controls both come from `value`, so the link between a
11
+ * tab and its panel works with server rendering. A generated id would differ
12
+ * between the server render and the client render, and `aria-controls` would
13
+ * point at nothing.
14
14
  *
15
15
  * @since 0.1.0
16
16
  * @status stable
@@ -19,7 +19,7 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
19
19
  *
20
20
  * @slot - The tab's label.
21
21
  *
22
- * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
22
+ * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
23
23
  *
24
24
  * @csspart tab - The tab itself.
25
25
  *
@@ -2,17 +2,16 @@ import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type TemplateResult } from 'lit';
3
3
  declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
4
4
  /**
5
- * @summary Labels content with a short piece of metadata.
5
+ * @summary A short label that adds metadata to content.
6
6
  *
7
7
  * @description
8
- * A tag is a label, and optionally a label the reader can take off.
9
- * `dismissible` is what separates it from a badge: a badge reports a state the
10
- * reader cannot change, a tag names something they can.
8
+ * A label that people can optionally remove. `dismissible` is the difference
9
+ * from a badge: a badge shows a state that people cannot change, and a tag
10
+ * names something they can remove.
11
11
  *
12
- * Dismissing is a request. The tag does not remove itself, because the consumer
13
- * owns the list it sits in and taking the node out from under them would put
14
- * their state and the document out of step. Canceling `helix-dismiss` is a
15
- * refusal.
12
+ * The remove button sends `helix-dismiss`. The tag does not remove itself,
13
+ * because your code owns the list it is in, so remove it in your handler. A
14
+ * listener can cancel `helix-dismiss`, and `dismiss()` then returns `false`.
16
15
  *
17
16
  * @since 0.1.0
18
17
  * @status stable
@@ -21,12 +20,12 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
21
20
  * @documentation https://fusion.dev/helix/components/tag
22
21
  *
23
22
  * @slot - The tag's label.
24
- * @slot start - A category the label belongs to, set before it and weightier.
23
+ * @slot start - The category the label belongs to, shown before it in a heavier weight.
25
24
  *
26
- * @event {HelixDismissEvent} helix-dismiss - Fired when the reader asks to remove the tag. Cancelable: refusing it takes the decision and nothing moves.
25
+ * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
27
26
  *
28
- * @csspart dismiss - The control that asks to remove the tag.
29
- * @csspart dismiss-mark - The glyph on the dismiss control, where none is slotted.
27
+ * @csspart dismiss - The button that removes the tag.
28
+ * @csspart dismiss-mark - The icon on the remove button.
30
29
  * @csspart start - The category before the label.
31
30
  */
32
31
  export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
@@ -2,23 +2,18 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
4
4
  /**
5
- * @summary Several lines of text a reader types into.
5
+ * @summary A multi-line text field.
6
6
  *
7
7
  * @description
8
- * A real `<textarea>`, so the caret, the selection, spellcheck, the resize
9
- * handle and the keyboard a phone chooses are all the platform's, and it
10
- * serializes into the server's markup so the field is usable before any script
11
- * loads.
8
+ * Renders a `<textarea>`, so the caret, selection, spellcheck, resize handle,
9
+ * and phone keyboard come from the platform. It is in the server markup, so the
10
+ * field works before any script loads.
12
11
  *
13
- * **Not an Input with a taller box.** The difference is the Enter key: in a
14
- * single-line field it submits the form, and here it inserts a line. That is a
15
- * behavioral difference the platform owns and cannot be styled into existence,
16
- * which is why this is its own element rather than `Input` with a property.
12
+ * It is a separate element from `Input` because Enter inserts a line break
13
+ * here. In a single-line field, Enter submits the form.
17
14
  *
18
- * `rows` sets the height it starts at, and `auto-grow` lets it follow its own
19
- * content. They are not alternatives: `rows` is where an empty field begins and
20
- * `auto-grow` is what happens after, so a field that grows still has to start
21
- * somewhere.
15
+ * `rows` sets the starting height, and `auto-grow` makes the field grow with
16
+ * its content. You can use both: `rows` sets where an empty field begins.
22
17
  *
23
18
  * @since 0.1.0
24
19
  * @status stable
@@ -26,35 +21,37 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
26
21
  * @aliases Multiline, TextArea
27
22
  * @documentation https://fusion.dev/helix/components/textarea
28
23
  *
29
- * @event {Event} change - Relayed from the textarea once the reader has finished.
24
+ * @event {Event} change - Sent from the textarea when the user finishes an edit.
30
25
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the text changes, and cancelable.
31
- * @event {Event} input - Announced once the value has moved.
26
+ * @event {Event} input - Fired after the value changes.
32
27
  *
33
28
  * @csspart control - The textarea itself.
34
- * @csspart feedback - What is wrong with it.
35
- * @csspart field - The box holding the control.
29
+ * @csspart feedback - The message that says what is wrong.
30
+ * @csspart field - The box that holds the textarea.
36
31
  * @csspart hint - Help under the field, while nothing is wrong.
37
- * @csspart label - The question, over the field.
32
+ * @csspart label - The label above the field.
38
33
  *
39
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
34
+ * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
40
35
  */
41
36
  export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
42
37
  protected readonly aria: AriaForwardController;
43
38
  /** Typed or dragged, so every edit is announced. See `announcesInput`. */
44
39
  protected readonly announcesInput = true;
45
40
  /**
46
- * What the browser may autofill here, as one of the platform's own tokens.
41
+ * What the browser can autofill in the field, as a standard `autocomplete`
42
+ * token.
47
43
  *
48
44
  * Empty leaves the attribute off, which is the browser's default. Set it to
49
45
  * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
50
46
  */
51
47
  autocomplete: string;
52
48
  /**
53
- * Whether the box follows its own content rather than scrolling.
49
+ * Grows the box to fit its content, so it does not scroll.
54
50
  */
55
51
  autoGrow: boolean;
56
52
  /**
57
- * How many characters wide the box is, where the layout is not deciding.
53
+ * How many characters wide the box is, when the layout does not set its
54
+ * width.
58
55
  *
59
56
  * Optional and absent by default, which is the reflected-property rule: a
60
57
  * `<textarea>` left alone is 20 columns wide and a styled one is whatever its
@@ -64,7 +61,7 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
64
61
  */
65
62
  cols?: number;
66
63
  /**
67
- * The name a second entry carries, holding which way the text runs.
64
+ * The name of a second form entry that submits the direction of the text.
68
65
  *
69
66
  * **Submitted through `setFormValue`, because the inner control's own
70
67
  * `dirname` cannot reach the form.** This host is form-associated and reports
@@ -75,11 +72,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
75
72
  */
76
73
  dirName: string;
77
74
  /**
78
- * Most characters the value may have.
75
+ * The most characters the value can have.
79
76
  */
80
77
  maxLength?: number;
81
78
  /**
82
- * Fewest characters the value may have.
79
+ * The fewest characters the value can have.
83
80
  *
84
81
  * Forwarded to the real `<textarea>` rather than checked here, which is what
85
82
  * makes the message the browser's and therefore the reader's own language.
@@ -88,13 +85,13 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
88
85
  */
89
86
  minLength?: number;
90
87
  /**
91
- * Shown while the field is empty.
88
+ * Text shown while the field is empty.
92
89
  *
93
90
  * Not a label: it goes when typing starts.
94
91
  */
95
92
  placeholder: string;
96
93
  /**
97
- * Whether the field refuses input while still submitting its value.
94
+ * Blocks typing in the field. The value is still submitted with the form.
98
95
  */
99
96
  readOnly: boolean;
100
97
  /** Focus is delegated to the control, so the host is never the target. */
@@ -146,7 +143,7 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
146
143
  */
147
144
  private formValue;
148
145
  /**
149
- * The caret and the selection, under the platform's own names.
146
+ * The direction of the selection, as a native textarea reports it.
150
147
  *
151
148
  * **The whole reason this renders a real `<textarea>` is the caret**, and the
152
149
  * control is inside this shadow root, so `querySelector` does not find it and
@@ -167,8 +164,8 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
167
164
  get selectionStart(): number;
168
165
  set selectionStart(at: number);
169
166
  /**
170
- * Selects a range, which is the one operation the three accessors above
171
- * cannot express between them.
167
+ * Selects a range of text, which the three selection properties cannot do
168
+ * between them.
172
169
  *
173
170
  * Setting `selectionStart` past the current `selectionEnd` drags the end
174
171
  * along, so the two writes a consumer would make in sequence do not compose
@@ -178,9 +175,9 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
178
175
  setSelectionRange(start: number, end: number, direction?: SelectionDirection): void;
179
176
  /** How many characters the value holds. */
180
177
  get textLength(): number;
181
- /** What kind of control this is, which for a textarea is always the one word. */
178
+ /** The control's type, which is always `textarea`. */
182
179
  get type(): string;
183
- /** Puts the caret in the field, the way a label pointing at one would. */
180
+ /** Puts the caret in the field, as a label pointing at it would. */
184
181
  focus(options?: FocusOptions): void;
185
182
  /** Reports the value and the validity the host stands behind. */
186
183
  private sync;
@@ -5,25 +5,23 @@ import '../../tag/index.js';
5
5
  import '../../time-picker/index.js';
6
6
  declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
7
7
  /**
8
- * @summary A time, typed or picked from a list.
8
+ * @summary A field for a time, typed or picked from a list.
9
9
  *
10
10
  * @description
11
- * **The list is `TimePicker`, not a second one written here.** It is worth
12
- * having on its own, flat in a settings pane with nothing to open, and this
13
- * element is the field, the overlay and the form. Exactly the arrangement Input
14
- * Date has with `DatePicker` and Color Input with `ColorPicker`.
11
+ * The list is a `TimePicker`, which you can also use on its own, for example in
12
+ * a settings pane. This element adds the field, the overlay, and the form
13
+ * association, the same arrangement Date Input has with `DatePicker` and Color
14
+ * Input has with `ColorPicker`.
15
15
  *
16
- * **Typed as well as picked, and that is the division the list depends on.** A
17
- * list at a step offers the times a product actually has, and the field is how a
18
- * reader says `09:07`. Neither is a worse version of the other: without the
19
- * field a step is a cage, and without the list every common time is typed out.
16
+ * You can type a time or pick one. The list offers times at a step, and the
17
+ * field lets you enter any time, such as `09:07`.
20
18
  *
21
- * **The value is `HH:mm` on a twenty-four hour clock, always**, because that is
22
- * what a form submits, what `min` and `max` compare against, and what sorts as a
23
- * string. What the field *shows* is the reader's own convention while it is
24
- * idle, and the value itself once the caret is in it: the same separation Input
25
- * Date draws, and for the same reason, which is that `2:30 PM` cannot be typed
26
- * back and `Intl` has no parser to make it so.
19
+ * The value is always `HH:mm` on a 24-hour clock, because that is what the form
20
+ * submits, what `min` and `max` compare against, and what sorts correctly as a
21
+ * string. While idle, the field shows the time in the user's locale format.
22
+ * Once the caret is in the field, it shows the value itself, because a
23
+ * formatted time such as `2:30 PM` cannot be typed back and `Intl` has no
24
+ * parser for it.
27
25
  *
28
26
  * @since 0.1.0
29
27
  * @status stable
@@ -31,67 +29,67 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
31
29
  * @aliases TimeField, InputTime
32
30
  * @documentation https://fusion.dev/helix/components/time-input
33
31
  *
34
- * @slot feedback - What is wrong with it.
32
+ * @slot feedback - The message that says what is wrong with the value.
35
33
  * @slot hint - Help under the field.
36
- * @slot trigger - The mark on the field saying a list opens.
34
+ * @slot trigger - The icon on the field that shows a list opens.
37
35
  *
38
- * @event {Event} change - Announced once the value has moved.
39
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes. Cancelable: refusing it takes the decision and nothing moves.
40
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
41
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: refusing it takes the decision and nothing moves.
42
- * @event {Event} input - Announced once the value has moved.
43
- * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
36
+ * @event {Event} change - Fired after the value changes.
37
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes. Cancelable: canceling it stops the change and leaves the decision to you.
38
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
39
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
40
+ * @event {Event} input - Fired after the value changes.
41
+ * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
44
42
  *
45
43
  * @csspart control - The text input.
46
- * @csspart feedback - What is wrong with it.
47
- * @csspart field - The box holding the text and the trigger.
44
+ * @csspart feedback - The message that says what is wrong with the value.
45
+ * @csspart field - The box that holds the text and the trigger.
48
46
  * @csspart hint - Help under the field, while nothing is wrong.
49
- * @csspart label - The question, over the field.
50
- * @csspart picker - The list inside it.
51
- * @csspart picker-column - One of them.
52
- * @csspart picker-column-empty - Shown when a filter has hidden everything.
53
- * @csspart picker-column-feedback - What is wrong with it.
54
- * @csspart picker-column-filter-icon - The mark beside that field.
55
- * @csspart picker-column-filter-mark - The glyph beside the filter field, where none is slotted.
47
+ * @csspart label - The label above the field.
48
+ * @csspart picker - The time picker inside the panel.
49
+ * @csspart picker-column - One column of the picker.
50
+ * @csspart picker-column-empty - The text shown when the filter hides every option.
51
+ * @csspart picker-column-feedback - The column's message that says what is wrong with the value.
52
+ * @csspart picker-column-filter-icon - The icon beside the filter field.
53
+ * @csspart picker-column-filter-mark - The default icon beside the filter field, shown when none is slotted.
56
54
  * @csspart picker-column-hint - Help under the list.
57
- * @csspart picker-column-items - The list itself.
58
- * @csspart picker-column-label - The question, over the list.
59
- * @csspart picker-column-live - The inner column's `live`, the region a screen reader hears its empty and loading lines from.
60
- * @csspart picker-column-loading - Shown while the options are still on their way.
61
- * @csspart picker-column-search - The region holding the field that narrows the list.
62
- * @csspart picker-column-search-field - The field itself.
55
+ * @csspart picker-column-items - The list of options.
56
+ * @csspart picker-column-label - The label above the list.
57
+ * @csspart picker-column-live - The inner column's `live` part, the region screen readers announce its empty and loading text from.
58
+ * @csspart picker-column-loading - The text shown while the options load.
59
+ * @csspart picker-column-search - The region that holds the filter field.
60
+ * @csspart picker-column-search-field - The filter field.
63
61
  * @csspart picker-columns - The row of columns, in `wheels`.
64
62
  * @csspart picker-list - The listbox holding the times, in `list`.
65
- * @csspart picker-list-empty - Shown when a filter has hidden everything.
66
- * @csspart picker-list-feedback - What is wrong with it.
67
- * @csspart picker-list-filter-icon - The mark beside that field.
68
- * @csspart picker-list-filter-mark - The glyph beside the filter field, where none is slotted.
63
+ * @csspart picker-list-empty - The text shown when the filter hides every option.
64
+ * @csspart picker-list-feedback - The inner list's message that says what is wrong with the value.
65
+ * @csspart picker-list-filter-icon - The icon beside the filter field.
66
+ * @csspart picker-list-filter-mark - The default icon beside the filter field, shown when none is slotted.
69
67
  * @csspart picker-list-hint - Help under the list.
70
- * @csspart picker-list-items - The list itself.
71
- * @csspart picker-list-label - The question, over the list.
72
- * @csspart picker-list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
73
- * @csspart picker-list-loading - Shown while the options are still on their way.
74
- * @csspart picker-list-search - The region holding the field that narrows the list.
75
- * @csspart picker-list-search-field - The field itself.
76
- * @csspart picker-option - One time in it. Carries `data-between` inside a range.
77
- * @csspart picker-option-between - A time inside a chosen range, short of either end, beside `picker-option`.
78
- * @csspart picker-option-description - The caption under the words, when there is one.
68
+ * @csspart picker-list-items - The list of options.
69
+ * @csspart picker-list-label - The label above the list.
70
+ * @csspart picker-list-live - The inner list's `live` part, the region screen readers announce its empty and loading text from.
71
+ * @csspart picker-list-loading - The text shown while the options load.
72
+ * @csspart picker-list-search - The region that holds the filter field.
73
+ * @csspart picker-list-search-field - The filter field.
74
+ * @csspart picker-option - One time in the picker. Carries `data-between` inside a range.
75
+ * @csspart picker-option-between - A time inside a chosen range, between its two ends. Set together with `picker-option`.
76
+ * @csspart picker-option-description - The caption under the label, when there is one.
79
77
  * @csspart picker-option-item - The row.
80
78
  * @csspart picker-option-item-active - The row the keyboard is on.
81
79
  * @csspart picker-option-item-selected - The row of a chosen time: the one time, or either end of a range.
82
- * @csspart picker-option-label - The words.
83
- * @csspart picker-option-text - The words and the caption, as one column.
84
- * @csspart rest - How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
80
+ * @csspart picker-option-label - The option's label.
81
+ * @csspart picker-option-text - The label and the caption, as one column.
82
+ * @csspart rest - The count of times held beyond the ones shown. A `<button>` with `expandable`, and a `<span>` without it.
85
83
  * @csspart surface - The floating panel.
86
84
  * @csspart tags - The row the times sit in.
87
85
  * @csspart time - One held time, as a tag, in `multiple`.
88
86
  * @csspart time-dismiss - The remove button, when `dismissible`.
89
- * @csspart time-dismiss-mark - The glyph on the dismiss control, where none is slotted.
87
+ * @csspart time-dismiss-mark - The default icon on the remove button, shown when none is slotted.
90
88
  * @csspart time-start - The category before the label.
91
89
  * @csspart trigger - The control that opens the list.
92
- * @csspart trigger-icon - The mark on the button that opens the clock.
90
+ * @csspart trigger-icon - The icon on the button that opens the clock.
93
91
  *
94
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
92
+ * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
95
93
  * @cssstate open - While the clock is open.
96
94
  */
97
95
  export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base {
@@ -118,7 +116,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
118
116
  */
119
117
  min: string;
120
118
  /**
121
- * How many times can be held at once.
119
+ * How many times the field holds at once.
122
120
  *
123
121
  * Absent is one. `range` holds a start and an end, `multiple` holds any
124
122
  * number, and both are carried as one comma-separated value, which is what a
@@ -127,11 +125,11 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
127
125
  */
128
126
  mode?: 'multiple' | 'range';
129
127
  /**
130
- * What the field says before a time is in it.
128
+ * Placeholder text shown before a time is entered.
131
129
  */
132
130
  placeholder: string;
133
131
  /**
134
- * What a reader is told when a range holds more than two times.
132
+ * The message shown when a range holds more than two times.
135
133
  *
136
134
  * **Every sentence a control raises in the browser's bubble is a property**,
137
135
  * so a form in another language speaks it. Absent is the control's own
@@ -139,17 +137,17 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
139
137
  */
140
138
  rangeLengthMessage?: string;
141
139
  /**
142
- * What a reader is told when a time is after `max`, with `{max}` filled in
143
- * as the field writes it.
140
+ * The message shown when a time is after `max`, with `{max}` filled in as
141
+ * the field displays it.
144
142
  */
145
143
  rangeOverflowMessage?: string;
146
144
  /**
147
- * What a reader is told when a time is before `min`, with `{min}` filled
148
- * in as the field writes it.
145
+ * The message shown when a time is before `min`, with `{min}` filled in as
146
+ * the field displays it.
149
147
  */
150
148
  rangeUnderflowMessage?: string;
151
149
  /**
152
- * What the control removing one time is called, with `{name}` filled in.
150
+ * The name of the button that removes one time, with `{name}` filled in.
153
151
  *
154
152
  * **The name goes in**, so a row of them is heard as which one each
155
153
  * removes rather than as "Remove" said once per time.
@@ -160,7 +158,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
160
158
  */
161
159
  step: number;
162
160
  /**
163
- * Whether the field writes the time out, or holds the value as it is.
161
+ * Whether the field shows the time in the local style or as the value
162
+ * itself.
164
163
  *
165
164
  * `local` is the reader's own convention from `Intl`, which is what a time is
166
165
  * for reading; `iso` is `HH:mm`, which is what it is for typing. The field
@@ -169,7 +168,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
169
168
  */
170
169
  timeStyle: 'iso' | 'local';
171
170
  /**
172
- * Accessible name for the control that opens the list.
171
+ * The name of the button that opens the list, read by screen readers.
173
172
  */
174
173
  triggerLabel: string;
175
174
  /** Every time in the value, which may hold more than one. */
@@ -209,7 +208,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
209
208
  /** What is wrong with the times, which the text input cannot say. */
210
209
  protected validate(): string;
211
210
  /**
212
- * Whether the panel is one list of times or a column each.
211
+ * Whether the panel shows one list of times or a column for each part of the
212
+ * time.
213
213
  *
214
214
  * `list` offers whole times, which is what a product with slots or opening
215
215
  * hours has. `wheels` splits them into an hour, a minute and a meridiem where
@@ -259,7 +259,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
259
259
  protected renderTrigger(): TemplateResult;
260
260
  protected render(): TemplateResult;
261
261
  /**
262
- * The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
262
+ * The value as a `Date` on January 1, 1970 UTC, or `null` while there is no
263
+ * time.
263
264
  *
264
265
  * The platform's own pair on `<input type="time">`, epoch day included: a time
265
266
  * is an offset into a day rather than an instant, and putting it on the epoch