@fusion.dev/helix-headless 0.104.1 → 0.106.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 (167) hide show
  1. package/custom-elements.json +10386 -3813
  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 +62 -56
  30. package/dist/color-input/root/color-input-root.js +3 -0
  31. package/dist/color-picker/root/color-picker-root.d.ts +61 -49
  32. package/dist/color-picker/root/color-picker-root.js +4 -0
  33. package/dist/combobox/root/combobox-root.d.ts +52 -53
  34. package/dist/command/root/command-root.d.ts +40 -40
  35. package/dist/command/root/command-root.js +1 -0
  36. package/dist/copy-button/root/copy-button-root.d.ts +24 -26
  37. package/dist/data-table/root/data-table-root.d.ts +106 -107
  38. package/dist/date-input/root/date-input-root.d.ts +54 -53
  39. package/dist/date-picker/root/date-picker-root.d.ts +25 -21
  40. package/dist/description-list/item/description-list-item.d.ts +7 -7
  41. package/dist/description-list/root/description-list-root.d.ts +10 -15
  42. package/dist/dialog/root/dialog-root.d.ts +22 -19
  43. package/dist/divider/root/divider-root.d.ts +12 -13
  44. package/dist/donut-chart/root/donut-chart-root.d.ts +19 -20
  45. package/dist/drawer/root/drawer-root.d.ts +19 -18
  46. package/dist/drilldown/item/drilldown-item.d.ts +28 -28
  47. package/dist/drilldown/root/drilldown-root.d.ts +22 -28
  48. package/dist/element-events.generated.js +19 -1
  49. package/dist/empty/root/empty-root.d.ts +16 -19
  50. package/dist/file-input/root/file-input-root.d.ts +32 -32
  51. package/dist/filter-input/chip/filter-chip.d.ts +36 -39
  52. package/dist/filter-input/field/filter-field.d.ts +25 -31
  53. package/dist/filter-input/menu/filter-menu.d.ts +50 -47
  54. package/dist/filter-input/operator/filter-operator.d.ts +15 -20
  55. package/dist/filter-input/root/filter-input-root.d.ts +80 -98
  56. package/dist/format-date/root/format-date-root.d.ts +19 -27
  57. package/dist/heatmap/root/heatmap-root.d.ts +40 -41
  58. package/dist/icon/root/icon-root.d.ts +21 -23
  59. package/dist/icon-button/root/icon-button-root.d.ts +12 -14
  60. package/dist/image/root/image-root.d.ts +30 -30
  61. package/dist/input/root/input-root.d.ts +36 -35
  62. package/dist/kbd/root/kbd-root.d.ts +13 -15
  63. package/dist/legend/root/legend-root.d.ts +18 -16
  64. package/dist/lightbox/item/lightbox-item.d.ts +13 -15
  65. package/dist/lightbox/root/lightbox-root.d.ts +40 -41
  66. package/dist/line-chart/root/line-chart-root.d.ts +20 -29
  67. package/dist/list/item/list-item.d.ts +17 -22
  68. package/dist/list/root/list-root.d.ts +6 -7
  69. package/dist/listbox/root/listbox-root.d.ts +42 -41
  70. package/dist/loader/root/loader-root.d.ts +16 -20
  71. package/dist/map/area/map-area.d.ts +48 -0
  72. package/dist/map/area/map-area.js +40 -0
  73. package/dist/map/buildings/map-buildings.d.ts +45 -0
  74. package/dist/map/buildings/map-buildings.js +37 -0
  75. package/dist/map/contours/map-contours.d.ts +61 -0
  76. package/dist/map/contours/map-contours.js +54 -0
  77. package/dist/map/index.d.ts +14 -0
  78. package/dist/map/index.js +10 -0
  79. package/dist/map/landcover/map-landcover.d.ts +47 -0
  80. package/dist/map/landcover/map-landcover.js +37 -0
  81. package/dist/map/marker/map-marker.d.ts +120 -0
  82. package/dist/map/marker/map-marker.js +109 -0
  83. package/dist/map/points/map-points.d.ts +139 -0
  84. package/dist/map/points/map-points.js +161 -0
  85. package/dist/map/position/map-position.d.ts +70 -0
  86. package/dist/map/position/map-position.js +89 -0
  87. package/dist/map/raster/map-raster.d.ts +84 -0
  88. package/dist/map/raster/map-raster.js +96 -0
  89. package/dist/map/root/map-root.d.ts +269 -52
  90. package/dist/map/root/map-root.js +473 -5
  91. package/dist/map/route/map-route.d.ts +73 -0
  92. package/dist/map/route/map-route.js +52 -0
  93. package/dist/map/terrain/map-terrain.d.ts +68 -0
  94. package/dist/map/terrain/map-terrain.js +58 -0
  95. package/dist/megamenu/root/megamenu-root.d.ts +27 -25
  96. package/dist/menu/item/menu-item.d.ts +30 -31
  97. package/dist/menu/root/menu-root.d.ts +25 -29
  98. package/dist/meter/root/meter-root.d.ts +22 -21
  99. package/dist/navigation/root/navigation-root.d.ts +13 -16
  100. package/dist/notifications/group/notification-group.d.ts +27 -28
  101. package/dist/notifications/notification/notification.d.ts +35 -42
  102. package/dist/notifications/root/notifications-root.d.ts +22 -24
  103. package/dist/number-input/root/number-input-root.d.ts +46 -50
  104. package/dist/object-inspector/root/object-inspector-root.d.ts +46 -58
  105. package/dist/option/group/option-group.d.ts +11 -11
  106. package/dist/option/root/option-root.d.ts +28 -33
  107. package/dist/outline/root/outline-root.d.ts +18 -17
  108. package/dist/pagination/root/pagination-root.d.ts +37 -39
  109. package/dist/pagination/size/pagination-size.d.ts +37 -43
  110. package/dist/pagination/summary/pagination-summary.d.ts +12 -14
  111. package/dist/pin-input/root/pin-input-root.d.ts +32 -38
  112. package/dist/popover/root/popover-root.d.ts +16 -21
  113. package/dist/progress/root/progress-root.d.ts +16 -14
  114. package/dist/qr-code/root/qr-code-root.d.ts +22 -25
  115. package/dist/quote/root/quote-root.d.ts +5 -6
  116. package/dist/radio/group/radio-group.d.ts +26 -28
  117. package/dist/radio/root/radio-root.d.ts +24 -28
  118. package/dist/rating/root/rating-root.d.ts +27 -30
  119. package/dist/scatter-chart/root/scatter-chart-root.d.ts +43 -55
  120. package/dist/scroll-area/root/scroll-area-root.d.ts +15 -21
  121. package/dist/select/root/select-root.d.ts +41 -44
  122. package/dist/skeleton/root/skeleton-root.d.ts +7 -8
  123. package/dist/skip-link/root/skip-link-root.d.ts +21 -28
  124. package/dist/slider/root/slider-root.d.ts +36 -39
  125. package/dist/sparkline/root/sparkline-root.d.ts +22 -28
  126. package/dist/speed-dial/item/speed-dial-item.d.ts +21 -21
  127. package/dist/speed-dial/root/speed-dial-root.d.ts +25 -27
  128. package/dist/splitter/root/splitter-root.d.ts +37 -41
  129. package/dist/stat/group/stat-group.d.ts +4 -4
  130. package/dist/stat/root/stat-root.d.ts +8 -9
  131. package/dist/steps/root/steps-root.d.ts +11 -14
  132. package/dist/steps/step/step.d.ts +22 -29
  133. package/dist/switch/root/switch-root.d.ts +20 -24
  134. package/dist/table/cell/table-cell.d.ts +18 -8
  135. package/dist/table/cell/table-cell.js +5 -1
  136. package/dist/table/column/table-column.d.ts +62 -55
  137. package/dist/table/root/table-root.d.ts +16 -17
  138. package/dist/table/row/table-row.d.ts +3 -3
  139. package/dist/tabs/panel/tab-panel.d.ts +3 -3
  140. package/dist/tabs/root/tabs-root.d.ts +19 -17
  141. package/dist/tabs/tab/tab.d.ts +6 -6
  142. package/dist/tag/root/tag-root.d.ts +11 -12
  143. package/dist/textarea/root/textarea-root.d.ts +29 -32
  144. package/dist/time-input/root/time-input-root.d.ts +70 -69
  145. package/dist/time-picker/root/time-picker-root.d.ts +58 -66
  146. package/dist/timeline/item/timeline-item.d.ts +18 -24
  147. package/dist/timeline/root/timeline-root.d.ts +13 -21
  148. package/dist/toast/item/toast-item.d.ts +21 -22
  149. package/dist/toast/root/toast-root.d.ts +18 -23
  150. package/dist/toggle/group/toggle-group.d.ts +23 -25
  151. package/dist/toggle/root/toggle-root.d.ts +8 -8
  152. package/dist/toolbar/root/toolbar-root.d.ts +7 -10
  153. package/dist/tooltip/root/tooltip-root.d.ts +41 -47
  154. package/dist/tour/root/tour-root.d.ts +24 -26
  155. package/dist/tour/stop/tour-stop.d.ts +39 -48
  156. package/dist/tree/item/tree-item.d.ts +23 -25
  157. package/dist/tree/root/tree-root.d.ts +13 -12
  158. package/dist/trend/root/trend-root.d.ts +18 -19
  159. package/dist/video/root/video-root.d.ts +108 -101
  160. package/dist/video-playlist/item/video-playlist-item.d.ts +23 -28
  161. package/dist/video-playlist/menu/video-playlist-menu.d.ts +17 -21
  162. package/dist/video-playlist/root/video-playlist-root.d.ts +21 -25
  163. package/dist/virtual-list/root/virtual-list-root.d.ts +27 -26
  164. package/package.json +5 -5
  165. package/types/jsx.d.ts +14011 -11983
  166. package/types/svelte.d.ts +10 -0
  167. package/types/vue.d.ts +2143 -1497
@@ -4,20 +4,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
4
4
  * @summary Shows one slide of several, with controls to move between them.
5
5
  *
6
6
  * @description
7
- * The track is a scroller with scroll snapping, so a drag, a trackpad swipe,
8
- * and the browser's own momentum all work without being reimplemented. The
9
- * controls scroll it; they do not drive a transform.
7
+ * The track is a scroll container with scroll snapping, so dragging, trackpad
8
+ * swipes, and the browser's momentum scrolling all work. The controls scroll
9
+ * the track.
10
10
  *
11
- * Slides are the consumer's own elements, and nothing is written onto them. The
12
- * component renders a pane per slide carrying `role="group"`,
13
- * `aria-roledescription="slide"` and a name reading its position in the set,
14
- * and assigns the slide into it: a screen-reader user hears where they are, and
15
- * a slide that is itself a link is still a link. See `assign`.
11
+ * Slides are your own elements, and the carousel writes nothing onto them. It
12
+ * renders a pane for each slide with `role="group"`,
13
+ * `aria-roledescription="slide"`, and a name that gives the slide's position in
14
+ * the set, and assigns the slide into it. A screen reader announces the
15
+ * position, and a slide that is a link stays a link. See `assign`.
16
16
  *
17
- * **Rotation stops on focus and on hover, and once stopped it stays stopped.**
18
- * The APG is explicit: rotation must not resume unless the reader asks for it,
19
- * so hovering away does not start it again. The control names the action it
20
- * performs, and it is first in the tab order.
17
+ * **Rotation stops on focus and on hover, and stays stopped** until the user
18
+ * starts it again, as the APG requires. The rotation control is labeled with
19
+ * the action it performs and is first in the tab order.
21
20
  *
22
21
  * @since 0.1.0
23
22
  * @status stable
@@ -27,12 +26,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
27
26
  *
28
27
  * @slot - The slides.
29
28
  *
30
- * @event {HelixSelectEvent} helix-select - Fired before the slide in view changes, with the index being asked for. Cancelable: refusing it takes the decision and nothing moves, including a drag, which is put back on the slide the index still holds. See `handleScroll`.
29
+ * @event {HelixSelectEvent} helix-select - Fired before the slide in view changes, with the requested index. Cancelable: cancel it to keep the current slide. Nothing moves, and a drag returns to the slide the index still holds. See `handleScroll`.
31
30
  *
32
31
  * @csspart controls - The row of controls.
33
- * @csspart indicator - One of them, and a way to reach that slide.
34
- * @csspart indicator-current - The one for the slide showing, beside `indicator`.
35
- * @csspart indicators - The row of controls saying where the reader is.
32
+ * @csspart indicator - One indicator. Pressing it moves to its slide.
33
+ * @csspart indicator-current - The indicator for the slide in view, alongside `indicator`.
34
+ * @csspart indicators - The row of indicators that shows which slide is in view.
36
35
  * @csspart next - The control that moves to the next slide.
37
36
  * @csspart next-mark - The glyph on the next control.
38
37
  * @csspart previous - The control that moves to the previous slide.
@@ -42,11 +41,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
42
41
  * @csspart slide - The pane one slide is shown in, and the box the track snaps to.
43
42
  * @csspart track - The scroller the slides sit in.
44
43
  *
45
- * @cssproperty --carousel-gap - Space between slides. A sheet sets it and the component measures the run with it.
46
- * @cssproperty --carousel-pane - The size one pane is laid out at. A sheet sets it and the component measures the run with it.
47
- * @cssproperty --carousel-per-view - How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. Under `per-view="auto"` the component writes nothing and the sheet declares it instead, so the same name answers in both modes. See `perView`.
48
- * @cssproperty --carousel-run-end - How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`.
49
- * @cssproperty --carousel-slide-min - The narrowest a slide may be laid out, which is what `per-view="auto"` fits the track with. A length, since the sheet divides by it. Unset is the whole track, which is one across.
44
+ * @cssproperty --carousel-gap - Space between slides. Your stylesheet sets it, and the component uses it to measure the run.
45
+ * @cssproperty --carousel-pane - The size of one pane. Your stylesheet sets it, and the component uses it to measure the run.
46
+ * @cssproperty --carousel-per-view - How many slides go across. The component writes it onto the track, so your stylesheet divides the track by the same number the component counts positions from. Read this property to follow `per-view`, because attribute selectors cannot cover every possible count. Under `per-view="auto"` the component writes nothing and your stylesheet declares it, so the same name works in both modes. See `perView`.
47
+ * @cssproperty --carousel-run-end - How far short of a whole pixel the run ends, set on the last slide only. Your stylesheet applies it as `margin-inline-end`. See `runEnd`.
48
+ * @cssproperty --carousel-slide-min - The narrowest a slide may be. `per-view="auto"` uses it to fit slides into the track. It must be a length, because the stylesheet divides by it. When unset, it is the whole track, which shows one slide across.
50
49
  */
51
50
  export declare class HelixHeadlessCarousel extends HelixElement {
52
51
  /**
@@ -93,7 +92,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
93
92
  */
94
93
  controls?: 'always' | 'auto' | 'none';
95
94
  /**
96
- * Slide to start on, where nothing declared one.
95
+ * The slide to start on, used until `index` is set.
97
96
  */
98
97
  defaultIndex: number;
99
98
  /**
@@ -113,7 +112,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
113
112
  get index(): number;
114
113
  set index(next: number);
115
114
  /**
116
- * What one indicator is called, with `{index}` filled in.
115
+ * The name of each indicator, with `{index}` filled in.
117
116
  *
118
117
  * **Every word the carousel speaks is a property**, so a page in another
119
118
  * language hears its own: only `label` was, and the controls around it
@@ -121,7 +120,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
121
120
  */
122
121
  indicatorLabel: string;
123
122
  /**
124
- * What the row of indicators is called, with the carousel's `{label}` filled in.
123
+ * The name of the row of indicators, with the carousel's `{label}` filled in.
125
124
  */
126
125
  indicatorsLabel: string;
127
126
  /**
@@ -133,7 +132,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
133
132
  /** How many panes were drawn at the last update, to scroll when the first are. */
134
133
  private scrolledFor;
135
134
  /**
136
- * Accessible name for the carousel.
135
+ * The carousel's name, read by screen readers.
137
136
  */
138
137
  label: string;
139
138
  /**
@@ -141,7 +140,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
141
140
  */
142
141
  loop: boolean;
143
142
  /**
144
- * What the control that moves forward is called.
143
+ * The name of the control that moves to the next slide.
145
144
  */
146
145
  nextLabel: string;
147
146
  /**
@@ -229,24 +228,24 @@ export declare class HelixHeadlessCarousel extends HelixElement {
229
228
  */
230
229
  perView?: number | 'auto';
231
230
  /**
232
- * What the control that moves back is called.
231
+ * The name of the control that moves to the previous slide.
233
232
  */
234
233
  previousLabel: string;
235
234
  /**
236
- * What each slide is called, with `{index}` and `{count}` filled in.
235
+ * The name of each slide, with `{index}` and `{count}` filled in.
237
236
  */
238
237
  slideLabel: string;
239
238
  /**
240
- * What a slide is, read out in place of its role: `aria-roledescription`,
241
- * which is a word a reader hears and so a word to translate.
239
+ * The word screen readers announce in place of a slide's role, set as
240
+ * `aria-roledescription`. Translate it with the rest of your text.
242
241
  */
243
242
  slideRoleLabel: string;
244
243
  /**
245
- * What the rotation control is called while it would start rotation.
244
+ * The name of the rotation control while rotation is stopped.
246
245
  */
247
246
  startLabel: string;
248
247
  /**
249
- * And while it would stop it.
248
+ * The name of the rotation control while rotation is running.
250
249
  */
251
250
  stopLabel: string;
252
251
  /**
@@ -414,7 +413,7 @@ export declare class HelixHeadlessCarousel extends HelixElement {
414
413
  * the right, the left arrow is the one that moves on.
415
414
  */
416
415
  private readonly handleIndicatorKeydown;
417
- /** Moves to a slide, wrapping only where `loop` says to. */
416
+ /** Moves to a slide. It wraps past either end only when `loop` is set. */
418
417
  goTo(index: number): void;
419
418
  /**
420
419
  * The leading padding the track keeps for a slide to draw its own edge in.
@@ -1,22 +1,19 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  /**
4
- * @summary Where the reader writes their turn.
4
+ * @summary A field for writing a turn in a conversation.
5
5
  *
6
6
  * @description
7
- * **A separate element because it is separately replaceable.** A consumer with
8
- * attachments, slash commands or a model picker replaces the composer and keeps
9
- * the transcript, which is only possible if the two were never one component.
7
+ * The composer is a separate element so you can replace it. If you need
8
+ * attachments, slash commands, or a model picker, replace the composer and keep
9
+ * the transcript.
10
10
  *
11
- * **Enter sends and Shift+Enter opens a line, and it is configurable rather than
12
- * decided.** The convention is near-universal in messaging and near-inverted in
13
- * anything that is really a document editor, and a component that picks one
14
- * makes the other consumer reimplement the composer. `submit-on` takes `enter`
15
- * or `button`, and the second is what a long-form composer wants.
11
+ * By default, Enter sends and Shift+Enter starts a new line, the convention in
12
+ * messaging apps. Document editors mostly use the opposite, so `submit-on`
13
+ * takes `enter` or `button`. Use `button` for a long-form composer.
16
14
  *
17
- * The composer clears only when nobody refused the send, because a composer that
18
- * empties itself and then hears the request failed has thrown away the only copy
19
- * of what the reader wrote.
15
+ * The composer clears only when no listener cancels the send, so the text is
16
+ * kept when you cancel a send that failed.
20
17
  *
21
18
  * @since 0.1.0
22
19
  * @status stable
@@ -24,30 +21,30 @@ import { type PropertyValues, type TemplateResult } from 'lit';
24
21
  * @aliases Message box, Prompt input
25
22
  * @documentation https://fusion.dev/helix/components/chat
26
23
  *
27
- * @slot end - Under the field, beside the send control.
28
- * @slot start - Under the field, at the leading edge: attachments, a model picker.
24
+ * @slot end - Content under the field, beside the send button.
25
+ * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
29
26
  *
30
- * @event {HelixSendEvent} helix-send - Fired when the reader offers their turn, and cancelable.
27
+ * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
31
28
  *
32
29
  * @csspart composer - The whole composer.
33
- * @csspart end - The trailing slot's box.
30
+ * @csspart end - The box around the `end` slot.
34
31
  * @csspart field - The text field.
35
- * @csspart mark - The glyph inside the send control.
36
- * @csspart send - The control that offers the turn.
37
- * @csspart start - The leading slot's box.
32
+ * @csspart mark - The icon inside the send button.
33
+ * @csspart send - The send button.
34
+ * @csspart start - The box around the `start` slot.
38
35
  * @csspart tools - The row under the field.
39
36
  */
40
37
  export declare class HelixHeadlessChatComposer extends HelixElement {
41
38
  /**
42
- * Whether the composer refuses input, while a turn is in flight say.
39
+ * Whether the composer blocks input, such as while a turn is being sent.
43
40
  */
44
41
  disabled: boolean;
45
42
  /**
46
- * Accessible name for the field.
43
+ * The field's name, read by screen readers.
47
44
  */
48
45
  label: string;
49
46
  /**
50
- * Shown in an empty field.
47
+ * Placeholder text shown in an empty field.
51
48
  */
52
49
  placeholder: string;
53
50
  /**
@@ -57,11 +54,12 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
57
54
  */
58
55
  rows: number;
59
56
  /**
60
- * Label for the control that sends.
57
+ * Label for the send button.
61
58
  */
62
59
  sendLabel: string;
63
60
  /**
64
- * What sends: pressing Enter, or only the control.
61
+ * What sends the turn: `enter` for the Enter key, or `button` for the send
62
+ * button only.
65
63
  *
66
64
  * `enter` is the messaging convention and makes Shift+Enter the line break.
67
65
  * `button` is what a composer holding several paragraphs wants, where Enter
@@ -69,7 +67,7 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
69
67
  */
70
68
  submitOn: 'button' | 'enter';
71
69
  /**
72
- * What the reader has written.
70
+ * The text the user has written.
73
71
  *
74
72
  * Read it, or set it to seed a draft.
75
73
  */
@@ -82,7 +80,7 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
82
80
  /** What is in the field, whoever last wrote it. */
83
81
  private get text();
84
82
  /**
85
- * Offers what is written, and reports whether it stood.
83
+ * Sends what is written, and returns whether the send went through.
86
84
  *
87
85
  * Public because a consumer's own send control is as likely to ask as this
88
86
  * element's is, and because a keyboard shortcut somewhere else on the page is
@@ -8,19 +8,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
8
8
  */
9
9
  export declare const FAILED_LABEL = "Not sent";
10
10
  /**
11
- * @summary One turn in a conversation, and what has happened to it.
11
+ * @summary One turn in a conversation, with its state, such as sending or failed.
12
12
  *
13
13
  * @description
14
- * **The states are the component.** Bubbles are paint; what a chat message has
15
- * to carry is whether it is on its way, arrived, still arriving, or failed, and
16
- * a failed message needs a retry that is a real action rather than a toast the
17
- * reader has to catch.
14
+ * A chat message carries its state: sending, arrived, streaming, or failed. A
15
+ * failed message has a retry control in the message, which fires `helix-send`.
18
16
  *
19
- * `streaming` is the state everything else is arranged around. A message
20
- * arriving token by token changes height on every frame, so it is marked
21
- * `aria-busy` while it arrives and announced once when it settles: a screen
22
- * reader reading a stream character by character is unusable, and announcing on
23
- * completion is the only version of this that works.
17
+ * `streaming` is the state the others are arranged around. A streaming message
18
+ * changes height on every frame, so it is marked `aria-busy` while it arrives
19
+ * and announced once when it settles. A screen reader cannot follow a stream
20
+ * read out character by character.
24
21
  *
25
22
  * @since 0.1.0
26
23
  * @status stable
@@ -28,35 +25,35 @@ export declare const FAILED_LABEL = "Not sent";
28
25
  * @aliases Message, Bubble, Turn
29
26
  * @documentation https://fusion.dev/helix/components/chat
30
27
  *
31
- * @slot - What was said.
32
- * @slot actions - What can be done with it: copy, retry, react.
33
- * @slot avatar - Who said it.
34
- * @slot indicator - The wait before the first token. Falls back to the typing
35
- * indicator, so slotting nothing is what this has always done.
36
- * @slot sources - What it was said from: citations, documents, a retrieved page.
28
+ * @slot - The turn's content.
29
+ * @slot actions - Controls for the turn, such as copy, retry, or react.
30
+ * @slot avatar - The author's avatar.
31
+ * @slot indicator - The indicator shown before the first token arrives.
32
+ * Defaults to the typing indicator.
33
+ * @slot sources - The turn's sources, such as citations, documents, or a retrieved page.
37
34
  *
38
- * @event {HelixSendEvent} helix-send - Fired when the reader asks to send a failed message again. Cancelable: a retry that stands puts the turn back on its way, and refusing it leaves the failure and the control offering it exactly where they were.
35
+ * @event {HelixSendEvent} helix-send - Fired when the user retries a failed message. Cancelable: if it is not canceled, the turn is sent again. Canceling it leaves the failure and the retry button as they were.
39
36
  *
40
- * @csspart actions - The controls offered on the turn, beside its time.
41
- * @csspart avatar - The leading slot's box.
42
- * @csspart body - What was said, and the line under it.
43
- * @csspart content - The consumer's own markup.
44
- * @csspart indicator - The default wait, drawn only when nothing is slotted over it.
45
- * @csspart mark - The status glyph beside a failure.
37
+ * @csspart actions - The controls on the turn, beside its time.
38
+ * @csspart avatar - The box around the `avatar` slot.
39
+ * @csspart body - The content and the line under it.
40
+ * @csspart content - Your own markup.
41
+ * @csspart indicator - The default indicator, drawn only when nothing is in the `indicator` slot.
42
+ * @csspart mark - The status icon beside a failure.
46
43
  * @csspart message - The whole turn.
47
- * @csspart meta - The line under a turn: its time, its state, and its controls.
48
- * @csspart retry - The control offered on a failed message.
49
- * @csspart sources - What the turn was drawn from, under it and outside the bubble.
50
- * @csspart state - What has happened to it, where that is worth saying.
51
- * @csspart time - When it was said.
44
+ * @csspart meta - The line under a turn, with its time, state, and controls.
45
+ * @csspart retry - The retry button on a failed message.
46
+ * @csspart sources - The turn's sources, under it and outside the bubble.
47
+ * @csspart state - The text that names the turn's state, when there is one to show.
48
+ * @csspart time - The turn's time.
52
49
  */
53
50
  export declare class HelixHeadlessChatMessage extends HelixElement {
54
51
  /**
55
- * When it was said, as anything `Date` parses.
52
+ * The turn's time, in any format `Date` parses.
56
53
  */
57
54
  at: string;
58
55
  /**
59
- * Who said it.
56
+ * The turn's author.
60
57
  *
61
58
  * Free text rather than a two-value union, because a conversation is not
62
59
  * always two-sided: a transcript with a system turn, a tool call and three
@@ -76,15 +73,15 @@ export declare class HelixHeadlessChatMessage extends HelixElement {
76
73
  */
77
74
  locale: string;
78
75
  /**
79
- * Label for the control offered on a failed message.
76
+ * Label for the retry button on a failed message.
80
77
  */
81
78
  retryLabel: string;
82
79
  /**
83
- * What to call each state, for a reader who cannot see it.
80
+ * The label shown while the message is sending.
84
81
  */
85
82
  sendingLabel: string;
86
83
  /**
87
- * What has happened to it.
84
+ * The turn's state.
88
85
  *
89
86
  * Reflected, because every one of the four is a visual state and a stylesheet
90
87
  * has no other way to know. Absent is a settled message with nothing to
@@ -22,51 +22,33 @@ export interface ChatTurn {
22
22
  }
23
23
  declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
24
24
  /**
25
- * @summary A conversation: the turns, and where the reader is in them.
25
+ * @summary A conversation's turns in a scrolling transcript that keeps the user's place.
26
26
  *
27
27
  * @description
28
- * **It has no opinion about where it sits.** A chat is asked for as a floating
29
- * button, a page, a palette, a sidebar, a modal and an inline block, and none
30
- * of those is a variant of a conversation: they are containers, and the
31
- * containers already exist. Nothing here is positioned, nothing has a backdrop,
32
- * and nothing owns a trigger. If a form factor needs a mode on this element,
33
- * the split is wrong.
28
+ * Chat has no positioning, no backdrop, and no trigger, so you can put it in
29
+ * any container, such as a page, a sidebar, a modal, or a floating panel.
34
30
  *
35
- * **Scroll ownership is the behavior everything else depends on.** A transcript
36
- * that grows wants to stay at the bottom, except when the reader has scrolled
37
- * up to read, where pinning is hostile. The rule: pin while the reader is
38
- * within `threshold` of the bottom, and let go the moment they leave it. A turn
39
- * growing under a pinned reader is not the reader leaving, so a streamed answer
40
- * is followed to its last line.
31
+ * The transcript stays pinned to the bottom, including while a streamed answer
32
+ * grows, until the user scrolls more than `threshold` away from it.
41
33
  *
42
- * **History loads upward, under a reader who does not move.** With `history`
43
- * set to `more`, reaching the top fires `helix-history`; the consumer sets
44
- * `loading` while it fetches and prepends the older turns, and the turn the
45
- * reader was looking at stays where it was on screen while the room above it
46
- * grows.
34
+ * With `history` set to `more`, reaching the top fires `helix-history`. Set
35
+ * `loading` while you fetch, then prepend the older turns. The turn the user
36
+ * was reading stays in place on screen.
47
37
  *
48
- * **A turn is announced once, when it settles**, and not by the log. A log
49
- * that is a live region reads what enters it, which is every token of a stream
50
- * where `aria-busy` is not honored, every page of history as it loads, and
51
- * every window of a long transcript as the reader scrolls through it. So the
52
- * log is `aria-live="off"`, and a status region of its own says each new turn
53
- * when it has finished arriving: never the reader's own words unless they
54
- * failed to send, never a turn loaded above the ones already there, and never
55
- * what was in the transcript when it opened.
38
+ * The log is `aria-live="off"`. A separate status region announces each new
39
+ * turn once, when it has finished arriving. It skips the user's own turns
40
+ * unless they failed to send, turns loaded as history, and the turns already
41
+ * there when the transcript opened.
56
42
  *
57
- * **Turns are markup children or data, not both.** Children serve whole from a
58
- * server and are what most conversations want. `turns` is for the transcript
59
- * too long to hold as elements: it is drawn a window at a time, measured as it
60
- * goes, and the log needs a block size of its own for that to mean anything.
43
+ * Pass the turns as children or as `turns` data. Do not use both. Children
44
+ * render from the server and suit most conversations. `turns` draws a long
45
+ * transcript one window at a time, so the log needs a block size of its own.
61
46
  *
62
- * **A fed turn is styled through this element, not its own.** Its message is
63
- * drawn in this shadow root, where `[author="me"]` cannot reach it, so every
64
- * fed turn's parts are forwarded as `message-*`, and the ones that change with
65
- * the turn a second time while it holds: `-mine` for a turn by `me`, and
66
- * `message-meta-failed`, `message-content-sending` and
67
- * `message-content-streaming` for its state. Every other author has the plain
68
- * names only, so a conversation styling each participant apart passes its
69
- * turns as children.
47
+ * A turn from `turns` is drawn in the chat's shadow root, so style it through
48
+ * the forwarded `message-*` parts. A turn by `me` also gets each part with
49
+ * `-mine` added, and the turn's state adds `message-meta-failed`,
50
+ * `message-content-sending`, and `message-content-streaming`. To style each
51
+ * participant differently, pass the turns as children.
70
52
  *
71
53
  * @since 0.1.0
72
54
  * @status stable
@@ -75,53 +57,53 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
75
57
  * @documentation https://fusion.dev/helix/components/chat
76
58
  *
77
59
  * @slot - The turns.
78
- * @slot actions - Beside the header: what can be done to the conversation itself.
79
- * @slot composer - Below the transcript, where the reader writes.
80
- * @slot header - Above the transcript: what this conversation is.
81
- * @slot resume - The way back to the bottom, shown while the reader has scrolled away.
82
- * @slot status - Beside the composer: somebody typing, connection lost.
60
+ * @slot actions - Controls for the whole conversation, beside the header.
61
+ * @slot composer - The composer, below the transcript.
62
+ * @slot header - Content above the transcript that names the conversation.
63
+ * @slot resume - The control that returns to the bottom, shown while the user has scrolled away.
64
+ * @slot status - Status beside the composer, such as someone typing or a lost connection.
83
65
  *
84
- * @event {HelixBeforePinEvent} helix-before-pin - Fired when the reader pins or unpins the transcript by scrolling. Cancelable.
85
- * @event {HelixHistoryEvent} helix-history - Fired when the reader reaches the oldest turn while `history` is `more`, reporting where they are rather than asking.
86
- * @event {HelixSendEvent} helix-send - A turn offered from the composer, or a failed one asked to go again, dispatched inside and heard here because the conversation is what a consumer holds. Cancelable: refusing it takes the decision and nothing is sent.
66
+ * @event {HelixBeforePinEvent} helix-before-pin - Fired when the user pins or unpins the transcript by scrolling. Cancelable.
67
+ * @event {HelixHistoryEvent} helix-history - Fired when the user reaches the oldest turn while `history` is `more`. It reports the position and cannot be canceled.
68
+ * @event {HelixSendEvent} helix-send - Fired when the user sends a turn from the composer or retries a failed one. It is fired inside and handled here, so you can listen for it on the conversation. Cancelable: canceling it sends nothing and leaves the decision to you.
87
69
  *
88
70
  * @csspart actions - The controls for the conversation, at the header's trailing edge.
89
- * @csspart after - The room the turns below the window would take. Data only.
90
- * @csspart before - The room the turns above the window would take. Data only.
71
+ * @csspart after - The space the turns below the rendered ones would take. Only for turns from `turns`.
72
+ * @csspart before - The space the turns above the rendered ones would take. Only for turns from `turns`.
91
73
  * @csspart composer - The region the composer sits in.
92
74
  * @csspart empty - Shown when the conversation has no turns.
93
75
  * @csspart header - The region above the transcript.
94
- * @csspart history - Shown at the top of the transcript while older turns are on their way.
95
- * @csspart live - Where each settled turn is said, for a reader who cannot see it arrive.
96
- * @csspart loading - Shown while the history is still on its way.
97
- * @csspart log - The transcript, which is the thing that scrolls.
98
- * @csspart message - A turn fed as data: the message drawn for it, forwarded whole.
99
- * @csspart message-actions - The controls offered on a fed turn, beside its time.
100
- * @csspart message-avatar - A fed turn's leading slot's box.
101
- * @csspart message-avatar-mine - The leading slot's box on a fed turn by `me`.
102
- * @csspart message-body - What a fed turn said, and the line under it.
103
- * @csspart message-body-mine - What a fed turn by `me` said, and the line under it.
104
- * @csspart message-content - A fed turn's text.
105
- * @csspart message-content-mine - The text of a fed turn by `me`.
106
- * @csspart message-content-sending - A fed turn's text while it is `sending`.
107
- * @csspart message-content-streaming - A fed turn's text while it is `streaming`.
108
- * @csspart message-indicator - A fed turn's default wait.
109
- * @csspart message-mark - The status glyph beside a fed turn's failure.
110
- * @csspart message-meta - The line under a fed turn: its time, its state, and its controls.
111
- * @csspart message-meta-failed - The line under a fed turn that `failed`, which says so.
112
- * @csspart message-meta-mine - The line under a fed turn by `me`.
113
- * @csspart message-mine - A fed turn by `me`: the message drawn for it.
114
- * @csspart message-retry - The control offered on a fed turn that failed.
115
- * @csspart message-sources - What a fed turn was drawn from.
116
- * @csspart message-state - What has happened to a fed turn, where that is worth saying.
117
- * @csspart message-time - When a fed turn was said.
118
- * @csspart resume - The affordance offered while the reader is away from the bottom.
119
- * @csspart status - The status region, which is not part of the log.
120
- * @csspart turn - One turn fed as data, around the message drawn for it.
76
+ * @csspart history - Shown at the top of the transcript while older turns load.
77
+ * @csspart live - The region where screen readers announce each turn once it has arrived.
78
+ * @csspart loading - Shown while the history loads.
79
+ * @csspart log - The transcript, which scrolls.
80
+ * @csspart message - The message drawn for a turn from `turns`, forwarded whole.
81
+ * @csspart message-actions - The controls on a turn from `turns`, beside its time.
82
+ * @csspart message-avatar - The avatar box of a turn from `turns`.
83
+ * @csspart message-avatar-mine - The avatar box of a turn from `turns` by `me`.
84
+ * @csspart message-body - The content of a turn from `turns`, and the line under it.
85
+ * @csspart message-body-mine - The content of a turn from `turns` by `me`, and the line under it.
86
+ * @csspart message-content - The text of a turn from `turns`.
87
+ * @csspart message-content-mine - The text of a turn from `turns` by `me`.
88
+ * @csspart message-content-sending - The text of a turn from `turns` while it is `sending`.
89
+ * @csspart message-content-streaming - The text of a turn from `turns` while it is `streaming`.
90
+ * @csspart message-indicator - The default indicator of a turn from `turns`.
91
+ * @csspart message-mark - The status icon beside a failed turn from `turns`.
92
+ * @csspart message-meta - The line under a turn from `turns`, with its time, state, and controls.
93
+ * @csspart message-meta-failed - The line under a turn from `turns` that `failed`, which shows the failure.
94
+ * @csspart message-meta-mine - The line under a turn from `turns` by `me`.
95
+ * @csspart message-mine - The message drawn for a turn from `turns` by `me`.
96
+ * @csspart message-retry - The retry button on a failed turn from `turns`.
97
+ * @csspart message-sources - The sources of a turn from `turns`.
98
+ * @csspart message-state - The state text of a turn from `turns`, when there is one to show.
99
+ * @csspart message-time - The time of a turn from `turns`.
100
+ * @csspart resume - The control shown while the user is scrolled away from the bottom.
101
+ * @csspart status - The status region, outside the log.
102
+ * @csspart turn - The wrapper around the message drawn for one turn from `turns`.
121
103
  */
122
104
  export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
123
105
  /**
124
- * Nothing is assigned by name, so the turns land in the log and the rest does not.
106
+ * Slots are assigned manually, so only the turns go into the log.
125
107
  *
126
108
  * The messages are ordinary children a consumer writes with no `slot`, and a
127
109
  * `role="log"` whose turns are somewhere else is a log of nothing. Manual
@@ -133,7 +115,8 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
133
115
  /** How tall a turn is assumed to be before it has been drawn, in pixels. */
134
116
  static readonly ESTIMATE = 72;
135
117
  /**
136
- * Whether to open pinned, where nothing declared it.
118
+ * Whether the transcript opens pinned to the bottom, when `pinned` is not
119
+ * set.
137
120
  *
138
121
  * `default-pinned="false"` opens away from the bottom. A plain boolean
139
122
  * attribute could not say that: it is true by being there, whatever it holds,
@@ -141,7 +124,7 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
141
124
  */
142
125
  defaultPinned: boolean;
143
126
  /**
144
- * Whether there are older turns than the ones here, and whether they are coming.
127
+ * Whether there are older turns to load, and whether they are loading.
145
128
  *
146
129
  * `more` makes reaching the top fire `helix-history`, once per arrival;
147
130
  * `loading` draws `history-text` above the oldest turn and fires nothing; empty
@@ -150,11 +133,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
150
133
  */
151
134
  history: '' | 'loading' | 'more';
152
135
  /**
153
- * What to say while older turns are on their way.
136
+ * The text shown while older turns load.
154
137
  */
155
138
  historyText: string;
156
139
  /**
157
- * Accessible name for the conversation.
140
+ * The conversation's name, read by screen readers.
158
141
  */
159
142
  label: string;
160
143
  /**