@fusion.dev/helix-headless 0.144.0 → 0.145.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 +8312 -881
- package/dist/accordion/item/accordion-item.d.ts +48 -12
- package/dist/accordion/item/accordion-item.js +26 -5
- package/dist/accordion/root/accordion-root.d.ts +6 -0
- package/dist/accordion/root/accordion-root.js +7 -1
- package/dist/announcement/root/announcement-root.d.ts +21 -1
- package/dist/announcement/root/announcement-root.js +36 -1
- package/dist/app-header/root/app-header-root.d.ts +7 -0
- package/dist/app-header/root/app-header-root.js +5 -1
- package/dist/app-header/sectioning.d.ts +7 -0
- package/dist/app-header/sectioning.js +26 -0
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +32 -1
- package/dist/breadcrumbs/root/breadcrumbs-root.js +25 -2
- package/dist/canvas/root/canvas-root.d.ts +38 -3
- package/dist/canvas/root/canvas-root.js +121 -40
- package/dist/carousel/root/carousel-root.d.ts +90 -0
- package/dist/carousel/root/carousel-root.js +134 -12
- package/dist/chat/composer/chat-composer.d.ts +38 -6
- package/dist/chat/composer/chat-composer.js +42 -9
- package/dist/chat/message/chat-message.d.ts +32 -1
- package/dist/chat/message/chat-message.js +25 -9
- package/dist/chat/naming.d.ts +22 -0
- package/dist/chat/naming.js +12 -0
- package/dist/chat/relative-clock.d.ts +39 -0
- package/dist/chat/relative-clock.js +31 -0
- package/dist/chat/root/chat-root.d.ts +36 -0
- package/dist/chat/root/chat-root.js +24 -1
- package/dist/code-block/root/code-block-root.d.ts +8 -1
- package/dist/code-block/root/code-block-root.js +5 -5
- package/dist/copy-button/root/copy-button-root.d.ts +21 -1
- package/dist/copy-button/root/copy-button-root.js +2 -2
- package/dist/data-table/root/data-table-root.d.ts +150 -2
- package/dist/data-table/root/data-table-root.js +303 -29
- package/dist/data-table/tree.d.ts +40 -0
- package/dist/data-table/tree.js +55 -0
- package/dist/description-list/item/description-list-item.d.ts +17 -2
- package/dist/description-list/item/description-list-item.js +15 -2
- package/dist/description-list/root/description-list-root.d.ts +27 -1
- package/dist/description-list/root/description-list-root.js +26 -1
- package/dist/drilldown/item/drilldown-item.d.ts +11 -6
- package/dist/drilldown/item/drilldown-item.js +8 -5
- package/dist/drilldown/root/drilldown-root.d.ts +11 -0
- package/dist/drilldown/root/drilldown-root.js +8 -3
- package/dist/element-events.generated.js +53 -8
- package/dist/filter-input/menu/filter-menu.d.ts +3 -0
- package/dist/filter-input/menu/filter-menu.js +8 -4
- package/dist/image/root/image-root.js +9 -1
- package/dist/input/root/input-root.d.ts +1 -1
- package/dist/input/root/input-root.js +2 -2
- package/dist/list/item/list-item.d.ts +68 -1
- package/dist/list/item/list-item.js +66 -4
- package/dist/list/numbering.d.ts +14 -0
- package/dist/list/numbering.js +8 -0
- package/dist/list/root/list-root.d.ts +106 -9
- package/dist/list/root/list-root.js +189 -4
- package/dist/list/selection.d.ts +19 -0
- package/dist/list/selection.js +21 -0
- package/dist/listbox/root/listbox-root.js +1 -2
- package/dist/map/root/map-root.d.ts +6 -2
- package/dist/map/root/map-root.js +5 -2
- package/dist/megamenu/root/megamenu-root.d.ts +21 -0
- package/dist/megamenu/root/megamenu-root.js +16 -2
- package/dist/menu/index.d.ts +1 -0
- package/dist/menu/index.js +1 -0
- package/dist/menu/item/menu-item.d.ts +38 -11
- package/dist/menu/item/menu-item.js +33 -1
- package/dist/menu/root/menu-root.d.ts +25 -1
- package/dist/menu/root/menu-root.js +63 -6
- package/dist/menu/section/menu-section.d.ts +55 -0
- package/dist/menu/section/menu-section.js +60 -0
- package/dist/navigation/root/navigation-root.d.ts +16 -1
- package/dist/navigation/root/navigation-root.js +27 -1
- package/dist/notifications/root/notifications-root.d.ts +18 -0
- package/dist/notifications/root/notifications-root.js +17 -1
- package/dist/object-inspector/root/object-inspector-root.d.ts +97 -16
- package/dist/object-inspector/root/object-inspector-root.js +179 -79
- package/dist/object-inspector/rows.d.ts +57 -0
- package/dist/object-inspector/rows.js +86 -0
- package/dist/outline/levels.d.ts +31 -0
- package/dist/outline/levels.js +23 -0
- package/dist/outline/root/outline-root.d.ts +68 -3
- package/dist/outline/root/outline-root.js +73 -8
- package/dist/pagination/size/pagination-size.d.ts +11 -2
- package/dist/pagination/size/pagination-size.js +19 -4
- package/dist/radio/group/radio-group.d.ts +4 -10
- package/dist/radio/group/radio-group.js +5 -10
- package/dist/rating/root/rating-root.d.ts +1 -1
- package/dist/rating/root/rating-root.js +2 -2
- package/dist/scroll-area/root/scroll-area-root.d.ts +113 -0
- package/dist/scroll-area/root/scroll-area-root.js +218 -3
- package/dist/scroll-area/scrollbar.d.ts +65 -0
- package/dist/scroll-area/scrollbar.js +24 -0
- package/dist/select/root/select-root.js +1 -1
- package/dist/splitter/root/splitter-root.d.ts +13 -0
- package/dist/splitter/root/splitter-root.js +20 -2
- package/dist/splitter/snap.d.ts +9 -0
- package/dist/splitter/snap.js +12 -0
- package/dist/steps/reach.d.ts +15 -0
- package/dist/steps/reach.js +12 -0
- package/dist/steps/root/steps-root.d.ts +30 -0
- package/dist/steps/root/steps-root.js +53 -0
- package/dist/steps/step/step.d.ts +38 -2
- package/dist/steps/step/step.js +28 -6
- package/dist/table/column/table-column.d.ts +11 -0
- package/dist/table/column/table-column.js +6 -1
- package/dist/table/root/table-root.d.ts +101 -0
- package/dist/table/root/table-root.js +166 -5
- package/dist/table/row/table-row.d.ts +47 -1
- package/dist/table/row/table-row.js +39 -2
- package/dist/tabs/panel/tab-panel.d.ts +9 -5
- package/dist/tabs/panel/tab-panel.js +3 -4
- package/dist/tabs/root/tabs-root.d.ts +25 -1
- package/dist/tabs/root/tabs-root.js +21 -3
- package/dist/tabs/tab/tab.d.ts +36 -4
- package/dist/tabs/tab/tab.js +46 -3
- package/dist/timeline/group/timeline-group.d.ts +46 -0
- package/dist/timeline/group/timeline-group.js +37 -0
- package/dist/timeline/index.d.ts +1 -0
- package/dist/timeline/index.js +1 -0
- package/dist/timeline/root/timeline-root.d.ts +10 -3
- package/dist/toast/item/toast-item.d.ts +10 -17
- package/dist/toast/item/toast-item.js +15 -36
- package/dist/toolbar/root/toolbar-root.d.ts +13 -0
- package/dist/toolbar/root/toolbar-root.js +15 -5
- package/dist/tree/item/tree-item.d.ts +54 -1
- package/dist/tree/item/tree-item.js +89 -20
- package/dist/tree/root/tree-root.d.ts +37 -0
- package/dist/tree/root/tree-root.js +51 -6
- package/dist/tree/selection.d.ts +24 -0
- package/dist/tree/selection.js +26 -0
- package/dist/video/media-events.d.ts +49 -0
- package/dist/video/media-events.js +39 -0
- package/dist/video/root/video-root.d.ts +99 -13
- package/dist/video/root/video-root.js +84 -47
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +3 -0
- package/dist/video-playlist/menu/video-playlist-menu.js +2 -1
- package/dist/video-playlist/order.d.ts +41 -0
- package/dist/video-playlist/order.js +34 -0
- package/dist/video-playlist/root/video-playlist-root.d.ts +70 -2
- package/dist/video-playlist/root/video-playlist-root.js +60 -16
- package/dist/virtual-list/controls.d.ts +4 -0
- package/dist/virtual-list/controls.js +30 -0
- package/dist/virtual-list/fill.d.ts +30 -0
- package/dist/virtual-list/fill.js +39 -0
- package/dist/virtual-list/keys.d.ts +15 -0
- package/dist/virtual-list/keys.js +24 -0
- package/dist/virtual-list/root/virtual-list-root.d.ts +155 -23
- package/dist/virtual-list/root/virtual-list-root.js +175 -34
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +3778 -801
- package/types/svelte.d.ts +2 -0
- package/types/vue.d.ts +782 -215
- package/dist/listbox/range.d.ts +0 -17
- package/dist/listbox/range.js +0 -5
package/types/vue.d.ts
CHANGED
|
@@ -94,6 +94,7 @@ import type {
|
|
|
94
94
|
HelixHeadlessMegamenu,
|
|
95
95
|
HelixHeadlessMenuItem,
|
|
96
96
|
HelixHeadlessMenu,
|
|
97
|
+
HelixHeadlessMenuSection,
|
|
97
98
|
HelixHeadlessMeter,
|
|
98
99
|
HelixHeadlessNavigation,
|
|
99
100
|
HelixHeadlessNotificationGroup,
|
|
@@ -146,6 +147,7 @@ import type {
|
|
|
146
147
|
HelixHeadlessTextarea,
|
|
147
148
|
HelixHeadlessTimeInput,
|
|
148
149
|
HelixHeadlessTimePicker,
|
|
150
|
+
HelixHeadlessTimelineGroup,
|
|
149
151
|
HelixHeadlessTimelineItem,
|
|
150
152
|
HelixHeadlessTimeline,
|
|
151
153
|
HelixHeadlessToastItem,
|
|
@@ -184,6 +186,7 @@ import type {
|
|
|
184
186
|
HelixSelectEvent,
|
|
185
187
|
HelixActivateEvent,
|
|
186
188
|
HelixSendEvent,
|
|
189
|
+
HelixTypingEvent,
|
|
187
190
|
HelixBeforePinEvent,
|
|
188
191
|
HelixHistoryEvent,
|
|
189
192
|
HelixPinEvent,
|
|
@@ -194,7 +197,10 @@ import type {
|
|
|
194
197
|
HelixSampleStartEvent,
|
|
195
198
|
HelixCreateEvent,
|
|
196
199
|
HelixFilterEvent,
|
|
200
|
+
HelixCopyErrorEvent,
|
|
201
|
+
HelixExpandEvent,
|
|
197
202
|
HelixFilteredEvent,
|
|
203
|
+
HelixLoadMoreEvent,
|
|
198
204
|
HelixNavigateEvent,
|
|
199
205
|
HelixReorderEvent,
|
|
200
206
|
HelixReorderedEvent,
|
|
@@ -212,7 +218,9 @@ import type {
|
|
|
212
218
|
HelixGraphSignalEvent,
|
|
213
219
|
HelixGraphZoomEvent,
|
|
214
220
|
HelixResizeEvent,
|
|
221
|
+
HelixClearEvent,
|
|
215
222
|
HelixShortcutEvent,
|
|
223
|
+
HelixActionEvent,
|
|
216
224
|
HelixMapPartChangeEvent,
|
|
217
225
|
HelixMapClusterEvent,
|
|
218
226
|
HelixMapPanEvent,
|
|
@@ -220,6 +228,7 @@ import type {
|
|
|
220
228
|
HelixMapRotateEvent,
|
|
221
229
|
HelixMapTiltEvent,
|
|
222
230
|
HelixMapZoomEvent,
|
|
231
|
+
HelixToggleEvent,
|
|
223
232
|
HelixReadEvent,
|
|
224
233
|
HelixCompleteEvent,
|
|
225
234
|
HelixBeforeCollapseEvent,
|
|
@@ -227,8 +236,11 @@ import type {
|
|
|
227
236
|
HelixCollapseEvent,
|
|
228
237
|
HelixResizedEvent,
|
|
229
238
|
HelixTourAskEvent,
|
|
239
|
+
HelixLoadEvent,
|
|
240
|
+
HelixEndEvent,
|
|
230
241
|
HelixNextEvent,
|
|
231
242
|
HelixPreviousEvent,
|
|
243
|
+
HelixRangeChangeEvent,
|
|
232
244
|
} from "@fusion.dev/helix-headless";
|
|
233
245
|
import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
|
|
234
246
|
|
|
@@ -316,6 +328,22 @@ too. */
|
|
|
316
328
|
Unset takes the accordion's `heading-level`, and 3 where that is unset
|
|
317
329
|
too. */
|
|
318
330
|
headingLevel?: (HelixHeadlessAccordionItem["headingLevel"]) | undefined;
|
|
331
|
+
/** Whether find in page searches the section while it is closed, and opens it
|
|
332
|
+
on a match.
|
|
333
|
+
|
|
334
|
+
Off by default. A closed section is then `hidden="until-found"`, which
|
|
335
|
+
hides through `content-visibility`, so a stylesheet that animates the
|
|
336
|
+
section closed shows an empty box for the length of that animation. The
|
|
337
|
+
accordion's own `hidden-until-found` turns it on for every section. */
|
|
338
|
+
"hidden-until-found"?: (HelixHeadlessAccordionItem["hiddenUntilFound"]) | undefined;
|
|
339
|
+
/** Whether find in page searches the section while it is closed, and opens it
|
|
340
|
+
on a match.
|
|
341
|
+
|
|
342
|
+
Off by default. A closed section is then `hidden="until-found"`, which
|
|
343
|
+
hides through `content-visibility`, so a stylesheet that animates the
|
|
344
|
+
section closed shows an empty box for the length of that animation. The
|
|
345
|
+
accordion's own `hidden-until-found` turns it on for every section. */
|
|
346
|
+
hiddenUntilFound?: (HelixHeadlessAccordionItem["hiddenUntilFound"]) | undefined;
|
|
319
347
|
/** A group name. Opening an item closes the other items with the same name,
|
|
320
348
|
as `<details name>` does.
|
|
321
349
|
|
|
@@ -372,6 +400,14 @@ Unset is 3. An item's own `heading-level` wins over this. */
|
|
|
372
400
|
|
|
373
401
|
Unset is 3. An item's own `heading-level` wins over this. */
|
|
374
402
|
headingLevel?: (HelixHeadlessAccordion["headingLevel"]) | undefined;
|
|
403
|
+
/** Whether find in page searches every closed section, and opens the one it
|
|
404
|
+
matches in. Each item's own `hidden-until-found` turns it on for that item
|
|
405
|
+
alone. */
|
|
406
|
+
"hidden-until-found"?: (HelixHeadlessAccordion["hiddenUntilFound"]) | undefined;
|
|
407
|
+
/** Whether find in page searches every closed section, and opens the one it
|
|
408
|
+
matches in. Each item's own `hidden-until-found` turns it on for that item
|
|
409
|
+
alone. */
|
|
410
|
+
hiddenUntilFound?: (HelixHeadlessAccordion["hiddenUntilFound"]) | undefined;
|
|
375
411
|
/** How many sections may be open at once.
|
|
376
412
|
|
|
377
413
|
Absent is `multiple`, so nothing closes unexpectedly and the default costs
|
|
@@ -400,6 +436,12 @@ export type HelixHeadlessAnnouncementHelixDismissElementEvent =
|
|
|
400
436
|
HelixHeadlessAnnouncementElementEvent<HelixDismissEvent>;
|
|
401
437
|
|
|
402
438
|
export type HelixHeadlessAnnouncementVueProps = {
|
|
439
|
+
/** How long the announcement stays, in milliseconds, before it sends
|
|
440
|
+
`helix-dismiss`. When it is not set, it stays until it is dismissed.
|
|
441
|
+
|
|
442
|
+
Read once when the announcement is first rendered, as `Toast` reads its
|
|
443
|
+
own. The clock stops while the pointer or focus is on the announcement. */
|
|
444
|
+
duration?: (HelixHeadlessAnnouncement["duration"]) | undefined;
|
|
403
445
|
/** The band's color.
|
|
404
446
|
|
|
405
447
|
Paint only: unlike `Callout`, no value here draws a mark, changes the label,
|
|
@@ -440,7 +482,7 @@ would catch. */
|
|
|
440
482
|
};
|
|
441
483
|
|
|
442
484
|
export type HelixHeadlessAnnouncementVueEvents = {
|
|
443
|
-
/** The dismiss button was pressed. The announcement does not remove itself, so remove it in response. Cancelable. */
|
|
485
|
+
/** The dismiss button was pressed, or `duration` ran out. The announcement does not remove itself, so remove it in response. Cancelable. */
|
|
444
486
|
"helix-dismiss": HelixHeadlessAnnouncementHelixDismissElementEvent;
|
|
445
487
|
};
|
|
446
488
|
|
|
@@ -822,6 +864,12 @@ export type HelixHeadlessBreadcrumbsVueProps = {
|
|
|
822
864
|
/** The landmark's name, read by screen readers. An `aria-label` on the host
|
|
823
865
|
wins over it. */
|
|
824
866
|
label?: (HelixHeadlessBreadcrumbs["label"]) | undefined;
|
|
867
|
+
/** The trail as data, drawn as crumbs before any you slot. The last item is the
|
|
868
|
+
current page.
|
|
869
|
+
|
|
870
|
+
React Aria's `items`. A property only: a trail is built by script, and an
|
|
871
|
+
attribute would put the whole path into the markup twice. */
|
|
872
|
+
items?: (HelixHeadlessBreadcrumbs["items"]) | undefined;
|
|
825
873
|
};
|
|
826
874
|
|
|
827
875
|
export type HelixHeadlessBreadcrumbsVueEvents = {};
|
|
@@ -1743,6 +1791,18 @@ read out in English. */
|
|
|
1743
1791
|
label?: (HelixHeadlessCarousel["label"]) | undefined;
|
|
1744
1792
|
/** Whether moving past either end wraps to the other. */
|
|
1745
1793
|
loop?: (HelixHeadlessCarousel["loop"]) | undefined;
|
|
1794
|
+
/** Whether a mouse can drag the track from slide to slide.
|
|
1795
|
+
|
|
1796
|
+
Off unless asked for, because a press on a slide is then the start of a
|
|
1797
|
+
drag, and text in a slide can no longer be selected with the mouse. A drag
|
|
1798
|
+
of a few pixels or less is still a press. */
|
|
1799
|
+
"mouse-drag"?: (HelixHeadlessCarousel["mouseDrag"]) | undefined;
|
|
1800
|
+
/** Whether a mouse can drag the track from slide to slide.
|
|
1801
|
+
|
|
1802
|
+
Off unless asked for, because a press on a slide is then the start of a
|
|
1803
|
+
drag, and text in a slide can no longer be selected with the mouse. A drag
|
|
1804
|
+
of a few pixels or less is still a press. */
|
|
1805
|
+
mouseDrag?: (HelixHeadlessCarousel["mouseDrag"]) | undefined;
|
|
1746
1806
|
/** The name of the control that moves to the next slide. */
|
|
1747
1807
|
"next-label"?: (HelixHeadlessCarousel["nextLabel"]) | undefined;
|
|
1748
1808
|
/** The name of the control that moves to the next slide. */
|
|
@@ -1884,6 +1944,14 @@ case is the absent attribute, and the styles read it that way. */
|
|
|
1884
1944
|
"previous-label"?: (HelixHeadlessCarousel["previousLabel"]) | undefined;
|
|
1885
1945
|
/** The name of the control that moves to the previous slide. */
|
|
1886
1946
|
previousLabel?: (HelixHeadlessCarousel["previousLabel"]) | undefined;
|
|
1947
|
+
/** The word screen readers announce in place of the carousel's role, set as
|
|
1948
|
+
`aria-roledescription`. Translate it with the rest of your text, or empty
|
|
1949
|
+
it to leave the role as `group`. */
|
|
1950
|
+
"role-label"?: (HelixHeadlessCarousel["roleLabel"]) | undefined;
|
|
1951
|
+
/** The word screen readers announce in place of the carousel's role, set as
|
|
1952
|
+
`aria-roledescription`. Translate it with the rest of your text, or empty
|
|
1953
|
+
it to leave the role as `group`. */
|
|
1954
|
+
roleLabel?: (HelixHeadlessCarousel["roleLabel"]) | undefined;
|
|
1887
1955
|
/** The name of each slide, with `{index}` and `{count}` filled in. */
|
|
1888
1956
|
"slide-label"?: (HelixHeadlessCarousel["slideLabel"]) | undefined;
|
|
1889
1957
|
/** The name of each slide, with `{index}` and `{count}` filled in. */
|
|
@@ -1919,10 +1987,11 @@ export type HelixHeadlessChatComposerElementEvent<E = Event> = TypedEvent<
|
|
|
1919
1987
|
/** `helix-send` event type */
|
|
1920
1988
|
export type HelixHeadlessChatComposerHelixSendElementEvent =
|
|
1921
1989
|
HelixHeadlessChatComposerElementEvent<HelixSendEvent>;
|
|
1990
|
+
/** `helix-typing` event type */
|
|
1991
|
+
export type HelixHeadlessChatComposerHelixTypingElementEvent =
|
|
1992
|
+
HelixHeadlessChatComposerElementEvent<HelixTypingEvent>;
|
|
1922
1993
|
|
|
1923
1994
|
export type HelixHeadlessChatComposerVueProps = {
|
|
1924
|
-
/** Whether the composer blocks input, such as while a turn is being sent. */
|
|
1925
|
-
disabled?: (HelixHeadlessChatComposer["disabled"]) | undefined;
|
|
1926
1995
|
/** The field's name, read by screen readers. */
|
|
1927
1996
|
label?: (HelixHeadlessChatComposer["label"]) | undefined;
|
|
1928
1997
|
/** Placeholder text shown in an empty field. */
|
|
@@ -1949,16 +2018,50 @@ button only.
|
|
|
1949
2018
|
`button` is what a composer holding several paragraphs wants, where Enter
|
|
1950
2019
|
has to mean a new line and nothing else. */
|
|
1951
2020
|
submitOn?: (HelixHeadlessChatComposer["submitOn"]) | undefined;
|
|
2021
|
+
/** How long after the last keystroke the user still counts as typing, in
|
|
2022
|
+
milliseconds. */
|
|
2023
|
+
"typing-timeout"?: (HelixHeadlessChatComposer["typingTimeout"] | `${number}`) | undefined;
|
|
2024
|
+
/** How long after the last keystroke the user still counts as typing, in
|
|
2025
|
+
milliseconds. */
|
|
2026
|
+
typingTimeout?: (HelixHeadlessChatComposer["typingTimeout"]) | undefined;
|
|
1952
2027
|
/** The text the user has written.
|
|
1953
2028
|
|
|
1954
2029
|
It follows typing, so reading it gives the draft. Set it to seed a draft or
|
|
1955
2030
|
to replace the one in the field, and set it to `''` to clear it. */
|
|
1956
2031
|
value?: (HelixHeadlessChatComposer["value"]) | undefined;
|
|
2032
|
+
/** Whether the control is disabled and cannot be used.
|
|
2033
|
+
|
|
2034
|
+
Reflected, because the styled tier selects on it, and mirrored to
|
|
2035
|
+
`aria-disabled` rather than removing the element from the accessibility
|
|
2036
|
+
tree, so a screen reader can still announce that the control exists.
|
|
2037
|
+
|
|
2038
|
+
The mirror itself is in `willUpdate` below, here rather than in each
|
|
2039
|
+
control, because here is where `disabled` is. */
|
|
2040
|
+
disabled?: (HelixHeadlessChatComposer["disabled"]) | undefined;
|
|
2041
|
+
/** The name the control's value is submitted under.
|
|
2042
|
+
|
|
2043
|
+
**Reflected, and it is the exception to "reflect only what CSS selects
|
|
2044
|
+
on".** The platform builds a form's entry list from the `name` *content
|
|
2045
|
+
attribute*, not from the property, so a control named through the property
|
|
2046
|
+
submitted under no name at all and was silently dropped. Measured: two
|
|
2047
|
+
inputs in one form, one named by attribute and one by property, and the
|
|
2048
|
+
form carried a single entry.
|
|
2049
|
+
|
|
2050
|
+
Safe for a React consumer, which is what the rule is protecting: React
|
|
2051
|
+
renders a custom element's props as attributes on the server, so the name
|
|
2052
|
+
is already in the markup being hydrated and reflecting it writes what is
|
|
2053
|
+
there. It is only a change to the markup when a consumer assigns it
|
|
2054
|
+
imperatively later, and nothing is hydrating by then.
|
|
2055
|
+
|
|
2056
|
+
Here rather than on each control. */
|
|
2057
|
+
name?: (HelixHeadlessChatComposer["name"]) | undefined;
|
|
1957
2058
|
};
|
|
1958
2059
|
|
|
1959
2060
|
export type HelixHeadlessChatComposerVueEvents = {
|
|
1960
2061
|
/** Fired when the user sends their turn, and cancelable. */
|
|
1961
2062
|
"helix-send": HelixHeadlessChatComposerHelixSendElementEvent;
|
|
2063
|
+
/** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
|
|
2064
|
+
"helix-typing": HelixHeadlessChatComposerHelixTypingElementEvent;
|
|
1962
2065
|
/** The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble. */
|
|
1963
2066
|
input: HelixHeadlessChatComposerElementEvent;
|
|
1964
2067
|
};
|
|
@@ -1983,6 +2086,18 @@ participants is the ordinary case for anything worth building this for.
|
|
|
1983
2086
|
`me` and `them` are the conventional values and the stylesheet knows them;
|
|
1984
2087
|
anything else is a name the consumer styles. */
|
|
1985
2088
|
author?: (HelixHeadlessChatMessage["author"]) | undefined;
|
|
2089
|
+
/** The author's name, as a screen reader says it at the start of the turn,
|
|
2090
|
+
such as "Support" or "Ada Lovelace".
|
|
2091
|
+
|
|
2092
|
+
Empty reads "You" for `me`, the `author` itself where it is a name, and
|
|
2093
|
+
nothing for `them`. */
|
|
2094
|
+
"author-label"?: (HelixHeadlessChatMessage["authorLabel"]) | undefined;
|
|
2095
|
+
/** The author's name, as a screen reader says it at the start of the turn,
|
|
2096
|
+
such as "Support" or "Ada Lovelace".
|
|
2097
|
+
|
|
2098
|
+
Empty reads "You" for `me`, the `author` itself where it is a name, and
|
|
2099
|
+
nothing for `them`. */
|
|
2100
|
+
authorLabel?: (HelixHeadlessChatMessage["authorLabel"]) | undefined;
|
|
1986
2101
|
/** Label for a message that did not send. */
|
|
1987
2102
|
"failed-label"?: (HelixHeadlessChatMessage["failedLabel"]) | undefined;
|
|
1988
2103
|
/** Label for a message that did not send. */
|
|
@@ -2063,6 +2178,18 @@ only the consumer knows whether the server has anything older. */
|
|
|
2063
2178
|
historyText?: (HelixHeadlessChat["historyText"]) | undefined;
|
|
2064
2179
|
/** The conversation's name, read by screen readers. */
|
|
2065
2180
|
label?: (HelixHeadlessChat["label"]) | undefined;
|
|
2181
|
+
/** The word a screen reader says for `me` when it names a turn. */
|
|
2182
|
+
"me-label"?: (HelixHeadlessChat["meLabel"]) | undefined;
|
|
2183
|
+
/** The word a screen reader says for `me` when it names a turn. */
|
|
2184
|
+
meLabel?: (HelixHeadlessChat["meLabel"]) | undefined;
|
|
2185
|
+
/** The name a screen reader gives a turn with both an author and a time.
|
|
2186
|
+
`{author}` is who wrote it and `{time}` is when, as the turn shows it. A
|
|
2187
|
+
turn with only one of the two is named by that one. */
|
|
2188
|
+
"message-label"?: (HelixHeadlessChat["messageLabel"]) | undefined;
|
|
2189
|
+
/** The name a screen reader gives a turn with both an author and a time.
|
|
2190
|
+
`{author}` is who wrote it and `{time}` is when, as the turn shows it. A
|
|
2191
|
+
turn with only one of the two is named by that one. */
|
|
2192
|
+
messageLabel?: (HelixHeadlessChat["messageLabel"]) | undefined;
|
|
2066
2193
|
/** Whether the transcript follows new turns to the bottom.
|
|
2067
2194
|
|
|
2068
2195
|
The reader's scrolling asks first: `helix-before-pin` is cancelable, so a
|
|
@@ -2347,9 +2474,17 @@ export type HelixHeadlessCodeBlockVueProps = {
|
|
|
2347
2474
|
"copied-label"?: (HelixHeadlessCodeBlock["copiedLabel"]) | undefined;
|
|
2348
2475
|
/** The copy button's name and tooltip text after a copy. */
|
|
2349
2476
|
copiedLabel?: (HelixHeadlessCodeBlock["copiedLabel"]) | undefined;
|
|
2350
|
-
/** The copy button's name and tooltip text before a copy.
|
|
2477
|
+
/** The copy button's name and tooltip text before a copy.
|
|
2478
|
+
|
|
2479
|
+
Where the block has a name, the button says it too, such as "Copy code,
|
|
2480
|
+
app.ts", so each copy button on a page with several blocks is told apart.
|
|
2481
|
+
In a diff, that is each file's own name. */
|
|
2351
2482
|
"copy-label"?: (HelixHeadlessCodeBlock["copyLabel"]) | undefined;
|
|
2352
|
-
/** The copy button's name and tooltip text before a copy.
|
|
2483
|
+
/** The copy button's name and tooltip text before a copy.
|
|
2484
|
+
|
|
2485
|
+
Where the block has a name, the button says it too, such as "Copy code,
|
|
2486
|
+
app.ts", so each copy button on a page with several blocks is told apart.
|
|
2487
|
+
In a diff, that is each file's own name. */
|
|
2353
2488
|
copyLabel?: (HelixHeadlessCodeBlock["copyLabel"]) | undefined;
|
|
2354
2489
|
/** Whether the content is a unified diff, drawn as the lines it changed.
|
|
2355
2490
|
|
|
@@ -3369,6 +3504,9 @@ export type HelixHeadlessCopyButtonElementEvent<E = Event> = TypedEvent<
|
|
|
3369
3504
|
/** `helix-copy` event type */
|
|
3370
3505
|
export type HelixHeadlessCopyButtonHelixCopyElementEvent =
|
|
3371
3506
|
HelixHeadlessCopyButtonElementEvent<HelixCopyEvent>;
|
|
3507
|
+
/** `helix-copy-error` event type */
|
|
3508
|
+
export type HelixHeadlessCopyButtonHelixCopyErrorElementEvent =
|
|
3509
|
+
HelixHeadlessCopyButtonElementEvent<HelixCopyErrorEvent>;
|
|
3372
3510
|
|
|
3373
3511
|
export type HelixHeadlessCopyButtonVueProps = {
|
|
3374
3512
|
/** The button's name and tooltip text after a copy.
|
|
@@ -3405,72 +3543,6 @@ whatever its `type`. Declared here so its own page says what it holds. */
|
|
|
3405
3543
|
value?: (HelixHeadlessCopyButton["value"]) | undefined;
|
|
3406
3544
|
/** */
|
|
3407
3545
|
"aria-label"?: unknown;
|
|
3408
|
-
/** What to send when the button is activated, and what to send it to.
|
|
3409
|
-
|
|
3410
|
-
The platform's invoker attributes, forwarded onto the inner `<button>`
|
|
3411
|
-
rather than left on the host: only a real button is recognized as an
|
|
3412
|
-
invoker, so `commandfor` written on a custom element resolves nothing and
|
|
3413
|
-
the trigger silently does nothing at all. A wrapper has to hand them down,
|
|
3414
|
-
the same way `label` becomes `aria-label` in there.
|
|
3415
|
-
|
|
3416
|
-
```html
|
|
3417
|
-
<helix-headless-button commandfor="confirm" command="--show">Delete…</helix-headless-button>
|
|
3418
|
-
```
|
|
3419
|
-
|
|
3420
|
-
`commandFor` spells its attribute out, because Lit lowercases a property
|
|
3421
|
-
name to derive one rather than dash-casing it, and what a consumer writes
|
|
3422
|
-
is the platform's `commandfor`. */
|
|
3423
|
-
command?: (HelixHeadlessCopyButton["command"]) | undefined;
|
|
3424
|
-
/** The id of the element the command is sent to. */
|
|
3425
|
-
commandfor?: (HelixHeadlessCopyButton["commandFor"]) | undefined;
|
|
3426
|
-
/** The id of the element the command is sent to. */
|
|
3427
|
-
commandFor?: (HelixHeadlessCopyButton["commandFor"]) | undefined;
|
|
3428
|
-
/** Where this button's submission goes, overriding the form's own.
|
|
3429
|
-
|
|
3430
|
-
**The five `form*` overrides work by writing the form and putting it back**,
|
|
3431
|
-
which is the only mechanism available and is closer to the platform than it
|
|
3432
|
-
sounds. `requestSubmit(submitter)` is how a native submitter carries these,
|
|
3433
|
-
and it refuses ours twice over: the inner `<button>` is `type="button"` so
|
|
3434
|
-
it is not a submit button, and it sits in this shadow root so its form owner
|
|
3435
|
-
is not the consumer's form. Both throw. So the submission is started with no
|
|
3436
|
-
submitter and the overrides are applied to the form for the duration of it.
|
|
3437
|
-
|
|
3438
|
-
The whole submit algorithm runs synchronously inside `requestSubmit()`, so
|
|
3439
|
-
the window is one call and a `finally` closes it whether or not a listener
|
|
3440
|
-
refused. What a `submit` handler observes during that window is the form a
|
|
3441
|
-
native submitter would have given it, which is the point. */
|
|
3442
|
-
formaction?: (HelixHeadlessCopyButton["formAction"]) | undefined;
|
|
3443
|
-
/** Where this button's submission goes, overriding the form's own.
|
|
3444
|
-
|
|
3445
|
-
**The five `form*` overrides work by writing the form and putting it back**,
|
|
3446
|
-
which is the only mechanism available and is closer to the platform than it
|
|
3447
|
-
sounds. `requestSubmit(submitter)` is how a native submitter carries these,
|
|
3448
|
-
and it refuses ours twice over: the inner `<button>` is `type="button"` so
|
|
3449
|
-
it is not a submit button, and it sits in this shadow root so its form owner
|
|
3450
|
-
is not the consumer's form. Both throw. So the submission is started with no
|
|
3451
|
-
submitter and the overrides are applied to the form for the duration of it.
|
|
3452
|
-
|
|
3453
|
-
The whole submit algorithm runs synchronously inside `requestSubmit()`, so
|
|
3454
|
-
the window is one call and a `finally` closes it whether or not a listener
|
|
3455
|
-
refused. What a `submit` handler observes during that window is the form a
|
|
3456
|
-
native submitter would have given it, which is the point. */
|
|
3457
|
-
formAction?: (HelixHeadlessCopyButton["formAction"]) | undefined;
|
|
3458
|
-
/** How the submission is encoded, overriding the form's own. */
|
|
3459
|
-
formenctype?: (HelixHeadlessCopyButton["formEnctype"]) | undefined;
|
|
3460
|
-
/** How the submission is encoded, overriding the form's own. */
|
|
3461
|
-
formEnctype?: (HelixHeadlessCopyButton["formEnctype"]) | undefined;
|
|
3462
|
-
/** Which HTTP method the submission uses, overriding the form's own. */
|
|
3463
|
-
formmethod?: (HelixHeadlessCopyButton["formMethod"]) | undefined;
|
|
3464
|
-
/** Which HTTP method the submission uses, overriding the form's own. */
|
|
3465
|
-
formMethod?: (HelixHeadlessCopyButton["formMethod"]) | undefined;
|
|
3466
|
-
/** Whether this submission skips the form's validation. */
|
|
3467
|
-
formnovalidate?: (HelixHeadlessCopyButton["formNoValidate"]) | undefined;
|
|
3468
|
-
/** Whether this submission skips the form's validation. */
|
|
3469
|
-
formNoValidate?: (HelixHeadlessCopyButton["formNoValidate"]) | undefined;
|
|
3470
|
-
/** Which browsing context the response lands in, overriding the form's own. */
|
|
3471
|
-
formtarget?: (HelixHeadlessCopyButton["formTarget"]) | undefined;
|
|
3472
|
-
/** Which browsing context the response lands in, overriding the form's own. */
|
|
3473
|
-
formTarget?: (HelixHeadlessCopyButton["formTarget"]) | undefined;
|
|
3474
3546
|
/** Whether the action the button started is still running.
|
|
3475
3547
|
|
|
3476
3548
|
A pending button keeps focus and stays in the tab order, and refuses every
|
|
@@ -3487,8 +3559,6 @@ a press, so focus stays where the reader left it. */
|
|
|
3487
3559
|
"pending-label"?: (HelixHeadlessCopyButton["pendingLabel"]) | undefined;
|
|
3488
3560
|
/** What a reader hears when the button becomes pending while it has focus. */
|
|
3489
3561
|
pendingLabel?: (HelixHeadlessCopyButton["pendingLabel"]) | undefined;
|
|
3490
|
-
/** What activating the button does to its form. */
|
|
3491
|
-
type?: (HelixHeadlessCopyButton["type"]) | undefined;
|
|
3492
3562
|
/** Whether the control is disabled and cannot be used.
|
|
3493
3563
|
|
|
3494
3564
|
Reflected, because the styled tier selects on it, and mirrored to
|
|
@@ -3515,31 +3585,6 @@ imperatively later, and nothing is hydrating by then.
|
|
|
3515
3585
|
|
|
3516
3586
|
Here rather than on each control. */
|
|
3517
3587
|
name?: (HelixHeadlessCopyButton["name"]) | undefined;
|
|
3518
|
-
/** Whether this button is a disclosure trigger, and whether its panel is open.
|
|
3519
|
-
|
|
3520
|
-
**Set by whatever owns the panel, and a property rather than an attribute
|
|
3521
|
-
for the reason `Menu` already states about its items**: an attribute
|
|
3522
|
-
written onto a consumer's element after it upgrades is a hydration mismatch
|
|
3523
|
-
waiting to happen. Measured 28 Aug 2026 against React 19.2.8, server markup
|
|
3524
|
-
hydrated with the definitions loaded either side of `hydrateRoot`:
|
|
3525
|
-
`Megamenu` and `SpeedDial` wrote `aria-expanded` onto the slotted trigger
|
|
3526
|
-
and React reported "some attributes of the server rendered HTML didn't
|
|
3527
|
-
match the client properties. This won't be patched up" in both orders;
|
|
3528
|
-
`Popover` and `Menu`, which write nothing, were clean in both.
|
|
3529
|
-
|
|
3530
|
-
**A property crosses that gap because React never looks at one.** It diffs
|
|
3531
|
-
the attributes it rendered, and this one is `attribute: false`, so the state
|
|
3532
|
-
travels to the inner `<button>` and lands inside a shadow root React does
|
|
3533
|
-
not own and cannot compare. The consumer's own element is left exactly as
|
|
3534
|
-
they served it and the reader is still told what the control does.
|
|
3535
|
-
|
|
3536
|
-
`undefined` renders nothing at all, so a button that is not a trigger
|
|
3537
|
-
carries no `aria-expanded`: the resting state is the attribute's absence,
|
|
3538
|
-
which is the rule every reflected property here follows.
|
|
3539
|
-
|
|
3540
|
-
A consumer who wants to say this statically writes `aria-expanded` on the
|
|
3541
|
-
host instead, which `AriaForwardController` carries to the same place. */
|
|
3542
|
-
expanded?: (HelixHeadlessCopyButton["expanded"]) | undefined;
|
|
3543
3588
|
/** Whether the button holds its group's tab stop.
|
|
3544
3589
|
|
|
3545
3590
|
A toolbar keeps one tab stop across its children, and the obvious way to do
|
|
@@ -3551,14 +3596,6 @@ and the stop lands on the inner control inside the shadow root.
|
|
|
3551
3596
|
No attribute, because it is coordination between elements rather than
|
|
3552
3597
|
anything a consumer sets. */
|
|
3553
3598
|
focusable?: (HelixHeadlessCopyButton["focusable"]) | undefined;
|
|
3554
|
-
/** What kind of panel this button opens, where it opens one: `menu` for a
|
|
3555
|
-
`Menu`.
|
|
3556
|
-
|
|
3557
|
-
Set by the component that owns the panel, as a property for the reason
|
|
3558
|
-
`expanded` gives above. It is what makes a reader say the button opens a
|
|
3559
|
-
menu. Read from Chromium's tree, a Menu's trigger was a plain button that
|
|
3560
|
-
reported collapsed and expanded and no popup. */
|
|
3561
|
-
popup?: (HelixHeadlessCopyButton["popup"]) | undefined;
|
|
3562
3599
|
/** The element this button's command is sent to, resolved.
|
|
3563
3600
|
|
|
3564
3601
|
The platform's own accessor, because the resolution is otherwise kept
|
|
@@ -3572,8 +3609,8 @@ invoker without an id in the same tree needs. */
|
|
|
3572
3609
|
export type HelixHeadlessCopyButtonVueEvents = {
|
|
3573
3610
|
/** Fired after the clipboard write succeeds. */
|
|
3574
3611
|
"helix-copy": HelixHeadlessCopyButtonHelixCopyElementEvent;
|
|
3575
|
-
/** Fired when a press put nothing on the clipboard: the browser
|
|
3576
|
-
"helix-copy-error":
|
|
3612
|
+
/** Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy. */
|
|
3613
|
+
"helix-copy-error": HelixHeadlessCopyButtonHelixCopyErrorElementEvent;
|
|
3577
3614
|
};
|
|
3578
3615
|
|
|
3579
3616
|
/** `HelixHeadlessDataTable` component event */
|
|
@@ -3584,12 +3621,18 @@ export type HelixHeadlessDataTableElementEvent<E = Event> = TypedEvent<
|
|
|
3584
3621
|
/** `helix-activate` event type */
|
|
3585
3622
|
export type HelixHeadlessDataTableHelixActivateElementEvent =
|
|
3586
3623
|
HelixHeadlessDataTableElementEvent<HelixActivateEvent>;
|
|
3624
|
+
/** `helix-expand` event type */
|
|
3625
|
+
export type HelixHeadlessDataTableHelixExpandElementEvent =
|
|
3626
|
+
HelixHeadlessDataTableElementEvent<HelixExpandEvent>;
|
|
3587
3627
|
/** `helix-filter` event type */
|
|
3588
3628
|
export type HelixHeadlessDataTableHelixFilterElementEvent =
|
|
3589
3629
|
HelixHeadlessDataTableElementEvent<HelixFilterEvent>;
|
|
3590
3630
|
/** `helix-filtered` event type */
|
|
3591
3631
|
export type HelixHeadlessDataTableHelixFilteredElementEvent =
|
|
3592
3632
|
HelixHeadlessDataTableElementEvent<HelixFilteredEvent>;
|
|
3633
|
+
/** `helix-load-more` event type */
|
|
3634
|
+
export type HelixHeadlessDataTableHelixLoadMoreElementEvent =
|
|
3635
|
+
HelixHeadlessDataTableElementEvent<HelixLoadMoreEvent>;
|
|
3593
3636
|
/** `helix-navigate` event type */
|
|
3594
3637
|
export type HelixHeadlessDataTableHelixNavigateElementEvent =
|
|
3595
3638
|
HelixHeadlessDataTableElementEvent<HelixNavigateEvent>;
|
|
@@ -3617,6 +3660,24 @@ export type HelixHeadlessDataTableVueProps = {
|
|
|
3617
3660
|
"ascending-label"?: (HelixHeadlessDataTable["ascendingLabel"]) | undefined;
|
|
3618
3661
|
/** The word for an ascending sort, in `sorted-label`. */
|
|
3619
3662
|
ascendingLabel?: (HelixHeadlessDataTable["ascendingLabel"]) | undefined;
|
|
3663
|
+
/** The field that holds a row's child rows, as an array. Set it, and `row-key`,
|
|
3664
|
+
and the grid becomes a tree grid.
|
|
3665
|
+
|
|
3666
|
+
Reflected, because the styled tier indents a tree grid's row headers by
|
|
3667
|
+
it. No default, so a table that sets none writes nothing onto its host. */
|
|
3668
|
+
"child-field"?: (HelixHeadlessDataTable["childField"]) | undefined;
|
|
3669
|
+
/** The field that holds a row's child rows, as an array. Set it, and `row-key`,
|
|
3670
|
+
and the grid becomes a tree grid.
|
|
3671
|
+
|
|
3672
|
+
Reflected, because the styled tier indents a tree grid's row headers by
|
|
3673
|
+
it. No default, so a table that sets none writes nothing onto its host. */
|
|
3674
|
+
childField?: (HelixHeadlessDataTable["childField"]) | undefined;
|
|
3675
|
+
/** The keys of the rows open at the start, separated by commas. Used until
|
|
3676
|
+
`expanded` is set. */
|
|
3677
|
+
"default-expanded"?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
|
|
3678
|
+
/** The keys of the rows open at the start, separated by commas. Used until
|
|
3679
|
+
`expanded` is set. */
|
|
3680
|
+
defaultExpanded?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
|
|
3620
3681
|
/** The starting search query, used until `filter` is set. */
|
|
3621
3682
|
"default-filter"?: (HelixHeadlessDataTable["defaultFilter"]) | undefined;
|
|
3622
3683
|
/** The starting search query, used until `filter` is set. */
|
|
@@ -3655,6 +3716,9 @@ replaces this with what each row came to as it draws. It still has to be
|
|
|
3655
3716
|
close, because it is what the scrollbar is built from before anything has
|
|
3656
3717
|
been measured. */
|
|
3657
3718
|
estimate?: (HelixHeadlessDataTable["estimate"]) | undefined;
|
|
3719
|
+
/** The keys of the open rows in a tree grid, separated by commas, the shape of
|
|
3720
|
+
`selected`. A reader's press writes it and then sends `helix-expand`. */
|
|
3721
|
+
expanded?: (HelixHeadlessDataTable["expanded"]) | undefined;
|
|
3658
3722
|
/** The search query. A row is shown when the query matches any of its columns.
|
|
3659
3723
|
|
|
3660
3724
|
One query rather than a predicate per column, which is what a reader means
|
|
@@ -3669,6 +3733,22 @@ replaced with the page it jumps to. */
|
|
|
3669
3733
|
gapLabel?: (HelixHeadlessDataTable["gapLabel"]) | undefined;
|
|
3670
3734
|
/** The grid's name, read by screen readers. */
|
|
3671
3735
|
label?: (HelixHeadlessDataTable["label"]) | undefined;
|
|
3736
|
+
/** Draws a row after the last one with a button that asks for more rows.
|
|
3737
|
+
|
|
3738
|
+
The button sends `helix-load-more`, and a `windowed` table sends it by
|
|
3739
|
+
itself once a reader scrolls within one screen of the end. Turn it off
|
|
3740
|
+
when there are no more rows to load. */
|
|
3741
|
+
"load-more"?: (HelixHeadlessDataTable["loadMore"]) | undefined;
|
|
3742
|
+
/** Draws a row after the last one with a button that asks for more rows.
|
|
3743
|
+
|
|
3744
|
+
The button sends `helix-load-more`, and a `windowed` table sends it by
|
|
3745
|
+
itself once a reader scrolls within one screen of the end. Turn it off
|
|
3746
|
+
when there are no more rows to load. */
|
|
3747
|
+
loadMore?: (HelixHeadlessDataTable["loadMore"]) | undefined;
|
|
3748
|
+
/** The words on the button in the `more` row. */
|
|
3749
|
+
"load-more-label"?: (HelixHeadlessDataTable["loadMoreLabel"]) | undefined;
|
|
3750
|
+
/** The words on the button in the `more` row. */
|
|
3751
|
+
loadMoreLabel?: (HelixHeadlessDataTable["loadMoreLabel"]) | undefined;
|
|
3672
3752
|
/** Where filtering, sorting, and paging happen. `client` does them in the
|
|
3673
3753
|
table, and `server` leaves them to your code.
|
|
3674
3754
|
|
|
@@ -3876,10 +3956,14 @@ holds and reordering it under them is a mutation they did not ask for. */
|
|
|
3876
3956
|
export type HelixHeadlessDataTableVueEvents = {
|
|
3877
3957
|
/** Fired after the page changes, with the new page as a string in `detail.value`. */
|
|
3878
3958
|
"helix-activate": HelixHeadlessDataTableHelixActivateElementEvent;
|
|
3959
|
+
/** Fired after a row opens or closes, with every open row's key, separated by commas, which `expanded` also holds. */
|
|
3960
|
+
"helix-expand": HelixHeadlessDataTableHelixExpandElementEvent;
|
|
3879
3961
|
/** The search query is about to change. Cancelable: cancel it to keep the current query. */
|
|
3880
3962
|
"helix-filter": HelixHeadlessDataTableHelixFilterElementEvent;
|
|
3881
3963
|
/** Fired after the search query changes, with the new query. */
|
|
3882
3964
|
"helix-filtered": HelixHeadlessDataTableHelixFilteredElementEvent;
|
|
3965
|
+
/** Fired when a reader asks for more rows, by the `load-more` row's button or by scrolling a `windowed` table near its end. */
|
|
3966
|
+
"helix-load-more": HelixHeadlessDataTableHelixLoadMoreElementEvent;
|
|
3883
3967
|
/** Another page was requested. Cancelable: cancel it to stay on the current page. */
|
|
3884
3968
|
"helix-navigate": HelixHeadlessDataTableHelixNavigateElementEvent;
|
|
3885
3969
|
/** The columns are about to move. The event carries every field in the new order. Cancelable: cancel it to keep the current order. */
|
|
@@ -4621,6 +4705,9 @@ labels line up, and lining up is a fact about all of them.
|
|
|
4621
4705
|
a reflecting default writes an attribute onto markup the consumer rendered,
|
|
4622
4706
|
and React reports that as a hydration mismatch. */
|
|
4623
4707
|
direction?: (HelixHeadlessDescriptionList["direction"]) | undefined;
|
|
4708
|
+
/** The list's name, read by screen readers, such as "Server details". It
|
|
4709
|
+
makes the list a named group. */
|
|
4710
|
+
label?: (HelixHeadlessDescriptionList["label"]) | undefined;
|
|
4624
4711
|
};
|
|
4625
4712
|
|
|
4626
4713
|
export type HelixHeadlessDescriptionListVueEvents = {};
|
|
@@ -4980,14 +5067,6 @@ elements, and writing `tabindex` onto a host the consumer rendered is a
|
|
|
4980
5067
|
change a React consumer's hydration reports and does not patch up. The stop
|
|
4981
5068
|
lands inside this shadow root instead. */
|
|
4982
5069
|
focusable?: (HelixHeadlessDrilldownItem["focusable"]) | undefined;
|
|
4983
|
-
/** Whether the page showing is the one this row is on.
|
|
4984
|
-
|
|
4985
|
-
Written by the stack. */
|
|
4986
|
-
onPage?: (HelixHeadlessDrilldownItem["onPage"]) | undefined;
|
|
4987
|
-
/** Whether this row's own page is the one showing.
|
|
4988
|
-
|
|
4989
|
-
Written by the stack. */
|
|
4990
|
-
showingPage?: (HelixHeadlessDrilldownItem["showingPage"]) | undefined;
|
|
4991
5070
|
};
|
|
4992
5071
|
|
|
4993
5072
|
export type HelixHeadlessDrilldownItemVueEvents = {
|
|
@@ -6399,6 +6478,9 @@ export type HelixHeadlessInputElementEvent<E = Event> = TypedEvent<
|
|
|
6399
6478
|
/** `helix-before-change` event type */
|
|
6400
6479
|
export type HelixHeadlessInputHelixBeforeChangeElementEvent =
|
|
6401
6480
|
HelixHeadlessInputElementEvent<HelixBeforeChangeEvent>;
|
|
6481
|
+
/** `helix-clear` event type */
|
|
6482
|
+
export type HelixHeadlessInputHelixClearElementEvent =
|
|
6483
|
+
HelixHeadlessInputElementEvent<HelixClearEvent>;
|
|
6402
6484
|
|
|
6403
6485
|
export type HelixHeadlessInputVueProps = {
|
|
6404
6486
|
/** Whether a phone capitalizes as the reader types: `off`, `sentences`,
|
|
@@ -6602,7 +6684,7 @@ export type HelixHeadlessInputVueEvents = {
|
|
|
6602
6684
|
/** The text is about to change. Cancelable: cancel it to keep the current text. */
|
|
6603
6685
|
"helix-before-change": HelixHeadlessInputHelixBeforeChangeElementEvent;
|
|
6604
6686
|
/** Fired after the clear button has emptied the field, after `input` and `change`. */
|
|
6605
|
-
"helix-clear":
|
|
6687
|
+
"helix-clear": HelixHeadlessInputHelixClearElementEvent;
|
|
6606
6688
|
/** Fired as the value changes. */
|
|
6607
6689
|
input: HelixHeadlessInputElementEvent;
|
|
6608
6690
|
};
|
|
@@ -6996,7 +7078,27 @@ writes them, whatever this says. */
|
|
|
6996
7078
|
|
|
6997
7079
|
export type HelixHeadlessLineChartVueEvents = {};
|
|
6998
7080
|
|
|
7081
|
+
/** `HelixHeadlessListItem` component event */
|
|
7082
|
+
export type HelixHeadlessListItemElementEvent<E = Event> = TypedEvent<
|
|
7083
|
+
HelixHeadlessListItem,
|
|
7084
|
+
E
|
|
7085
|
+
>;
|
|
7086
|
+
/** `helix-action` event type */
|
|
7087
|
+
export type HelixHeadlessListItemHelixActionElementEvent =
|
|
7088
|
+
HelixHeadlessListItemElementEvent<HelixActionEvent>;
|
|
7089
|
+
|
|
6999
7090
|
export type HelixHeadlessListItemVueProps = {
|
|
7091
|
+
/** Marks the row a reader is on: `page` for the page they are reading, `step`,
|
|
7092
|
+
`location`, `date` or `time` for those, and written bare for the current
|
|
7093
|
+
one of a set. It is `aria-current` on the row's link, or on the row where
|
|
7094
|
+
it has none.
|
|
7095
|
+
|
|
7096
|
+
Not reflected, as a state never is. `row-current` is the part a
|
|
7097
|
+
stylesheet draws it from. */
|
|
7098
|
+
current?: (HelixHeadlessListItem["current"]) | undefined;
|
|
7099
|
+
/** Takes the row out of reach in a list with `selection-mode`: the arrow keys
|
|
7100
|
+
pass over it and it cannot be selected or acted on. */
|
|
7101
|
+
disabled?: (HelixHeadlessListItem["disabled"]) | undefined;
|
|
7000
7102
|
/** The URL the row links to. Leave it empty for a row that is not a link.
|
|
7001
7103
|
|
|
7002
7104
|
Empty rather than optional, and unset by default: a list is not always a
|
|
@@ -7008,9 +7110,39 @@ to the current page on every row a consumer never asked to be one. */
|
|
|
7008
7110
|
rel?: (HelixHeadlessListItem["rel"]) | undefined;
|
|
7009
7111
|
/** Where the link opens. Use it for a row that leaves the site. */
|
|
7010
7112
|
target?: (HelixHeadlessListItem["target"]) | undefined;
|
|
7113
|
+
/** What the row stands for in its list's `value`.
|
|
7114
|
+
|
|
7115
|
+
Absent is the row's own words. */
|
|
7116
|
+
value?: (HelixHeadlessListItem["value"]) | undefined;
|
|
7117
|
+
/** Whether the row holds its list's tab stop.
|
|
7118
|
+
|
|
7119
|
+
Written by a list with `selection-mode` on every row it holds, and unset
|
|
7120
|
+
otherwise, which is how a row knows it is a row of a grid. No attribute:
|
|
7121
|
+
it is coordination between elements, as `Tag.focusable` is. */
|
|
7122
|
+
focusable?: (HelixHeadlessListItem["focusable"]) | undefined;
|
|
7123
|
+
/** Whether the row is selected, in a list that selects.
|
|
7124
|
+
|
|
7125
|
+
Written by the list from its own `value`, and unset where nothing can be
|
|
7126
|
+
selected, which keeps `aria-selected` off a list that does not select. */
|
|
7127
|
+
selected?: (HelixHeadlessListItem["selected"]) | undefined;
|
|
7011
7128
|
};
|
|
7012
7129
|
|
|
7013
|
-
export type HelixHeadlessListItemVueEvents = {
|
|
7130
|
+
export type HelixHeadlessListItemVueEvents = {
|
|
7131
|
+
/** The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead. */
|
|
7132
|
+
"helix-action": HelixHeadlessListItemHelixActionElementEvent;
|
|
7133
|
+
};
|
|
7134
|
+
|
|
7135
|
+
/** `HelixHeadlessList` component event */
|
|
7136
|
+
export type HelixHeadlessListElementEvent<E = Event> = TypedEvent<
|
|
7137
|
+
HelixHeadlessList,
|
|
7138
|
+
E
|
|
7139
|
+
>;
|
|
7140
|
+
/** `helix-action` event type */
|
|
7141
|
+
export type HelixHeadlessListHelixActionElementEvent =
|
|
7142
|
+
HelixHeadlessListElementEvent<HelixActionEvent>;
|
|
7143
|
+
/** `helix-before-change` event type */
|
|
7144
|
+
export type HelixHeadlessListHelixBeforeChangeElementEvent =
|
|
7145
|
+
HelixHeadlessListElementEvent<HelixBeforeChangeEvent>;
|
|
7014
7146
|
|
|
7015
7147
|
export type HelixHeadlessListVueProps = {
|
|
7016
7148
|
/** The kind of list, which follows from the content.
|
|
@@ -7036,6 +7168,20 @@ has to survive with the stylesheet turned off.
|
|
|
7036
7168
|
kind?: (HelixHeadlessList["kind"]) | undefined;
|
|
7037
7169
|
/** The list's name, read by screen readers. */
|
|
7038
7170
|
label?: (HelixHeadlessList["label"]) | undefined;
|
|
7171
|
+
/** Numbers an ordered list downward, so the count falls row by row and ends at
|
|
7172
|
+
its last row, as `<ol reversed>` does. */
|
|
7173
|
+
reversed?: (HelixHeadlessList["reversed"]) | undefined;
|
|
7174
|
+
/** Makes the list interactive: `single` selects one row, `multiple` any
|
|
7175
|
+
number, and `none` moves and acts without selecting. Unset is a list a
|
|
7176
|
+
reader reads, with no tab stop of its own. */
|
|
7177
|
+
"selection-mode"?: (HelixHeadlessList["selectionMode"]) | undefined;
|
|
7178
|
+
/** Makes the list interactive: `single` selects one row, `multiple` any
|
|
7179
|
+
number, and `none` moves and acts without selecting. Unset is a list a
|
|
7180
|
+
reader reads, with no tab stop of its own. */
|
|
7181
|
+
selectionMode?: (HelixHeadlessList["selectionMode"]) | undefined;
|
|
7182
|
+
/** The number of an ordered list's first row, as `<ol start>` is. Unset counts
|
|
7183
|
+
from one, or down from the number of rows where `reversed`. */
|
|
7184
|
+
start?: (HelixHeadlessList["start"]) | undefined;
|
|
7039
7185
|
/** The markers an ordered list draws. It takes the five values of `<ol type>`.
|
|
7040
7186
|
|
|
7041
7187
|
Reflected, because this is one of the things a stylesheet selects on, each
|
|
@@ -7043,18 +7189,24 @@ value mapping to a `list-style-type`. The platform's spellings rather than
|
|
|
7043
7189
|
the CSS ones, so `<helix-headless-list kind="ordered" type="i">` is what a
|
|
7044
7190
|
consumer would have written on an `<ol>`.
|
|
7045
7191
|
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
`list-item` counter, and that counter is not author-resettable. Measured in
|
|
7049
|
-
Chrome 148, `counter-reset: list-item 4` moves nothing on a `<div>`, on a
|
|
7050
|
-
`<ul>`, or even on a real `<ol>`, while `<ol start="5">` does and a *named*
|
|
7051
|
-
counter with explicit `::before` content does. So the markers would have to
|
|
7052
|
-
be rebuilt out of generated content to gain a start, which is a different
|
|
7053
|
-
component. `type` is only `list-style-type` and works. */
|
|
7192
|
+
`type` is only `list-style-type`. `start` and `reversed` move the count
|
|
7193
|
+
itself. */
|
|
7054
7194
|
type?: (HelixHeadlessList["type"]) | undefined;
|
|
7195
|
+
/** The selected rows' values, separated by commas, in a list that selects.
|
|
7196
|
+
|
|
7197
|
+
Set it to start with rows selected. A row's value is its `value`, or its
|
|
7198
|
+
words where it has none. */
|
|
7199
|
+
value?: (HelixHeadlessList["value"]) | undefined;
|
|
7055
7200
|
};
|
|
7056
7201
|
|
|
7057
|
-
export type HelixHeadlessListVueEvents = {
|
|
7202
|
+
export type HelixHeadlessListVueEvents = {
|
|
7203
|
+
/** Fired once a press has changed which rows are selected. */
|
|
7204
|
+
change: HelixHeadlessListElementEvent;
|
|
7205
|
+
/** Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead. */
|
|
7206
|
+
"helix-action": HelixHeadlessListHelixActionElementEvent;
|
|
7207
|
+
/** Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable. */
|
|
7208
|
+
"helix-before-change": HelixHeadlessListHelixBeforeChangeElementEvent;
|
|
7209
|
+
};
|
|
7058
7210
|
|
|
7059
7211
|
/** `HelixHeadlessListbox` component event */
|
|
7060
7212
|
export type HelixHeadlessListboxElementEvent<E = Event> = TypedEvent<
|
|
@@ -7618,6 +7770,9 @@ export type HelixHeadlessMapHelixMapTiltElementEvent =
|
|
|
7618
7770
|
/** `helix-map-zoom` event type */
|
|
7619
7771
|
export type HelixHeadlessMapHelixMapZoomElementEvent =
|
|
7620
7772
|
HelixHeadlessMapElementEvent<HelixMapZoomEvent>;
|
|
7773
|
+
/** `helix-toggle` event type */
|
|
7774
|
+
export type HelixHeadlessMapHelixToggleElementEvent =
|
|
7775
|
+
HelixHeadlessMapElementEvent<HelixToggleEvent>;
|
|
7621
7776
|
|
|
7622
7777
|
export type HelixHeadlessMapVueProps = {
|
|
7623
7778
|
/** The map's rotation, in degrees clockwise from north. `connectMap` keeps it
|
|
@@ -7922,6 +8077,8 @@ export type HelixHeadlessMapVueEvents = {
|
|
|
7922
8077
|
"helix-map-tilt": HelixHeadlessMapHelixMapTiltElementEvent;
|
|
7923
8078
|
/** A zoom button or key was pressed, with a direction. Zoom your map in response. */
|
|
7924
8079
|
"helix-map-zoom": HelixHeadlessMapHelixMapZoomElementEvent;
|
|
8080
|
+
/** A layer's tile in the layers menu showed or hid it. Sent from the layer once its `hidden` attribute holds the choice, with `checked` true when it is shown. */
|
|
8081
|
+
"helix-toggle": HelixHeadlessMapHelixToggleElementEvent;
|
|
7925
8082
|
};
|
|
7926
8083
|
|
|
7927
8084
|
/** `HelixHeadlessMapRoute` component event */
|
|
@@ -8191,37 +8348,24 @@ So the anchor *is* the row, carrying `menuitem` and the `tabindex` the menu
|
|
|
8191
8348
|
roves, which is the same maneuver `Tree.Item` makes and the reason `href`
|
|
8192
8349
|
changes the markup rather than only adding an attribute.
|
|
8193
8350
|
|
|
8194
|
-
**`Option`
|
|
8195
|
-
|
|
8196
|
-
|
|
8197
|
-
option
|
|
8198
|
-
|
|
8199
|
-
|
|
8200
|
-
back `null`. So `role="option"` is pinned to the host, and an anchor under
|
|
8201
|
-
it hits the naming failure above. A menu has no such constraint because
|
|
8202
|
-
focus really moves to the row. */
|
|
8351
|
+
**`Option` takes an `href` too, and keeps its role a different way.** A
|
|
8352
|
+
listbox keeps focus somewhere else, in the text field for a combobox, and
|
|
8353
|
+
names the current option with `aria-activedescendant`, which can only point
|
|
8354
|
+
at the option's host. So an option stays `role="option"` on its host, draws
|
|
8355
|
+
no anchor, and follows its link through an anchor made for the moment. A
|
|
8356
|
+
menu has no such constraint, because focus really moves to the row. */
|
|
8203
8357
|
href?: (HelixHeadlessMenuItem["href"]) | undefined;
|
|
8204
8358
|
/** The link's `rel`. Set it whenever you set `target="_blank"`. */
|
|
8205
8359
|
rel?: (HelixHeadlessMenuItem["rel"]) | undefined;
|
|
8360
|
+
/** The row's keyboard shortcut as a chord, such as `mod+s`, shown after the
|
|
8361
|
+
label in the platform's glyphs and given to the row as
|
|
8362
|
+
`aria-keyshortcuts`. `mod` is Command on an Apple keyboard and Control
|
|
8363
|
+
elsewhere. Showing a shortcut does not bind it. */
|
|
8364
|
+
shortcut?: (HelixHeadlessMenuItem["shortcut"]) | undefined;
|
|
8206
8365
|
/** Where the link opens, for rows that should open outside the current page. */
|
|
8207
8366
|
target?: (HelixHeadlessMenuItem["target"]) | undefined;
|
|
8208
8367
|
/** The row's value, sent in `helix-select` when the row is chosen. */
|
|
8209
8368
|
value?: (HelixHeadlessMenuItem["value"]) | undefined;
|
|
8210
|
-
/** Whether the row is on the menu page that is showing.
|
|
8211
|
-
|
|
8212
|
-
Set by the menu, and a property rather than an attribute for that reason.
|
|
8213
|
-
Public because the menu has to reach it, and not something a consumer
|
|
8214
|
-
writes: which page is open is the menu's business. */
|
|
8215
|
-
onPage?: (HelixHeadlessMenuItem["onPage"]) | undefined;
|
|
8216
|
-
/** Whether the page showing is this row's submenu, or one below it.
|
|
8217
|
-
|
|
8218
|
-
Separate from `onPage`, and it has to be. A row that opened a page is not
|
|
8219
|
-
itself on that page, so both are false for it, and rendering nothing on
|
|
8220
|
-
that basis takes its `slot[name="submenu"]` with it: the rows inside have
|
|
8221
|
-
nowhere to be assigned and are never laid out. Every row on the way down to
|
|
8222
|
-
the open page has to keep its slot, not only the one directly above it.
|
|
8223
|
-
Three levels deep, the topmost row holds the slot the middle one lives in. */
|
|
8224
|
-
showingSubmenu?: (HelixHeadlessMenuItem["showingSubmenu"]) | undefined;
|
|
8225
8369
|
};
|
|
8226
8370
|
|
|
8227
8371
|
export type HelixHeadlessMenuItemVueEvents = {
|
|
@@ -8254,6 +8398,9 @@ export type HelixHeadlessMenuVueProps = {
|
|
|
8254
8398
|
"back-label"?: (HelixHeadlessMenu["backLabel"]) | undefined;
|
|
8255
8399
|
/** The text of the row that returns from a submenu. */
|
|
8256
8400
|
backLabel?: (HelixHeadlessMenu["backLabel"]) | undefined;
|
|
8401
|
+
/** Whether the menu is the trigger's context menu: it opens where the reader
|
|
8402
|
+
asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
|
|
8403
|
+
context?: (HelixHeadlessMenu["context"]) | undefined;
|
|
8257
8404
|
/** Accessible name for the surface.
|
|
8258
8405
|
|
|
8259
8406
|
Empty by default, which names the surface by its trigger, so a menu opened
|
|
@@ -8310,6 +8457,14 @@ export type HelixHeadlessMenuVueEvents = {
|
|
|
8310
8457
|
toggle: HelixHeadlessMenuToggleElementEvent;
|
|
8311
8458
|
};
|
|
8312
8459
|
|
|
8460
|
+
export type HelixHeadlessMenuSectionVueProps = {
|
|
8461
|
+
/** The heading's words, when they are plain text. Content in the `heading`
|
|
8462
|
+
slot replaces it. */
|
|
8463
|
+
label?: (HelixHeadlessMenuSection["label"]) | undefined;
|
|
8464
|
+
};
|
|
8465
|
+
|
|
8466
|
+
export type HelixHeadlessMenuSectionVueEvents = {};
|
|
8467
|
+
|
|
8313
8468
|
export type HelixHeadlessMeterVueProps = {
|
|
8314
8469
|
/** Sets the band directly, for a rule that `low`, `high`, and `optimum` cannot
|
|
8315
8470
|
express.
|
|
@@ -8416,6 +8571,11 @@ fair summary of a task and a poor one of a quantity. */
|
|
|
8416
8571
|
export type HelixHeadlessMeterVueEvents = {};
|
|
8417
8572
|
|
|
8418
8573
|
export type HelixHeadlessNavigationVueProps = {
|
|
8574
|
+
/** Whether the arrow keys move focus between the destinations.
|
|
8575
|
+
|
|
8576
|
+
Off by default, so a page whose readers scroll with the arrow keys while
|
|
8577
|
+
a link has focus keeps doing so. */
|
|
8578
|
+
arrows?: (HelixHeadlessNavigation["arrows"]) | undefined;
|
|
8419
8579
|
/** The landmark's name, read by screen readers.
|
|
8420
8580
|
|
|
8421
8581
|
An `aria-label` or `aria-labelledby` on the host names the landmark too,
|
|
@@ -8577,6 +8737,9 @@ export type HelixHeadlessNotificationsElementEvent<E = Event> = TypedEvent<
|
|
|
8577
8737
|
/** `helix-dismiss` event type */
|
|
8578
8738
|
export type HelixHeadlessNotificationsHelixDismissElementEvent =
|
|
8579
8739
|
HelixHeadlessNotificationsElementEvent<HelixDismissEvent>;
|
|
8740
|
+
/** `helix-load-more` event type */
|
|
8741
|
+
export type HelixHeadlessNotificationsHelixLoadMoreElementEvent =
|
|
8742
|
+
HelixHeadlessNotificationsElementEvent<HelixLoadMoreEvent>;
|
|
8580
8743
|
/** `helix-read` event type */
|
|
8581
8744
|
export type HelixHeadlessNotificationsHelixReadElementEvent =
|
|
8582
8745
|
HelixHeadlessNotificationsElementEvent<HelixReadEvent>;
|
|
@@ -8584,6 +8747,16 @@ export type HelixHeadlessNotificationsHelixReadElementEvent =
|
|
|
8584
8747
|
export type HelixHeadlessNotificationsVueProps = {
|
|
8585
8748
|
/** The feed's name, read by screen readers. */
|
|
8586
8749
|
label?: (HelixHeadlessNotifications["label"]) | undefined;
|
|
8750
|
+
/** Whether to draw a button after the list that asks for the next page, by
|
|
8751
|
+
sending `helix-load-more`. Take it off once there is nothing more. */
|
|
8752
|
+
"load-more"?: (HelixHeadlessNotifications["loadMore"]) | undefined;
|
|
8753
|
+
/** Whether to draw a button after the list that asks for the next page, by
|
|
8754
|
+
sending `helix-load-more`. Take it off once there is nothing more. */
|
|
8755
|
+
loadMore?: (HelixHeadlessNotifications["loadMore"]) | undefined;
|
|
8756
|
+
/** The text of the `load-more` button. */
|
|
8757
|
+
"load-more-label"?: (HelixHeadlessNotifications["loadMoreLabel"]) | undefined;
|
|
8758
|
+
/** The text of the `load-more` button. */
|
|
8759
|
+
loadMoreLabel?: (HelixHeadlessNotifications["loadMoreLabel"]) | undefined;
|
|
8587
8760
|
/** Whether to draw a control that marks everything read. */
|
|
8588
8761
|
"mark-all"?: (HelixHeadlessNotifications["markAll"]) | undefined;
|
|
8589
8762
|
/** Whether to draw a control that marks everything read. */
|
|
@@ -8617,6 +8790,8 @@ say that without the component knowing what a row looks like. */
|
|
|
8617
8790
|
export type HelixHeadlessNotificationsVueEvents = {
|
|
8618
8791
|
/** Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row. */
|
|
8619
8792
|
"helix-dismiss": HelixHeadlessNotificationsHelixDismissElementEvent;
|
|
8793
|
+
/** Fired when a reader presses the `load-more` button, asking for the next page of the feed. */
|
|
8794
|
+
"helix-load-more": HelixHeadlessNotificationsHelixLoadMoreElementEvent;
|
|
8620
8795
|
/** Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable. */
|
|
8621
8796
|
"helix-read": HelixHeadlessNotificationsHelixReadElementEvent;
|
|
8622
8797
|
};
|
|
@@ -8856,11 +9031,31 @@ export type HelixHeadlessObjectInspectorElementEvent<E = Event> = TypedEvent<
|
|
|
8856
9031
|
HelixHeadlessObjectInspector,
|
|
8857
9032
|
E
|
|
8858
9033
|
>;
|
|
9034
|
+
/** `helix-activate` event type */
|
|
9035
|
+
export type HelixHeadlessObjectInspectorHelixActivateElementEvent =
|
|
9036
|
+
HelixHeadlessObjectInspectorElementEvent<HelixActivateEvent>;
|
|
9037
|
+
/** `helix-before-activate` event type */
|
|
9038
|
+
export type HelixHeadlessObjectInspectorHelixBeforeActivateElementEvent =
|
|
9039
|
+
HelixHeadlessObjectInspectorElementEvent<HelixBeforeActivateEvent>;
|
|
8859
9040
|
/** `helix-copy` event type */
|
|
8860
9041
|
export type HelixHeadlessObjectInspectorHelixCopyElementEvent =
|
|
8861
9042
|
HelixHeadlessObjectInspectorElementEvent<HelixCopyEvent>;
|
|
9043
|
+
/** `helix-filter` event type */
|
|
9044
|
+
export type HelixHeadlessObjectInspectorHelixFilterElementEvent =
|
|
9045
|
+
HelixHeadlessObjectInspectorElementEvent<HelixFilterEvent>;
|
|
9046
|
+
/** `helix-filtered` event type */
|
|
9047
|
+
export type HelixHeadlessObjectInspectorHelixFilteredElementEvent =
|
|
9048
|
+
HelixHeadlessObjectInspectorElementEvent<HelixFilteredEvent>;
|
|
8862
9049
|
|
|
8863
9050
|
export type HelixHeadlessObjectInspectorVueProps = {
|
|
9051
|
+
/** The active row's path, such as `/meta/tags/0`, and the empty string for the
|
|
9052
|
+
root.
|
|
9053
|
+
|
|
9054
|
+
Reading gives the row the keys are on. Writing moves there, opening the
|
|
9055
|
+
branches around it, and sends no event, the way a script's write to any
|
|
9056
|
+
current value sends none. A path the value does not hold moves to the
|
|
9057
|
+
nearest branch above it that it does. */
|
|
9058
|
+
active?: (HelixHeadlessObjectInspector["active"]) | undefined;
|
|
8864
9059
|
/** The copy button's accessible name on a row with a key, with the key filled
|
|
8865
9060
|
in as `{name}`.
|
|
8866
9061
|
|
|
@@ -8891,6 +9086,15 @@ reader sees the shape of the value before its contents. `0` starts with the
|
|
|
8891
9086
|
root closed; a large number opens everything, which on a big value is the
|
|
8892
9087
|
wall of text this exists to avoid. */
|
|
8893
9088
|
defaultDepth?: (HelixHeadlessObjectInspector["defaultDepth"]) | undefined;
|
|
9089
|
+
/** Text the tree is narrowed to: the entries whose key or value holds it,
|
|
9090
|
+
ignoring case, and the branches that lead to them. Empty shows everything. */
|
|
9091
|
+
filter?: (HelixHeadlessObjectInspector["filter"]) | undefined;
|
|
9092
|
+
/** Whether to show a field that sets `filter`. */
|
|
9093
|
+
filterable?: (HelixHeadlessObjectInspector["filterable"]) | undefined;
|
|
9094
|
+
/** The filter field's placeholder and accessible name. */
|
|
9095
|
+
"filter-label"?: (HelixHeadlessObjectInspector["filterLabel"]) | undefined;
|
|
9096
|
+
/** The filter field's placeholder and accessible name. */
|
|
9097
|
+
filterLabel?: (HelixHeadlessObjectInspector["filterLabel"]) | undefined;
|
|
8894
9098
|
/** The id of a `<script type="application/json">` holding the value.
|
|
8895
9099
|
|
|
8896
9100
|
Read once the document exists, and again whenever this changes. Text that
|
|
@@ -8939,6 +9143,16 @@ who set the property. This button is positioned out of the flow and takes no
|
|
|
8939
9143
|
room, so nothing selects on it, and reflection exists so that a selector can
|
|
8940
9144
|
reach a value. */
|
|
8941
9145
|
noCopy?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
|
|
9146
|
+
/** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
|
|
9147
|
+
"result-label"?: (HelixHeadlessObjectInspector["resultLabel"]) | undefined;
|
|
9148
|
+
/** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
|
|
9149
|
+
resultLabel?: (HelixHeadlessObjectInspector["resultLabel"]) | undefined;
|
|
9150
|
+
/** What a screen reader hears when a filter matches any other number of
|
|
9151
|
+
entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`. */
|
|
9152
|
+
"results-label"?: (HelixHeadlessObjectInspector["resultsLabel"]) | undefined;
|
|
9153
|
+
/** What a screen reader hears when a filter matches any other number of
|
|
9154
|
+
entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`. */
|
|
9155
|
+
resultsLabel?: (HelixHeadlessObjectInspector["resultsLabel"]) | undefined;
|
|
8942
9156
|
/** The tree's accessible name when `label` is empty and the host names it
|
|
8943
9157
|
with neither `aria-label` nor `aria-labelledby`. */
|
|
8944
9158
|
"tree-label"?: (HelixHeadlessObjectInspector["treeLabel"]) | undefined;
|
|
@@ -8950,6 +9164,11 @@ with neither `aria-label` nor `aria-labelledby`. */
|
|
|
8950
9164
|
For a value of thousands of entries. Reflected, because the box it scrolls
|
|
8951
9165
|
needs a height, which is a stylesheet rule reading this attribute. */
|
|
8952
9166
|
windowed?: (HelixHeadlessObjectInspector["windowed"]) | undefined;
|
|
9167
|
+
/** The open branches, by path, in no set order.
|
|
9168
|
+
|
|
9169
|
+
Writing opens exactly these and closes every other, keeping the active row
|
|
9170
|
+
where it stays visible. A property, never an attribute. */
|
|
9171
|
+
expanded?: (HelixHeadlessObjectInspector["expanded"]) | undefined;
|
|
8953
9172
|
/** The value to show, when your code already holds it as an object.
|
|
8954
9173
|
|
|
8955
9174
|
Takes precedence over `for`. Anything JSON can say is drawn; anything else
|
|
@@ -8958,8 +9177,16 @@ is shown as its string. */
|
|
|
8958
9177
|
};
|
|
8959
9178
|
|
|
8960
9179
|
export type HelixHeadlessObjectInspectorVueEvents = {
|
|
9180
|
+
/** The active row moved, by a key or a click. The detail's `value` is its path. */
|
|
9181
|
+
"helix-activate": HelixHeadlessObjectInspectorHelixActivateElementEvent;
|
|
9182
|
+
/** The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is. */
|
|
9183
|
+
"helix-before-activate": HelixHeadlessObjectInspectorHelixBeforeActivateElementEvent;
|
|
8961
9184
|
/** A value was put on the clipboard, from the copy button or the keyboard. */
|
|
8962
9185
|
"helix-copy": HelixHeadlessObjectInspectorHelixCopyElementEvent;
|
|
9186
|
+
/** Text was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was. */
|
|
9187
|
+
"helix-filter": HelixHeadlessObjectInspectorHelixFilterElementEvent;
|
|
9188
|
+
/** The filter field changed `filter`, which now holds the text. */
|
|
9189
|
+
"helix-filtered": HelixHeadlessObjectInspectorHelixFilteredElementEvent;
|
|
8963
9190
|
};
|
|
8964
9191
|
|
|
8965
9192
|
export type HelixHeadlessOptionGroupVueProps = {
|
|
@@ -9163,7 +9390,8 @@ read at the click rather than cached, because a reader can change it while
|
|
|
9163
9390
|
the page is open and this is the only motion in the component that
|
|
9164
9391
|
JavaScript rather than CSS decides. */
|
|
9165
9392
|
behavior?: (HelixHeadlessOutline["behavior"]) | undefined;
|
|
9166
|
-
/** The navigation's name, read by screen readers.
|
|
9393
|
+
/** The navigation's name, read by screen readers. A heading in the `heading`
|
|
9394
|
+
slot names it in place of this. */
|
|
9167
9395
|
label?: (HelixHeadlessOutline["label"]) | undefined;
|
|
9168
9396
|
/** How far below the top of the scroll container a heading counts as reached,
|
|
9169
9397
|
in pixels. The scroll container is the window or the panel the sections
|
|
@@ -9373,6 +9601,32 @@ Reading gives the real one; writing declares it the consumer's, and
|
|
|
9373
9601
|
`default-value` seeds one this element owns. Same accessor pair as
|
|
9374
9602
|
`Pagination.page` and the calendar's `month`. */
|
|
9375
9603
|
value?: (HelixHeadlessPaginationSize["value"]) | undefined;
|
|
9604
|
+
/** Whether the control is disabled and cannot be used.
|
|
9605
|
+
|
|
9606
|
+
Reflected, because the styled tier selects on it, and mirrored to
|
|
9607
|
+
`aria-disabled` rather than removing the element from the accessibility
|
|
9608
|
+
tree, so a screen reader can still announce that the control exists.
|
|
9609
|
+
|
|
9610
|
+
The mirror itself is in `willUpdate` below, here rather than in each
|
|
9611
|
+
control, because here is where `disabled` is. */
|
|
9612
|
+
disabled?: (HelixHeadlessPaginationSize["disabled"]) | undefined;
|
|
9613
|
+
/** The name the control's value is submitted under.
|
|
9614
|
+
|
|
9615
|
+
**Reflected, and it is the exception to "reflect only what CSS selects
|
|
9616
|
+
on".** The platform builds a form's entry list from the `name` *content
|
|
9617
|
+
attribute*, not from the property, so a control named through the property
|
|
9618
|
+
submitted under no name at all and was silently dropped. Measured: two
|
|
9619
|
+
inputs in one form, one named by attribute and one by property, and the
|
|
9620
|
+
form carried a single entry.
|
|
9621
|
+
|
|
9622
|
+
Safe for a React consumer, which is what the rule is protecting: React
|
|
9623
|
+
renders a custom element's props as attributes on the server, so the name
|
|
9624
|
+
is already in the markup being hydrated and reflecting it writes what is
|
|
9625
|
+
there. It is only a change to the markup when a consumer assigns it
|
|
9626
|
+
imperatively later, and nothing is hydrating by then.
|
|
9627
|
+
|
|
9628
|
+
Here rather than on each control. */
|
|
9629
|
+
name?: (HelixHeadlessPaginationSize["name"]) | undefined;
|
|
9376
9630
|
};
|
|
9377
9631
|
|
|
9378
9632
|
export type HelixHeadlessPaginationSizeVueEvents = {
|
|
@@ -9799,18 +10053,18 @@ only `horizontal` has to be named. */
|
|
|
9799
10053
|
/** Whether a reader can see and focus the answer and cannot change it. A
|
|
9800
10054
|
read-only group still submits its value.
|
|
9801
10055
|
|
|
9802
|
-
React Aria's `isReadOnly`. A press on a radio is refused
|
|
9803
|
-
|
|
9804
|
-
|
|
9805
|
-
A script can still set `value`. */
|
|
10056
|
+
React Aria's `isReadOnly`. A press on a radio is refused. The arrow keys,
|
|
10057
|
+
Home and End move focus between the radios and choose nothing, so a reader
|
|
10058
|
+
can hear every choice, and Tab still reaches the answer. The group says
|
|
10059
|
+
`aria-readonly`. A script can still set `value`. */
|
|
9806
10060
|
readonly?: (HelixHeadlessRadioGroup["readOnly"]) | undefined;
|
|
9807
10061
|
/** Whether a reader can see and focus the answer and cannot change it. A
|
|
9808
10062
|
read-only group still submits its value.
|
|
9809
10063
|
|
|
9810
|
-
React Aria's `isReadOnly`. A press on a radio is refused
|
|
9811
|
-
|
|
9812
|
-
|
|
9813
|
-
A script can still set `value`. */
|
|
10064
|
+
React Aria's `isReadOnly`. A press on a radio is refused. The arrow keys,
|
|
10065
|
+
Home and End move focus between the radios and choose nothing, so a reader
|
|
10066
|
+
can hear every choice, and Tab still reaches the answer. The group says
|
|
10067
|
+
`aria-readonly`. A script can still set `value`. */
|
|
9814
10068
|
readOnly?: (HelixHeadlessRadioGroup["readOnly"]) | undefined;
|
|
9815
10069
|
/** The value the control starts with. A form reset returns it to this value. */
|
|
9816
10070
|
"default-value"?: (HelixHeadlessRadioGroup["defaultValue"]) | undefined;
|
|
@@ -9982,6 +10236,9 @@ export type HelixHeadlessRatingElementEvent<E = Event> = TypedEvent<
|
|
|
9982
10236
|
/** `helix-before-change` event type */
|
|
9983
10237
|
export type HelixHeadlessRatingHelixBeforeChangeElementEvent =
|
|
9984
10238
|
HelixHeadlessRatingElementEvent<HelixBeforeChangeEvent>;
|
|
10239
|
+
/** `helix-clear` event type */
|
|
10240
|
+
export type HelixHeadlessRatingHelixClearElementEvent =
|
|
10241
|
+
HelixHeadlessRatingElementEvent<HelixClearEvent>;
|
|
9985
10242
|
|
|
9986
10243
|
export type HelixHeadlessRatingVueProps = {
|
|
9987
10244
|
/** Whether a reader can take the rating back to unrated: by pressing the
|
|
@@ -10175,7 +10432,7 @@ export type HelixHeadlessRatingVueEvents = {
|
|
|
10175
10432
|
/** The score is about to change. Cancelable: cancel it to keep the current score. */
|
|
10176
10433
|
"helix-before-change": HelixHeadlessRatingHelixBeforeChangeElementEvent;
|
|
10177
10434
|
/** The rating went back to unrated, under `clearable`. Sent after `input` and `change`. */
|
|
10178
|
-
"helix-clear":
|
|
10435
|
+
"helix-clear": HelixHeadlessRatingHelixClearElementEvent;
|
|
10179
10436
|
/** The score changed. */
|
|
10180
10437
|
input: HelixHeadlessRatingElementEvent;
|
|
10181
10438
|
};
|
|
@@ -10220,14 +10477,44 @@ writes them, whatever this says. */
|
|
|
10220
10477
|
|
|
10221
10478
|
export type HelixHeadlessScatterChartVueEvents = {};
|
|
10222
10479
|
|
|
10480
|
+
/** `HelixHeadlessScrollArea` component event */
|
|
10481
|
+
export type HelixHeadlessScrollAreaElementEvent<E = Event> = TypedEvent<
|
|
10482
|
+
HelixHeadlessScrollArea,
|
|
10483
|
+
E
|
|
10484
|
+
>;
|
|
10485
|
+
|
|
10223
10486
|
export type HelixHeadlessScrollAreaVueProps = {
|
|
10487
|
+
/** How long the scrollbars stay after the content stops moving, or the pointer
|
|
10488
|
+
leaves, in milliseconds. Read under `scrollbars="scroll"` and
|
|
10489
|
+
`scrollbars="hover"`. */
|
|
10490
|
+
"hide-delay"?: (HelixHeadlessScrollArea["hideDelay"] | `${number}`) | undefined;
|
|
10491
|
+
/** How long the scrollbars stay after the content stops moving, or the pointer
|
|
10492
|
+
leaves, in milliseconds. Read under `scrollbars="scroll"` and
|
|
10493
|
+
`scrollbars="hover"`. */
|
|
10494
|
+
hideDelay?: (HelixHeadlessScrollArea["hideDelay"]) | undefined;
|
|
10224
10495
|
/** The region's name, read by screen readers.
|
|
10225
10496
|
|
|
10226
10497
|
Without one there is no region: see the note on the class. */
|
|
10227
10498
|
label?: (HelixHeadlessScrollArea["label"]) | undefined;
|
|
10499
|
+
/** Draws scrollbars of the component's own in place of the browser's, and
|
|
10500
|
+
says when they show.
|
|
10501
|
+
|
|
10502
|
+
- `auto`: on each axis that has content past it.
|
|
10503
|
+
- `always`: on each axis that can scroll, whether or not it has anything to
|
|
10504
|
+
scroll, so the scrollbar is there before the content grows.
|
|
10505
|
+
- `scroll`: while the content is moving, and for `hide-delay` after.
|
|
10506
|
+
- `hover`: as `scroll`, and while the pointer is over the scroll area.
|
|
10507
|
+
|
|
10508
|
+
Absent keeps the browser's scrollbars. */
|
|
10509
|
+
scrollbars?: (HelixHeadlessScrollArea["scrollbars"]) | undefined;
|
|
10228
10510
|
};
|
|
10229
10511
|
|
|
10230
|
-
export type HelixHeadlessScrollAreaVueEvents = {
|
|
10512
|
+
export type HelixHeadlessScrollAreaVueEvents = {
|
|
10513
|
+
/** The content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble. */
|
|
10514
|
+
scroll: HelixHeadlessScrollAreaElementEvent;
|
|
10515
|
+
/** The content stopped scrolling. Sent from the host, as `scroll` is. Does not bubble. */
|
|
10516
|
+
scrollend: HelixHeadlessScrollAreaElementEvent;
|
|
10517
|
+
};
|
|
10231
10518
|
|
|
10232
10519
|
/** `HelixHeadlessSelect` component event */
|
|
10233
10520
|
export type HelixHeadlessSelectElementEvent<E = Event> = TypedEvent<
|
|
@@ -10904,6 +11191,15 @@ Reading gives where it is; writing declares it the consumer's, and
|
|
|
10904
11191
|
`default-position` seeds one this element owns. The same accessor pair
|
|
10905
11192
|
`Pagination.page` and the calendar's `month` carry. */
|
|
10906
11193
|
position?: (HelixHeadlessSplitter["position"]) | undefined;
|
|
11194
|
+
/** Where a dragged divider snaps, comma separated, as Web Awesome's split
|
|
11195
|
+
panel does: a bare number is a percentage and a length such as `240px` is
|
|
11196
|
+
measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
|
|
11197
|
+
The arrow keys move by `step` and do not snap. */
|
|
11198
|
+
snap?: (HelixHeadlessSplitter["snap"]) | undefined;
|
|
11199
|
+
/** How close a drag has to come to a snap point to land on it, in pixels. */
|
|
11200
|
+
"snap-threshold"?: (HelixHeadlessSplitter["snapThreshold"] | `${number}`) | undefined;
|
|
11201
|
+
/** How close a drag has to come to a snap point to land on it, in pixels. */
|
|
11202
|
+
snapThreshold?: (HelixHeadlessSplitter["snapThreshold"]) | undefined;
|
|
10907
11203
|
/** How far one arrow key press moves the divider, as a percentage. */
|
|
10908
11204
|
step?: (HelixHeadlessSplitter["step"]) | undefined;
|
|
10909
11205
|
};
|
|
@@ -10979,6 +11275,9 @@ export type HelixHeadlessStepsVueProps = {
|
|
|
10979
11275
|
A list of stages is a landmark a reader arrives at out of order, so it
|
|
10980
11276
|
needs a name of its own rather than borrowing the heading above it. */
|
|
10981
11277
|
label?: (HelixHeadlessSteps["label"]) | undefined;
|
|
11278
|
+
/** Whether a reader has to finish each stage, or pass an `optional` one,
|
|
11279
|
+
before going on to the next. */
|
|
11280
|
+
linear?: (HelixHeadlessSteps["linear"]) | undefined;
|
|
10982
11281
|
/** Which way the steps run.
|
|
10983
11282
|
|
|
10984
11283
|
Absent is a row, which is what a form header wants, with each name under
|
|
@@ -11042,10 +11341,19 @@ export type HelixHeadlessStepHelixSelectElementEvent =
|
|
|
11042
11341
|
export type HelixHeadlessStepVueProps = {
|
|
11043
11342
|
/** Whether this stage is finished. */
|
|
11044
11343
|
complete?: (HelixHeadlessStep["complete"]) | undefined;
|
|
11344
|
+
/** The words that tell a screen reader the stage is finished. Translate it
|
|
11345
|
+
with the page. */
|
|
11346
|
+
"complete-label"?: (HelixHeadlessStep["completeLabel"]) | undefined;
|
|
11347
|
+
/** The words that tell a screen reader the stage is finished. Translate it
|
|
11348
|
+
with the page. */
|
|
11349
|
+
completeLabel?: (HelixHeadlessStep["completeLabel"]) | undefined;
|
|
11045
11350
|
/** Whether this is the current stage. */
|
|
11046
11351
|
current?: (HelixHeadlessStep["current"]) | undefined;
|
|
11047
11352
|
/** Whether the stage is disabled, so the user cannot go to it. */
|
|
11048
11353
|
disabled?: (HelixHeadlessStep["disabled"]) | undefined;
|
|
11354
|
+
/** Whether a reader may pass the stage without finishing it, in a sequence
|
|
11355
|
+
with `linear`. Ark UI's skippable step. */
|
|
11356
|
+
optional?: (HelixHeadlessStep["optional"]) | undefined;
|
|
11049
11357
|
/** The value the step sends in `helix-select`. */
|
|
11050
11358
|
value?: (HelixHeadlessStep["value"]) | undefined;
|
|
11051
11359
|
};
|
|
@@ -11185,6 +11493,9 @@ export type HelixHeadlessTableColumnElementEvent<E = Event> = TypedEvent<
|
|
|
11185
11493
|
/** `helix-before-resize` event type */
|
|
11186
11494
|
export type HelixHeadlessTableColumnHelixBeforeResizeElementEvent =
|
|
11187
11495
|
HelixHeadlessTableColumnElementEvent<HelixBeforeResizeEvent>;
|
|
11496
|
+
/** `helix-resized` event type */
|
|
11497
|
+
export type HelixHeadlessTableColumnHelixResizedElementEvent =
|
|
11498
|
+
HelixHeadlessTableColumnElementEvent<HelixResizedEvent>;
|
|
11188
11499
|
|
|
11189
11500
|
export type HelixHeadlessTableColumnVueProps = {
|
|
11190
11501
|
/** The key this column reads out of a row.
|
|
@@ -11226,6 +11537,22 @@ replaced with the heading text. */
|
|
|
11226
11537
|
/** The accessible name of the separator that resizes the column. `{name}` is
|
|
11227
11538
|
replaced with the heading text. */
|
|
11228
11539
|
resizeLabel?: (HelixHeadlessTableColumn["resizeLabel"]) | undefined;
|
|
11540
|
+
/** Makes this column's cells the headers of their rows, in `DataTable`.
|
|
11541
|
+
|
|
11542
|
+
A screen reader moving along a row or down a column names the row by its
|
|
11543
|
+
row header, so the cell that identifies a row, a file's name say, is the
|
|
11544
|
+
one to mark. Where no column sets it, `DataTable` makes the first column
|
|
11545
|
+
with a `field` the row header. A `Table`'s cells are your markup, so there
|
|
11546
|
+
a cell is a row header through its own `header` attribute. */
|
|
11547
|
+
"row-header"?: (HelixHeadlessTableColumn["rowHeader"]) | undefined;
|
|
11548
|
+
/** Makes this column's cells the headers of their rows, in `DataTable`.
|
|
11549
|
+
|
|
11550
|
+
A screen reader moving along a row or down a column names the row by its
|
|
11551
|
+
row header, so the cell that identifies a row, a file's name say, is the
|
|
11552
|
+
one to mark. Where no column sets it, `DataTable` makes the first column
|
|
11553
|
+
with a `field` the row header. A `Table`'s cells are your markup, so there
|
|
11554
|
+
a cell is a row header through its own `header` attribute. */
|
|
11555
|
+
rowHeader?: (HelixHeadlessTableColumn["rowHeader"]) | undefined;
|
|
11229
11556
|
/** Whether the table can be sorted by this column.
|
|
11230
11557
|
|
|
11231
11558
|
Ignored without a `field`, and silently: a column with nothing to sort by
|
|
@@ -11353,6 +11680,8 @@ correct default: the raw value is what an API sorted by. */
|
|
|
11353
11680
|
export type HelixHeadlessTableColumnVueEvents = {
|
|
11354
11681
|
/** The column is about to be resized, with the requested width. Cancelable: cancel it to keep the current width. */
|
|
11355
11682
|
"helix-before-resize": HelixHeadlessTableColumnHelixBeforeResizeElementEvent;
|
|
11683
|
+
/** Fired after the column is resized, with the new width. */
|
|
11684
|
+
"helix-resized": HelixHeadlessTableColumnHelixResizedElementEvent;
|
|
11356
11685
|
};
|
|
11357
11686
|
|
|
11358
11687
|
/** `HelixHeadlessTable` component event */
|
|
@@ -11360,9 +11689,18 @@ export type HelixHeadlessTableElementEvent<E = Event> = TypedEvent<
|
|
|
11360
11689
|
HelixHeadlessTable,
|
|
11361
11690
|
E
|
|
11362
11691
|
>;
|
|
11692
|
+
/** `helix-select` event type */
|
|
11693
|
+
export type HelixHeadlessTableHelixSelectElementEvent =
|
|
11694
|
+
HelixHeadlessTableElementEvent<HelixSelectEvent>;
|
|
11695
|
+
/** `helix-selected` event type */
|
|
11696
|
+
export type HelixHeadlessTableHelixSelectedElementEvent =
|
|
11697
|
+
HelixHeadlessTableElementEvent<HelixSelectedEvent>;
|
|
11363
11698
|
/** `helix-sort` event type */
|
|
11364
11699
|
export type HelixHeadlessTableHelixSortElementEvent =
|
|
11365
11700
|
HelixHeadlessTableElementEvent<HelixSortEvent>;
|
|
11701
|
+
/** `helix-sorted` event type */
|
|
11702
|
+
export type HelixHeadlessTableHelixSortedElementEvent =
|
|
11703
|
+
HelixHeadlessTableElementEvent<HelixSortedEvent>;
|
|
11366
11704
|
|
|
11367
11705
|
export type HelixHeadlessTableVueProps = {
|
|
11368
11706
|
/** The word for an ascending sort, in `sorted-label`. */
|
|
@@ -11398,6 +11736,12 @@ and a list here would be a second way to say what that says. This table's
|
|
|
11398
11736
|
cells are markup, and a table written as rows of cells with no column
|
|
11399
11737
|
declared in it has nowhere else to be sized from. */
|
|
11400
11738
|
columns?: (HelixHeadlessTable["columns"]) | undefined;
|
|
11739
|
+
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
11740
|
+
is set. */
|
|
11741
|
+
"default-selected"?: (HelixHeadlessTable["defaultSelected"]) | undefined;
|
|
11742
|
+
/** The keys selected at the start, separated by commas. Used until `selected`
|
|
11743
|
+
is set. */
|
|
11744
|
+
defaultSelected?: (HelixHeadlessTable["defaultSelected"]) | undefined;
|
|
11401
11745
|
/** The starting sort order, used until `sort` is set. */
|
|
11402
11746
|
"default-sort"?: (HelixHeadlessTable["defaultSort"]) | undefined;
|
|
11403
11747
|
/** The starting sort order, used until `sort` is set. */
|
|
@@ -11411,6 +11755,31 @@ declared in it has nowhere else to be sized from. */
|
|
|
11411
11755
|
An `aria-label` or `aria-labelledby` on the host names the table too, and
|
|
11412
11756
|
wins over this. */
|
|
11413
11757
|
label?: (HelixHeadlessTable["label"]) | undefined;
|
|
11758
|
+
/** Adds a column of checkboxes for selecting rows. Each row is known by its
|
|
11759
|
+
`value`, and by its place among the rows as written where it has none. */
|
|
11760
|
+
selectable?: (HelixHeadlessTable["selectable"]) | undefined;
|
|
11761
|
+
/** The name of the checkbox in the heading that selects every row. */
|
|
11762
|
+
"select-all-label"?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
11763
|
+
/** The name of the checkbox in the heading that selects every row. */
|
|
11764
|
+
selectAllLabel?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
|
|
11765
|
+
/** The keys of the selected rows, separated by commas.
|
|
11766
|
+
|
|
11767
|
+
A reader's press fires `helix-select` first, and refusing it leaves the
|
|
11768
|
+
selection as it was. `default-selected` seeds a selection this element
|
|
11769
|
+
then owns. */
|
|
11770
|
+
selected?: (HelixHeadlessTable["selected"]) | undefined;
|
|
11771
|
+
/** What screen readers hear when the chosen rows change. `{count}` is how many
|
|
11772
|
+
rows are chosen. */
|
|
11773
|
+
"selected-label"?: (HelixHeadlessTable["selectedLabel"]) | undefined;
|
|
11774
|
+
/** What screen readers hear when the chosen rows change. `{count}` is how many
|
|
11775
|
+
rows are chosen. */
|
|
11776
|
+
selectedLabel?: (HelixHeadlessTable["selectedLabel"]) | undefined;
|
|
11777
|
+
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
11778
|
+
row's first cell. */
|
|
11779
|
+
"select-row-label"?: (HelixHeadlessTable["selectRowLabel"]) | undefined;
|
|
11780
|
+
/** The name of a row's checkbox. `{row}` is replaced with the words of the
|
|
11781
|
+
row's first cell. */
|
|
11782
|
+
selectRowLabel?: (HelixHeadlessTable["selectRowLabel"]) | undefined;
|
|
11414
11783
|
/** The sort order, as `field:direction`, where `field` is a sortable column's
|
|
11415
11784
|
`field`.
|
|
11416
11785
|
|
|
@@ -11446,11 +11815,21 @@ say that without the component knowing what a row looks like. */
|
|
|
11446
11815
|
};
|
|
11447
11816
|
|
|
11448
11817
|
export type HelixHeadlessTableVueEvents = {
|
|
11818
|
+
/** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
|
|
11819
|
+
"helix-select": HelixHeadlessTableHelixSelectElementEvent;
|
|
11820
|
+
/** Fired after the selection changes, with every selected key, separated by commas. */
|
|
11821
|
+
"helix-selected": HelixHeadlessTableHelixSelectedElementEvent;
|
|
11449
11822
|
/** A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order. */
|
|
11450
11823
|
"helix-sort": HelixHeadlessTableHelixSortElementEvent;
|
|
11824
|
+
/** Fired after the sort order changes, with the new order. */
|
|
11825
|
+
"helix-sorted": HelixHeadlessTableHelixSortedElementEvent;
|
|
11451
11826
|
};
|
|
11452
11827
|
|
|
11453
|
-
export type HelixHeadlessTableRowVueProps = {
|
|
11828
|
+
export type HelixHeadlessTableRowVueProps = {
|
|
11829
|
+
/** The key the table's `selected` lists this row by. Left empty, the row is
|
|
11830
|
+
known by its place among the rows as written. */
|
|
11831
|
+
value?: (HelixHeadlessTableRow["value"]) | undefined;
|
|
11832
|
+
};
|
|
11454
11833
|
|
|
11455
11834
|
export type HelixHeadlessTableRowVueEvents = {};
|
|
11456
11835
|
|
|
@@ -11466,10 +11845,9 @@ because it is coordination between elements rather than anything a consumer
|
|
|
11466
11845
|
writes: the tab already says it.
|
|
11467
11846
|
|
|
11468
11847
|
A string and not a reference: an IDREF resolves only in the tree it is
|
|
11469
|
-
written in, and
|
|
11470
|
-
|
|
11471
|
-
|
|
11472
|
-
anyway. */
|
|
11848
|
+
written in, and the tab's control is inside the tab's shadow root, which no
|
|
11849
|
+
reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
|
|
11850
|
+
the pattern names one anyway. */
|
|
11473
11851
|
label?: (HelixHeadlessTabPanel["label"]) | undefined;
|
|
11474
11852
|
};
|
|
11475
11853
|
|
|
@@ -11503,6 +11881,11 @@ Automatic is the default because showing a panel is usually cheap. Set this
|
|
|
11503
11881
|
where it is not, so a reader arrowing past four tabs does not load four
|
|
11504
11882
|
panels on the way. */
|
|
11505
11883
|
manual?: (HelixHeadlessTabs["manual"]) | undefined;
|
|
11884
|
+
/** The direction the tabs run. `vertical` sets them in a column beside the
|
|
11885
|
+
panels and tells a screen reader the list is vertical.
|
|
11886
|
+
|
|
11887
|
+
Optional, so the resting row writes no attribute onto the host. */
|
|
11888
|
+
orientation?: (HelixHeadlessTabs["orientation"]) | undefined;
|
|
11506
11889
|
/** How the row of tabs is drawn.
|
|
11507
11890
|
|
|
11508
11891
|
Unset is a raised pill on the selected tab with nothing behind the row,
|
|
@@ -11564,6 +11947,13 @@ export type HelixHeadlessTabHelixSelectElementEvent =
|
|
|
11564
11947
|
HelixHeadlessTabElementEvent<HelixSelectEvent>;
|
|
11565
11948
|
|
|
11566
11949
|
export type HelixHeadlessTabVueProps = {
|
|
11950
|
+
/** The URL the tab links to. Setting it renders the tab as a link, for a set
|
|
11951
|
+
of tabs that are pages of a site. */
|
|
11952
|
+
href?: (HelixHeadlessTab["href"]) | undefined;
|
|
11953
|
+
/** The link's `rel`, for a tab with an `href`. */
|
|
11954
|
+
rel?: (HelixHeadlessTab["rel"]) | undefined;
|
|
11955
|
+
/** Where the link opens, such as `_blank`, for a tab with an `href`. */
|
|
11956
|
+
target?: (HelixHeadlessTab["target"]) | undefined;
|
|
11567
11957
|
/** Whether the item is disabled and cannot be chosen. */
|
|
11568
11958
|
disabled?: (HelixHeadlessTab["disabled"]) | undefined;
|
|
11569
11959
|
/** Whether the item is selected.
|
|
@@ -12448,6 +12838,19 @@ export type HelixHeadlessTimePickerVueEvents = {
|
|
|
12448
12838
|
input: HelixHeadlessTimePickerElementEvent;
|
|
12449
12839
|
};
|
|
12450
12840
|
|
|
12841
|
+
export type HelixHeadlessTimelineGroupVueProps = {
|
|
12842
|
+
/** The level of the group's heading, from 1 to 6. */
|
|
12843
|
+
"heading-level"?: (HelixHeadlessTimelineGroup["headingLevel"] | `${number}`) | undefined;
|
|
12844
|
+
/** The level of the group's heading, from 1 to 6. */
|
|
12845
|
+
headingLevel?: (HelixHeadlessTimelineGroup["headingLevel"]) | undefined;
|
|
12846
|
+
/** The heading, when it is plain text, such as "Today".
|
|
12847
|
+
|
|
12848
|
+
The fallback of the `heading` slot, so slotted content replaces it. */
|
|
12849
|
+
label?: (HelixHeadlessTimelineGroup["label"]) | undefined;
|
|
12850
|
+
};
|
|
12851
|
+
|
|
12852
|
+
export type HelixHeadlessTimelineGroupVueEvents = {};
|
|
12853
|
+
|
|
12451
12854
|
export type HelixHeadlessTimelineItemVueProps = {
|
|
12452
12855
|
/** When it happened, in machine-readable form. Setting it wraps the time in a
|
|
12453
12856
|
`<time>` element.
|
|
@@ -12801,6 +13204,12 @@ and wins over this. */
|
|
|
12801
13204
|
label?: (HelixHeadlessToolbar["label"]) | undefined;
|
|
12802
13205
|
/** The direction the arrow keys move focus in. */
|
|
12803
13206
|
orientation?: (HelixHeadlessToolbar["orientation"]) | undefined;
|
|
13207
|
+
/** Whether the arrow keys stop at the first and the last control. Unset, they
|
|
13208
|
+
wrap around from one end to the other. */
|
|
13209
|
+
"stop-at-ends"?: (HelixHeadlessToolbar["stopAtEnds"]) | undefined;
|
|
13210
|
+
/** Whether the arrow keys stop at the first and the last control. Unset, they
|
|
13211
|
+
wrap around from one end to the other. */
|
|
13212
|
+
stopAtEnds?: (HelixHeadlessToolbar["stopAtEnds"]) | undefined;
|
|
12804
13213
|
};
|
|
12805
13214
|
|
|
12806
13215
|
export type HelixHeadlessToolbarVueEvents = {};
|
|
@@ -13125,6 +13534,9 @@ export type HelixHeadlessTreeItemHelixBeforeCloseElementEvent =
|
|
|
13125
13534
|
/** `helix-before-open` event type */
|
|
13126
13535
|
export type HelixHeadlessTreeItemHelixBeforeOpenElementEvent =
|
|
13127
13536
|
HelixHeadlessTreeItemElementEvent<HelixBeforeOpenEvent>;
|
|
13537
|
+
/** `helix-load` event type */
|
|
13538
|
+
export type HelixHeadlessTreeItemHelixLoadElementEvent =
|
|
13539
|
+
HelixHeadlessTreeItemElementEvent<HelixLoadEvent>;
|
|
13128
13540
|
/** `helix-select` event type */
|
|
13129
13541
|
export type HelixHeadlessTreeItemHelixSelectElementEvent =
|
|
13130
13542
|
HelixHeadlessTreeItemElementEvent<HelixSelectEvent>;
|
|
@@ -13133,12 +13545,20 @@ export type HelixHeadlessTreeItemToggleElementEvent =
|
|
|
13133
13545
|
HelixHeadlessTreeItemElementEvent<ToggleEvent>;
|
|
13134
13546
|
|
|
13135
13547
|
export type HelixHeadlessTreeItemVueProps = {
|
|
13548
|
+
/** Whether the item cannot be chosen, opened or followed. The arrow keys still
|
|
13549
|
+
reach it, so a reader knows it is there. */
|
|
13550
|
+
disabled?: (HelixHeadlessTreeItem["disabled"]) | undefined;
|
|
13136
13551
|
/** The URL this node links to. Setting it makes the row a link.
|
|
13137
13552
|
|
|
13138
13553
|
Unset by default, and unreflected: a tree of choosable nodes is not a tree
|
|
13139
13554
|
of links, and an empty `href` written onto every row would be a link to the
|
|
13140
13555
|
current page on every item a consumer never asked to be one. */
|
|
13141
13556
|
href?: (HelixHeadlessTreeItem["href"]) | undefined;
|
|
13557
|
+
/** Whether the item is a branch whose children are loaded when it opens.
|
|
13558
|
+
|
|
13559
|
+
Opening it sends `helix-load`. Add the children to its `children` slot,
|
|
13560
|
+
and remove `lazy` once they are in, as Web Awesome's tree item does. */
|
|
13561
|
+
lazy?: (HelixHeadlessTreeItem["lazy"]) | undefined;
|
|
13142
13562
|
/** The link's `rel` value, which describes how the linked page relates to this
|
|
13143
13563
|
one.
|
|
13144
13564
|
|
|
@@ -13206,6 +13626,8 @@ export type HelixHeadlessTreeItemVueEvents = {
|
|
|
13206
13626
|
"helix-before-close": HelixHeadlessTreeItemHelixBeforeCloseElementEvent;
|
|
13207
13627
|
/** Fired before a branch opens, and cancelable. */
|
|
13208
13628
|
"helix-before-open": HelixHeadlessTreeItemHelixBeforeOpenElementEvent;
|
|
13629
|
+
/** Fired when a `lazy` item opens, so you can load its children. */
|
|
13630
|
+
"helix-load": HelixHeadlessTreeItemHelixLoadElementEvent;
|
|
13209
13631
|
/** Fired when the item is chosen, and cancelable. Canceling it changes nothing. */
|
|
13210
13632
|
"helix-select": HelixHeadlessTreeItemHelixSelectElementEvent;
|
|
13211
13633
|
/** Sent when the branch opens or closes, with `newState` and `oldState`. */
|
|
@@ -13268,6 +13690,16 @@ branch as a label; a headless consumer reads the attribute and the
|
|
|
13268
13690
|
written here appears in the served markup of every tree anybody renders.
|
|
13269
13691
|
The resting state is the absence of the attribute, which is `peer`. */
|
|
13270
13692
|
nesting?: (HelixHeadlessTree["nesting"]) | undefined;
|
|
13693
|
+
/** Whether a reader can check many items. Unset, one item is chosen at a
|
|
13694
|
+
time.
|
|
13695
|
+
|
|
13696
|
+
Optional, so a tree of one choice writes no attribute onto the host. */
|
|
13697
|
+
"selection-mode"?: (HelixHeadlessTree["selectionMode"]) | undefined;
|
|
13698
|
+
/** Whether a reader can check many items. Unset, one item is chosen at a
|
|
13699
|
+
time.
|
|
13700
|
+
|
|
13701
|
+
Optional, so a tree of one choice writes no attribute onto the host. */
|
|
13702
|
+
selectionMode?: (HelixHeadlessTree["selectionMode"]) | undefined;
|
|
13271
13703
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
13272
13704
|
"empty-text"?: (HelixHeadlessTree["emptyText"]) | undefined;
|
|
13273
13705
|
/** The text shown and announced when there are no rows and none are loading. */
|
|
@@ -13299,6 +13731,9 @@ Ignored once `active` is written. */
|
|
|
13299
13731
|
|
|
13300
13732
|
Ignored once `active` is written. */
|
|
13301
13733
|
defaultActive?: (HelixHeadlessTree["defaultActive"]) | undefined;
|
|
13734
|
+
/** The checked values, as a list, under `selection-mode="multiple"`, and the
|
|
13735
|
+
chosen value alone otherwise. Writing it sets `active`. */
|
|
13736
|
+
values?: (HelixHeadlessTree["values"]) | undefined;
|
|
13302
13737
|
};
|
|
13303
13738
|
|
|
13304
13739
|
export type HelixHeadlessTreeVueEvents = {
|
|
@@ -13428,10 +13863,25 @@ export type HelixHeadlessVideoPlaylistHelixActivateElementEvent =
|
|
|
13428
13863
|
/** `helix-before-activate` event type */
|
|
13429
13864
|
export type HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent =
|
|
13430
13865
|
HelixHeadlessVideoPlaylistElementEvent<HelixBeforeActivateEvent>;
|
|
13866
|
+
/** `helix-end` event type */
|
|
13867
|
+
export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
|
|
13868
|
+
HelixHeadlessVideoPlaylistElementEvent<HelixEndEvent>;
|
|
13431
13869
|
|
|
13432
13870
|
export type HelixHeadlessVideoPlaylistVueProps = {
|
|
13433
13871
|
/** The list's name, read by screen readers. */
|
|
13434
13872
|
label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
|
|
13873
|
+
/** What happens when an entry ends with no next one to go to. `one` plays the
|
|
13874
|
+
same entry again, and `all` goes from the last entry back to the first.
|
|
13875
|
+
Absent, the playlist stops on the last entry and sends `helix-end`.
|
|
13876
|
+
|
|
13877
|
+
`all` also lets the next and previous controls go round, so next on the
|
|
13878
|
+
last entry is the first. `one` changes only what an ending does: next and
|
|
13879
|
+
previous still move, being a reader asking for another entry. */
|
|
13880
|
+
repeat?: (HelixHeadlessVideoPlaylist["repeat"]) | undefined;
|
|
13881
|
+
/** Whether the entries play in a random order. The order starts from the
|
|
13882
|
+
entry that is current, and holds until shuffle is turned off or an entry
|
|
13883
|
+
arrives or leaves, so previous goes back through what has played. */
|
|
13884
|
+
shuffle?: (HelixHeadlessVideoPlaylist["shuffle"]) | undefined;
|
|
13435
13885
|
/** The `value` of the current item.
|
|
13436
13886
|
|
|
13437
13887
|
Not `option.active`, which is the option the keyboard is on: that is a
|
|
@@ -13456,6 +13906,8 @@ export type HelixHeadlessVideoPlaylistVueEvents = {
|
|
|
13456
13906
|
"helix-activate": HelixHeadlessVideoPlaylistHelixActivateElementEvent;
|
|
13457
13907
|
/** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
|
|
13458
13908
|
"helix-before-activate": HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent;
|
|
13909
|
+
/** The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set. */
|
|
13910
|
+
"helix-end": HelixHeadlessVideoPlaylistHelixEndElementEvent;
|
|
13459
13911
|
};
|
|
13460
13912
|
|
|
13461
13913
|
/** `HelixHeadlessVideo` component event */
|
|
@@ -13474,10 +13926,10 @@ export type HelixHeadlessVideoVueProps = {
|
|
|
13474
13926
|
/** Whether the video starts playing on its own. Browsers allow this only while
|
|
13475
13927
|
it is muted.
|
|
13476
13928
|
|
|
13477
|
-
Forwarded
|
|
13478
|
-
the browser's policy and
|
|
13479
|
-
|
|
13480
|
-
|
|
13929
|
+
Forwarded to the video, which decides. Whether an unprompted play is
|
|
13930
|
+
permitted is the browser's policy, and what follows a refused autoplay is a
|
|
13931
|
+
paused player showing its start control, which is the correct thing to be
|
|
13932
|
+
looking at. */
|
|
13481
13933
|
autoplay?: (HelixHeadlessVideo["autoplay"]) | undefined;
|
|
13482
13934
|
/** The name of the captions control when the video has one track. The control
|
|
13483
13935
|
turns that track on and off.
|
|
@@ -13711,6 +14163,12 @@ bar: two of the same control is worse than either placement. */
|
|
|
13711
14163
|
"pip-label"?: (HelixHeadlessVideo["pipLabel"]) | undefined;
|
|
13712
14164
|
/** What the control that floats the video over other windows is called. */
|
|
13713
14165
|
pipLabel?: (HelixHeadlessVideo["pipLabel"]) | undefined;
|
|
14166
|
+
/** The name of the player when `label` is not set. The player is a group, and
|
|
14167
|
+
this is what a screen reader calls it on arriving. */
|
|
14168
|
+
"player-label"?: (HelixHeadlessVideo["playerLabel"]) | undefined;
|
|
14169
|
+
/** The name of the player when `label` is not set. The player is a group, and
|
|
14170
|
+
this is what a screen reader calls it on arriving. */
|
|
14171
|
+
playerLabel?: (HelixHeadlessVideo["playerLabel"]) | undefined;
|
|
13714
14172
|
/** The name of the play control while pressing it would start the video. */
|
|
13715
14173
|
"play-label"?: (HelixHeadlessVideo["playLabel"]) | undefined;
|
|
13716
14174
|
/** The name of the play control while pressing it would start the video. */
|
|
@@ -13760,6 +14218,14 @@ nothing in it says "press to watch".
|
|
|
13760
14218
|
behind a hero, a grid of eight thumbnails, anything where the video is
|
|
13761
14219
|
decoration rather than something to start.
|
|
13762
14220
|
|
|
14221
|
+
**It is for the pointer, and the bar's Play is for everyone else.** Both
|
|
14222
|
+
play the video, so a keyboard met two stops called "Play" one after the
|
|
14223
|
+
other and a screen reader read the same button twice. The large one is out
|
|
14224
|
+
of the tab order and hidden from assistive technology while the bar is
|
|
14225
|
+
drawn, which is whenever it is: it shows only while the video is not
|
|
14226
|
+
playing, and the bar does not fade then. A press on it leaves focus on the
|
|
14227
|
+
player, so the keys go on working once it has gone.
|
|
14228
|
+
|
|
13763
14229
|
A value rather than a boolean, so the resting state is the attribute's
|
|
13764
14230
|
absence: a boolean defaulting to on would have to be spelled as its own
|
|
13765
14231
|
negation. */
|
|
@@ -13777,6 +14243,14 @@ nothing in it says "press to watch".
|
|
|
13777
14243
|
behind a hero, a grid of eight thumbnails, anything where the video is
|
|
13778
14244
|
decoration rather than something to start.
|
|
13779
14245
|
|
|
14246
|
+
**It is for the pointer, and the bar's Play is for everyone else.** Both
|
|
14247
|
+
play the video, so a keyboard met two stops called "Play" one after the
|
|
14248
|
+
other and a screen reader read the same button twice. The large one is out
|
|
14249
|
+
of the tab order and hidden from assistive technology while the bar is
|
|
14250
|
+
drawn, which is whenever it is: it shows only while the video is not
|
|
14251
|
+
playing, and the bar does not fade then. A press on it leaves focus on the
|
|
14252
|
+
player, so the keys go on working once it has gone.
|
|
14253
|
+
|
|
13780
14254
|
A value rather than a boolean, so the resting state is the attribute's
|
|
13781
14255
|
absence: a boolean defaulting to on would have to be spelled as its own
|
|
13782
14256
|
negation. */
|
|
@@ -13811,17 +14285,69 @@ past the end is the one write the platform answers with an exception. */
|
|
|
13811
14285
|
};
|
|
13812
14286
|
|
|
13813
14287
|
export type HelixHeadlessVideoVueEvents = {
|
|
13814
|
-
/** The
|
|
14288
|
+
/** The media stopped loading before it finished, without an error. */
|
|
14289
|
+
abort: HelixHeadlessVideoElementEvent;
|
|
14290
|
+
/** Enough has loaded to start playing. */
|
|
14291
|
+
canplay: HelixHeadlessVideoElementEvent;
|
|
14292
|
+
/** Enough has loaded to play to the end without stopping, at the current rate. */
|
|
14293
|
+
canplaythrough: HelixHeadlessVideoElementEvent;
|
|
14294
|
+
/** The duration changed, which it does once the metadata is in. */
|
|
14295
|
+
durationchange: HelixHeadlessVideoElementEvent;
|
|
14296
|
+
/** The media was reset, as when `src` changes. */
|
|
14297
|
+
emptied: HelixHeadlessVideoElementEvent;
|
|
14298
|
+
/** The video reached its end. */
|
|
13815
14299
|
ended: HelixHeadlessVideoElementEvent;
|
|
14300
|
+
/** The source could not be loaded or played. The player shows `error-label` as well. */
|
|
14301
|
+
error: HelixHeadlessVideoElementEvent;
|
|
13816
14302
|
/** The next video was requested. Load it in response. */
|
|
13817
14303
|
"helix-next": HelixHeadlessVideoHelixNextElementEvent;
|
|
13818
14304
|
/** The previous video was requested. Load it in response. */
|
|
13819
14305
|
"helix-previous": HelixHeadlessVideoHelixPreviousElementEvent;
|
|
13820
|
-
/**
|
|
14306
|
+
/** The frame at the current position has loaded. */
|
|
14307
|
+
loadeddata: HelixHeadlessVideoElementEvent;
|
|
14308
|
+
/** The duration and the size of the video are known. */
|
|
14309
|
+
loadedmetadata: HelixHeadlessVideoElementEvent;
|
|
14310
|
+
/** The video started looking for its media. */
|
|
14311
|
+
loadstart: HelixHeadlessVideoElementEvent;
|
|
14312
|
+
/** Playback paused. */
|
|
13821
14313
|
pause: HelixHeadlessVideoElementEvent;
|
|
13822
|
-
/** Playback
|
|
14314
|
+
/** Playback was asked to start. */
|
|
13823
14315
|
play: HelixHeadlessVideoElementEvent;
|
|
13824
|
-
|
|
14316
|
+
/** Playback started, or started again after waiting for data. */
|
|
14317
|
+
playing: HelixHeadlessVideoElementEvent;
|
|
14318
|
+
/** More of the media has downloaded. */
|
|
14319
|
+
progress: HelixHeadlessVideoElementEvent;
|
|
14320
|
+
/** The playback rate changed. Read `playbackRate`. */
|
|
14321
|
+
ratechange: HelixHeadlessVideoElementEvent;
|
|
14322
|
+
/** The video's own width or height changed. Read `videoWidth` and `videoHeight`. */
|
|
14323
|
+
resize: HelixHeadlessVideoElementEvent;
|
|
14324
|
+
/** A move to a new position finished. */
|
|
14325
|
+
seeked: HelixHeadlessVideoElementEvent;
|
|
14326
|
+
/** A move to a new position started. */
|
|
14327
|
+
seeking: HelixHeadlessVideoElementEvent;
|
|
14328
|
+
/** The browser is trying to load more data and none is arriving. */
|
|
14329
|
+
stalled: HelixHeadlessVideoElementEvent;
|
|
14330
|
+
/** Loading paused on purpose, as when `preload` asks for no more. */
|
|
14331
|
+
suspend: HelixHeadlessVideoElementEvent;
|
|
14332
|
+
/** The position changed. Read `currentTime`. */
|
|
14333
|
+
timeupdate: HelixHeadlessVideoElementEvent;
|
|
14334
|
+
/** The volume or the mute changed. Read `volume` and `muted`. */
|
|
14335
|
+
volumechange: HelixHeadlessVideoElementEvent;
|
|
14336
|
+
/** Playback stopped to wait for more data. */
|
|
14337
|
+
waiting: HelixHeadlessVideoElementEvent;
|
|
14338
|
+
};
|
|
14339
|
+
|
|
14340
|
+
/** `HelixHeadlessVirtualList` component event */
|
|
14341
|
+
export type HelixHeadlessVirtualListElementEvent<E = Event> = TypedEvent<
|
|
14342
|
+
HelixHeadlessVirtualList,
|
|
14343
|
+
E
|
|
14344
|
+
>;
|
|
14345
|
+
/** `helix-load-more` event type */
|
|
14346
|
+
export type HelixHeadlessVirtualListHelixLoadMoreElementEvent =
|
|
14347
|
+
HelixHeadlessVirtualListElementEvent<HelixLoadMoreEvent>;
|
|
14348
|
+
/** `helix-range-change` event type */
|
|
14349
|
+
export type HelixHeadlessVirtualListHelixRangeChangeElementEvent =
|
|
14350
|
+
HelixHeadlessVirtualListElementEvent<HelixRangeChangeEvent>;
|
|
13825
14351
|
|
|
13826
14352
|
export type HelixHeadlessVirtualListVueProps = {
|
|
13827
14353
|
/** The height of one row, in pixels, used to find the row at a scroll offset.
|
|
@@ -13829,7 +14355,8 @@ export type HelixHeadlessVirtualListVueProps = {
|
|
|
13829
14355
|
An estimate rather than a measurement while `measured` is off, which is
|
|
13830
14356
|
right whenever the rows really are one height and is the cheaper of the two. */
|
|
13831
14357
|
estimate?: (HelixHeadlessVirtualList["estimate"]) | undefined;
|
|
13832
|
-
/** The id of the script element that holds the
|
|
14358
|
+
/** The id of the script element that holds the items as JSON. `items` wins
|
|
14359
|
+
where both are set. */
|
|
13833
14360
|
for?: (HelixHeadlessVirtualList["for"]) | undefined;
|
|
13834
14361
|
/** The list's name, read by screen readers, because only some of its rows
|
|
13835
14362
|
are rendered at a time.
|
|
@@ -13846,9 +14373,27 @@ disagree with itself; measuring is what a set of genuinely different
|
|
|
13846
14373
|
heights needs and costs a read of each row as it renders. A list of
|
|
13847
14374
|
one-line rows should leave this alone. */
|
|
13848
14375
|
measured?: (HelixHeadlessVirtualList["measured"]) | undefined;
|
|
14376
|
+
/** The items, as an array. Set it as a property.
|
|
14377
|
+
|
|
14378
|
+
Each item is drawn by `renderItem`, or into the row `<template>` by its
|
|
14379
|
+
fields. A new array draws the new rows, so replace the array to change it.
|
|
14380
|
+
Left unset, the list reads the script that `for` names. */
|
|
14381
|
+
items?: (HelixHeadlessVirtualList["items"]) | undefined;
|
|
14382
|
+
/** Draws one item into its row, given the item and its index. Set it as a
|
|
14383
|
+
property.
|
|
14384
|
+
|
|
14385
|
+
It returns what Lit renders: a template from `html`, a string, or a DOM
|
|
14386
|
+
node. The list wraps each result in a `<div>` that carries the row's role
|
|
14387
|
+
and place in the set. Where it is unset, the row `<template>` is used. */
|
|
14388
|
+
renderItem?: (HelixHeadlessVirtualList["renderItem"]) | undefined;
|
|
13849
14389
|
};
|
|
13850
14390
|
|
|
13851
|
-
export type HelixHeadlessVirtualListVueEvents = {
|
|
14391
|
+
export type HelixHeadlessVirtualListVueEvents = {
|
|
14392
|
+
/** Fired when a reader comes within one screen of the last item, once for each length of the set. */
|
|
14393
|
+
"helix-load-more": HelixHeadlessVirtualListHelixLoadMoreElementEvent;
|
|
14394
|
+
/** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
|
|
14395
|
+
"helix-range-change": HelixHeadlessVirtualListHelixRangeChangeElementEvent;
|
|
14396
|
+
};
|
|
13852
14397
|
|
|
13853
14398
|
export type CustomCssProperties = {
|
|
13854
14399
|
/** The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high. */
|
|
@@ -13879,6 +14424,8 @@ export type CustomCssProperties = {
|
|
|
13879
14424
|
"--color-picker-swatch"?: (string) | undefined;
|
|
13880
14425
|
/** The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose. */
|
|
13881
14426
|
"--data-table-cell-align"?: (string) | undefined;
|
|
14427
|
+
/** How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it. */
|
|
14428
|
+
"--data-table-level"?: (string) | undefined;
|
|
13882
14429
|
/** The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it. */
|
|
13883
14430
|
"--data-table-template"?: (string) | undefined;
|
|
13884
14431
|
/** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
|
|
@@ -13921,6 +14468,10 @@ export type CustomCssProperties = {
|
|
|
13921
14468
|
"--chart-terminus-x"?: (string) | undefined;
|
|
13922
14469
|
/** Where a series' last reading sits vertically, as a percentage. Written by the component. */
|
|
13923
14470
|
"--chart-terminus-y"?: (string) | undefined;
|
|
14471
|
+
/** The number of the first row, written where `start` or `reversed` moves it. */
|
|
14472
|
+
"--list-first"?: (string) | undefined;
|
|
14473
|
+
/** What each row adds to the number before it: `1`, or `-1` where `reversed`. */
|
|
14474
|
+
"--list-step"?: (string) | undefined;
|
|
13924
14475
|
/** How far the needle turns to point north, as an angle. The frame writes it from `bearing`. */
|
|
13925
14476
|
"--map-needle-turn"?: (string) | undefined;
|
|
13926
14477
|
/** Where the panel starts, measured from the bar above it. */
|
|
@@ -13951,6 +14502,10 @@ export type CustomCssProperties = {
|
|
|
13951
14502
|
"--chart-point-y"?: (string) | undefined;
|
|
13952
14503
|
/** A tick's position along its axis, as a percentage. The component writes it. */
|
|
13953
14504
|
"--chart-tick"?: (string) | undefined;
|
|
14505
|
+
/** How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page. */
|
|
14506
|
+
"--scroll-area-scroll-fraction"?: (string) | undefined;
|
|
14507
|
+
/** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
|
|
14508
|
+
"--scroll-area-thumb-fraction"?: (string) | undefined;
|
|
13954
14509
|
/** The value as a fraction of the range, 0 to 1. */
|
|
13955
14510
|
"--slider-fraction"?: (string) | undefined;
|
|
13956
14511
|
/** Where a range's filled span starts, as a fraction of the track, 0 to 1. */
|
|
@@ -13985,7 +14540,7 @@ export type CustomCssProperties = {
|
|
|
13985
14540
|
// Note: Some tooling expects this augmentation under "@vue/runtime-core", while
|
|
13986
14541
|
// other docs/examples use "vue". We emit both for compatibility.
|
|
13987
14542
|
export interface WcToolkitVueGlobalComponents {
|
|
13988
|
-
/** Holds its own open state. Used alone, outside an accordion, it works as a disclosure. The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3. Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML. Closed content has both 'hidden' and 'inert'. 'hidden' collapses it when no stylesheet is loaded. 'inert' keeps it out of the tab order and the accessibility tree after the styled tier's 'display' overrides 'hidden'. */
|
|
14543
|
+
/** Holds its own open state. Used alone, outside an accordion, it works as a disclosure. The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3. Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML. Closed content has both 'hidden' and 'inert'. 'hidden' collapses it when no stylesheet is loaded. 'inert' keeps it out of the tab order and the accessibility tree after the styled tier's 'display' overrides 'hidden'. Set 'hidden-until-found' and the browser's find in page searches a closed section too: a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. The content is then 'hidden="until-found"' while closed, and not 'inert', since an inert region is never searched. */
|
|
13989
14544
|
"helix-headless-accordion-item": DefineCustomElement<
|
|
13990
14545
|
HelixHeadlessAccordionItem,
|
|
13991
14546
|
HelixHeadlessAccordionItemVueProps,
|
|
@@ -13997,13 +14552,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
13997
14552
|
HelixHeadlessAccordionVueProps,
|
|
13998
14553
|
HelixHeadlessAccordionVueEvents
|
|
13999
14554
|
>;
|
|
14000
|
-
/** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed. The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load. The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later, so the message is not in the page twice. When the announcement is in the served HTML, the region stays empty and nothing is read out. The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading. */
|
|
14555
|
+
/** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed. The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load. The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later, so the message is not in the page twice. When the announcement is in the served HTML, the region stays empty and nothing is read out. The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading. Set 'duration' to dismiss it after a time. The clock stops while the pointer or focus is on the announcement, and continues from what was left, so a reader partway through is not cut off. When the time runs out it sends 'helix-dismiss', as the button does. */
|
|
14001
14556
|
"helix-headless-announcement": DefineCustomElement<
|
|
14002
14557
|
HelixHeadlessAnnouncement,
|
|
14003
14558
|
HelixHeadlessAnnouncementVueProps,
|
|
14004
14559
|
HelixHeadlessAnnouncementVueEvents
|
|
14005
14560
|
>;
|
|
14006
|
-
/** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration. The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'. The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container. */
|
|
14561
|
+
/** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration. The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'. The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container. The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
|
|
14007
14562
|
"helix-headless-app-header": DefineCustomElement<
|
|
14008
14563
|
HelixHeadlessAppHeader,
|
|
14009
14564
|
HelixHeadlessAppHeaderVueProps,
|
|
@@ -14051,7 +14606,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14051
14606
|
HelixHeadlessBreadcrumbVueProps,
|
|
14052
14607
|
HelixHeadlessBreadcrumbVueEvents
|
|
14053
14608
|
>;
|
|
14054
|
-
/** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name. The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers. The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself. The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear. */
|
|
14609
|
+
/** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name. The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers. The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself. The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear. A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail. */
|
|
14055
14610
|
"helix-headless-breadcrumbs": DefineCustomElement<
|
|
14056
14611
|
HelixHeadlessBreadcrumbs,
|
|
14057
14612
|
HelixHeadlessBreadcrumbsVueProps,
|
|
@@ -14099,25 +14654,25 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14099
14654
|
HelixHeadlessCardVueProps,
|
|
14100
14655
|
HelixHeadlessCardVueEvents
|
|
14101
14656
|
>;
|
|
14102
|
-
/** The track is a scroll container with scroll snapping, so dragging, trackpad swipes, and the browser's momentum scrolling all work. The controls scroll the track. Slides are your own elements, and the carousel writes nothing onto them. It renders a pane for each slide with 'role="group"', 'aria-roledescription="slide"', and a name that gives the slide's position in the set, and assigns the slide into it. A screen reader announces the position, and a slide that is a link stays a link. See 'assign'. **Rotation stops on focus and on hover, and stays stopped** until the user starts it again, as the APG requires. The rotation control is labeled with the action it performs and is first in the tab order. Rotation goes on from the last slide to the first, with or without 'loop', which is about the reader's own moves. A move the reader makes is announced, the slide's position read from a polite live region. While the carousel rotates the region is off, so a screen reader is not interrupted every few seconds. The indicators are one tab stop. The arrow keys along the track move between them, Up and Down on a vertical carousel, and Home and End go to the first and the last. Without 'loop', Previous on the first slide and Next on the last are marked 'aria-disabled'. */
|
|
14657
|
+
/** The track is a scroll container with scroll snapping, so dragging, trackpad swipes, and the browser's momentum scrolling all work. The controls scroll the track. Slides are your own elements, and the carousel writes nothing onto them. It renders a pane for each slide with 'role="group"', 'aria-roledescription="slide"', and a name that gives the slide's position in the set, and assigns the slide into it. A screen reader announces the position, and a slide that is a link stays a link. See 'assign'. **Rotation stops on focus and on hover, and stays stopped** until the user starts it again, as the APG requires. The rotation control is labeled with the action it performs and is first in the tab order. Rotation goes on from the last slide to the first, with or without 'loop', which is about the reader's own moves. A move the reader makes is announced, the slide's position read from a polite live region. While the carousel rotates the region is off, so a screen reader is not interrupted every few seconds. The indicators are one tab stop. The arrow keys along the track move between them, Up and Down on a vertical carousel, and Home and End go to the first and the last. Without 'loop', Previous on the first slide and Next on the last are marked 'aria-disabled'. **'mouse-drag' lets a mouse drag the track**, which otherwise only a touch screen, a trackpad, or the scroll wheel moves. The drag follows the pointer with snapping off and settles on the nearest slide when it is let go, and that move is announced and refusable like a press of Next. A link in a slide is not followed at the end of a drag. The glyphs on Previous and Next can be replaced by slotting an icon of your own into 'previous-icon' and 'next-icon'. */
|
|
14103
14658
|
"helix-headless-carousel": DefineCustomElement<
|
|
14104
14659
|
HelixHeadlessCarousel,
|
|
14105
14660
|
HelixHeadlessCarouselVueProps,
|
|
14106
14661
|
HelixHeadlessCarouselVueEvents
|
|
14107
14662
|
>;
|
|
14108
|
-
/** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript. By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer. The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed. */
|
|
14663
|
+
/** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript. By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer. The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed. **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form. **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
|
|
14109
14664
|
"helix-headless-chat-composer": DefineCustomElement<
|
|
14110
14665
|
HelixHeadlessChatComposer,
|
|
14111
14666
|
HelixHeadlessChatComposerVueProps,
|
|
14112
14667
|
HelixHeadlessChatComposerVueEvents
|
|
14113
14668
|
>;
|
|
14114
|
-
/** A chat message carries its state: sending, arrived, streaming, or failed. A failed message has a retry control in the message, which fires 'helix-send'. 'streaming' is the state the others are arranged around. A streaming message changes height on every frame, so it is marked 'aria-busy' while it arrives and announced once when it settles. A screen reader cannot follow a stream read out character by character. */
|
|
14669
|
+
/** A chat message carries its state: sending, arrived, streaming, or failed. A failed message has a retry control in the message, which fires 'helix-send'. 'streaming' is the state the others are arranged around. A streaming message changes height on every frame, so it is marked 'aria-busy' while it arrives and announced once when it settles. A screen reader cannot follow a stream read out character by character. A screen reader names the turn by its author and its time, such as "You, 2 minutes ago". The author is 'author-label', or "You" for 'me', or the 'author' itself where it is a name; give a turn by 'them' an 'author-label' to name it. The chat it sits in holds the sentence and the word for 'me', so a page in another language sets them once there. The time moves on by itself, so "now" becomes "1 minute ago" while the page is open. */
|
|
14115
14670
|
"helix-headless-chat-message": DefineCustomElement<
|
|
14116
14671
|
HelixHeadlessChatMessage,
|
|
14117
14672
|
HelixHeadlessChatMessageVueProps,
|
|
14118
14673
|
HelixHeadlessChatMessageVueEvents
|
|
14119
14674
|
>;
|
|
14120
|
-
/** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel. The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it. With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen. The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own. A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, pass the turns as children. */
|
|
14675
|
+
/** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel. The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it. With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen. The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own. **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. Show the other side's typing in the 'status' slot. A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, pass the turns as children. */
|
|
14121
14676
|
"helix-headless-chat": DefineCustomElement<
|
|
14122
14677
|
HelixHeadlessChat,
|
|
14123
14678
|
HelixHeadlessChatVueProps,
|
|
@@ -14177,7 +14732,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14177
14732
|
HelixHeadlessCopyButtonVueProps,
|
|
14178
14733
|
HelixHeadlessCopyButtonVueEvents
|
|
14179
14734
|
>;
|
|
14180
|
-
/** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. To act on a single row, such as opening it, put a link or a button in a cell. The grid is one tab stop, and the arrow keys move between its cells, the headings included: - The arrow keys move one cell, and Home and End to the ends of the row. - Control with Home or End moves to the first or the last cell of the grid. - Page Up and Page Down move by the rows that fit in view. - Enter or F2 moves into the cell's controls, and Escape moves back to the cell. Tab moves between the controls of one cell. - Enter or Space on a sortable heading sorts by it, and Space on a row of a 'selectable' table selects it. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
|
|
14735
|
+
/** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be. '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20"> <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column> <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> ''' For a short table written out by hand, use 'Table', which takes rows as markup. Sort and filter apply to the whole set, including the rows on other pages. **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values. 'selectable' adds a column of checkboxes, keyed on 'row-key': - A row is selected by its key, so the selection survives a sort, a filter, and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox' uses for a multiple choice. As with 'sort', writing it applies the selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row last chosen. To act on a single row, such as opening it, put a link or a button in a cell. The grid is one tab stop, and the arrow keys move between its cells, the headings included: - The arrow keys move one cell, and Home and End to the ends of the row. - Control with Home or End moves to the first or the last cell of the grid. - Page Up and Page Down move by the rows that fit in view. - Enter or F2 moves into the cell's controls, and Escape moves back to the cell. Tab moves between the controls of one cell. - Enter or Space on a sortable heading sorts by it, and Space on a row of a 'selectable' table selects it. - In a 'selectable' table, Shift with Up or Down selects the rows it moves across, Shift with Space selects every row from the one last chosen, and Control or Command with A selects every row. - Typing letters moves to the next row whose row header starts with them. Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows. **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open. 'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way. The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away. People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order. 'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you. 'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
|
|
14181
14736
|
"helix-headless-data-table": DefineCustomElement<
|
|
14182
14737
|
HelixHeadlessDataTable,
|
|
14183
14738
|
HelixHeadlessDataTableVueProps,
|
|
@@ -14195,13 +14750,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14195
14750
|
HelixHeadlessDatePickerVueProps,
|
|
14196
14751
|
HelixHeadlessDatePickerVueEvents
|
|
14197
14752
|
>;
|
|
14198
|
-
/** Each pair is its own element: the label is the '<dt>' and the value its '<dd>', and a screen reader hears them together however the list lays them out. The value is the default slot, because it varies and is often more than text, such as a tag, an avatar, or a link. The label is almost always text, so it is also a property. */
|
|
14753
|
+
/** Each pair is its own element: the label is the '<dt>' and the value its '<dd>', and a screen reader hears them together however the list lays them out. The value is the default slot, because it varies and is often more than text, such as a tag, an avatar, or a link. The label is almost always text, so it is also a property. **For a label with several values, write each value as a '<dd>'**, such as the authors of a paper. The item then puts your '<dd>' elements after its '<dt>' in place of its own, so a screen reader hears one term and each of its descriptions, as in a native '<dl>'. A server cannot see your elements, so the served item wraps them in its own '<dd>' until it runs. */
|
|
14199
14754
|
"helix-headless-description-list-item": DefineCustomElement<
|
|
14200
14755
|
HelixHeadlessDescriptionListItem,
|
|
14201
14756
|
HelixHeadlessDescriptionListItemVueProps,
|
|
14202
14757
|
HelixHeadlessDescriptionListItemVueEvents
|
|
14203
14758
|
>;
|
|
14204
|
-
/** Renders a '<dl>', with each item's label as a '<dt>' and its value as a '<dd>', for panels such as "Owner: Ada, Region: us-east, Created: 3 days ago". A screen reader announces which label goes with which value and how many pairs there are. **Each item renders its own term and description**, and the list takes the items through its slot. The accessibility tree is built from the flattened tree, so the pairs appear inside the list. Measured in Chromium, the result matches a plain '<dl>' with the same content node for node, both with a slotted label and with an item set to 'display: contents'. */
|
|
14759
|
+
/** Renders a '<dl>', with each item's label as a '<dt>' and its value as a '<dd>', for panels such as "Owner: Ada, Region: us-east, Created: 3 days ago". A screen reader announces which label goes with which value and how many pairs there are. **Each item renders its own term and description**, and the list takes the items through its slot. The accessibility tree is built from the flattened tree, so the pairs appear inside the list. Measured in Chromium, the result matches a plain '<dl>' with the same content node for node, both with a slotted label and with an item set to 'display: contents'. **A named list is a named group.** A '<dl>' takes no name in ARIA 1.2, so the list becomes a group around it when it has 'label', 'aria-label' or 'aria-labelledby', and the name lands on the group. Unnamed, the host adds nothing to the tree. */
|
|
14205
14760
|
"helix-headless-description-list": DefineCustomElement<
|
|
14206
14761
|
HelixHeadlessDescriptionList,
|
|
14207
14762
|
HelixHeadlessDescriptionListVueProps,
|
|
@@ -14237,7 +14792,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14237
14792
|
HelixHeadlessDrilldownItemVueProps,
|
|
14238
14793
|
HelixHeadlessDrilldownItemVueEvents
|
|
14239
14794
|
>;
|
|
14240
|
-
/** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one. It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller. Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'. A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares. The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
|
|
14795
|
+
/** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one. It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller. Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'. A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares. After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, so a stylesheet can slide the new page in from the side the reader is going. The styled tier does, and holds still under reduced motion. The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
|
|
14241
14796
|
"helix-headless-drilldown": DefineCustomElement<
|
|
14242
14797
|
HelixHeadlessDrilldown,
|
|
14243
14798
|
HelixHeadlessDrilldownVueProps,
|
|
@@ -14357,13 +14912,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14357
14912
|
HelixHeadlessLineChartVueProps,
|
|
14358
14913
|
HelixHeadlessLineChartVueEvents
|
|
14359
14914
|
>;
|
|
14360
|
-
/** Provides layout and semantics. The row is a target only when you set 'href'. **'href' makes the row a link.** The component wraps the leading content, the label, and the description in an '<a part="link">' inside the row, as 'Tree.Item' does. An anchor of your own cannot wrap slots it does not own. With the anchor, the row is a target, Enter follows it, middle click opens a new tab, the status bar shows the destination, and all of it works before JavaScript runs. **The 'end' slot sits beside the link, outside it**, so a button or a menu there is a control of its own: a click on it does not follow the link, and its name is not part of the link's. Client-side routing needs your own handling. A router cannot render its anchor inside the shadow root, so to navigate without a page load, intercept the click: the anchor is in 'composedPath()'. Handle only a plain primary click, so native gestures keep working. **For a row that holds controls and is not a destination, use 'data-list-item'.** With 'href' unset, the row is not a link. */
|
|
14915
|
+
/** Provides layout and semantics. The row is a target only when you set 'href'. **'href' makes the row a link.** The component wraps the leading content, the label, and the description in an '<a part="link">' inside the row, as 'Tree.Item' does. An anchor of your own cannot wrap slots it does not own. With the anchor, the row is a target, Enter follows it, middle click opens a new tab, the status bar shows the destination, and all of it works before JavaScript runs. **The 'end' slot sits beside the link, outside it**, so a button or a menu there is a control of its own: a click on it does not follow the link, and its name is not part of the link's. Client-side routing needs your own handling. A router cannot render its anchor inside the shadow root, so to navigate without a page load, intercept the click: the anchor is in 'composedPath()'. Handle only a plain primary click, so native gestures keep working. **For a row that holds controls and is not a destination, use 'data-list-item'.** With 'href' unset, the row is not a link. 'current' marks the row a reader is on, such as the page in a list of pages, with 'aria-current' on its link, or on the row where it has none. **In a list with 'selection-mode', the row is a row of a grid.** The list gives it its role, its place in the one tab stop and, where the list selects, whether it is selected. Its link leaves the tab order there, and Enter follows it from the row. */
|
|
14361
14916
|
"helix-headless-list-item": DefineCustomElement<
|
|
14362
14917
|
HelixHeadlessListItem,
|
|
14363
14918
|
HelixHeadlessListItemVueProps,
|
|
14364
14919
|
HelixHeadlessListItemVueEvents
|
|
14365
14920
|
>;
|
|
14366
|
-
/** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7". */
|
|
14921
|
+
/** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7". **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. Up and Down move between rows, Home and End go to the first and the last, and a typed letter goes to the next row starting with it. Left and Right move between the row and the controls in its 'end' slot. 'single' selects one row at a time and 'multiple' any number, with Space or a press, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. Enter acts on the row: it follows the row's link, or sends 'helix-action' from the row. 'none' selects nothing, so a press acts too. A 'disabled' row is passed over. **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order. 'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
|
|
14367
14922
|
"helix-headless-list": DefineCustomElement<
|
|
14368
14923
|
HelixHeadlessList,
|
|
14369
14924
|
HelixHeadlessListVueProps,
|
|
@@ -14429,7 +14984,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14429
14984
|
HelixHeadlessMapRasterVueProps,
|
|
14430
14985
|
HelixHeadlessMapRasterVueEvents
|
|
14431
14986
|
>;
|
|
14432
|
-
/** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself. The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north. Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way. The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you. Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate. Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it. Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off. Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
|
|
14987
|
+
/** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself. The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north. Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way. The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you. Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate. Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off. Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
|
|
14433
14988
|
"helix-headless-map": DefineCustomElement<
|
|
14434
14989
|
HelixHeadlessMap,
|
|
14435
14990
|
HelixHeadlessMapVueProps,
|
|
@@ -14447,31 +15002,37 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14447
15002
|
HelixHeadlessMapTerrainVueProps,
|
|
14448
15003
|
HelixHeadlessMapTerrainVueEvents
|
|
14449
15004
|
>;
|
|
14450
|
-
/** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands. It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write. It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. */
|
|
15005
|
+
/** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands. It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write. It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section. When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does: the one opening is ':state(from-start)' or ':state(from-end)', by where the one closing sits in the bar, and the one closing is ':state(to-start)' or ':state(to-end)'. A stylesheet slides them on that. Put megamenus in a 'Navigation' with 'arrows' and the arrow keys move between their triggers. */
|
|
14451
15006
|
"helix-headless-megamenu": DefineCustomElement<
|
|
14452
15007
|
HelixHeadlessMegamenu,
|
|
14453
15008
|
HelixHeadlessMegamenuVueProps,
|
|
14454
15009
|
HelixHeadlessMegamenuVueEvents
|
|
14455
15010
|
>;
|
|
14456
|
-
/** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command. The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'. Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself. The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. */
|
|
15011
|
+
/** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command. The role follows the kind. A row with 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'. Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself. The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. 'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot. */
|
|
14457
15012
|
"helix-headless-menu-item": DefineCustomElement<
|
|
14458
15013
|
HelixHeadlessMenuItem,
|
|
14459
15014
|
HelixHeadlessMenuItemVueProps,
|
|
14460
15015
|
HelixHeadlessMenuItemVueEvents
|
|
14461
15016
|
>;
|
|
14462
|
-
/** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'. Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event. Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover. The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. */
|
|
15017
|
+
/** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'. Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event. Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover. The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch. Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider announced>' is a separator a screen reader announces. With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. */
|
|
14463
15018
|
"helix-headless-menu": DefineCustomElement<
|
|
14464
15019
|
HelixHeadlessMenu,
|
|
14465
15020
|
HelixHeadlessMenuVueProps,
|
|
14466
15021
|
HelixHeadlessMenuVueEvents
|
|
14467
15022
|
>;
|
|
15023
|
+
/** The rows inside it are the menu's rows: the arrow keys and typed letters move through them with the rest, and a set of 'exclusive' rows is still the run of them next to each other. The section is a 'group' named by its heading, as React Aria's menu section is, so a screen reader says which group a row is in as it arrives. A section goes on the menu's first page. A submenu's page takes rows and dividers. */
|
|
15024
|
+
"helix-headless-menu-section": DefineCustomElement<
|
|
15025
|
+
HelixHeadlessMenuSection,
|
|
15026
|
+
HelixHeadlessMenuSectionVueProps,
|
|
15027
|
+
HelixHeadlessMenuSectionVueEvents
|
|
15028
|
+
>;
|
|
14468
15029
|
/** A meter shows a level within a range. Use 'Progress' to show how far along a task is. A progress bar starts empty and ends full, and full is always the good end. For a meter, which end is good depends on what is measured. There is no 'indeterminate', because a meter always has a value. **Set 'low', 'high', and 'optimum'**, as defined in the HTML specification. 'low' and 'high' divide the range into a low band, a middle band, and a high band. 'optimum' sets the preferred band. The band next to it is fair, and the band two away is poor. */
|
|
14469
15030
|
"helix-headless-meter": DefineCustomElement<
|
|
14470
15031
|
HelixHeadlessMeter,
|
|
14471
15032
|
HelixHeadlessMeterVueProps,
|
|
14472
15033
|
HelixHeadlessMeterVueEvents
|
|
14473
15034
|
>;
|
|
14474
|
-
/** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar. **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root. The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins. Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar. */
|
|
15035
|
+
/** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar. **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root. The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins. Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar. Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel. */
|
|
14475
15036
|
"helix-headless-navigation": DefineCustomElement<
|
|
14476
15037
|
HelixHeadlessNavigation,
|
|
14477
15038
|
HelixHeadlessNavigationVueProps,
|
|
@@ -14489,7 +15050,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14489
15050
|
HelixHeadlessNotificationVueProps,
|
|
14490
15051
|
HelixHeadlessNotificationVueEvents
|
|
14491
15052
|
>;
|
|
14492
|
-
/** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything. The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell. Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting. **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it. */
|
|
15053
|
+
/** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything. The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell. Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting. **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it. **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. The button is hidden while the feed is loading. */
|
|
14493
15054
|
"helix-headless-notifications": DefineCustomElement<
|
|
14494
15055
|
HelixHeadlessNotifications,
|
|
14495
15056
|
HelixHeadlessNotificationsVueProps,
|
|
@@ -14501,7 +15062,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14501
15062
|
HelixHeadlessNumberInputVueProps,
|
|
14502
15063
|
HelixHeadlessNumberInputVueEvents
|
|
14503
15064
|
>;
|
|
14504
|
-
/** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible. Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set. The tree is one tab stop. Up and Down move between rows, Right opens a branch or moves into it, Left closes it or moves to its parent, and Home and End move to the first and last rows. Typing moves to the next row whose key starts with what was typed, and '*' opens every branch beside the active row. Focus stays on the tree, and 'aria-activedescendant' marks the active row. Each row carries its real level, position, and set size, including in a windowed tree. A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'. The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item. 'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
|
|
15065
|
+
/** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible. Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set. The tree is one tab stop. Up and Down move between rows, Right opens a branch or moves into it, Left closes it or moves to its parent, and Home and End move to the first and last rows. Typing moves to the next row whose key starts with what was typed, and '*' opens every branch beside the active row. Focus stays on the tree, and 'aria-activedescendant' marks the active row. Each row carries its real level, position, and set size, including in a windowed tree. 'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch. 'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'result-label' and 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree. A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'. The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item. 'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
|
|
14505
15066
|
"helix-headless-object-inspector": DefineCustomElement<
|
|
14506
15067
|
HelixHeadlessObjectInspector,
|
|
14507
15068
|
HelixHeadlessObjectInspectorVueProps,
|
|
@@ -14519,7 +15080,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14519
15080
|
HelixHeadlessOptionVueProps,
|
|
14520
15081
|
HelixHeadlessOptionVueEvents
|
|
14521
15082
|
>;
|
|
14522
|
-
/** Outline is a table of contents for a document. 'Navigation' does the same job for a site. The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page. Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears a nested
|
|
15083
|
+
/** Outline is a table of contents for a document. 'Navigation' does the same job for a site. The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page. Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level. A heading slotted into 'heading' names the navigation, in place of 'label'. The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
|
|
14523
15084
|
"helix-headless-outline": DefineCustomElement<
|
|
14524
15085
|
HelixHeadlessOutline,
|
|
14525
15086
|
HelixHeadlessOutlineVueProps,
|
|
@@ -14531,7 +15092,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14531
15092
|
HelixHeadlessPaginationVueProps,
|
|
14532
15093
|
HelixHeadlessPaginationVueEvents
|
|
14533
15094
|
>;
|
|
14534
|
-
/** A separate element that you place beside 'Pagination', like 'Pagination.Summary', so you choose the direction and order of your footer. It uses 'Select', so it matches a table's filter dropdowns in the same footer, both open and closed. The caret is 'Select''s, so it follows 'currentColor', and the label is a real '<label for>' pointing at the trigger's id. The label sits on the same row as the select. 'Select''s host is a column, and an outer-tree rule overrides a ':host' rule, so the row layout needs no property on 'Select' and nothing added to your markup. An empty 'sizes' renders nothing and does not fall back to the built-in list. 'Pagination' does the same with a single page, and both report it through 'ElementInternals.states'. 'value' is the current size, and 'default-value' is the size from the markup. Changing it dispatches 'helix-before-change', and then 'input' and 'change' once the size has moved, as a native '<select>' sends them together. Re-querying and returning to page one is up to you, because only you know whether the current position should be kept. */
|
|
15095
|
+
/** A separate element that you place beside 'Pagination', like 'Pagination.Summary', so you choose the direction and order of your footer. It uses 'Select', so it matches a table's filter dropdowns in the same footer, both open and closed. The caret is 'Select''s, so it follows 'currentColor', and the label is a real '<label for>' pointing at the trigger's id. The label sits on the same row as the select. 'Select''s host is a column, and an outer-tree rule overrides a ':host' rule, so the row layout needs no property on 'Select' and nothing added to your markup. An empty 'sizes' renders nothing and does not fall back to the built-in list. 'Pagination' does the same with a single page, and both report it through 'ElementInternals.states'. 'value' is the current size, and 'default-value' is the size from the markup. Changing it dispatches 'helix-before-change', and then 'input' and 'change' once the size has moved, as a native '<select>' sends them together. Re-querying and returning to page one is up to you, because only you know whether the current position should be kept. It takes part in a form. Give it a 'name' and the size in force is submitted under that name, so a 'GET' form carries it in the address beside the page. A form reset returns it to 'default-value', and 'disabled', or a disabled '<fieldset>' around it, turns the select off. */
|
|
14535
15096
|
"helix-headless-pagination-size": DefineCustomElement<
|
|
14536
15097
|
HelixHeadlessPaginationSize,
|
|
14537
15098
|
HelixHeadlessPaginationSizeVueProps,
|
|
@@ -14597,7 +15158,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14597
15158
|
HelixHeadlessScatterChartVueProps,
|
|
14598
15159
|
HelixHeadlessScatterChartVueEvents
|
|
14599
15160
|
>;
|
|
14600
|
-
/** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state. Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'. While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop. It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region". */
|
|
15161
|
+
/** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state. Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'. While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop. It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region". **'scrollbars' draws scrollbars of its own** in place of the browser's: a 'scrollbar' part for each axis that scrolls, a 'thumb' in each, and a 'corner' where the two meet. They are for the pointer. The thumb drags, and a press on the track moves the thumb to the press. The viewport stays the tab stop and the region a screen reader reads, and the scrollbars are hidden from screen readers. On the headless tier your stylesheet sizes and places them, hides the browser's own with 'scrollbar-width: none' on the viewport, and draws the thumb from the two custom properties written on each scrollbar. An axis whose 'overflow' is 'hidden' gets no scrollbar. The viewport's 'scroll' and 'scrollend' are sent again from the host, which is the element you hold. In React, bind them with 'onScroll' and 'onScrollEnd'. */
|
|
14601
15162
|
"helix-headless-scroll-area": DefineCustomElement<
|
|
14602
15163
|
HelixHeadlessScrollArea,
|
|
14603
15164
|
HelixHeadlessScrollAreaVueProps,
|
|
@@ -14663,13 +15224,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14663
15224
|
HelixHeadlessStatVueProps,
|
|
14664
15225
|
HelixHeadlessStatVueEvents
|
|
14665
15226
|
>;
|
|
14666
|
-
/** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'. 'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children. */
|
|
15227
|
+
/** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'. 'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children. 'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. To check a stage before a reader leaves it, cancel 'helix-before-activate' while it is not valid. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons. */
|
|
14667
15228
|
"helix-headless-steps": DefineCustomElement<
|
|
14668
15229
|
HelixHeadlessSteps,
|
|
14669
15230
|
HelixHeadlessStepsVueProps,
|
|
14670
15231
|
HelixHeadlessStepsVueEvents
|
|
14671
15232
|
>;
|
|
14672
|
-
/** Only the step's name is a button. The marker is 'aria-hidden' decoration, so it is outside the button. The name uses 'Button', so the hover wash, the focus ring, and the disabled style come from 'Button'. Every step can be pressed and fires 'helix-select'. To stop the user from moving to a step, set 'disabled' on it. The marker is a slot, and its fallback shows the step's state: a check for a finished stage, a target for the current stage, and an empty ring for a stage not reached yet. Only that one mark is rendered, so the accessibility tree has no hidden marks. The half lines on each side of the mark are drawn on the step's '::before' and '::after' from properties the list sets, so the step renders no extra element for them. */
|
|
15233
|
+
/** Only the step's name is a button. The marker is 'aria-hidden' decoration, so it is outside the button. The name uses 'Button', so the hover wash, the focus ring, and the disabled style come from 'Button'. Every step can be pressed and fires 'helix-select'. To stop the user from moving to a step, set 'disabled' on it. The marker is a slot, and its fallback shows the step's state: a check for a finished stage, a target for the current stage, and an empty ring for a stage not reached yet. Only that one mark is rendered, so the accessibility tree has no hidden marks. The half lines on each side of the mark are drawn on the step's '::before' and '::after' from properties the list sets, so the step renders no extra element for them. A finished stage says so in words: the name's button is described by 'complete-label', "Complete" unless you translate it, and a stage that becomes complete while the page is open says it once in a polite live region. The current stage's button carries 'aria-current="step"', and only the button, so the state is said once, on the control. */
|
|
14673
15234
|
"helix-headless-step": DefineCustomElement<
|
|
14674
15235
|
HelixHeadlessStep,
|
|
14675
15236
|
HelixHeadlessStepVueProps,
|
|
@@ -14693,31 +15254,31 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14693
15254
|
HelixHeadlessTableColumnVueProps,
|
|
14694
15255
|
HelixHeadlessTableColumnVueEvents
|
|
14695
15256
|
>;
|
|
14696
|
-
/** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. A column with 'sortable' and a 'field' sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 'helix-sort' asks first, so you can refuse it and reorder the rows yourself. The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
|
|
15257
|
+
/** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else. A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid. A column with 'sortable' and a 'field' sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order. 'helix-sort' asks first, so you can refuse it and reorder the rows yourself. The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. 'selectable' adds a column of checkboxes. Each row is known by its 'value', and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. The checkbox in the heading selects every row. For a grid a reader moves through with the arrow keys, with typeahead and range selection, use 'DataTable'. To act on one row, put a link or a button in a cell. The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
|
|
14697
15258
|
"helix-headless-table": DefineCustomElement<
|
|
14698
15259
|
HelixHeadlessTable,
|
|
14699
15260
|
HelixHeadlessTableVueProps,
|
|
14700
15261
|
HelixHeadlessTableVueEvents
|
|
14701
15262
|
>;
|
|
14702
|
-
/** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive. */
|
|
15263
|
+
/** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive. In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. */
|
|
14703
15264
|
"helix-headless-table-row": DefineCustomElement<
|
|
14704
15265
|
HelixHeadlessTableRow,
|
|
14705
15266
|
HelixHeadlessTableRowVueProps,
|
|
14706
15267
|
HelixHeadlessTableRowVueEvents
|
|
14707
15268
|
>;
|
|
14708
|
-
/** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open. */
|
|
15269
|
+
/** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open. The host is the 'tabpanel' while its tab is selected, through 'ElementInternals', so the tab's 'aria-controls' can reach it from the tab's shadow root. The box inside takes the focus, for a panel with nothing focusable in it. */
|
|
14709
15270
|
"helix-headless-tab-panel": DefineCustomElement<
|
|
14710
15271
|
HelixHeadlessTabPanel,
|
|
14711
15272
|
HelixHeadlessTabPanelVueProps,
|
|
14712
15273
|
HelixHeadlessTabPanelVueEvents
|
|
14713
15274
|
>;
|
|
14714
|
-
/** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup. The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting. */
|
|
15275
|
+
/** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup. The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting. 'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way. A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link, and the arrow keys move focus without choosing, so arrowing past a tab never leaves the page. Mark the tab of the page you are on with 'selected', or set 'active' to its value. Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection. */
|
|
14715
15276
|
"helix-headless-tabs": DefineCustomElement<
|
|
14716
15277
|
HelixHeadlessTabs,
|
|
14717
15278
|
HelixHeadlessTabsVueProps,
|
|
14718
15279
|
HelixHeadlessTabsVueEvents
|
|
14719
15280
|
>;
|
|
14720
|
-
/** A tab is an element, because it manages selection and its own tab stop.
|
|
15281
|
+
/** A tab is an element, because it manages selection and its own tab stop. With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead. */
|
|
14721
15282
|
"helix-headless-tab": DefineCustomElement<
|
|
14722
15283
|
HelixHeadlessTab,
|
|
14723
15284
|
HelixHeadlessTabVueProps,
|
|
@@ -14753,13 +15314,19 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14753
15314
|
HelixHeadlessTimePickerVueProps,
|
|
14754
15315
|
HelixHeadlessTimePickerVueEvents
|
|
14755
15316
|
>;
|
|
15317
|
+
/** Groups entries by date, such as "Today" and "Yesterday", in a timeline that holds many. The group is an entry of the timeline, and its entries are a list of their own, named by the heading. A screen reader lists the heading with the page's headings and hears how many entries each day holds. The heading's level is 'heading-level', and 3 where it is not set. Each group draws its own line, so the line stops at the last entry of one day and starts again at the first entry of the next. */
|
|
15318
|
+
"helix-headless-timeline-group": DefineCustomElement<
|
|
15319
|
+
HelixHeadlessTimelineGroup,
|
|
15320
|
+
HelixHeadlessTimelineGroupVueProps,
|
|
15321
|
+
HelixHeadlessTimelineGroupVueEvents
|
|
15322
|
+
>;
|
|
14756
15323
|
/** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'. Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way. 'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
|
|
14757
15324
|
"helix-headless-timeline-item": DefineCustomElement<
|
|
14758
15325
|
HelixHeadlessTimelineItem,
|
|
14759
15326
|
HelixHeadlessTimelineItemVueProps,
|
|
14760
15327
|
HelixHeadlessTimelineItemVueEvents
|
|
14761
15328
|
>;
|
|
14762
|
-
/** A timeline is a record of events that happened or are scheduled. Each entry carries a time, and no entry is current or complete. For a process you move through, with a current stage and 'active' and 'complete' states, use 'Steps'. Each entry draws the connector line that arrives at it and hides it when it is first, using ':host(:first-child)'. This resolves at layout with no script, so the server markup is correct before anything runs. The host has 'role="list"', because the entries are your elements in the light DOM. 'Steps' does the same.
|
|
15329
|
+
/** A timeline is a record of events that happened or are scheduled. Each entry carries a time, and no entry is current or complete. For a process you move through, with a current stage and 'active' and 'complete' states, use 'Steps'. Each entry draws the connector line that arrives at it and hides it when it is first, using ':host(:first-child)'. This resolves at layout with no script, so the server markup is correct before anything runs. The host has 'role="list"', because the entries are your elements in the light DOM. 'Steps' does the same. **Group entries by date with 'Timeline.Group'**, which puts a heading such as "Today" over its entries. The group is an entry of the timeline, and its entries are a list of their own named by the heading. **The reading order is the order you write the entries in**, in every layout the styled tier draws: down the page, either side of a line down the middle, or across the page. Inside each entry the time is read before what happened. Write the entries in the order the events happened, oldest or newest first, and the layout only moves where they are drawn. */
|
|
14763
15330
|
"helix-headless-timeline": DefineCustomElement<
|
|
14764
15331
|
HelixHeadlessTimeline,
|
|
14765
15332
|
HelixHeadlessTimelineVueProps,
|
|
@@ -14789,7 +15356,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14789
15356
|
HelixHeadlessToggleVueProps,
|
|
14790
15357
|
HelixHeadlessToggleVueEvents
|
|
14791
15358
|
>;
|
|
14792
|
-
/** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components. The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger. A nested composite, such as a toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop. */
|
|
15359
|
+
/** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components. The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger. Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own. The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does. A nested composite, such as a toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop. */
|
|
14793
15360
|
"helix-headless-toolbar": DefineCustomElement<
|
|
14794
15361
|
HelixHeadlessToolbar,
|
|
14795
15362
|
HelixHeadlessToolbarVueProps,
|
|
@@ -14813,13 +15380,13 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14813
15380
|
HelixHeadlessTourStopVueProps,
|
|
14814
15381
|
HelixHeadlessTourStopVueEvents
|
|
14815
15382
|
>;
|
|
14816
|
-
/** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'. Each item is an element because it holds state: whether it is open, selected, and focused. An item is a branch when something is slotted into 'children'. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration. **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row. Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it. */
|
|
15383
|
+
/** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'. Each item is an element because it holds state: whether it is open, selected, and focused. An item is a branch when something is slotted into 'children'. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration. **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row. Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it. A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing. A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in. */
|
|
14817
15384
|
"helix-headless-tree-item": DefineCustomElement<
|
|
14818
15385
|
HelixHeadlessTreeItem,
|
|
14819
15386
|
HelixHeadlessTreeItemVueProps,
|
|
14820
15387
|
HelixHeadlessTreeItemVueEvents
|
|
14821
15388
|
>;
|
|
14822
|
-
/** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact. Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one. Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item. */
|
|
15389
|
+
/** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact. Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one. Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item. 'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'. */
|
|
14823
15390
|
"helix-headless-tree": DefineCustomElement<
|
|
14824
15391
|
HelixHeadlessTree,
|
|
14825
15392
|
HelixHeadlessTreeVueProps,
|
|
@@ -14843,19 +15410,19 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
14843
15410
|
HelixHeadlessVideoPlaylistMenuVueProps,
|
|
14844
15411
|
HelixHeadlessVideoPlaylistMenuVueEvents
|
|
14845
15412
|
>;
|
|
14846
|
-
/** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. */
|
|
15413
|
+
/** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way. **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside. **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when: - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end. On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. */
|
|
14847
15414
|
"helix-headless-video-playlist": DefineCustomElement<
|
|
14848
15415
|
HelixHeadlessVideoPlaylist,
|
|
14849
15416
|
HelixHeadlessVideoPlaylistVueProps,
|
|
14850
15417
|
HelixHeadlessVideoPlaylistVueEvents
|
|
14851
15418
|
>;
|
|
14852
|
-
/** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled. The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively. When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice. The keys match other players, and they are bound on the element only: - Space and 'k' play or pause. - The arrow keys seek and change the volume. - 'm' mutes. - 'f' toggles fullscreen. '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes. */
|
|
15419
|
+
/** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled. The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively. When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice. The keys match other players, and they are bound on the element only: - Space and 'k' play or pause. - The arrow keys seek and change the volume. - 'm' mutes. - 'f' toggles fullscreen. '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes. The player sends every media event of its inner video under the same name, without bubbling, as a '<video>' sends it. Listen on the player as you would on a video: 'timeupdate', 'volumechange', 'loadedmetadata', 'error', and the rest. */
|
|
14853
15420
|
"helix-headless-video": DefineCustomElement<
|
|
14854
15421
|
HelixHeadlessVideo,
|
|
14855
15422
|
HelixHeadlessVideoVueProps,
|
|
14856
15423
|
HelixHeadlessVideoVueEvents
|
|
14857
15424
|
>;
|
|
14858
|
-
/** The items arrive as data: - 'for' names a '<script type="application/json">' that holds an array of
|
|
15425
|
+
/** The items arrive as data, in one of two ways: - 'items' takes an array. A framework sets it as a property, and React hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which a server sends as markup. Each item is drawn into a row in one of two ways: - 'renderItem' is a function from an item and its index to the row's content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element with the item's 'name' as text, and 'data-field-href="url"' writes the item's 'url' into 'href', the same for any attribute. A field may be a path of keys, such as 'author.name'. Rows are your markup in the light DOM, so your stylesheet styles them. **Keyboard.** The list is one tab stop. Up and Down move between items, Home and End go to the first and the last, and Page Up and Page Down move by a screen. An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. Tab moves on into the focused row's own links and buttons. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out. **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. 'scrollToIndex' takes a reader to an item. The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls. The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
|
|
14859
15426
|
"helix-headless-virtual-list": DefineCustomElement<
|
|
14860
15427
|
HelixHeadlessVirtualList,
|
|
14861
15428
|
HelixHeadlessVirtualListVueProps,
|