@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.
- package/custom-elements.json +10386 -3813
- package/dist/accordion/item/accordion-item.d.ts +17 -16
- package/dist/accordion/root/accordion-root.d.ts +13 -17
- package/dist/announcement/root/announcement-root.d.ts +24 -31
- package/dist/app-header/root/app-header-root.d.ts +14 -14
- package/dist/area-chart/root/area-chart-root.d.ts +29 -48
- package/dist/avatar/group/avatar-group.d.ts +6 -8
- package/dist/avatar/root/avatar-root.d.ts +11 -11
- package/dist/badge/root/badge-root.d.ts +14 -15
- package/dist/bar-chart/root/bar-chart-root.d.ts +40 -44
- package/dist/blockquote/root/blockquote-root.d.ts +5 -7
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +25 -33
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +12 -11
- package/dist/button/root/button-root.d.ts +16 -17
- package/dist/button-group/root/button-group-root.d.ts +9 -10
- package/dist/callout/root/callout-root.d.ts +10 -15
- package/dist/canvas/edge/canvas-edge.d.ts +21 -21
- package/dist/canvas/node/canvas-node.d.ts +43 -45
- package/dist/canvas/root/canvas-root.d.ts +100 -99
- package/dist/card/root/card-root.d.ts +10 -12
- package/dist/carousel/root/carousel-root.d.ts +32 -33
- package/dist/chat/composer/chat-composer.d.ts +24 -26
- package/dist/chat/message/chat-message.d.ts +30 -33
- package/dist/chat/root/chat-root.d.ts +63 -80
- package/dist/checkbox/root/checkbox-root.d.ts +30 -32
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +25 -25
- package/dist/code/root/code-root.d.ts +6 -10
- package/dist/code-block/root/code-block-root.d.ts +35 -48
- package/dist/color-input/root/color-input-root.d.ts +62 -56
- package/dist/color-input/root/color-input-root.js +3 -0
- package/dist/color-picker/root/color-picker-root.d.ts +61 -49
- package/dist/color-picker/root/color-picker-root.js +4 -0
- package/dist/combobox/root/combobox-root.d.ts +52 -53
- package/dist/command/root/command-root.d.ts +40 -40
- package/dist/command/root/command-root.js +1 -0
- package/dist/copy-button/root/copy-button-root.d.ts +24 -26
- package/dist/data-table/root/data-table-root.d.ts +106 -107
- package/dist/date-input/root/date-input-root.d.ts +54 -53
- package/dist/date-picker/root/date-picker-root.d.ts +25 -21
- package/dist/description-list/item/description-list-item.d.ts +7 -7
- package/dist/description-list/root/description-list-root.d.ts +10 -15
- package/dist/dialog/root/dialog-root.d.ts +22 -19
- package/dist/divider/root/divider-root.d.ts +12 -13
- package/dist/donut-chart/root/donut-chart-root.d.ts +19 -20
- package/dist/drawer/root/drawer-root.d.ts +19 -18
- package/dist/drilldown/item/drilldown-item.d.ts +28 -28
- package/dist/drilldown/root/drilldown-root.d.ts +22 -28
- package/dist/element-events.generated.js +19 -1
- package/dist/empty/root/empty-root.d.ts +16 -19
- package/dist/file-input/root/file-input-root.d.ts +32 -32
- package/dist/filter-input/chip/filter-chip.d.ts +36 -39
- package/dist/filter-input/field/filter-field.d.ts +25 -31
- package/dist/filter-input/menu/filter-menu.d.ts +50 -47
- package/dist/filter-input/operator/filter-operator.d.ts +15 -20
- package/dist/filter-input/root/filter-input-root.d.ts +80 -98
- package/dist/format-date/root/format-date-root.d.ts +19 -27
- package/dist/heatmap/root/heatmap-root.d.ts +40 -41
- package/dist/icon/root/icon-root.d.ts +21 -23
- package/dist/icon-button/root/icon-button-root.d.ts +12 -14
- package/dist/image/root/image-root.d.ts +30 -30
- package/dist/input/root/input-root.d.ts +36 -35
- package/dist/kbd/root/kbd-root.d.ts +13 -15
- package/dist/legend/root/legend-root.d.ts +18 -16
- package/dist/lightbox/item/lightbox-item.d.ts +13 -15
- package/dist/lightbox/root/lightbox-root.d.ts +40 -41
- package/dist/line-chart/root/line-chart-root.d.ts +20 -29
- package/dist/list/item/list-item.d.ts +17 -22
- package/dist/list/root/list-root.d.ts +6 -7
- package/dist/listbox/root/listbox-root.d.ts +42 -41
- package/dist/loader/root/loader-root.d.ts +16 -20
- package/dist/map/area/map-area.d.ts +48 -0
- package/dist/map/area/map-area.js +40 -0
- package/dist/map/buildings/map-buildings.d.ts +45 -0
- package/dist/map/buildings/map-buildings.js +37 -0
- package/dist/map/contours/map-contours.d.ts +61 -0
- package/dist/map/contours/map-contours.js +54 -0
- package/dist/map/index.d.ts +14 -0
- package/dist/map/index.js +10 -0
- package/dist/map/landcover/map-landcover.d.ts +47 -0
- package/dist/map/landcover/map-landcover.js +37 -0
- package/dist/map/marker/map-marker.d.ts +120 -0
- package/dist/map/marker/map-marker.js +109 -0
- package/dist/map/points/map-points.d.ts +139 -0
- package/dist/map/points/map-points.js +161 -0
- package/dist/map/position/map-position.d.ts +70 -0
- package/dist/map/position/map-position.js +89 -0
- package/dist/map/raster/map-raster.d.ts +84 -0
- package/dist/map/raster/map-raster.js +96 -0
- package/dist/map/root/map-root.d.ts +269 -52
- package/dist/map/root/map-root.js +473 -5
- package/dist/map/route/map-route.d.ts +73 -0
- package/dist/map/route/map-route.js +52 -0
- package/dist/map/terrain/map-terrain.d.ts +68 -0
- package/dist/map/terrain/map-terrain.js +58 -0
- package/dist/megamenu/root/megamenu-root.d.ts +27 -25
- package/dist/menu/item/menu-item.d.ts +30 -31
- package/dist/menu/root/menu-root.d.ts +25 -29
- package/dist/meter/root/meter-root.d.ts +22 -21
- package/dist/navigation/root/navigation-root.d.ts +13 -16
- package/dist/notifications/group/notification-group.d.ts +27 -28
- package/dist/notifications/notification/notification.d.ts +35 -42
- package/dist/notifications/root/notifications-root.d.ts +22 -24
- package/dist/number-input/root/number-input-root.d.ts +46 -50
- package/dist/object-inspector/root/object-inspector-root.d.ts +46 -58
- package/dist/option/group/option-group.d.ts +11 -11
- package/dist/option/root/option-root.d.ts +28 -33
- package/dist/outline/root/outline-root.d.ts +18 -17
- package/dist/pagination/root/pagination-root.d.ts +37 -39
- package/dist/pagination/size/pagination-size.d.ts +37 -43
- package/dist/pagination/summary/pagination-summary.d.ts +12 -14
- package/dist/pin-input/root/pin-input-root.d.ts +32 -38
- package/dist/popover/root/popover-root.d.ts +16 -21
- package/dist/progress/root/progress-root.d.ts +16 -14
- package/dist/qr-code/root/qr-code-root.d.ts +22 -25
- package/dist/quote/root/quote-root.d.ts +5 -6
- package/dist/radio/group/radio-group.d.ts +26 -28
- package/dist/radio/root/radio-root.d.ts +24 -28
- package/dist/rating/root/rating-root.d.ts +27 -30
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +43 -55
- package/dist/scroll-area/root/scroll-area-root.d.ts +15 -21
- package/dist/select/root/select-root.d.ts +41 -44
- package/dist/skeleton/root/skeleton-root.d.ts +7 -8
- package/dist/skip-link/root/skip-link-root.d.ts +21 -28
- package/dist/slider/root/slider-root.d.ts +36 -39
- package/dist/sparkline/root/sparkline-root.d.ts +22 -28
- package/dist/speed-dial/item/speed-dial-item.d.ts +21 -21
- package/dist/speed-dial/root/speed-dial-root.d.ts +25 -27
- package/dist/splitter/root/splitter-root.d.ts +37 -41
- package/dist/stat/group/stat-group.d.ts +4 -4
- package/dist/stat/root/stat-root.d.ts +8 -9
- package/dist/steps/root/steps-root.d.ts +11 -14
- package/dist/steps/step/step.d.ts +22 -29
- package/dist/switch/root/switch-root.d.ts +20 -24
- package/dist/table/cell/table-cell.d.ts +18 -8
- package/dist/table/cell/table-cell.js +5 -1
- package/dist/table/column/table-column.d.ts +62 -55
- package/dist/table/root/table-root.d.ts +16 -17
- package/dist/table/row/table-row.d.ts +3 -3
- package/dist/tabs/panel/tab-panel.d.ts +3 -3
- package/dist/tabs/root/tabs-root.d.ts +19 -17
- package/dist/tabs/tab/tab.d.ts +6 -6
- package/dist/tag/root/tag-root.d.ts +11 -12
- package/dist/textarea/root/textarea-root.d.ts +29 -32
- package/dist/time-input/root/time-input-root.d.ts +70 -69
- package/dist/time-picker/root/time-picker-root.d.ts +58 -66
- package/dist/timeline/item/timeline-item.d.ts +18 -24
- package/dist/timeline/root/timeline-root.d.ts +13 -21
- package/dist/toast/item/toast-item.d.ts +21 -22
- package/dist/toast/root/toast-root.d.ts +18 -23
- package/dist/toggle/group/toggle-group.d.ts +23 -25
- package/dist/toggle/root/toggle-root.d.ts +8 -8
- package/dist/toolbar/root/toolbar-root.d.ts +7 -10
- package/dist/tooltip/root/tooltip-root.d.ts +41 -47
- package/dist/tour/root/tour-root.d.ts +24 -26
- package/dist/tour/stop/tour-stop.d.ts +39 -48
- package/dist/tree/item/tree-item.d.ts +23 -25
- package/dist/tree/root/tree-root.d.ts +13 -12
- package/dist/trend/root/trend-root.d.ts +18 -19
- package/dist/video/root/video-root.d.ts +108 -101
- package/dist/video-playlist/item/video-playlist-item.d.ts +23 -28
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +17 -21
- package/dist/video-playlist/root/video-playlist-root.d.ts +21 -25
- package/dist/virtual-list/root/virtual-list-root.d.ts +27 -26
- package/package.json +5 -5
- package/types/jsx.d.ts +14011 -11983
- package/types/svelte.d.ts +10 -0
- 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
|
|
8
|
-
* and the browser's
|
|
9
|
-
*
|
|
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
|
|
12
|
-
*
|
|
13
|
-
* `aria-roledescription="slide"
|
|
14
|
-
* and assigns the slide into it
|
|
15
|
-
* a slide that is
|
|
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
|
|
18
|
-
*
|
|
19
|
-
*
|
|
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
|
|
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
|
|
34
|
-
* @csspart indicator-current - The
|
|
35
|
-
* @csspart indicators - The row of
|
|
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.
|
|
46
|
-
* @cssproperty --carousel-pane - The size one pane
|
|
47
|
-
* @cssproperty --carousel-per-view - How many slides go across
|
|
48
|
-
* @cssproperty --carousel-run-end - How far short of a whole pixel the run ends, on the last slide
|
|
49
|
-
* @cssproperty --carousel-slide-min - The narrowest a slide may be
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
231
|
+
* The name of the control that moves to the previous slide.
|
|
233
232
|
*/
|
|
234
233
|
previousLabel: string;
|
|
235
234
|
/**
|
|
236
|
-
*
|
|
235
|
+
* The name of each slide, with `{index}` and `{count}` filled in.
|
|
237
236
|
*/
|
|
238
237
|
slideLabel: string;
|
|
239
238
|
/**
|
|
240
|
-
*
|
|
241
|
-
*
|
|
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
|
-
*
|
|
244
|
+
* The name of the rotation control while rotation is stopped.
|
|
246
245
|
*/
|
|
247
246
|
startLabel: string;
|
|
248
247
|
/**
|
|
249
|
-
*
|
|
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
|
|
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
|
|
4
|
+
* @summary A field for writing a turn in a conversation.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
* attachments, slash commands or a model picker
|
|
9
|
-
* the transcript
|
|
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
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
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
|
|
18
|
-
*
|
|
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 -
|
|
28
|
-
* @slot start -
|
|
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
|
|
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
|
|
30
|
+
* @csspart end - The box around the `end` slot.
|
|
34
31
|
* @csspart field - The text field.
|
|
35
|
-
* @csspart mark - The
|
|
36
|
-
* @csspart send - The
|
|
37
|
-
* @csspart start - The
|
|
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
|
|
39
|
+
* Whether the composer blocks input, such as while a turn is being sent.
|
|
43
40
|
*/
|
|
44
41
|
disabled: boolean;
|
|
45
42
|
/**
|
|
46
|
-
*
|
|
43
|
+
* The field's name, read by screen readers.
|
|
47
44
|
*/
|
|
48
45
|
label: string;
|
|
49
46
|
/**
|
|
50
|
-
*
|
|
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
|
|
57
|
+
* Label for the send button.
|
|
61
58
|
*/
|
|
62
59
|
sendLabel: string;
|
|
63
60
|
/**
|
|
64
|
-
* What sends:
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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,
|
|
11
|
+
* @summary One turn in a conversation, with its state, such as sending or failed.
|
|
12
12
|
*
|
|
13
13
|
* @description
|
|
14
|
-
*
|
|
15
|
-
*
|
|
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
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
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 -
|
|
32
|
-
* @slot actions -
|
|
33
|
-
* @slot avatar -
|
|
34
|
-
* @slot indicator - The
|
|
35
|
-
*
|
|
36
|
-
* @slot sources -
|
|
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
|
|
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
|
|
41
|
-
* @csspart avatar - The
|
|
42
|
-
* @csspart body -
|
|
43
|
-
* @csspart content -
|
|
44
|
-
* @csspart indicator - The default
|
|
45
|
-
* @csspart mark - The status
|
|
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
|
|
48
|
-
* @csspart retry - The
|
|
49
|
-
* @csspart sources -
|
|
50
|
-
* @csspart state -
|
|
51
|
-
* @csspart time -
|
|
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
|
-
*
|
|
52
|
+
* The turn's time, in any format `Date` parses.
|
|
56
53
|
*/
|
|
57
54
|
at: string;
|
|
58
55
|
/**
|
|
59
|
-
*
|
|
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
|
|
76
|
+
* Label for the retry button on a failed message.
|
|
80
77
|
*/
|
|
81
78
|
retryLabel: string;
|
|
82
79
|
/**
|
|
83
|
-
*
|
|
80
|
+
* The label shown while the message is sending.
|
|
84
81
|
*/
|
|
85
82
|
sendingLabel: string;
|
|
86
83
|
/**
|
|
87
|
-
*
|
|
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
|
|
25
|
+
* @summary A conversation's turns in a scrolling transcript that keeps the user's place.
|
|
26
26
|
*
|
|
27
27
|
* @description
|
|
28
|
-
*
|
|
29
|
-
*
|
|
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
|
-
*
|
|
36
|
-
*
|
|
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
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
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
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
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
|
-
*
|
|
58
|
-
* server and
|
|
59
|
-
*
|
|
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
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
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 -
|
|
79
|
-
* @slot composer -
|
|
80
|
-
* @slot header -
|
|
81
|
-
* @slot resume - The
|
|
82
|
-
* @slot status -
|
|
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
|
|
85
|
-
* @event {HelixHistoryEvent} helix-history - Fired when the
|
|
86
|
-
* @event {HelixSendEvent} helix-send -
|
|
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
|
|
90
|
-
* @csspart before - The
|
|
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
|
|
95
|
-
* @csspart live -
|
|
96
|
-
* @csspart loading - Shown while the history
|
|
97
|
-
* @csspart log - The transcript, which
|
|
98
|
-
* @csspart message -
|
|
99
|
-
* @csspart message-actions - The controls
|
|
100
|
-
* @csspart message-avatar -
|
|
101
|
-
* @csspart message-avatar-mine - The
|
|
102
|
-
* @csspart message-body -
|
|
103
|
-
* @csspart message-body-mine -
|
|
104
|
-
* @csspart message-content -
|
|
105
|
-
* @csspart message-content-mine - The text of a
|
|
106
|
-
* @csspart message-content-sending -
|
|
107
|
-
* @csspart message-content-streaming -
|
|
108
|
-
* @csspart message-indicator -
|
|
109
|
-
* @csspart message-mark - The status
|
|
110
|
-
* @csspart message-meta - The line under a
|
|
111
|
-
* @csspart message-meta-failed - The line under a
|
|
112
|
-
* @csspart message-meta-mine - The line under a
|
|
113
|
-
* @csspart message-mine -
|
|
114
|
-
* @csspart message-retry - The
|
|
115
|
-
* @csspart message-sources -
|
|
116
|
-
* @csspart message-state -
|
|
117
|
-
* @csspart message-time -
|
|
118
|
-
* @csspart resume - The
|
|
119
|
-
* @csspart status - The status region,
|
|
120
|
-
* @csspart turn -
|
|
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
|
-
*
|
|
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
|
|
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
|
|
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
|
-
*
|
|
136
|
+
* The text shown while older turns load.
|
|
154
137
|
*/
|
|
155
138
|
historyText: string;
|
|
156
139
|
/**
|
|
157
|
-
*
|
|
140
|
+
* The conversation's name, read by screen readers.
|
|
158
141
|
*/
|
|
159
142
|
label: string;
|
|
160
143
|
/**
|