@fusion.dev/helix 0.23.0 → 0.24.1
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 +65204 -38241
- package/dist/accordion/item/accordion-item.css.js +4 -0
- package/dist/announcement/root/announcement-root.css.js +26 -12
- package/dist/announcement/root/announcement-root.d.ts +17 -0
- package/dist/announcement/root/announcement-root.js +4 -0
- package/dist/app-header/root/app-header-root.css.js +6 -0
- package/dist/area-chart/index.d.ts +1 -0
- package/dist/area-chart/index.js +1 -0
- package/dist/area-chart/root/area-chart-root.css.d.ts +1 -0
- package/dist/area-chart/root/area-chart-root.css.js +97 -0
- package/dist/area-chart/root/area-chart-root.d.ts +38 -0
- package/dist/area-chart/root/area-chart-root.js +20 -0
- package/dist/bar-chart/root/bar-chart-root.css.js +0 -141
- package/dist/bar-chart/root/bar-chart-root.js +2 -1
- package/dist/chat/composer/chat-composer.css.js +4 -0
- package/dist/chat/message/chat-message.css.js +20 -0
- package/dist/chat/root/chat-root.css.js +26 -0
- package/dist/code-block/root/code-block-root.css.js +122 -0
- package/dist/code-block/root/code-block-root.d.ts +5 -0
- package/dist/data-table/root/data-table-root.css.js +21 -3
- package/dist/data-table/root/data-table-root.d.ts +1 -0
- package/dist/data-table/root/data-table-root.js +1 -0
- package/dist/description-list/index.d.ts +2 -0
- package/dist/description-list/index.js +2 -0
- package/dist/description-list/item/description-list-item.css.d.ts +1 -0
- package/dist/description-list/item/description-list-item.css.js +31 -0
- package/dist/description-list/item/description-list-item.d.ts +21 -0
- package/dist/description-list/item/description-list-item.js +16 -0
- package/dist/description-list/root/description-list-root.css.d.ts +1 -0
- package/dist/description-list/root/description-list-root.css.js +35 -0
- package/dist/description-list/root/description-list-root.d.ts +62 -0
- package/dist/description-list/root/description-list-root.js +23 -0
- package/dist/donut-chart/root/donut-chart-root.css.js +0 -138
- package/dist/donut-chart/root/donut-chart-root.js +2 -1
- package/dist/element-events.generated.js +36 -8
- package/dist/filter-input/chip/filter-chip.css.d.ts +1 -0
- package/dist/filter-input/chip/filter-chip.css.js +85 -0
- package/dist/filter-input/chip/filter-chip.d.ts +32 -0
- package/dist/filter-input/chip/filter-chip.js +16 -0
- package/dist/filter-input/field/filter-field.css.d.ts +1 -0
- package/dist/filter-input/field/filter-field.css.js +4 -0
- package/dist/filter-input/field/filter-field.d.ts +29 -0
- package/dist/filter-input/field/filter-field.js +16 -0
- package/dist/filter-input/index.d.ts +4 -0
- package/dist/filter-input/index.js +4 -0
- package/dist/filter-input/menu/filter-menu.css.d.ts +1 -0
- package/dist/filter-input/menu/filter-menu.css.js +4 -0
- package/dist/filter-input/menu/filter-menu.d.ts +33 -0
- package/dist/filter-input/menu/filter-menu.js +19 -0
- package/dist/filter-input/operator/filter-operator.css.d.ts +1 -0
- package/dist/filter-input/operator/filter-operator.css.js +4 -0
- package/dist/filter-input/operator/filter-operator.d.ts +27 -0
- package/dist/filter-input/operator/filter-operator.js +16 -0
- package/dist/filter-input/root/filter-input-root.css.js +25 -2
- package/dist/filter-input/root/filter-input-root.d.ts +3 -0
- package/dist/heatmap/root/heatmap-root.d.ts +1 -0
- package/dist/heatmap/root/heatmap-root.js +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +5 -0
- package/dist/line-chart/root/line-chart-root.css.js +0 -138
- package/dist/line-chart/root/line-chart-root.js +2 -1
- package/dist/menu/item/menu-item.css.js +8 -2
- package/dist/menu/root/menu-root.css.js +4 -0
- package/dist/navigation/root/navigation-root.css.js +2 -1
- package/dist/notifications/group/notification-group.css.d.ts +1 -0
- package/dist/notifications/group/notification-group.css.js +61 -0
- package/dist/notifications/group/notification-group.d.ts +37 -0
- package/dist/notifications/group/notification-group.js +16 -0
- package/dist/notifications/index.d.ts +1 -0
- package/dist/notifications/index.js +1 -0
- package/dist/notifications/notification/notification.css.js +74 -8
- package/dist/notifications/notification/notification.d.ts +25 -0
- package/dist/notifications/notification/notification.js +5 -0
- package/dist/notifications/root/notifications-root.css.js +8 -0
- package/dist/object-inspector/index.d.ts +1 -0
- package/dist/object-inspector/index.js +1 -0
- package/dist/object-inspector/root/object-inspector-root.css.d.ts +1 -0
- package/dist/object-inspector/root/object-inspector-root.css.js +148 -0
- package/dist/object-inspector/root/object-inspector-root.d.ts +35 -0
- package/dist/object-inspector/root/object-inspector-root.js +18 -0
- package/dist/sandbox/root/sandbox-root.d.ts +4 -0
- package/dist/sandbox/status-bar/sandbox-status-bar.css.js +1 -1
- package/dist/sandbox/toolbar/sandbox-toolbar.css.js +7 -1
- package/dist/scatter-chart/index.d.ts +1 -0
- package/dist/scatter-chart/index.js +1 -0
- package/dist/scatter-chart/root/scatter-chart-root.css.d.ts +1 -0
- package/dist/scatter-chart/root/scatter-chart-root.css.js +138 -0
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +38 -0
- package/dist/scatter-chart/root/scatter-chart-root.js +20 -0
- package/dist/shared/chart/tooltip.css.d.ts +1 -0
- package/dist/shared/chart/tooltip.css.js +141 -0
- package/dist/skip-link/index.d.ts +1 -0
- package/dist/skip-link/index.js +1 -0
- package/dist/skip-link/root/skip-link-root.css.d.ts +1 -0
- package/dist/skip-link/root/skip-link-root.css.js +36 -0
- package/dist/skip-link/root/skip-link-root.d.ts +42 -0
- package/dist/skip-link/root/skip-link-root.js +17 -0
- package/dist/steps/step/step.css.js +4 -0
- package/dist/table/column/table-column.css.js +66 -0
- package/dist/tag/root/tag-root.d.ts +10 -0
- package/dist/text/root/text-root.d.ts +26 -13
- package/dist/text/root/text-root.js +3 -0
- package/dist/toast/item/toast-item.css.js +9 -4
- package/dist/toolbar/root/toolbar-root.css.js +6 -0
- package/package.json +6 -6
- package/types/jsx.d.ts +4790 -698
- package/types/svelte.d.ts +11 -0
- package/types/vue.d.ts +907 -51
package/types/vue.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type {
|
|
|
3
3
|
HelixAccordion,
|
|
4
4
|
HelixAnnouncement,
|
|
5
5
|
HelixAppHeader,
|
|
6
|
+
HelixAreaChart,
|
|
6
7
|
HelixAura,
|
|
7
8
|
HelixAvatarGroup,
|
|
8
9
|
HelixAvatar,
|
|
@@ -31,6 +32,8 @@ import type {
|
|
|
31
32
|
HelixDataTable,
|
|
32
33
|
HelixDateInput,
|
|
33
34
|
HelixDatePicker,
|
|
35
|
+
HelixDescriptionListItem,
|
|
36
|
+
HelixDescriptionList,
|
|
34
37
|
HelixDialog,
|
|
35
38
|
HelixDivider,
|
|
36
39
|
HelixDonutChart,
|
|
@@ -39,6 +42,10 @@ import type {
|
|
|
39
42
|
HelixDrilldown,
|
|
40
43
|
HelixEmpty,
|
|
41
44
|
HelixFileInput,
|
|
45
|
+
HelixFilterChip,
|
|
46
|
+
HelixFilterField,
|
|
47
|
+
HelixFilterMenu,
|
|
48
|
+
HelixFilterOperator,
|
|
42
49
|
HelixFilterInput,
|
|
43
50
|
HelixFlex,
|
|
44
51
|
HelixFormatDate,
|
|
@@ -60,9 +67,11 @@ import type {
|
|
|
60
67
|
HelixMenu,
|
|
61
68
|
HelixMeter,
|
|
62
69
|
HelixNavigation,
|
|
70
|
+
HelixNotificationGroup,
|
|
63
71
|
HelixNotification,
|
|
64
72
|
HelixNotifications,
|
|
65
73
|
HelixNumberInput,
|
|
74
|
+
HelixObjectInspector,
|
|
66
75
|
HelixOptionGroup,
|
|
67
76
|
HelixOption,
|
|
68
77
|
HelixOrb,
|
|
@@ -84,9 +93,11 @@ import type {
|
|
|
84
93
|
HelixSandboxStatusBar,
|
|
85
94
|
HelixSandboxTerminal,
|
|
86
95
|
HelixSandboxToolbar,
|
|
96
|
+
HelixScatterChart,
|
|
87
97
|
HelixScrollArea,
|
|
88
98
|
HelixSelect,
|
|
89
99
|
HelixSkeleton,
|
|
100
|
+
HelixSkipLink,
|
|
90
101
|
HelixSlider,
|
|
91
102
|
HelixSparkline,
|
|
92
103
|
HelixSpeedDialItem,
|
|
@@ -134,6 +145,7 @@ import type {
|
|
|
134
145
|
HelixSelectEvent,
|
|
135
146
|
HelixSendEvent,
|
|
136
147
|
HelixBeforePinEvent,
|
|
148
|
+
HelixHistoryEvent,
|
|
137
149
|
HelixBeforeChangeEvent,
|
|
138
150
|
HelixBeforeToggleEvent,
|
|
139
151
|
HelixCopyEvent,
|
|
@@ -142,16 +154,18 @@ import type {
|
|
|
142
154
|
HelixCreateEvent,
|
|
143
155
|
HelixFilterEvent,
|
|
144
156
|
HelixNavigateEvent,
|
|
157
|
+
HelixReorderEvent,
|
|
145
158
|
HelixSortEvent,
|
|
159
|
+
HelixFacetEvent,
|
|
146
160
|
HelixResizeEvent,
|
|
147
161
|
HelixShortcutEvent,
|
|
148
162
|
HelixReadEvent,
|
|
149
163
|
HelixBeforeActivateEvent,
|
|
150
164
|
HelixCompleteEvent,
|
|
151
165
|
HelixConsoleEvent,
|
|
166
|
+
HelixBeforeEditEvent,
|
|
152
167
|
HelixBeforePanelResizeEvent,
|
|
153
168
|
HelixBeforeSplitEvent,
|
|
154
|
-
HelixBeforeEditEvent,
|
|
155
169
|
HelixCaretEvent,
|
|
156
170
|
HelixBeforeCollapseEvent,
|
|
157
171
|
HelixBeforeResizeEvent,
|
|
@@ -320,6 +334,21 @@ export type HelixAnnouncementHelixDismissElementEvent =
|
|
|
320
334
|
HelixAnnouncementElementEvent<HelixDismissEvent>;
|
|
321
335
|
|
|
322
336
|
export type HelixAnnouncementVueProps = {
|
|
337
|
+
/** Which rung of the surface ladder the band rides.
|
|
338
|
+
|
|
339
|
+
`filled` is the resting one, a well sunk below the page. `elevated` brings
|
|
340
|
+
it up to the surface step, for a band that reads as part of the furniture
|
|
341
|
+
rather than as a slot cut into it.
|
|
342
|
+
|
|
343
|
+
**This was `tone="surface"`**, which put an elevation on the axis that says
|
|
344
|
+
what a thing means. The band's own doc admitted it, calling `surface` the
|
|
345
|
+
one value that was not a color. A band can be `info` and elevated at the
|
|
346
|
+
same time, and two values that can both be true are two axes.
|
|
347
|
+
|
|
348
|
+
Styled and not headless, because a rung of a ladder is paint: the headless
|
|
349
|
+
tier has no stylesheet to sit a band on. `tone` crosses because meaning
|
|
350
|
+
survives having nothing to paint with, and it is the only axis that does. */
|
|
351
|
+
separation?: (HelixAnnouncement["separation"]) | undefined;
|
|
323
352
|
/** Whether it offers a control to take it away. */
|
|
324
353
|
dismissible?: (HelixAnnouncement["dismissible"]) | undefined;
|
|
325
354
|
/** Accessible name for that control.
|
|
@@ -339,10 +368,24 @@ would catch. */
|
|
|
339
368
|
/** Which color the band wears.
|
|
340
369
|
|
|
341
370
|
Paint only: unlike `Callout`, no value here draws a mark, changes the label,
|
|
342
|
-
or moves the live region off polite.
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
371
|
+
or moves the live region off polite. `neutral` is the resting value, said
|
|
372
|
+
out loud so a consumer can put a band back to it from markup.
|
|
373
|
+
|
|
374
|
+
**The set is `Tag`'s and `Badge`'s, and now actually is.** This doc claimed
|
|
375
|
+
to match `Tag` while differing from it in both directions: it carried
|
|
376
|
+
`surface`, which `Tag` does not, and lacked `accent`, which `Tag` has. Three
|
|
377
|
+
components saying what a thing means, in three vocabularies, one of which
|
|
378
|
+
described itself as a fourth.
|
|
379
|
+
|
|
380
|
+
`accent` is the second emphasis, a rotation off the brand seed rather than a
|
|
381
|
+
color of its own, so it stays in relation when somebody rethemes. `primary`
|
|
382
|
+
is the seed itself.
|
|
383
|
+
|
|
384
|
+
**`surface` was never a color and has moved to `separation`**, which is the
|
|
385
|
+
axis that owns where a box sits relative to the page. It said the band rode
|
|
386
|
+
the surface step instead of the sunken one, which is an elevation, and a
|
|
387
|
+
band can be `info` and elevated at once: two values true together are two
|
|
388
|
+
axes, which is the test the registry answers to. */
|
|
346
389
|
tone?: (HelixAnnouncement["tone"]) | undefined;
|
|
347
390
|
};
|
|
348
391
|
|
|
@@ -448,6 +491,47 @@ export type HelixAppHeaderVueEvents = {
|
|
|
448
491
|
"helix-scrolled": HelixAppHeaderHelixScrolledElementEvent;
|
|
449
492
|
};
|
|
450
493
|
|
|
494
|
+
export type HelixAreaChartVueProps = {
|
|
495
|
+
/** The id of the table to read.
|
|
496
|
+
|
|
497
|
+
Resolved through `getRootNode()`, so a chart inside another component's
|
|
498
|
+
shadow root names a table in that root rather than in the document. A
|
|
499
|
+
`<table>` or anything built from grid roles, including `helix-table`.
|
|
500
|
+
|
|
501
|
+
**In React this arrives as a property and not as an attribute**, the way
|
|
502
|
+
`Tooltip.for` does, so it does not reflect and nothing styles on it. */
|
|
503
|
+
for?: (HelixAreaChart["for"]) | undefined;
|
|
504
|
+
/** The drawing's name, for a pointer resting on it.
|
|
505
|
+
|
|
506
|
+
Absent falls back to the table's own caption, which is usually the right
|
|
507
|
+
words and is already written. */
|
|
508
|
+
label?: (HelixAreaChart["label"]) | undefined;
|
|
509
|
+
/** How a band's edge gets from one reading to the next.
|
|
510
|
+
|
|
511
|
+
Absent is `straight`, for the reason the class doc gives, and absent rather
|
|
512
|
+
than defaulted because a reflecting property with a default writes its
|
|
513
|
+
attribute onto every host, including the ones nobody configured. */
|
|
514
|
+
curve?: (HelixAreaChart["curve"]) | undefined;
|
|
515
|
+
/** Which rules are drawn across the plot, if any.
|
|
516
|
+
|
|
517
|
+
The same three values `LineChart` takes, with the same fallback: a bare
|
|
518
|
+
`gridlines`, or anything unrecognized, rules the levels. Drawn over the bands
|
|
519
|
+
rather than under them, because the bands are opaque and a rule under one is
|
|
520
|
+
a rule nobody sees. */
|
|
521
|
+
gridlines?: (HelixAreaChart["gridlines"]) | undefined;
|
|
522
|
+
/** Whether each reading is drawn as a hundred percent.
|
|
523
|
+
|
|
524
|
+
Absent stacks the amounts, so the top edge is the total. Set, every reading
|
|
525
|
+
fills the height and the bands are shares of it. */
|
|
526
|
+
share?: (HelixAreaChart["share"]) | undefined;
|
|
527
|
+
/** What to call the sum of the parts, in the tooltip and the summary. */
|
|
528
|
+
"total-label"?: (HelixAreaChart["totalLabel"]) | undefined;
|
|
529
|
+
/** What to call the sum of the parts, in the tooltip and the summary. */
|
|
530
|
+
totalLabel?: (HelixAreaChart["totalLabel"]) | undefined;
|
|
531
|
+
};
|
|
532
|
+
|
|
533
|
+
export type HelixAreaChartVueEvents = {};
|
|
534
|
+
|
|
451
535
|
export type HelixAuraVueProps = {
|
|
452
536
|
/** How soft the falloff is, `0` tight and `1` diffuse. */
|
|
453
537
|
bloom?: (HelixAura["bloom"]) | undefined;
|
|
@@ -935,8 +1019,11 @@ Three and an accent, not the full status set. A tag reports a state and a
|
|
|
935
1019
|
button performs an action: a success button and a warning button are not
|
|
936
1020
|
things anybody writes, and offering them invites a page where the color
|
|
937
1021
|
of a control means nothing in particular. `accent` is the second
|
|
938
|
-
emphasis
|
|
939
|
-
|
|
1022
|
+
emphasis: the second color a theme names, and the brand itself until one
|
|
1023
|
+
is named. It used to be a rotation off the brand seed whether or not
|
|
1024
|
+
anybody asked for a second color, which handed every theme a complement
|
|
1025
|
+
it had not chosen, 3 degrees off `warning` and sometimes too pale to
|
|
1026
|
+
read. */
|
|
940
1027
|
tone?: (HelixButton["tone"]) | undefined;
|
|
941
1028
|
/** What to send when the button is activated, and what to send it to.
|
|
942
1029
|
|
|
@@ -1551,6 +1638,12 @@ export type HelixChatElementEvent<E = Event> = TypedEvent<HelixChat, E>;
|
|
|
1551
1638
|
/** `helix-before-pin` event type */
|
|
1552
1639
|
export type HelixChatHelixBeforePinElementEvent =
|
|
1553
1640
|
HelixChatElementEvent<HelixBeforePinEvent>;
|
|
1641
|
+
/** `helix-history` event type */
|
|
1642
|
+
export type HelixChatHelixHistoryElementEvent =
|
|
1643
|
+
HelixChatElementEvent<HelixHistoryEvent>;
|
|
1644
|
+
/** `helix-send` event type */
|
|
1645
|
+
export type HelixChatHelixSendElementEvent =
|
|
1646
|
+
HelixChatElementEvent<HelixSendEvent>;
|
|
1554
1647
|
|
|
1555
1648
|
export type HelixChatVueProps = {
|
|
1556
1649
|
/** What is said where there are none, and none are coming. */
|
|
@@ -1571,6 +1664,17 @@ say that without the component knowing what a row looks like. */
|
|
|
1571
1664
|
"default-pinned"?: (HelixChat["defaultPinned"]) | undefined;
|
|
1572
1665
|
/** Whether to open pinned, where nothing declared it. */
|
|
1573
1666
|
defaultPinned?: (HelixChat["defaultPinned"]) | undefined;
|
|
1667
|
+
/** Whether there are older turns than the ones here, and whether they are coming.
|
|
1668
|
+
|
|
1669
|
+
`more` makes reaching the top fire `helix-history`, once per arrival;
|
|
1670
|
+
`loading` draws `history-text` above the oldest turn and fires nothing; empty
|
|
1671
|
+
says this is the start of the conversation. The consumer owns it, because
|
|
1672
|
+
only the consumer knows whether the server has anything older. */
|
|
1673
|
+
history?: (HelixChat["history"]) | undefined;
|
|
1674
|
+
/** What to say while older turns are on their way. */
|
|
1675
|
+
"history-text"?: (HelixChat["historyText"]) | undefined;
|
|
1676
|
+
/** What to say while older turns are on their way. */
|
|
1677
|
+
historyText?: (HelixChat["historyText"]) | undefined;
|
|
1574
1678
|
/** Accessible name for the conversation. */
|
|
1575
1679
|
label?: (HelixChat["label"]) | undefined;
|
|
1576
1680
|
/** Whether the transcript follows new turns to the bottom.
|
|
@@ -1595,13 +1699,27 @@ it. Measured rather than assumed: `label, pinned` after upgrade against
|
|
|
1595
1699
|
A hook rather than a constant, because the right number depends on how tall
|
|
1596
1700
|
a turn is: a transcript of one-line replies wants a smaller threshold than
|
|
1597
1701
|
one of paragraphs, and a reader who has scrolled up by half a message has
|
|
1598
|
-
not left.
|
|
1702
|
+
not left. The same distance from the top is what counts as reaching the
|
|
1703
|
+
history. */
|
|
1599
1704
|
threshold?: (HelixChat["threshold"]) | undefined;
|
|
1705
|
+
/** The turns as data, for a transcript too long to hold as elements.
|
|
1706
|
+
|
|
1707
|
+
Drawn a window at a time, so the log needs a block size. Set it or declare
|
|
1708
|
+
children, not both: while it holds anything the children are not drawn.
|
|
1709
|
+
|
|
1710
|
+
**Read, never written**, and replaced rather than mutated: a streamed turn
|
|
1711
|
+
is a new array with the last turn's text longer, which is what tells this
|
|
1712
|
+
element to look again. */
|
|
1713
|
+
turns?: (HelixChat["turns"]) | undefined;
|
|
1600
1714
|
};
|
|
1601
1715
|
|
|
1602
1716
|
export type HelixChatVueEvents = {
|
|
1603
1717
|
/** Fired when the reader pins or unpins the transcript by scrolling. Cancelable. */
|
|
1604
1718
|
"helix-before-pin": HelixChatHelixBeforePinElementEvent;
|
|
1719
|
+
/** Fired when the reader reaches the oldest turn while `history` is `more`, reporting where they are rather than asking. */
|
|
1720
|
+
"helix-history": HelixChatHelixHistoryElementEvent;
|
|
1721
|
+
/** A turn offered from the composer, or a failed one asked to go again, dispatched inside and heard here because the conversation is what a consumer holds. Cancelable: refusing it takes the decision and nothing is sent. */
|
|
1722
|
+
"helix-send": HelixChatHelixSendElementEvent;
|
|
1605
1723
|
};
|
|
1606
1724
|
|
|
1607
1725
|
/** `HelixCheckboxGroup` component event */
|
|
@@ -1748,7 +1866,15 @@ export type HelixCheckboxVueEvents = {
|
|
|
1748
1866
|
};
|
|
1749
1867
|
|
|
1750
1868
|
export type HelixCodeBlockVueProps = {
|
|
1751
|
-
/**
|
|
1869
|
+
/** Whether the content is a unified diff, drawn as the lines it changed.
|
|
1870
|
+
|
|
1871
|
+
Reflected, because the stylesheet paints a diff differently from code, and
|
|
1872
|
+
`false` reflects as no attribute at all. */
|
|
1873
|
+
diff?: (HelixCodeBlock["diff"]) | undefined;
|
|
1874
|
+
/** What to call this block, usually a file name or a language.
|
|
1875
|
+
|
|
1876
|
+
In a diff, each file is named from the patch, and this names a patch that
|
|
1877
|
+
carries no name of its own. */
|
|
1752
1878
|
label?: (HelixCodeBlock["label"]) | undefined;
|
|
1753
1879
|
/** Whether to leave the copy button off.
|
|
1754
1880
|
|
|
@@ -1790,6 +1916,12 @@ A false boolean reflects as the attribute's absence, so this costs no
|
|
|
1790
1916
|
reflected property taking no default is satisfied by the default being
|
|
1791
1917
|
`false`. */
|
|
1792
1918
|
noCopy?: (HelixCodeBlock["noCopy"]) | undefined;
|
|
1919
|
+
/** How a diff's two versions are arranged; nothing without `diff`.
|
|
1920
|
+
|
|
1921
|
+
Absent is unified, each removal above its replacement, which fits any
|
|
1922
|
+
width. `split` sets the old version beside the new one. Optional rather
|
|
1923
|
+
than defaulted, so the host carries no attribute the consumer did not write. */
|
|
1924
|
+
variant?: (HelixCodeBlock["variant"]) | undefined;
|
|
1793
1925
|
};
|
|
1794
1926
|
|
|
1795
1927
|
export type HelixCodeBlockVueEvents = {};
|
|
@@ -2338,8 +2470,11 @@ Three and an accent, not the full status set. A tag reports a state and a
|
|
|
2338
2470
|
button performs an action: a success button and a warning button are not
|
|
2339
2471
|
things anybody writes, and offering them invites a page where the color
|
|
2340
2472
|
of a control means nothing in particular. `accent` is the second
|
|
2341
|
-
emphasis
|
|
2342
|
-
|
|
2473
|
+
emphasis: the second color a theme names, and the brand itself until one
|
|
2474
|
+
is named. It used to be a rotation off the brand seed whether or not
|
|
2475
|
+
anybody asked for a second color, which handed every theme a complement
|
|
2476
|
+
it had not chosen, 3 degrees off `warning` and sometimes too pale to
|
|
2477
|
+
read. */
|
|
2343
2478
|
tone?: (HelixCopyButton["tone"]) | undefined;
|
|
2344
2479
|
/** What it is called, and says, after one.
|
|
2345
2480
|
|
|
@@ -2522,6 +2657,12 @@ export type HelixDataTableHelixFilterElementEvent =
|
|
|
2522
2657
|
/** `helix-navigate` event type */
|
|
2523
2658
|
export type HelixDataTableHelixNavigateElementEvent =
|
|
2524
2659
|
HelixDataTableElementEvent<HelixNavigateEvent>;
|
|
2660
|
+
/** `helix-reorder` event type */
|
|
2661
|
+
export type HelixDataTableHelixReorderElementEvent =
|
|
2662
|
+
HelixDataTableElementEvent<HelixReorderEvent>;
|
|
2663
|
+
/** `helix-select` event type */
|
|
2664
|
+
export type HelixDataTableHelixSelectElementEvent =
|
|
2665
|
+
HelixDataTableElementEvent<HelixSelectEvent>;
|
|
2525
2666
|
/** `helix-sort` event type */
|
|
2526
2667
|
export type HelixDataTableHelixSortElementEvent =
|
|
2527
2668
|
HelixDataTableElementEvent<HelixSortEvent>;
|
|
@@ -2545,6 +2686,10 @@ say that without the component knowing what a row looks like. */
|
|
|
2545
2686
|
"default-filter"?: (HelixDataTable["defaultFilter"]) | undefined;
|
|
2546
2687
|
/** Query to open with, where nothing declared one. */
|
|
2547
2688
|
defaultFilter?: (HelixDataTable["defaultFilter"]) | undefined;
|
|
2689
|
+
/** Column order to open with, where nothing declared one. */
|
|
2690
|
+
"default-order"?: (HelixDataTable["defaultOrder"]) | undefined;
|
|
2691
|
+
/** Column order to open with, where nothing declared one. */
|
|
2692
|
+
defaultOrder?: (HelixDataTable["defaultOrder"]) | undefined;
|
|
2548
2693
|
/** Page to open on, where nothing declared one. */
|
|
2549
2694
|
"default-page"?: (HelixDataTable["defaultPage"]) | undefined;
|
|
2550
2695
|
/** Page to open on, where nothing declared one. */
|
|
@@ -2553,6 +2698,10 @@ say that without the component knowing what a row looks like. */
|
|
|
2553
2698
|
"default-page-size"?: (HelixDataTable["defaultPageSize"]) | undefined;
|
|
2554
2699
|
/** Page size to open with, where nothing declared one. */
|
|
2555
2700
|
defaultPageSize?: (HelixDataTable["defaultPageSize"]) | undefined;
|
|
2701
|
+
/** Keys to open with selected, comma separated, where nothing declared any. */
|
|
2702
|
+
"default-selected"?: (HelixDataTable["defaultSelected"]) | undefined;
|
|
2703
|
+
/** Keys to open with selected, comma separated, where nothing declared any. */
|
|
2704
|
+
defaultSelected?: (HelixDataTable["defaultSelected"]) | undefined;
|
|
2556
2705
|
/** Order to open on, where nothing declared one. */
|
|
2557
2706
|
"default-sort"?: (HelixDataTable["defaultSort"]) | undefined;
|
|
2558
2707
|
/** Order to open on, where nothing declared one. */
|
|
@@ -2571,29 +2720,14 @@ Set it and this element defers: a reader's click fires `helix-sort` and
|
|
|
2571
2720
|
changes nothing until a new value arrives. `default-sort` seeds an order this
|
|
2572
2721
|
element then owns. */
|
|
2573
2722
|
sort?: (HelixDataTable["sort"]) | undefined;
|
|
2574
|
-
/**
|
|
2575
|
-
|
|
2576
|
-
**Needed before selection exists, not after.** Lit keys the rendered rows by
|
|
2577
|
-
it, so a sort moves a row's element rather than rewriting every cell in
|
|
2578
|
-
place, which is what keeps focus inside a cell and keeps a CSS transition
|
|
2579
|
-
attached to the row it belongs to. Left unset the index is the key, which is
|
|
2580
|
-
correct only while nothing reorders: it is why this defaults to something
|
|
2581
|
-
that works and is worth setting anyway. */
|
|
2582
|
-
key?: (HelixDataTable["key"]) | undefined;
|
|
2723
|
+
/** Accessible name for the grid. */
|
|
2724
|
+
label?: (HelixDataTable["label"]) | undefined;
|
|
2583
2725
|
/** What the rows are narrowed to, as one query across every column.
|
|
2584
2726
|
|
|
2585
2727
|
One query rather than a predicate per column, which is what a reader means
|
|
2586
2728
|
by a search box above a table. It matches on each column's ordering value,
|
|
2587
2729
|
so search and sort cannot disagree about what a column holds. */
|
|
2588
2730
|
filter?: (HelixDataTable["filter"]) | undefined;
|
|
2589
|
-
/** Accessible name for the grid. */
|
|
2590
|
-
label?: (HelixDataTable["label"]) | undefined;
|
|
2591
|
-
/** The page on show, from 1.
|
|
2592
|
-
|
|
2593
|
-
Clamped on the way out, so what this reports is the page it drew: a
|
|
2594
|
-
bookmarked link to page 99 of a result that has since shrunk reads back as
|
|
2595
|
-
the last page rather than as 99. */
|
|
2596
|
-
page?: (HelixDataTable["page"]) | undefined;
|
|
2597
2731
|
/** Whether this element does the work or asks the consumer to.
|
|
2598
2732
|
|
|
2599
2733
|
`client` filters, sorts and pages `rows` itself. `server` applies none of
|
|
@@ -2603,6 +2737,64 @@ the client cannot hold the data, so this is not an optimization, it is the
|
|
|
2603
2737
|
only mode that works, and it is here from the start because adding it later
|
|
2604
2738
|
inverts the data flow. */
|
|
2605
2739
|
mode?: (HelixDataTable["mode"]) | undefined;
|
|
2740
|
+
/** The page on show, from 1.
|
|
2741
|
+
|
|
2742
|
+
Clamped on the way out, so what this reports is the page it drew: a
|
|
2743
|
+
bookmarked link to page 99 of a result that has since shrunk reads back as
|
|
2744
|
+
the last page rather than as 99. */
|
|
2745
|
+
page?: (HelixDataTable["page"]) | undefined;
|
|
2746
|
+
/** Whether a reader may move the columns.
|
|
2747
|
+
|
|
2748
|
+
Each heading with a `field` gets a grip, dragged along the header or moved a
|
|
2749
|
+
place at a time with the arrow keys once it has focus. */
|
|
2750
|
+
reorderable?: (HelixDataTable["reorderable"]) | undefined;
|
|
2751
|
+
/** The columns' order, as their fields separated by spaces.
|
|
2752
|
+
|
|
2753
|
+
A reader's move fires `helix-reorder` first, and refusing it leaves the
|
|
2754
|
+
columns where they were, which is how a consumer who stores the order takes
|
|
2755
|
+
the decision. `default-order` seeds an order this element then owns. A field not named
|
|
2756
|
+
keeps its place after the named ones, and a column with no field never
|
|
2757
|
+
moves. */
|
|
2758
|
+
order?: (HelixDataTable["order"]) | undefined;
|
|
2759
|
+
/** The field naming a row's stable identity.
|
|
2760
|
+
|
|
2761
|
+
**Needed before selection exists, not after.** Lit keys the rendered rows by
|
|
2762
|
+
it, so a sort moves a row's element rather than rewriting every cell in
|
|
2763
|
+
place, which is what keeps focus inside a cell and keeps a CSS transition
|
|
2764
|
+
attached to the row it belongs to. Left unset the index is the key, which is
|
|
2765
|
+
correct only while nothing reorders: it is why this defaults to something
|
|
2766
|
+
that works and is worth setting anyway.
|
|
2767
|
+
|
|
2768
|
+
**`row-key` and not `key`**, which is what it was called until selection
|
|
2769
|
+
needed it from React: `key` is reserved there, and a JSX `key` never reaches
|
|
2770
|
+
the element, so a React page could not tell the table which field a row is. */
|
|
2771
|
+
"row-key"?: (HelixDataTable["rowKey"]) | undefined;
|
|
2772
|
+
/** The field naming a row's stable identity.
|
|
2773
|
+
|
|
2774
|
+
**Needed before selection exists, not after.** Lit keys the rendered rows by
|
|
2775
|
+
it, so a sort moves a row's element rather than rewriting every cell in
|
|
2776
|
+
place, which is what keeps focus inside a cell and keeps a CSS transition
|
|
2777
|
+
attached to the row it belongs to. Left unset the index is the key, which is
|
|
2778
|
+
correct only while nothing reorders: it is why this defaults to something
|
|
2779
|
+
that works and is worth setting anyway.
|
|
2780
|
+
|
|
2781
|
+
**`row-key` and not `key`**, which is what it was called until selection
|
|
2782
|
+
needed it from React: `key` is reserved there, and a JSX `key` never reaches
|
|
2783
|
+
the element, so a React page could not tell the table which field a row is. */
|
|
2784
|
+
rowKey?: (HelixDataTable["rowKey"]) | undefined;
|
|
2785
|
+
/** Whether a reader may select rows, with a column of checkboxes.
|
|
2786
|
+
|
|
2787
|
+
Wants `row-key`: a selection is a set of identities, and without one the rows
|
|
2788
|
+
are known by their place in the result, which a sort changes. */
|
|
2789
|
+
selectable?: (HelixDataTable["selectable"]) | undefined;
|
|
2790
|
+
/** The keys of the selected rows, comma separated.
|
|
2791
|
+
|
|
2792
|
+
A string rather than an array, so it is an attribute a server writes and a
|
|
2793
|
+
framework's hydration keeps, and the shape a multiple Listbox already uses.
|
|
2794
|
+
A key holding a comma cannot be told apart from two keys, which is the
|
|
2795
|
+
price of the shape. A reader's choice fires `helix-select` first, and
|
|
2796
|
+
refusing it leaves the selection as it was. */
|
|
2797
|
+
selected?: (HelixDataTable["selected"]) | undefined;
|
|
2606
2798
|
/** How many rows a page holds. Zero is every row, which is what "no paging" means.
|
|
2607
2799
|
|
|
2608
2800
|
**It announces nothing, and that is not an omission.** Nothing in this
|
|
@@ -2668,6 +2860,10 @@ export type HelixDataTableVueEvents = {
|
|
|
2668
2860
|
"helix-filter": HelixDataTableHelixFilterElementEvent;
|
|
2669
2861
|
/** Fired when a reader asks for another page, and cancelable. */
|
|
2670
2862
|
"helix-navigate": HelixDataTableHelixNavigateElementEvent;
|
|
2863
|
+
/** Fired when a reader asks for the columns in another order, with every field in the new one, and cancelable. */
|
|
2864
|
+
"helix-reorder": HelixDataTableHelixReorderElementEvent;
|
|
2865
|
+
/** Fired when a reader changes which rows are selected, with every selected key comma separated, and cancelable. */
|
|
2866
|
+
"helix-select": HelixDataTableHelixSelectElementEvent;
|
|
2671
2867
|
/** Fired when a reader asks for a different order, and cancelable. */
|
|
2672
2868
|
"helix-sort": HelixDataTableHelixSortElementEvent;
|
|
2673
2869
|
};
|
|
@@ -3085,6 +3281,56 @@ export type HelixDatePickerVueEvents = {
|
|
|
3085
3281
|
"helix-navigate": HelixDatePickerHelixNavigateElementEvent;
|
|
3086
3282
|
};
|
|
3087
3283
|
|
|
3284
|
+
export type HelixDescriptionListItemVueProps = {
|
|
3285
|
+
/** What the value is, for the common case of plain text.
|
|
3286
|
+
|
|
3287
|
+
The fallback of the `label` slot, so slotted content replaces it rather than
|
|
3288
|
+
appearing beside it. */
|
|
3289
|
+
label?: (HelixDescriptionListItem["label"]) | undefined;
|
|
3290
|
+
};
|
|
3291
|
+
|
|
3292
|
+
export type HelixDescriptionListItemVueEvents = {};
|
|
3293
|
+
|
|
3294
|
+
export type HelixDescriptionListVueProps = {
|
|
3295
|
+
/** Where the values sit, beside their labels.
|
|
3296
|
+
|
|
3297
|
+
Absent, each value starts right after the label column. `between` sets it on
|
|
3298
|
+
the end edge instead, with the label on the start one, and in figures of one
|
|
3299
|
+
width so a column of numbers lines up by its digits. Only with
|
|
3300
|
+
`direction="row"`: stacked, a label and its value share one edge already.
|
|
3301
|
+
|
|
3302
|
+
Flex's word for the same thing, and a grid rather than a flex row
|
|
3303
|
+
underneath, so the labels still share one column while the values share an
|
|
3304
|
+
end. */
|
|
3305
|
+
justify?: (HelixDescriptionList["justify"]) | undefined;
|
|
3306
|
+
/** How wide the list is.
|
|
3307
|
+
|
|
3308
|
+
Absent, it fills the row it is in. `auto` is as wide as its widest pair,
|
|
3309
|
+
which is what a summary beside other content wants.
|
|
3310
|
+
|
|
3311
|
+
**At `auto` the list does not stack when narrow.** The fallback measures the
|
|
3312
|
+
list's own width, and a list sized by its content has no width of its own to
|
|
3313
|
+
measure: containment would size it to nothing. It is capped at its container
|
|
3314
|
+
instead, and a long value wraps inside its column. */
|
|
3315
|
+
width?: (HelixDescriptionList["width"]) | undefined;
|
|
3316
|
+
/** Whether each label sits over its value or beside it.
|
|
3317
|
+
|
|
3318
|
+
Absent is a column, the label over the value, which fits any width and is
|
|
3319
|
+
how a narrow panel reads. `row` puts every label in one column and every
|
|
3320
|
+
value in the next, which is how a wide panel is scanned: down the labels to
|
|
3321
|
+
the one wanted, then across.
|
|
3322
|
+
|
|
3323
|
+
On the list rather than on each item, because beside only reads when the
|
|
3324
|
+
labels line up, and lining up is a fact about all of them.
|
|
3325
|
+
|
|
3326
|
+
**Optional rather than defaulted to `column`**, for the reason `Stat` gives:
|
|
3327
|
+
a reflecting default writes an attribute onto markup the consumer rendered,
|
|
3328
|
+
and React reports that as a hydration mismatch. */
|
|
3329
|
+
direction?: (HelixDescriptionList["direction"]) | undefined;
|
|
3330
|
+
};
|
|
3331
|
+
|
|
3332
|
+
export type HelixDescriptionListVueEvents = {};
|
|
3333
|
+
|
|
3088
3334
|
/** `HelixDialog` component event */
|
|
3089
3335
|
export type HelixDialogElementEvent<E = Event> = TypedEvent<HelixDialog, E>;
|
|
3090
3336
|
/** `helix-before-close` event type */
|
|
@@ -3575,6 +3821,171 @@ export type HelixFileInputVueEvents = {
|
|
|
3575
3821
|
"helix-before-change": HelixFileInputHelixBeforeChangeElementEvent;
|
|
3576
3822
|
};
|
|
3577
3823
|
|
|
3824
|
+
/** `HelixFilterChip` component event */
|
|
3825
|
+
export type HelixFilterChipElementEvent<E = Event> = TypedEvent<
|
|
3826
|
+
HelixFilterChip,
|
|
3827
|
+
E
|
|
3828
|
+
>;
|
|
3829
|
+
/** `helix-dismiss` event type */
|
|
3830
|
+
export type HelixFilterChipHelixDismissElementEvent =
|
|
3831
|
+
HelixFilterChipElementEvent<HelixDismissEvent>;
|
|
3832
|
+
|
|
3833
|
+
export type HelixFilterChipVueProps = {
|
|
3834
|
+
/** Whether it offers a control to take it away. */
|
|
3835
|
+
dismissible?: (HelixFilterChip["dismissible"]) | undefined;
|
|
3836
|
+
/** Accessible name for that control.
|
|
3837
|
+
|
|
3838
|
+
`attribute` is spelled out because Lit lowercases a property name to
|
|
3839
|
+
derive one rather than dash-casing it, so this would otherwise be
|
|
3840
|
+
reachable only as `dismisslabel`, which nobody would guess and no linter
|
|
3841
|
+
would catch. */
|
|
3842
|
+
"dismiss-label"?: (HelixFilterChip["dismissLabel"]) | undefined;
|
|
3843
|
+
/** Accessible name for that control.
|
|
3844
|
+
|
|
3845
|
+
`attribute` is spelled out because Lit lowercases a property name to
|
|
3846
|
+
derive one rather than dash-casing it, so this would otherwise be
|
|
3847
|
+
reachable only as `dismisslabel`, which nobody would guess and no linter
|
|
3848
|
+
would catch. */
|
|
3849
|
+
dismissLabel?: (HelixFilterChip["dismissLabel"]) | undefined;
|
|
3850
|
+
/** The field this filter is on, as a reader sees it.
|
|
3851
|
+
|
|
3852
|
+
The slot's fallback rather than the slot's replacement: a consumer who wants
|
|
3853
|
+
a mark beside the name slots `field` and this goes unused. */
|
|
3854
|
+
label?: (HelixFilterChip["label"]) | undefined;
|
|
3855
|
+
/** The field this filter is on, as the consumer's model calls it.
|
|
3856
|
+
|
|
3857
|
+
Never shown. Reflected, because a consumer removing one filter from a list
|
|
3858
|
+
of them selects on this, and so undefaulted for the reason `operator` gives.
|
|
3859
|
+
|
|
3860
|
+
**A chip built in script should be given the attribute, not the property**,
|
|
3861
|
+
if the next thing to happen might select on it. Reflection is written on
|
|
3862
|
+
this element's next update rather than during the assignment, so a second
|
|
3863
|
+
`helix-facet` for the same field arriving in the same frame selects nothing,
|
|
3864
|
+
builds a second chip, and leaves the row holding two of one filter. The
|
|
3865
|
+
lookup then finds whichever came first, so dismissing one chip takes the
|
|
3866
|
+
other away. `setAttribute('name', field)` is true immediately and costs
|
|
3867
|
+
nothing; the property is for markup and for frameworks that write both. */
|
|
3868
|
+
name?: (HelixFilterChip["name"]) | undefined;
|
|
3869
|
+
/** What the consumer's own model calls the comparison in force.
|
|
3870
|
+
|
|
3871
|
+
Never shown, and it is what a consumer matches on when the chip comes back
|
|
3872
|
+
to them. `label` translates; this does not.
|
|
3873
|
+
|
|
3874
|
+
Reflected and so undefaulted: a reflected property with a default writes an
|
|
3875
|
+
attribute on upgrade that the server never wrote, and the two markups differ
|
|
3876
|
+
before a reader has touched anything. */
|
|
3877
|
+
operator?: (HelixFilterChip["operator"]) | undefined;
|
|
3878
|
+
/** The comparison, as a reader sees it, and empty for the field's usual one.
|
|
3879
|
+
|
|
3880
|
+
**Empty is the whole design and not an oversight.** A chip drawn for the
|
|
3881
|
+
comparison a field is normally filtered by says the field and the values and
|
|
3882
|
+
nothing between them, because a word every chip carries is a word nobody
|
|
3883
|
+
reads. The moment somebody picks a different comparison it appears, which
|
|
3884
|
+
makes an unusual filter look unusual. */
|
|
3885
|
+
"operator-label"?: (HelixFilterChip["operatorLabel"]) | undefined;
|
|
3886
|
+
/** The comparison, as a reader sees it, and empty for the field's usual one.
|
|
3887
|
+
|
|
3888
|
+
**Empty is the whole design and not an oversight.** A chip drawn for the
|
|
3889
|
+
comparison a field is normally filtered by says the field and the values and
|
|
3890
|
+
nothing between them, because a word every chip carries is a word nobody
|
|
3891
|
+
reads. The moment somebody picks a different comparison it appears, which
|
|
3892
|
+
makes an unusual filter look unusual. */
|
|
3893
|
+
operatorLabel?: (HelixFilterChip["operatorLabel"]) | undefined;
|
|
3894
|
+
};
|
|
3895
|
+
|
|
3896
|
+
export type HelixFilterChipVueEvents = {
|
|
3897
|
+
/** Fired when the reader asks to remove the filter. Cancelable: refusing it takes the decision and nothing moves. */
|
|
3898
|
+
"helix-dismiss": HelixFilterChipHelixDismissElementEvent;
|
|
3899
|
+
};
|
|
3900
|
+
|
|
3901
|
+
export type HelixFilterFieldVueProps = {
|
|
3902
|
+
/** What a reader is shown, in the menu and on every chip built from this field. */
|
|
3903
|
+
label?: (HelixFilterField["label"]) | undefined;
|
|
3904
|
+
/** What the consumer's own model calls this field.
|
|
3905
|
+
|
|
3906
|
+
Never shown, and what arrives in the filter this helps build.
|
|
3907
|
+
|
|
3908
|
+
Reflected and so undefaulted: a reflected property with a default writes an
|
|
3909
|
+
attribute on upgrade that the server never wrote. */
|
|
3910
|
+
name?: (HelixFilterField["name"]) | undefined;
|
|
3911
|
+
};
|
|
3912
|
+
|
|
3913
|
+
export type HelixFilterFieldVueEvents = {};
|
|
3914
|
+
|
|
3915
|
+
/** `HelixFilterMenu` component event */
|
|
3916
|
+
export type HelixFilterMenuElementEvent<E = Event> = TypedEvent<
|
|
3917
|
+
HelixFilterMenu,
|
|
3918
|
+
E
|
|
3919
|
+
>;
|
|
3920
|
+
/** `helix-facet` event type */
|
|
3921
|
+
export type HelixFilterMenuHelixFacetElementEvent =
|
|
3922
|
+
HelixFilterMenuElementEvent<HelixFacetEvent>;
|
|
3923
|
+
|
|
3924
|
+
export type HelixFilterMenuVueProps = {
|
|
3925
|
+
/** Accessible name for the menu. */
|
|
3926
|
+
label?: (HelixFilterMenu["label"]) | undefined;
|
|
3927
|
+
};
|
|
3928
|
+
|
|
3929
|
+
export type HelixFilterMenuVueEvents = {
|
|
3930
|
+
/** Fired when a field's values change. Cancelable: refusing it takes the decision and nothing moves. */
|
|
3931
|
+
"helix-facet": HelixFilterMenuHelixFacetElementEvent;
|
|
3932
|
+
};
|
|
3933
|
+
|
|
3934
|
+
export type HelixFilterOperatorVueProps = {
|
|
3935
|
+
/** How many values this comparison takes.
|
|
3936
|
+
|
|
3937
|
+
`none` is a comparison that is complete on its own, which is what `is empty`
|
|
3938
|
+
and `is set` are: a chip drawn for one shows no values because there are
|
|
3939
|
+
none to show, and the menu that builds it offers nothing to pick.
|
|
3940
|
+
|
|
3941
|
+
`one` takes a single value, which is every scalar comparison: `is after` a
|
|
3942
|
+
date, `is above` a number. `many` takes a set, which is what `is any of` and
|
|
3943
|
+
`is none of` are, and is the only arity a multi-select panel makes sense
|
|
3944
|
+
for.
|
|
3945
|
+
|
|
3946
|
+
Read rather than enforced. This element applies nothing, so the arity is a
|
|
3947
|
+
fact the picker uses to decide what to offer, not a rule it polices. What
|
|
3948
|
+
the picker does with it: `none` offers no values at all and takes back any
|
|
3949
|
+
that were ticked, since the comparison is the whole filter; `one` replaces
|
|
3950
|
+
rather than adds, and its rows announce as one of a set. The typed grammar
|
|
3951
|
+
reads it too, refusing a list where a scalar was declared and never writing
|
|
3952
|
+
a comparison that takes nothing.
|
|
3953
|
+
|
|
3954
|
+
The arity reaches a consumer in `helix-facet`, which is what tells an empty
|
|
3955
|
+
filter from no filter: `values` empty means the field is no longer narrowing
|
|
3956
|
+
anything, unless the comparison is one that never had values to give.
|
|
3957
|
+
|
|
3958
|
+
**Undefined reads as `many`, and takes no default**, which is the rule every
|
|
3959
|
+
reflected property here answers to: a default writes an attribute on upgrade
|
|
3960
|
+
that the server never wrote, and the two markups differ before a reader has
|
|
3961
|
+
touched anything. */
|
|
3962
|
+
arity?: (HelixFilterOperator["arity"]) | undefined;
|
|
3963
|
+
/** Whether this is the comparison the field is filtered by unless asked
|
|
3964
|
+
otherwise.
|
|
3965
|
+
|
|
3966
|
+
The chip leaves a default operator unwritten, so the common filter reads as
|
|
3967
|
+
a field and its values and nothing else, and the word only appears once
|
|
3968
|
+
somebody has chosen a comparison worth noticing. */
|
|
3969
|
+
default?: (HelixFilterOperator["default"]) | undefined;
|
|
3970
|
+
/** What a reader is shown, in the chip and in the menu that changes it.
|
|
3971
|
+
|
|
3972
|
+
Words rather than symbols, and the reason is that a set has more than one
|
|
3973
|
+
negation: `!=` cannot tell "is none of" from "is not all of", and both are
|
|
3974
|
+
filters somebody wants. A chip is read, so it takes the reading. The text
|
|
3975
|
+
grammar a consumer types is theirs and may use whatever symbols it likes. */
|
|
3976
|
+
label?: (HelixFilterOperator["label"]) | undefined;
|
|
3977
|
+
/** What the consumer's own model calls this comparison.
|
|
3978
|
+
|
|
3979
|
+
Never shown. It is what arrives in the filter this element helps build, so
|
|
3980
|
+
a consumer matches on it rather than on the words a reader sees, and
|
|
3981
|
+
translating the label breaks nothing.
|
|
3982
|
+
|
|
3983
|
+
Reflected and so undefaulted, for the reason `arity` gives above. */
|
|
3984
|
+
name?: (HelixFilterOperator["name"]) | undefined;
|
|
3985
|
+
};
|
|
3986
|
+
|
|
3987
|
+
export type HelixFilterOperatorVueEvents = {};
|
|
3988
|
+
|
|
3578
3989
|
/** `HelixFilterInput` component event */
|
|
3579
3990
|
export type HelixFilterInputElementEvent<E = Event> = TypedEvent<
|
|
3580
3991
|
HelixFilterInput,
|
|
@@ -3589,6 +4000,15 @@ export type HelixFilterInputHelixBeforeCloseElementEvent =
|
|
|
3589
4000
|
/** `helix-before-open` event type */
|
|
3590
4001
|
export type HelixFilterInputHelixBeforeOpenElementEvent =
|
|
3591
4002
|
HelixFilterInputElementEvent<HelixBeforeOpenEvent>;
|
|
4003
|
+
/** `helix-dismiss` event type */
|
|
4004
|
+
export type HelixFilterInputHelixDismissElementEvent =
|
|
4005
|
+
HelixFilterInputElementEvent<HelixDismissEvent>;
|
|
4006
|
+
/** `helix-facet` event type */
|
|
4007
|
+
export type HelixFilterInputHelixFacetElementEvent =
|
|
4008
|
+
HelixFilterInputElementEvent<HelixFacetEvent>;
|
|
4009
|
+
/** `helix-select` event type */
|
|
4010
|
+
export type HelixFilterInputHelixSelectElementEvent =
|
|
4011
|
+
HelixFilterInputElementEvent<HelixSelectEvent>;
|
|
3592
4012
|
|
|
3593
4013
|
export type HelixFilterInputVueProps = {
|
|
3594
4014
|
/** Whether the element is open.
|
|
@@ -3695,6 +4115,12 @@ export type HelixFilterInputVueEvents = {
|
|
|
3695
4115
|
"helix-before-close": HelixFilterInputHelixBeforeCloseElementEvent;
|
|
3696
4116
|
/** Fired before the suggestions show, and cancelable. */
|
|
3697
4117
|
"helix-before-open": HelixFilterInputHelixBeforeOpenElementEvent;
|
|
4118
|
+
/** A token asking to go, from its close control or from Backspace on an empty field. A `FilterChip` naming a declared field is answered as `helix-facet` instead. Cancelable: refusing it takes the decision and the token stays. */
|
|
4119
|
+
"helix-dismiss": HelixFilterInputHelixDismissElementEvent;
|
|
4120
|
+
/** Fired when a filter changes, whether read out of the text, picked, or dismissed. Cancelable: refusing it leaves the text and the chip where they were. */
|
|
4121
|
+
"helix-facet": HelixFilterInputHelixFacetElementEvent;
|
|
4122
|
+
/** A suggestion was chosen: the option's own, heard here because it bubbles out of `suggestions`. Cancelable: refusing it takes the decision from any other listener, and this field never acts on a choice itself, since what it means is the page's. */
|
|
4123
|
+
"helix-select": HelixFilterInputHelixSelectElementEvent;
|
|
3698
4124
|
/** Says the panel moved, carrying `newState` and `oldState`. */
|
|
3699
4125
|
toggle: HelixFilterInputElementEvent;
|
|
3700
4126
|
};
|
|
@@ -3924,8 +4350,11 @@ Three and an accent, not the full status set. A tag reports a state and a
|
|
|
3924
4350
|
button performs an action: a success button and a warning button are not
|
|
3925
4351
|
things anybody writes, and offering them invites a page where the color
|
|
3926
4352
|
of a control means nothing in particular. `accent` is the second
|
|
3927
|
-
emphasis
|
|
3928
|
-
|
|
4353
|
+
emphasis: the second color a theme names, and the brand itself until one
|
|
4354
|
+
is named. It used to be a rotation off the brand seed whether or not
|
|
4355
|
+
anybody asked for a second color, which handed every theme a complement
|
|
4356
|
+
it had not chosen, 3 degrees off `warning` and sometimes too pale to
|
|
4357
|
+
read. */
|
|
3929
4358
|
tone?: (HelixIconButton["tone"]) | undefined;
|
|
3930
4359
|
/** What to send when the button is activated, and what to send it to.
|
|
3931
4360
|
|
|
@@ -4525,10 +4954,12 @@ shadow root names a table in that root rather than in the document. A
|
|
|
4525
4954
|
Absent falls back to the table's own caption, which is usually the right
|
|
4526
4955
|
words and is already written. */
|
|
4527
4956
|
label?: (HelixLineChart["label"]) | undefined;
|
|
4528
|
-
/** Whether a wash is drawn under each line.
|
|
4957
|
+
/** Whether a wash is drawn under each line, each from the floor on its own.
|
|
4958
|
+
The washes overlap rather than add up: for parts that make a total, use
|
|
4959
|
+
`Area Chart`, which stacks them.
|
|
4529
4960
|
|
|
4530
4961
|
Absent is lines alone, which is what suits more than one series: washes
|
|
4531
|
-
|
|
4962
|
+
overlap and the lower ones are read through the upper. One series over a
|
|
4532
4963
|
ground it should feel like a quantity against is the case for this. */
|
|
4533
4964
|
area?: (HelixLineChart["area"]) | undefined;
|
|
4534
4965
|
/** How the line gets from one reading to the next.
|
|
@@ -4951,6 +5382,17 @@ Only meaningful beside an `href`, and only for a file served from this
|
|
|
4951
5382
|
origin: the attribute is ignored cross-origin, which is the browser's rule
|
|
4952
5383
|
about who may name a file on somebody's disk rather than a gap here. */
|
|
4953
5384
|
download?: (HelixMenuItem["download"]) | undefined;
|
|
5385
|
+
/** Whether only one row of the set it belongs to can be on.
|
|
5386
|
+
|
|
5387
|
+
Announcement and nothing else, the way `checkable` is: this element applies
|
|
5388
|
+
no choice and polices no group, so what it does is tell a reader which kind
|
|
5389
|
+
of set they are in. `menuitemcheckbox` says every row here is independent,
|
|
5390
|
+
which for a run of comparisons, or the values of a filter that compares
|
|
5391
|
+
against one, is the opposite of true.
|
|
5392
|
+
|
|
5393
|
+
Meaningless without `checkable`, since a row that cannot be ticked is not
|
|
5394
|
+
one of a set of anything. */
|
|
5395
|
+
exclusive?: (HelixMenuItem["exclusive"]) | undefined;
|
|
4954
5396
|
/** Where the row goes, which makes it a real link.
|
|
4955
5397
|
|
|
4956
5398
|
**The row itself becomes an `<a>`, and the role goes with it.** A
|
|
@@ -4982,13 +5424,14 @@ Set by the menu, and a property rather than an attribute for that reason.
|
|
|
4982
5424
|
Public because the menu has to reach it, and not something a consumer
|
|
4983
5425
|
writes: which page is open is the menu's business. */
|
|
4984
5426
|
onPage?: (HelixMenuItem["onPage"]) | undefined;
|
|
4985
|
-
/** Whether this row's submenu
|
|
5427
|
+
/** Whether the page showing is this row's submenu, or one below it.
|
|
4986
5428
|
|
|
4987
5429
|
Separate from `onPage`, and it has to be. A row that opened a page is not
|
|
4988
5430
|
itself on that page, so both are false for it, and rendering nothing on
|
|
4989
5431
|
that basis takes its `slot[name="submenu"]` with it: the rows inside have
|
|
4990
|
-
nowhere to be assigned and are never laid out.
|
|
4991
|
-
page has to keep
|
|
5432
|
+
nowhere to be assigned and are never laid out. Every row on the way down to
|
|
5433
|
+
the open page has to keep its slot, not only the one directly above it.
|
|
5434
|
+
Three levels deep, the topmost row holds the slot the middle one lives in. */
|
|
4992
5435
|
showingSubmenu?: (HelixMenuItem["showingSubmenu"]) | undefined;
|
|
4993
5436
|
};
|
|
4994
5437
|
|
|
@@ -5183,6 +5626,63 @@ export type HelixNavigationVueProps = {
|
|
|
5183
5626
|
|
|
5184
5627
|
export type HelixNavigationVueEvents = {};
|
|
5185
5628
|
|
|
5629
|
+
/** `HelixNotificationGroup` component event */
|
|
5630
|
+
export type HelixNotificationGroupElementEvent<E = Event> = TypedEvent<
|
|
5631
|
+
HelixNotificationGroup,
|
|
5632
|
+
E
|
|
5633
|
+
>;
|
|
5634
|
+
/** `helix-before-close` event type */
|
|
5635
|
+
export type HelixNotificationGroupHelixBeforeCloseElementEvent =
|
|
5636
|
+
HelixNotificationGroupElementEvent<HelixBeforeCloseEvent>;
|
|
5637
|
+
/** `helix-before-open` event type */
|
|
5638
|
+
export type HelixNotificationGroupHelixBeforeOpenElementEvent =
|
|
5639
|
+
HelixNotificationGroupElementEvent<HelixBeforeOpenEvent>;
|
|
5640
|
+
|
|
5641
|
+
export type HelixNotificationGroupVueProps = {
|
|
5642
|
+
/** Whether the element is open.
|
|
5643
|
+
|
|
5644
|
+
One property, not two, so `dialog.open` answers the question anyone
|
|
5645
|
+
asking it meant. Writing always applies; `<helix-dialog open>` is the
|
|
5646
|
+
same statement in markup.
|
|
5647
|
+
|
|
5648
|
+
**Not reflected, and that is required rather than tidy.** Reflection
|
|
5649
|
+
writes the resolved state back as an attribute, so an element that opened
|
|
5650
|
+
itself would put `open` on its own host: cloned, serialized for
|
|
5651
|
+
hydration, or diffed by a framework, it comes back holding whatever the
|
|
5652
|
+
last reader did rather than what the author wrote. `:state(open)` carries
|
|
5653
|
+
the resolved state for stylesheets, which is what the mirror is for. */
|
|
5654
|
+
open?: (HelixNotificationGroup["open"]) | undefined;
|
|
5655
|
+
/** Initial open state for uncontrolled use, where nothing declared one. */
|
|
5656
|
+
"default-open"?: (HelixNotificationGroup["defaultOpen"]) | undefined;
|
|
5657
|
+
/** Initial open state for uncontrolled use, where nothing declared one. */
|
|
5658
|
+
defaultOpen?: (HelixNotificationGroup["defaultOpen"]) | undefined;
|
|
5659
|
+
/** Whether the group can be collapsed to its first row.
|
|
5660
|
+
|
|
5661
|
+
Off by default, because a group is a heading before it is a control: a feed
|
|
5662
|
+
cut by day wants its days named and rarely wants them folded, and a control
|
|
5663
|
+
that does nothing anybody asked for is still a tab stop. */
|
|
5664
|
+
collapsible?: (HelixNotificationGroup["collapsible"]) | undefined;
|
|
5665
|
+
/** How many notifications this group stands for.
|
|
5666
|
+
|
|
5667
|
+
**Not the number of rows, and that is the point.** A group saying five with
|
|
5668
|
+
one row under it and a link to the rest is the ordinary shape of a feed that
|
|
5669
|
+
has been trimmed, and deriving this from the children would make it
|
|
5670
|
+
unsayable. Left off, it is the number of rows. */
|
|
5671
|
+
count?: (HelixNotificationGroup["count"]) | undefined;
|
|
5672
|
+
/** What the group is called: a day, a subject, a person.
|
|
5673
|
+
|
|
5674
|
+
The slot's fallback rather than its replacement, so a consumer who wants a
|
|
5675
|
+
mark beside the name slots `label` and this goes unused. */
|
|
5676
|
+
label?: (HelixNotificationGroup["label"]) | undefined;
|
|
5677
|
+
};
|
|
5678
|
+
|
|
5679
|
+
export type HelixNotificationGroupVueEvents = {
|
|
5680
|
+
/** Fired before the group folds, and cancelable. */
|
|
5681
|
+
"helix-before-close": HelixNotificationGroupHelixBeforeCloseElementEvent;
|
|
5682
|
+
/** Fired before the group unfolds. Cancelable: refusing it takes the decision and nothing moves. */
|
|
5683
|
+
"helix-before-open": HelixNotificationGroupHelixBeforeOpenElementEvent;
|
|
5684
|
+
};
|
|
5685
|
+
|
|
5186
5686
|
/** `HelixNotification` component event */
|
|
5187
5687
|
export type HelixNotificationElementEvent<E = Event> = TypedEvent<
|
|
5188
5688
|
HelixNotification,
|
|
@@ -5196,6 +5696,24 @@ export type HelixNotificationHelixReadElementEvent =
|
|
|
5196
5696
|
HelixNotificationElementEvent<HelixReadEvent>;
|
|
5197
5697
|
|
|
5198
5698
|
export type HelixNotificationVueProps = {
|
|
5699
|
+
/** How a row is told apart from the one above it.
|
|
5700
|
+
|
|
5701
|
+
`plain` is the resting one and is a hairline and nothing else: the row has
|
|
5702
|
+
no box of its own, and what separates it is a line the list draws between
|
|
5703
|
+
them. It is sayable rather than only reachable by leaving the attribute off,
|
|
5704
|
+
which is the reason `Announcement` gives for spelling out its own neutral.
|
|
5705
|
+
|
|
5706
|
+
`outlined` and `filled` make each row a box: an edge, a corner, and a gap
|
|
5707
|
+
where the hairline was. A feed of boxes is a different reading of the same
|
|
5708
|
+
content, and which one is right depends on whether the rows are a list to
|
|
5709
|
+
scan or a set of things to act on. The reference this came from draws cards
|
|
5710
|
+
because every row in it has a control.
|
|
5711
|
+
|
|
5712
|
+
**On the row and not on the feed, because the row is the box being
|
|
5713
|
+
separated.** A consumer wanting the whole feed carded says so once, in a
|
|
5714
|
+
document rule on the element, rather than on every item: this is a styled
|
|
5715
|
+
axis and a stylesheet is where it is set. */
|
|
5716
|
+
separation?: (HelixNotification["separation"]) | undefined;
|
|
5199
5717
|
/** When it happened, as anything `Date` parses.
|
|
5200
5718
|
|
|
5201
5719
|
An ISO string is what an API sends and what `<time datetime>` takes, so it
|
|
@@ -5245,6 +5763,9 @@ export type HelixNotificationsElementEvent<E = Event> = TypedEvent<
|
|
|
5245
5763
|
HelixNotifications,
|
|
5246
5764
|
E
|
|
5247
5765
|
>;
|
|
5766
|
+
/** `helix-dismiss` event type */
|
|
5767
|
+
export type HelixNotificationsHelixDismissElementEvent =
|
|
5768
|
+
HelixNotificationsElementEvent<HelixDismissEvent>;
|
|
5248
5769
|
/** `helix-read` event type */
|
|
5249
5770
|
export type HelixNotificationsHelixReadElementEvent =
|
|
5250
5771
|
HelixNotificationsElementEvent<HelixReadEvent>;
|
|
@@ -5277,6 +5798,8 @@ say that without the component knowing what a row looks like. */
|
|
|
5277
5798
|
};
|
|
5278
5799
|
|
|
5279
5800
|
export type HelixNotificationsVueEvents = {
|
|
5801
|
+
/** A row asking to be removed, dispatched by the row and heard here because the feed is what a consumer holds. Cancelable: refusing it takes the decision and the row stays. */
|
|
5802
|
+
"helix-dismiss": HelixNotificationsHelixDismissElementEvent;
|
|
5280
5803
|
/** Fired by an item, and by this element when everything is marked read. Cancelable. */
|
|
5281
5804
|
"helix-read": HelixNotificationsHelixReadElementEvent;
|
|
5282
5805
|
};
|
|
@@ -5407,6 +5930,65 @@ export type HelixNumberInputVueEvents = {
|
|
|
5407
5930
|
"helix-before-change": HelixNumberInputHelixBeforeChangeElementEvent;
|
|
5408
5931
|
};
|
|
5409
5932
|
|
|
5933
|
+
/** `HelixObjectInspector` component event */
|
|
5934
|
+
export type HelixObjectInspectorElementEvent<E = Event> = TypedEvent<
|
|
5935
|
+
HelixObjectInspector,
|
|
5936
|
+
E
|
|
5937
|
+
>;
|
|
5938
|
+
/** `helix-copy` event type */
|
|
5939
|
+
export type HelixObjectInspectorHelixCopyElementEvent =
|
|
5940
|
+
HelixObjectInspectorElementEvent<HelixCopyEvent>;
|
|
5941
|
+
|
|
5942
|
+
export type HelixObjectInspectorVueProps = {
|
|
5943
|
+
/** How many levels start open.
|
|
5944
|
+
|
|
5945
|
+
One by default: the root is open and everything under it closed, so a
|
|
5946
|
+
reader sees the shape of the value before its contents. `0` starts with the
|
|
5947
|
+
root closed; a large number opens everything, which on a big value is the
|
|
5948
|
+
wall of text this exists to avoid. */
|
|
5949
|
+
"default-depth"?: (HelixObjectInspector["defaultDepth"]) | undefined;
|
|
5950
|
+
/** How many levels start open.
|
|
5951
|
+
|
|
5952
|
+
One by default: the root is open and everything under it closed, so a
|
|
5953
|
+
reader sees the shape of the value before its contents. `0` starts with the
|
|
5954
|
+
root closed; a large number opens everything, which on a big value is the
|
|
5955
|
+
wall of text this exists to avoid. */
|
|
5956
|
+
defaultDepth?: (HelixObjectInspector["defaultDepth"]) | undefined;
|
|
5957
|
+
/** The id of a `<script type="application/json">` holding the value.
|
|
5958
|
+
|
|
5959
|
+
Read once the document exists, and again whenever this changes. Text that
|
|
5960
|
+
does not parse leaves the inspector empty rather than throwing, since a
|
|
5961
|
+
page's markup should not take the page down over a comma. */
|
|
5962
|
+
for?: (HelixObjectInspector["for"]) | undefined;
|
|
5963
|
+
/** Accessible name for the tree, and the text of the header where there is one. */
|
|
5964
|
+
label?: (HelixObjectInspector["label"]) | undefined;
|
|
5965
|
+
/** Whether to leave the copy button off.
|
|
5966
|
+
|
|
5967
|
+
Negative for the reason Code Block's is: a boolean attribute defaulting to
|
|
5968
|
+
true could never be turned off from markup. */
|
|
5969
|
+
"no-copy"?: (HelixObjectInspector["noCopy"]) | undefined;
|
|
5970
|
+
/** Whether to leave the copy button off.
|
|
5971
|
+
|
|
5972
|
+
Negative for the reason Code Block's is: a boolean attribute defaulting to
|
|
5973
|
+
true could never be turned off from markup. */
|
|
5974
|
+
noCopy?: (HelixObjectInspector["noCopy"]) | undefined;
|
|
5975
|
+
/** Whether to draw only the rows in view.
|
|
5976
|
+
|
|
5977
|
+
For a value of thousands of entries. Reflected, because the box it scrolls
|
|
5978
|
+
needs a height, which is a stylesheet rule reading this attribute. */
|
|
5979
|
+
windowed?: (HelixObjectInspector["windowed"]) | undefined;
|
|
5980
|
+
/** The value itself, for a page that already holds it.
|
|
5981
|
+
|
|
5982
|
+
Takes precedence over `for`. Anything JSON can say is drawn; anything else
|
|
5983
|
+
is shown as its string. */
|
|
5984
|
+
value?: (HelixObjectInspector["value"]) | undefined;
|
|
5985
|
+
};
|
|
5986
|
+
|
|
5987
|
+
export type HelixObjectInspectorVueEvents = {
|
|
5988
|
+
/** A value was put on the clipboard, from the copy button or the keyboard. */
|
|
5989
|
+
"helix-copy": HelixObjectInspectorHelixCopyElementEvent;
|
|
5990
|
+
};
|
|
5991
|
+
|
|
5410
5992
|
export type HelixOptionGroupVueProps = {
|
|
5411
5993
|
/** The heading over the run. */
|
|
5412
5994
|
label?: (HelixOptionGroup["label"]) | undefined;
|
|
@@ -5574,7 +6156,8 @@ JavaScript rather than CSS decides. */
|
|
|
5574
6156
|
behavior?: (HelixOutline["behavior"]) | undefined;
|
|
5575
6157
|
/** Accessible name for the navigation. */
|
|
5576
6158
|
label?: (HelixOutline["label"]) | undefined;
|
|
5577
|
-
/** How far below the top of
|
|
6159
|
+
/** How far below the top of what scrolls a heading counts as reached, in
|
|
6160
|
+
pixels: the window, or the panel the sections scroll in.
|
|
5578
6161
|
|
|
5579
6162
|
The reading line. A page with a sticky masthead sets this to its height, or
|
|
5580
6163
|
a little more: without it the current section changes as a heading slides
|
|
@@ -6120,6 +6703,9 @@ export type HelixRadioGroupElementEvent<E = Event> = TypedEvent<
|
|
|
6120
6703
|
/** `helix-before-change` event type */
|
|
6121
6704
|
export type HelixRadioGroupHelixBeforeChangeElementEvent =
|
|
6122
6705
|
HelixRadioGroupElementEvent<HelixBeforeChangeEvent>;
|
|
6706
|
+
/** `helix-select` event type */
|
|
6707
|
+
export type HelixRadioGroupHelixSelectElementEvent =
|
|
6708
|
+
HelixRadioGroupElementEvent<HelixSelectEvent>;
|
|
6123
6709
|
|
|
6124
6710
|
export type HelixRadioGroupVueProps = {
|
|
6125
6711
|
/** The value the markup declared, which is where a reset returns to. */
|
|
@@ -6185,6 +6771,8 @@ export type HelixRadioGroupVueEvents = {
|
|
|
6185
6771
|
change: HelixRadioGroupElementEvent;
|
|
6186
6772
|
/** Fired when the answer changes, and cancelable. */
|
|
6187
6773
|
"helix-before-change": HelixRadioGroupHelixBeforeChangeElementEvent;
|
|
6774
|
+
/** Fired when an answer is chosen. Dispatched by the radio and listened for here, because the group is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves. */
|
|
6775
|
+
"helix-select": HelixRadioGroupHelixSelectElementEvent;
|
|
6188
6776
|
};
|
|
6189
6777
|
|
|
6190
6778
|
/** `HelixRadio` component event */
|
|
@@ -6482,12 +7070,24 @@ export type HelixSandboxPreviewVueEvents = {
|
|
|
6482
7070
|
|
|
6483
7071
|
/** `HelixSandbox` component event */
|
|
6484
7072
|
export type HelixSandboxElementEvent<E = Event> = TypedEvent<HelixSandbox, E>;
|
|
7073
|
+
/** `helix-before-edit` event type */
|
|
7074
|
+
export type HelixSandboxHelixBeforeEditElementEvent =
|
|
7075
|
+
HelixSandboxElementEvent<HelixBeforeEditEvent>;
|
|
6485
7076
|
/** `helix-before-panel-resize` event type */
|
|
6486
7077
|
export type HelixSandboxHelixBeforePanelResizeElementEvent =
|
|
6487
7078
|
HelixSandboxElementEvent<HelixBeforePanelResizeEvent>;
|
|
6488
7079
|
/** `helix-before-split` event type */
|
|
6489
7080
|
export type HelixSandboxHelixBeforeSplitElementEvent =
|
|
6490
7081
|
HelixSandboxElementEvent<HelixBeforeSplitEvent>;
|
|
7082
|
+
/** `helix-caret` event type */
|
|
7083
|
+
export type HelixSandboxHelixCaretElementEvent =
|
|
7084
|
+
HelixSandboxElementEvent<HelixCaretEvent>;
|
|
7085
|
+
/** `helix-console` event type */
|
|
7086
|
+
export type HelixSandboxHelixConsoleElementEvent =
|
|
7087
|
+
HelixSandboxElementEvent<HelixConsoleEvent>;
|
|
7088
|
+
/** `helix-resize` event type */
|
|
7089
|
+
export type HelixSandboxHelixResizeElementEvent =
|
|
7090
|
+
HelixSandboxElementEvent<HelixResizeEvent>;
|
|
6491
7091
|
|
|
6492
7092
|
export type HelixSandboxVueProps = {
|
|
6493
7093
|
/** Accessible name for the divider that moves both at once. */
|
|
@@ -6573,10 +7173,18 @@ and only whoever slotted it knows how tall that is. */
|
|
|
6573
7173
|
};
|
|
6574
7174
|
|
|
6575
7175
|
export type HelixSandboxVueEvents = {
|
|
7176
|
+
/** Fired before the source is edited, by the source pane and heard here. Cancelable: refusing it takes the decision and nothing moves. */
|
|
7177
|
+
"helix-before-edit": HelixSandboxHelixBeforeEditElementEvent;
|
|
6576
7178
|
/** Fired before the panel's divider is let go, with its height in pixels. Cancelable: refusing it takes the decision and nothing moves. */
|
|
6577
7179
|
"helix-before-panel-resize": HelixSandboxHelixBeforePanelResizeElementEvent;
|
|
6578
7180
|
/** Fired before the panes' divider is let go, with the lead pane's share. Cancelable: refusing it takes the decision and nothing moves. */
|
|
6579
7181
|
"helix-before-split": HelixSandboxHelixBeforeSplitElementEvent;
|
|
7182
|
+
/** Fired when the cursor moves in the source, by the source pane and heard here. */
|
|
7183
|
+
"helix-caret": HelixSandboxHelixCaretElementEvent;
|
|
7184
|
+
/** Relayed from the frame by the preview pane, one per console call. */
|
|
7185
|
+
"helix-console": HelixSandboxHelixConsoleElementEvent;
|
|
7186
|
+
/** How tall the frame's content is, from the preview pane, whenever it changes. */
|
|
7187
|
+
"helix-resize": HelixSandboxHelixResizeElementEvent;
|
|
6580
7188
|
};
|
|
6581
7189
|
|
|
6582
7190
|
/** `HelixSandboxSource` component event */
|
|
@@ -6648,6 +7256,40 @@ export type HelixSandboxToolbarVueProps = {};
|
|
|
6648
7256
|
|
|
6649
7257
|
export type HelixSandboxToolbarVueEvents = {};
|
|
6650
7258
|
|
|
7259
|
+
export type HelixScatterChartVueProps = {
|
|
7260
|
+
/** The id of the table to read.
|
|
7261
|
+
|
|
7262
|
+
Resolved through `getRootNode()`, so a chart inside another component's
|
|
7263
|
+
shadow root names a table in that root rather than in the document. A
|
|
7264
|
+
`<table>` or anything built from grid roles, including `helix-table`.
|
|
7265
|
+
|
|
7266
|
+
**In React this arrives as a property and not as an attribute**, the way
|
|
7267
|
+
`Tooltip.for` does, so it does not reflect and nothing styles on it. */
|
|
7268
|
+
for?: (HelixScatterChart["for"]) | undefined;
|
|
7269
|
+
/** The drawing's name, for a pointer resting on it.
|
|
7270
|
+
|
|
7271
|
+
Absent falls back to the table's own caption, which is usually the right
|
|
7272
|
+
words and is already written. */
|
|
7273
|
+
label?: (HelixScatterChart["label"]) | undefined;
|
|
7274
|
+
/** What to call the strength of the relation in the summary. */
|
|
7275
|
+
"correlation-label"?: (HelixScatterChart["correlationLabel"]) | undefined;
|
|
7276
|
+
/** What to call the strength of the relation in the summary. */
|
|
7277
|
+
correlationLabel?: (HelixScatterChart["correlationLabel"]) | undefined;
|
|
7278
|
+
/** Which rules are drawn across the plot, if any.
|
|
7279
|
+
|
|
7280
|
+
Both axes are measured, so the values name an axis rather than a role:
|
|
7281
|
+
`x` rules the levels across, `y` the levels up. A bare `gridlines`, or
|
|
7282
|
+
anything unrecognized, means `both`, since neither axis is the one a scatter
|
|
7283
|
+
is read along. */
|
|
7284
|
+
gridlines?: (HelixScatterChart["gridlines"]) | undefined;
|
|
7285
|
+
/** What to call a row in the summary, which counts them. */
|
|
7286
|
+
"points-label"?: (HelixScatterChart["pointsLabel"]) | undefined;
|
|
7287
|
+
/** What to call a row in the summary, which counts them. */
|
|
7288
|
+
pointsLabel?: (HelixScatterChart["pointsLabel"]) | undefined;
|
|
7289
|
+
};
|
|
7290
|
+
|
|
7291
|
+
export type HelixScatterChartVueEvents = {};
|
|
7292
|
+
|
|
6651
7293
|
export type HelixScrollAreaVueProps = {
|
|
6652
7294
|
/** Names the region, for a reader arriving at it out of context.
|
|
6653
7295
|
|
|
@@ -6818,6 +7460,23 @@ Unset is a block, which is what most missing things are. */
|
|
|
6818
7460
|
|
|
6819
7461
|
export type HelixSkeletonVueEvents = {};
|
|
6820
7462
|
|
|
7463
|
+
export type HelixSkipLinkVueProps = {
|
|
7464
|
+
/** Where the reader is sent, as an in-page fragment.
|
|
7465
|
+
|
|
7466
|
+
`#main` by default, because that is the id the content region almost always
|
|
7467
|
+
has; a page whose content is somewhere else says so. Anything that is not a
|
|
7468
|
+
fragment naming an element on the page is left to the browser, as a plain
|
|
7469
|
+
link. */
|
|
7470
|
+
href?: (HelixSkipLink["href"]) | undefined;
|
|
7471
|
+
/** The link's words, for the common case of plain text.
|
|
7472
|
+
|
|
7473
|
+
The fallback of the default slot, so slotted content replaces it rather than
|
|
7474
|
+
appearing beside it. */
|
|
7475
|
+
label?: (HelixSkipLink["label"]) | undefined;
|
|
7476
|
+
};
|
|
7477
|
+
|
|
7478
|
+
export type HelixSkipLinkVueEvents = {};
|
|
7479
|
+
|
|
6821
7480
|
/** `HelixSlider` component event */
|
|
6822
7481
|
export type HelixSliderElementEvent<E = Event> = TypedEvent<HelixSlider, E>;
|
|
6823
7482
|
/** `helix-before-change` event type */
|
|
@@ -7091,6 +7750,9 @@ export type HelixSpeedDialHelixBeforeCloseElementEvent =
|
|
|
7091
7750
|
/** `helix-before-open` event type */
|
|
7092
7751
|
export type HelixSpeedDialHelixBeforeOpenElementEvent =
|
|
7093
7752
|
HelixSpeedDialElementEvent<HelixBeforeOpenEvent>;
|
|
7753
|
+
/** `helix-select` event type */
|
|
7754
|
+
export type HelixSpeedDialHelixSelectElementEvent =
|
|
7755
|
+
HelixSpeedDialElementEvent<HelixSelectEvent>;
|
|
7094
7756
|
|
|
7095
7757
|
export type HelixSpeedDialVueProps = {
|
|
7096
7758
|
/** Whether the element is open.
|
|
@@ -7126,6 +7788,8 @@ export type HelixSpeedDialVueEvents = {
|
|
|
7126
7788
|
"helix-before-close": HelixSpeedDialHelixBeforeCloseElementEvent;
|
|
7127
7789
|
/** Fired before it opens, and cancelable. */
|
|
7128
7790
|
"helix-before-open": HelixSpeedDialHelixBeforeOpenElementEvent;
|
|
7791
|
+
/** Fired when an action is chosen. Dispatched by the action and listened for here, and the dial closes behind it once it has been heard. Cancelable: refusing it takes the decision and the dial stays open. */
|
|
7792
|
+
"helix-select": HelixSpeedDialHelixSelectElementEvent;
|
|
7129
7793
|
/** Says the state moved, carrying `newState` and `oldState`. */
|
|
7130
7794
|
toggle: HelixSpeedDialElementEvent;
|
|
7131
7795
|
};
|
|
@@ -7302,6 +7966,9 @@ export type HelixStepsHelixActivateElementEvent =
|
|
|
7302
7966
|
/** `helix-before-activate` event type */
|
|
7303
7967
|
export type HelixStepsHelixBeforeActivateElementEvent =
|
|
7304
7968
|
HelixStepsElementEvent<HelixBeforeActivateEvent>;
|
|
7969
|
+
/** `helix-select` event type */
|
|
7970
|
+
export type HelixStepsHelixSelectElementEvent =
|
|
7971
|
+
HelixStepsElementEvent<HelixSelectEvent>;
|
|
7305
7972
|
|
|
7306
7973
|
export type HelixStepsVueProps = {
|
|
7307
7974
|
/** Which item is current, by its `value`.
|
|
@@ -7356,6 +8023,8 @@ export type HelixStepsVueEvents = {
|
|
|
7356
8023
|
"helix-activate": HelixStepsHelixActivateElementEvent;
|
|
7357
8024
|
/** Fired before the active step changes. Cancelable: refusing it takes the decision and nothing moves. */
|
|
7358
8025
|
"helix-before-activate": HelixStepsHelixBeforeActivateElementEvent;
|
|
8026
|
+
/** Fired when a step is pressed. Dispatched by the step and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves. */
|
|
8027
|
+
"helix-select": HelixStepsHelixSelectElementEvent;
|
|
7359
8028
|
};
|
|
7360
8029
|
|
|
7361
8030
|
/** `HelixStep` component event */
|
|
@@ -7454,6 +8123,15 @@ export type HelixTableCellVueProps = {
|
|
|
7454
8123
|
|
|
7455
8124
|
export type HelixTableCellVueEvents = {};
|
|
7456
8125
|
|
|
8126
|
+
/** `HelixTableColumn` component event */
|
|
8127
|
+
export type HelixTableColumnElementEvent<E = Event> = TypedEvent<
|
|
8128
|
+
HelixTableColumn,
|
|
8129
|
+
E
|
|
8130
|
+
>;
|
|
8131
|
+
/** `helix-before-resize` event type */
|
|
8132
|
+
export type HelixTableColumnHelixBeforeResizeElementEvent =
|
|
8133
|
+
HelixTableColumnElementEvent<HelixBeforeResizeEvent>;
|
|
8134
|
+
|
|
7457
8135
|
export type HelixTableColumnVueProps = {
|
|
7458
8136
|
/** Which edge the values line up against.
|
|
7459
8137
|
|
|
@@ -7475,6 +8153,13 @@ after a column moves is a sort a consumer cannot store in a URL.
|
|
|
7475
8153
|
Empty on a column that is purely presentational, an actions column say, and
|
|
7476
8154
|
such a column is never sortable however it is marked. */
|
|
7477
8155
|
field?: (HelixTableColumn["field"]) | undefined;
|
|
8156
|
+
/** Whether a reader may change this column's width.
|
|
8157
|
+
|
|
8158
|
+
By dragging the edge at the end of the heading, or with the arrow keys once
|
|
8159
|
+
it has focus, a step at a time and four with Shift. The width lands in
|
|
8160
|
+
`width` as pixels, and `helix-before-resize` asks first, so a consumer who
|
|
8161
|
+
stores the widths can take the decision. */
|
|
8162
|
+
resizable?: (HelixTableColumn["resizable"]) | undefined;
|
|
7478
8163
|
/** Whether a reader may reorder the set by this column.
|
|
7479
8164
|
|
|
7480
8165
|
Ignored without a `field`, and silently: a column with nothing to sort by
|
|
@@ -7520,7 +8205,10 @@ correct default: the raw value is what an API sorted by. */
|
|
|
7520
8205
|
compare?: (HelixTableColumn["compare"]) | undefined;
|
|
7521
8206
|
};
|
|
7522
8207
|
|
|
7523
|
-
export type HelixTableColumnVueEvents = {
|
|
8208
|
+
export type HelixTableColumnVueEvents = {
|
|
8209
|
+
/** Fired as a reader resizes the column, with the width asked for, and cancelable. */
|
|
8210
|
+
"helix-before-resize": HelixTableColumnHelixBeforeResizeElementEvent;
|
|
8211
|
+
};
|
|
7524
8212
|
|
|
7525
8213
|
export type HelixTableVueProps = {
|
|
7526
8214
|
/** What is said where there are none, and none are coming. */
|
|
@@ -7685,7 +8373,17 @@ neither. That is the test the whole axis registry answers to. */
|
|
|
7685
8373
|
/** Which status the tag reports.
|
|
7686
8374
|
|
|
7687
8375
|
`tone` is semantic color, which is what these are and what `helix-text`
|
|
7688
|
-
already calls them. `helix component`'s `axes` holds the vocabulary.
|
|
8376
|
+
already calls them. `helix component`'s `axes` holds the vocabulary.
|
|
8377
|
+
|
|
8378
|
+
**Not all seven are statuses, and `accent` is the one worth saying out
|
|
8379
|
+
loud**: it is the second emphasis, a rotation off the brand seed rather than
|
|
8380
|
+
a color of its own, so it stays in relation when somebody rethemes.
|
|
8381
|
+
`primary` is the seed itself. The four that are statuses are the four
|
|
8382
|
+
`HelixStatusTone` names, and those are the ones that would carry a glyph
|
|
8383
|
+
somewhere that draws one.
|
|
8384
|
+
|
|
8385
|
+
`Badge` and `Announcement` take the same seven, all three being a mark that
|
|
8386
|
+
carries a meaning beside something else. */
|
|
7689
8387
|
tone?: (HelixTag["tone"]) | undefined;
|
|
7690
8388
|
/** Whether it offers a control to take it away. */
|
|
7691
8389
|
dismissible?: (HelixTag["dismissible"]) | undefined;
|
|
@@ -7715,21 +8413,31 @@ export type HelixTextVueProps = {
|
|
|
7715
8413
|
|
|
7716
8414
|
Decides the outline and the semantics. */
|
|
7717
8415
|
as?: (HelixText["as"]) | undefined;
|
|
7718
|
-
/**
|
|
7719
|
-
|
|
7720
|
-
|
|
8416
|
+
/** How loud the text is, beside what it means.
|
|
8417
|
+
|
|
8418
|
+
`muted` is the quiet ink that still has to be read, and `subtle` the
|
|
8419
|
+
quieter one below it. Two axes because the test says so: a line can be a
|
|
8420
|
+
danger *and* quiet at once, and a muted danger is what a validation hint
|
|
8421
|
+
under a field is.
|
|
8422
|
+
|
|
8423
|
+
**With a `tone`, both are that tone's one quiet ink**: the tone's hue at half
|
|
8424
|
+
its chroma, as readable as the tone. The readable range holds one quiet step
|
|
8425
|
+
and not two, measured in #124 for the neutral ink, and a tone has less room
|
|
8426
|
+
there rather than more, so `subtle` on a tone is the same ink as `muted`
|
|
8427
|
+
rather than a second one that could not be read.
|
|
8428
|
+
|
|
8429
|
+
The resting case is the absent attribute, full strength. */
|
|
8430
|
+
emphasis?: (HelixText["emphasis"]) | undefined;
|
|
8431
|
+
/** What the text means. A separate axis from the type ramp, because color
|
|
8432
|
+
carries state: folding it in would mean `caption-danger` and the rest of the
|
|
8433
|
+
cross product.
|
|
7721
8434
|
|
|
7722
8435
|
**There is no `default` value**, and one must not be added: it would match
|
|
7723
8436
|
no rule and fall through to the inherited ink, reading as working while
|
|
7724
8437
|
saying nothing. The resting case is the absent attribute.
|
|
7725
8438
|
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
out is blocked on the palette rather than on the rename: there is a quiet
|
|
7729
|
-
step for the neutral ink and none for any other tone, so a muted danger has
|
|
7730
|
-
nothing to be made of. `primary-subtle` is a tinted *ground* and not a
|
|
7731
|
-
quiet ink. That is #141's to derive, and until it does, folding the two
|
|
7732
|
-
halves apart would leave three of the four combinations unsayable. */
|
|
8439
|
+
Weight is not a tone. How loud the text is belongs on `emphasis`, which is
|
|
8440
|
+
why `muted` and `subtle` moved there. */
|
|
7733
8441
|
tone?: (HelixText["tone"]) | undefined;
|
|
7734
8442
|
/** Type treatment.
|
|
7735
8443
|
|
|
@@ -8340,6 +9048,12 @@ export type HelixToastItemVueEvents = {
|
|
|
8340
9048
|
"helix-dismiss": HelixToastItemHelixDismissElementEvent;
|
|
8341
9049
|
};
|
|
8342
9050
|
|
|
9051
|
+
/** `HelixToast` component event */
|
|
9052
|
+
export type HelixToastElementEvent<E = Event> = TypedEvent<HelixToast, E>;
|
|
9053
|
+
/** `helix-dismiss` event type */
|
|
9054
|
+
export type HelixToastHelixDismissElementEvent =
|
|
9055
|
+
HelixToastElementEvent<HelixDismissEvent>;
|
|
9056
|
+
|
|
8343
9057
|
export type HelixToastVueProps = {
|
|
8344
9058
|
/** Accessible name for the region, such as "Notifications". */
|
|
8345
9059
|
label?: (HelixToast["label"]) | undefined;
|
|
@@ -8358,7 +9072,10 @@ departures, which is what `orientation` does. */
|
|
|
8358
9072
|
placement?: (HelixToast["placement"]) | undefined;
|
|
8359
9073
|
};
|
|
8360
9074
|
|
|
8361
|
-
export type HelixToastVueEvents = {
|
|
9075
|
+
export type HelixToastVueEvents = {
|
|
9076
|
+
/** A message asking to go, by its control or by its timer, dispatched by the message and heard here because the stack is what a consumer holds. Cancelable: refusing it takes the decision and the message stays. */
|
|
9077
|
+
"helix-dismiss": HelixToastHelixDismissElementEvent;
|
|
9078
|
+
};
|
|
8362
9079
|
|
|
8363
9080
|
/** `HelixToggleGroup` component event */
|
|
8364
9081
|
export type HelixToggleGroupElementEvent<E = Event> = TypedEvent<
|
|
@@ -8674,6 +9391,9 @@ export type HelixTourHelixBeforeCloseElementEvent =
|
|
|
8674
9391
|
/** `helix-complete` event type */
|
|
8675
9392
|
export type HelixTourHelixCompleteElementEvent =
|
|
8676
9393
|
HelixTourElementEvent<HelixCompleteEvent>;
|
|
9394
|
+
/** `helix-tour-ask` event type */
|
|
9395
|
+
export type HelixTourHelixTourAskElementEvent =
|
|
9396
|
+
HelixTourElementEvent<HelixTourAskEvent>;
|
|
8677
9397
|
|
|
8678
9398
|
export type HelixTourVueProps = {
|
|
8679
9399
|
/** Label for the control that goes back, handed to every stop. */
|
|
@@ -8724,6 +9444,8 @@ export type HelixTourVueEvents = {
|
|
|
8724
9444
|
"helix-before-close": HelixTourHelixBeforeCloseElementEvent;
|
|
8725
9445
|
/** Fired when the last stop is finished. */
|
|
8726
9446
|
"helix-complete": HelixTourHelixCompleteElementEvent;
|
|
9447
|
+
/** A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves. */
|
|
9448
|
+
"helix-tour-ask": HelixTourHelixTourAskElementEvent;
|
|
8727
9449
|
/** Says the state moved, carrying `newState` and `oldState`. */
|
|
8728
9450
|
toggle: HelixTourElementEvent;
|
|
8729
9451
|
};
|
|
@@ -9387,6 +10109,16 @@ export type CustomCssProperties = {
|
|
|
9387
10109
|
"--app-header-max-inline-size"?: (string) | undefined;
|
|
9388
10110
|
/** Inline padding of the banner. */
|
|
9389
10111
|
"--app-header-padding"?: (string) | undefined;
|
|
10112
|
+
/** Height of the drawing. */
|
|
10113
|
+
"--area-chart-block-size"?: (string) | undefined;
|
|
10114
|
+
/** How much of its series' color a band takes, as a percentage mixed toward the page. */
|
|
10115
|
+
"--area-chart-fill-strength"?: (string) | undefined;
|
|
10116
|
+
/** Space between the drawing and its labels. */
|
|
10117
|
+
"--area-chart-gap"?: (string) | undefined;
|
|
10118
|
+
/** One rule across the plot, under `gridlines`. */
|
|
10119
|
+
"--area-chart-gridline-color"?: (string) | undefined;
|
|
10120
|
+
/** Thickness of a band's top edge. */
|
|
10121
|
+
"--area-chart-width"?: (string) | undefined;
|
|
9390
10122
|
/** How far each avatar sits over the one before it. */
|
|
9391
10123
|
"--avatar-group-overlap"?: (string) | undefined;
|
|
9392
10124
|
/** The separation drawn between one avatar and the next. */
|
|
@@ -9659,6 +10391,8 @@ export type CustomCssProperties = {
|
|
|
9659
10391
|
"--date-picker-track-size"?: (string) | undefined;
|
|
9660
10392
|
/** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
|
|
9661
10393
|
"--date-picker-column-count"?: (string) | undefined;
|
|
10394
|
+
/** Space between one pair and the next. */
|
|
10395
|
+
"--description-list-gap"?: (string) | undefined;
|
|
9662
10396
|
/** Color of the panel's edge. */
|
|
9663
10397
|
"--dialog-border-color"?: (string) | undefined;
|
|
9664
10398
|
/** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. */
|
|
@@ -9727,6 +10461,16 @@ export type CustomCssProperties = {
|
|
|
9727
10461
|
"--file-input-background-color"?: (string) | undefined;
|
|
9728
10462
|
/** Padding inside the field. */
|
|
9729
10463
|
"--file-input-padding"?: (string) | undefined;
|
|
10464
|
+
/** Fill behind the chip. */
|
|
10465
|
+
"--filter-input-chip-background-color"?: (string) | undefined;
|
|
10466
|
+
/** Color of the edge. */
|
|
10467
|
+
"--filter-input-chip-border-color"?: (string) | undefined;
|
|
10468
|
+
/** Corner radius of the chip. */
|
|
10469
|
+
"--filter-input-chip-radius"?: (string) | undefined;
|
|
10470
|
+
/** Space either side of a slotted control's label. Follows `--helix-space-xs`, which is what a token uses. */
|
|
10471
|
+
"--filter-input-action-padding-inline"?: (string) | undefined;
|
|
10472
|
+
/** Height of a control slotted at either end. Follows `--helix-size-tag`, so it matches the tokens beside it rather than the field around them. */
|
|
10473
|
+
"--filter-input-action-size"?: (string) | undefined;
|
|
9730
10474
|
/** Fill behind the field. */
|
|
9731
10475
|
"--filter-input-background-color"?: (string) | undefined;
|
|
9732
10476
|
/** Color of the suggestion panel's edge. */
|
|
@@ -9735,6 +10479,8 @@ export type CustomCssProperties = {
|
|
|
9735
10479
|
"--filter-input-border-width"?: (string) | undefined;
|
|
9736
10480
|
/** Smallest the text keeps as tokens fill the line, before it wraps to its own. */
|
|
9737
10481
|
"--filter-input-control-size"?: (string) | undefined;
|
|
10482
|
+
/** The seam between the leading box and the text. */
|
|
10483
|
+
"--filter-input-lead-border-color"?: (string) | undefined;
|
|
9738
10484
|
/** Width of the suggestion panel. Follows the field by default. */
|
|
9739
10485
|
"--filter-input-panel-size"?: (string) | undefined;
|
|
9740
10486
|
/** Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. */
|
|
@@ -9911,6 +10657,14 @@ export type CustomCssProperties = {
|
|
|
9911
10657
|
"--notifications-color"?: (string) | undefined;
|
|
9912
10658
|
/** Ink on the control that removes an item, which is `danger` because removing one is the end of it. */
|
|
9913
10659
|
"--notifications-dismiss-color"?: (string) | undefined;
|
|
10660
|
+
/** Color of a carded row's border. */
|
|
10661
|
+
"--notifications-item-edge"?: (string) | undefined;
|
|
10662
|
+
/** Fill behind a `filled` row. */
|
|
10663
|
+
"--notifications-item-fill"?: (string) | undefined;
|
|
10664
|
+
/** Space between carded rows, which replaces the hairline. */
|
|
10665
|
+
"--notifications-item-gap"?: (string) | undefined;
|
|
10666
|
+
/** Corner radius of a carded row. */
|
|
10667
|
+
"--notifications-item-radius"?: (string) | undefined;
|
|
9914
10668
|
/** Space above and below an item. */
|
|
9915
10669
|
"--notifications-padding-block"?: (string) | undefined;
|
|
9916
10670
|
/** Space either side of an item. */
|
|
@@ -9933,6 +10687,18 @@ export type CustomCssProperties = {
|
|
|
9933
10687
|
"--notifications-max-block-size"?: (string) | undefined;
|
|
9934
10688
|
/** The gutter every item holds open where something in the feed has media. */
|
|
9935
10689
|
"--notifications-media-column"?: (string) | undefined;
|
|
10690
|
+
/** Ground under the tree. */
|
|
10691
|
+
"--object-inspector-background-color"?: (string) | undefined;
|
|
10692
|
+
/** Height of the scrolling box, when windowed. */
|
|
10693
|
+
"--object-inspector-block-size"?: (string) | undefined;
|
|
10694
|
+
/** The edge around the tree and its header. */
|
|
10695
|
+
"--object-inspector-border-color"?: (string) | undefined;
|
|
10696
|
+
/** The bar carrying the label. */
|
|
10697
|
+
"--object-inspector-header-background-color"?: (string) | undefined;
|
|
10698
|
+
/** Corner radius of the tree. */
|
|
10699
|
+
"--object-inspector-radius"?: (string) | undefined;
|
|
10700
|
+
/** How deep a row is, from 0 at the root, for indenting it. */
|
|
10701
|
+
"--object-inspector-level"?: (string) | undefined;
|
|
9936
10702
|
/** Wash behind the option the keyboard is on. */
|
|
9937
10703
|
"--option-active-color"?: (string) | undefined;
|
|
9938
10704
|
/** Space above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list. */
|
|
@@ -10049,6 +10815,24 @@ export type CustomCssProperties = {
|
|
|
10049
10815
|
"--sandbox-toolbar-gap"?: (string) | undefined;
|
|
10050
10816
|
/** The bar's height. Defaults to a large control. */
|
|
10051
10817
|
"--sandbox-toolbar-size"?: (string) | undefined;
|
|
10818
|
+
/** Height of the drawing. */
|
|
10819
|
+
"--scatter-chart-block-size"?: (string) | undefined;
|
|
10820
|
+
/** Space between the drawing and its axes. */
|
|
10821
|
+
"--scatter-chart-gap"?: (string) | undefined;
|
|
10822
|
+
/** One rule across the plot, under `gridlines`. */
|
|
10823
|
+
"--scatter-chart-gridline-color"?: (string) | undefined;
|
|
10824
|
+
/** How much of its color a point shows, so a cluster reads darker where it is denser. */
|
|
10825
|
+
"--scatter-chart-point-opacity"?: (string) | undefined;
|
|
10826
|
+
/** The ring around each point, which is the page's color unless the chart sits on something else. */
|
|
10827
|
+
"--scatter-chart-point-ring-color"?: (string) | undefined;
|
|
10828
|
+
/** Diameter of a point. */
|
|
10829
|
+
"--scatter-chart-point-size"?: (string) | undefined;
|
|
10830
|
+
/** Where a point sits across, as a percentage. Written by the component. */
|
|
10831
|
+
"--chart-point-x"?: (string) | undefined;
|
|
10832
|
+
/** Where a point sits up, as a percentage from the top. Written by the component. */
|
|
10833
|
+
"--chart-point-y"?: (string) | undefined;
|
|
10834
|
+
/** Where a tick sits along its axis, as a percentage. Written by the component. */
|
|
10835
|
+
"--chart-tick"?: (string) | undefined;
|
|
10052
10836
|
/** How deep the fades are, at both edges. */
|
|
10053
10837
|
"--scroll-area-fade"?: (string) | undefined;
|
|
10054
10838
|
/** And the bottom one. */
|
|
@@ -10077,6 +10861,12 @@ export type CustomCssProperties = {
|
|
|
10077
10861
|
"--select-surface-max-block-size"?: (string) | undefined;
|
|
10078
10862
|
/** Diameter of the circle shape. */
|
|
10079
10863
|
"--skeleton-size"?: (string) | undefined;
|
|
10864
|
+
/** Color of the revealed link's edge. */
|
|
10865
|
+
"--skip-link-border-color"?: (string) | undefined;
|
|
10866
|
+
/** Width of the revealed link's edge. Follows `--helix-border-floating`, which is `0`, so the link is told apart by its lift unless a theme says otherwise. */
|
|
10867
|
+
"--skip-link-border-width"?: (string) | undefined;
|
|
10868
|
+
/** Lift under the revealed link. Follows `--helix-shadow-floating`, since it sits over whatever the page has at its corner. */
|
|
10869
|
+
"--skip-link-shadow"?: (string) | undefined;
|
|
10080
10870
|
/** The part behind the thumb. */
|
|
10081
10871
|
"--slider-fill-color"?: (string) | undefined;
|
|
10082
10872
|
/** How long a vertical track is. Nine rem by default, and read only when `orientation` is `vertical`, a horizontal track taking the width of its row. */
|
|
@@ -10343,6 +11133,12 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10343
11133
|
HelixAppHeaderVueProps,
|
|
10344
11134
|
HelixAppHeaderVueEvents
|
|
10345
11135
|
>;
|
|
11136
|
+
/** The bands take the series palette in order, the first column at the bottom, so a legend beside the chart names them in the order they are stacked. Each band is a pale fill with its top edge drawn at the series' full color. The fills are mixed toward the page rather than made translucent, because the bands overlap where they are drawn and a translucent one would show the others through it. */
|
|
11137
|
+
"helix-area-chart": DefineCustomElement<
|
|
11138
|
+
HelixAreaChart,
|
|
11139
|
+
HelixAreaChartVueProps,
|
|
11140
|
+
HelixAreaChartVueEvents
|
|
11141
|
+
>;
|
|
10346
11142
|
/** One fragment shader over a full-screen triangle, with the palette read from the tokens rather than given as colors. A background written with hex values is an asset that has to be re-cut when the brand moves; one written against '--helix-color-primary' is a consequence of it. **Every shape ramps through four token stops**, and the token layer inverts each: the page's background, 'primary-subtle', 'primary', then a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black takes the chroma out of the pixels carrying most of it. Which way the page runs is read off the ground's own luminance rather than asked of the mode, which is a private token. **No dependency, and no scene graph.** The geometry is three vertices derived from 'gl_VertexID', so there is no attribute, no buffer and no upload. **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box. */
|
|
10347
11143
|
"helix-aura": DefineCustomElement<
|
|
10348
11144
|
HelixAura,
|
|
@@ -10451,7 +11247,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10451
11247
|
HelixCheckboxVueProps,
|
|
10452
11248
|
HelixCheckboxVueEvents
|
|
10453
11249
|
>;
|
|
10454
|
-
/** The header sits above the code rather than floating on it. Overlaid, which is the usual build, the copy button covers the first line, which is the one line of a snippet a reader is most likely to be reading. */
|
|
11250
|
+
/** The header sits above the code rather than floating on it. Overlaid, which is the usual build, the copy button covers the first line, which is the one line of a snippet a reader is most likely to be reading. A diff is drawn a block per file in the same frame, each changed line washed in its tone at Tag's resting strength with its '+' or '-' in the tone's ink, so the change does not rest on telling two pale grounds apart. A split diff stacks its two versions below about 40rem of the file's own width. */
|
|
10455
11251
|
"helix-code-block": DefineCustomElement<
|
|
10456
11252
|
HelixCodeBlock,
|
|
10457
11253
|
HelixCodeBlockVueProps,
|
|
@@ -10511,6 +11307,18 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10511
11307
|
HelixDatePickerVueProps,
|
|
10512
11308
|
HelixDatePickerVueEvents
|
|
10513
11309
|
>;
|
|
11310
|
+
/** A subgrid of the list, so the label and value stay one element, and one pair to a screen reader, while lining up with every other pair in the list. */
|
|
11311
|
+
"helix-description-list-item": DefineCustomElement<
|
|
11312
|
+
HelixDescriptionListItem,
|
|
11313
|
+
HelixDescriptionListItemVueProps,
|
|
11314
|
+
HelixDescriptionListItemVueEvents
|
|
11315
|
+
>;
|
|
11316
|
+
/** Each label is quiet and each value takes the text around it, so the eye goes to the values and the labels are there to find them by. With 'direction="row"' the labels share one column, as wide as the longest of them, and the values start on one line beside it. **Beside falls back to over below about 22rem of its own width**, measured on the list rather than on the viewport, since a details panel is as often a sidebar on a wide screen as the whole of a narrow one. Below that the label column leaves the values too little room to be read. **'width="auto"' with 'justify="between"' is a summary**: the list as wide as its widest pair, labels on the start edge and values on the end one in figures of one width, which is how a set of totals is read. */
|
|
11317
|
+
"helix-description-list": DefineCustomElement<
|
|
11318
|
+
HelixDescriptionList,
|
|
11319
|
+
HelixDescriptionListVueProps,
|
|
11320
|
+
HelixDescriptionListVueEvents
|
|
11321
|
+
>;
|
|
10514
11322
|
/** The panel is 'surface-overlay' with a shadow, because that is what it is: a thing over the page rather than on it. The scrim is drawn on '::backdrop', which is the platform's own element for it and sits in the top layer with the dialog rather than being a div somebody positioned. */
|
|
10515
11323
|
"helix-dialog": DefineCustomElement<
|
|
10516
11324
|
HelixDialog,
|
|
@@ -10559,6 +11367,30 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10559
11367
|
HelixFileInputVueProps,
|
|
10560
11368
|
HelixFileInputVueEvents
|
|
10561
11369
|
>;
|
|
11370
|
+
/** Three segments and a control, drawn so the reader's eye lands on the values. The field is the quietest of the three because it is the part they already know, having picked it; the values carry the weight, because a bar of these is scanned for what the filters are set to rather than for what they are on. The operator segment is drawn only where there is one, which is what keeps the common chip free of jargon. See the headless note, which records the rule. */
|
|
11371
|
+
"helix-filter-chip": DefineCustomElement<
|
|
11372
|
+
HelixFilterChip,
|
|
11373
|
+
HelixFilterChipVueProps,
|
|
11374
|
+
HelixFilterChipVueEvents
|
|
11375
|
+
>;
|
|
11376
|
+
/** A declaration rather than a control: it renders nothing, and the filter input reads it to build its menu. The headless note carries the model. The stylesheet here is one rule and it is a guard rather than a look. Written where it belongs, inside a filter input, this is never assigned to a slot and so is never rendered at all. Written anywhere else it would be an empty inline box, which is nothing to look at and still a flex item a 'gap' would space away from its neighbors. */
|
|
11377
|
+
"helix-filter-field": DefineCustomElement<
|
|
11378
|
+
HelixFilterField,
|
|
11379
|
+
HelixFilterFieldVueProps,
|
|
11380
|
+
HelixFilterFieldVueEvents
|
|
11381
|
+
>;
|
|
11382
|
+
/** Everything drawn here is drawn by something else: the trigger is the consumer's, and the pages are 'Menu''s, whose reserved tick column is what keeps a page of ticked and unticked values on one edge. This element's own stylesheet is one rule, and it is 'display: contents'. The headless note carries the model, including why a tick is a filter immediately and why the operator is decided here rather than on the chip. */
|
|
11383
|
+
"helix-filter-menu": DefineCustomElement<
|
|
11384
|
+
HelixFilterMenu,
|
|
11385
|
+
HelixFilterMenuVueProps,
|
|
11386
|
+
HelixFilterMenuVueEvents
|
|
11387
|
+
>;
|
|
11388
|
+
/** A declaration rather than a control: it renders nothing, and the field it is written under reads it. The headless note carries the model, including why the words are the consumer's and never this element's. The stylesheet is one rule and it is a guard rather than a look, for the reason 'FilterField''s note gives. */
|
|
11389
|
+
"helix-filter-operator": DefineCustomElement<
|
|
11390
|
+
HelixFilterOperator,
|
|
11391
|
+
HelixFilterOperatorVueProps,
|
|
11392
|
+
HelixFilterOperatorVueEvents
|
|
11393
|
+
>;
|
|
10562
11394
|
/** The frame is the field rather than the input, so the tokens sit inside the same box as the text and the focus ring is drawn once around the whole control. It grows down a line at a time as tokens are added, which is the arrangement Combobox takes when it is holding a selection. **The tokens are the consumer's own elements**, so the only thing said about them here is to keep their size and not run past the field. A 'Tag' slotted into 'tags' already looks like one; anything else looks like whatever it is. **The suggestion panel is this element's own box, not a listbox's.** Combobox puts a 'helix-listbox' in its panel because the options there are a selection it owns; these are the consumer's suggestions, so the panel is a plain 'role="listbox"' region and the options pass their own 'helix-select' straight through it. That is why this surface scrolls where Combobox's does not: there is no list inside to do it. Height comes from the region, like every other control: 'data-density' on whatever holds it, not a 'size' here. */
|
|
10563
11395
|
"helix-filter-input": DefineCustomElement<
|
|
10564
11396
|
HelixFilterInput,
|
|
@@ -10685,6 +11517,12 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10685
11517
|
HelixNavigationVueProps,
|
|
10686
11518
|
HelixNavigationVueEvents
|
|
10687
11519
|
>;
|
|
11520
|
+
/** The heading is chrome: it says which pile a reader is looking at and is never the thing they came to read, so it is drawn quieter than a row's title. A feed cut into five days has five of these, and a heading at the weight of the content turns a list of notifications into a list of dates. **The stack is two lines rather than two cards.** Collapsed, the rows behind the first are not rendered at all, so there is nothing to see through: what draws the pile is a pair of pseudo-elements above the visible row, offset and inset so they read as the top edges of cards behind it. A shadow could not do it, spreading on four sides where this has a top edge and no bottom one, and having no way to sit narrower than the thing it is behind, which is the cue that says there is something back there. */
|
|
11521
|
+
"helix-notification-group": DefineCustomElement<
|
|
11522
|
+
HelixNotificationGroup,
|
|
11523
|
+
HelixNotificationGroupVueProps,
|
|
11524
|
+
HelixNotificationGroupVueEvents
|
|
11525
|
+
>;
|
|
10688
11526
|
/** A four-column grid: media, body, actions, dismiss. **The media column is held open by the feed, not by the item.** Each item is its own grid, so nothing about one row's tracks reaches the row below it: a feed where some items had an avatar and some did not drew its text at two different left edges, which is the fault a grid was chosen to prevent. The root publishes whether anything in it has media and every item reserves that much, so a mixed feed reads down one edge and a feed with no media anywhere pays nothing for the column. **Unread is weight and a mark on the inline start edge, not a fill.** Depth comes from a single border in this library, and a filled row is elevation spelled differently; a feed of filled rows is a striped list nobody can read. The mark is a fixed height on the first line rather than the height of the row, so it says the same thing about a one line notification and a five line one. **Narrow, the actions go under the body.** How much room the row was given is a fact about this box and about nothing else, so it is a container query: a feed in a 320 pixel side panel is narrow inside a 1400 pixel window, and a viewport rule would hand it the wide branch. */
|
|
10689
11527
|
"helix-notification": DefineCustomElement<
|
|
10690
11528
|
HelixNotification,
|
|
@@ -10703,6 +11541,12 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10703
11541
|
HelixNumberInputVueProps,
|
|
10704
11542
|
HelixNumberInputVueEvents
|
|
10705
11543
|
>;
|
|
11544
|
+
/** Code Block's frame around a tree of entries. Each type takes its ink from the syntax set the code blocks already use, a key in one, a string in another and a number, a boolean and a null in theirs, and each row is one line with a long string ending in an ellipsis, so every row is one height and a windowed tree never has to measure them one by one. */
|
|
11545
|
+
"helix-object-inspector": DefineCustomElement<
|
|
11546
|
+
HelixObjectInspector,
|
|
11547
|
+
HelixObjectInspectorVueProps,
|
|
11548
|
+
HelixObjectInspectorVueEvents
|
|
11549
|
+
>;
|
|
10706
11550
|
/** The heading is set small and quiet, because it is a divider that happens to have words on it: a run of options is read as a list and the heading is what tells you which list, not something to read on its own. */
|
|
10707
11551
|
"helix-option-group": DefineCustomElement<
|
|
10708
11552
|
HelixOptionGroup,
|
|
@@ -10829,6 +11673,12 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10829
11673
|
HelixSandboxToolbarVueProps,
|
|
10830
11674
|
HelixSandboxToolbarVueEvents
|
|
10831
11675
|
>;
|
|
11676
|
+
/** The points take the series palette in order, so a table with one column measured up is series one and a table with three is the first three. Each point has a ring of the page around it and stops short of opaque, so a dense cluster reads as dense rather than as one blot, and two points that overlap each keep their edge. */
|
|
11677
|
+
"helix-scatter-chart": DefineCustomElement<
|
|
11678
|
+
HelixScatterChart,
|
|
11679
|
+
HelixScatterChartVueProps,
|
|
11680
|
+
HelixScatterChartVueEvents
|
|
11681
|
+
>;
|
|
10832
11682
|
/** Presentation only: the fades on the edges the base class names, and a scrollbar that belongs to the system rather than to the platform. Which edges have content past them is measured by the base class. */
|
|
10833
11683
|
"helix-scroll-area": DefineCustomElement<
|
|
10834
11684
|
HelixScrollArea,
|
|
@@ -10847,6 +11697,12 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10847
11697
|
HelixSkeletonVueProps,
|
|
10848
11698
|
HelixSkeletonVueEvents
|
|
10849
11699
|
>;
|
|
11700
|
+
/** Out of sight until the keyboard reaches it, then in the corner of the viewport and impossible to miss. The hiding is the base layer's visually hidden helper, so the link stays in the tab order and in the accessibility tree while nobody can see it; 'display: none' would have taken it out of both. The reveal is this sheet's. **Fixed to the viewport rather than placed where it sits in the document**, because it is first in the document and the page may already be scrolled when focus arrives, by a restored position or an anchor in the address. A link revealed above the top of the screen is revealed to nobody. Put it first inside '<body>', before the header, and give the content region the id its 'href' names. */
|
|
11701
|
+
"helix-skip-link": DefineCustomElement<
|
|
11702
|
+
HelixSkipLink,
|
|
11703
|
+
HelixSkipLinkVueProps,
|
|
11704
|
+
HelixSkipLinkVueEvents
|
|
11705
|
+
>;
|
|
10850
11706
|
/** The track and the thumb are the browser's own, restyled through the range pseudo-elements rather than replaced. What that buys is everything a hand-built slider has to reimplement and usually gets slightly wrong: the drag, the keys, and a hit area sized by the platform for a finger. The filled part of the track is painted with a gradient driven by the fraction the headless tier writes, rather than by a second element laid over it. One element cannot be half one color by any other means that survives the thumb being dragged. */
|
|
10851
11707
|
"helix-slider": DefineCustomElement<
|
|
10852
11708
|
HelixSlider,
|
|
@@ -10954,7 +11810,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
10954
11810
|
HelixTagVueProps,
|
|
10955
11811
|
HelixTagVueEvents
|
|
10956
11812
|
>;
|
|
10957
|
-
/** Two properties, and they answer different questions. 'as' is the element, which decides the document outline and what a screen reader announces. 'variant' is the ramp, which decides size, weight, leading, and tracking together. They are separate because they genuinely come apart: a section's second heading sometimes has to look smaller without lying about the outline, and a '<p>' sometimes has to read as a caption. They default to matching, so the common case is 'as="h2"' and nothing else. The pairing is resolved in CSS rather than by computing an attribute, so the element writes nothing to its own host: 'as="h2"' picks up the heading ramp through a selector, and setting 'variant' takes the pairing rule out of play. Deriving it in 'willUpdate' works and must not be done: it puts an attribute on the host that the server's markup does not have, which is a hydration mismatch in every React consumer. **Size, weight, and leading are not properties.** Exposing them separately offers a few hundred combinations of which a handful are right, and every caller then picks one. A ramp is a decision the system already made: the ramp is named, and a page built from it is consistent because there was nothing else to choose. 'tone'
|
|
11813
|
+
/** Two properties, and they answer different questions. 'as' is the element, which decides the document outline and what a screen reader announces. 'variant' is the ramp, which decides size, weight, leading, and tracking together. They are separate because they genuinely come apart: a section's second heading sometimes has to look smaller without lying about the outline, and a '<p>' sometimes has to read as a caption. They default to matching, so the common case is 'as="h2"' and nothing else. The pairing is resolved in CSS rather than by computing an attribute, so the element writes nothing to its own host: 'as="h2"' picks up the heading ramp through a selector, and setting 'variant' takes the pairing rule out of play. Deriving it in 'willUpdate' works and must not be done: it puts an attribute on the host that the server's markup does not have, which is a hydration mismatch in every React consumer. **Size, weight, and leading are not properties.** Exposing them separately offers a few hundred combinations of which a handful are right, and every caller then picks one. A ramp is a decision the system already made: the ramp is named, and a page built from it is consistent because there was nothing else to choose. 'tone' and 'emphasis' stay separate, because color carries state rather than typography, and what a line means is not how loudly it says it. Folding either in would mean 'caption-danger' and 'label-muted' and the rest of the cross product, which is the explosion a named ramp exists to prevent. */
|
|
10958
11814
|
"helix-text": DefineCustomElement<
|
|
10959
11815
|
HelixText,
|
|
10960
11816
|
HelixTextVueProps,
|