@fusion.dev/helix-headless 0.217.0 → 0.219.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +13 -2
- package/dist/breadcrumbs/breadcrumb/breadcrumb.js +19 -9
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +16 -1
- package/dist/breadcrumbs/root/breadcrumbs-root.js +6 -0
- package/dist/button/root/button-root.d.ts +33 -0
- package/dist/button/root/button-root.js +13 -3
- package/dist/canvas/root/canvas-root.d.ts +11 -0
- package/dist/canvas/root/canvas-root.js +1 -0
- package/dist/chat/composer/chat-composer.d.ts +221 -6
- package/dist/chat/composer/chat-composer.js +249 -19
- package/dist/chat/message/chat-message.d.ts +7 -0
- package/dist/chat/message/chat-message.js +2 -1
- package/dist/chat/root/chat-root.d.ts +1 -0
- package/dist/chat/root/chat-root.js +1 -1
- package/dist/copy-button/root/copy-button-root.js +3 -3
- package/dist/device-screen/root/device-screen-root.d.ts +11 -0
- package/dist/device-screen/root/device-screen-root.js +22 -10
- package/dist/dialog/root/dialog-root.js +6 -1
- package/dist/drilldown/item/drilldown-item.js +1 -1
- package/dist/element-events.generated.js +1 -0
- package/dist/filter-input/root/filter-input-root.d.ts +4 -3
- package/dist/filter-input/root/filter-input-root.js +1 -20
- package/dist/graph/root/graph-root.d.ts +11 -0
- package/dist/graph/root/graph-root.js +4 -1
- package/dist/input/root/input-root.d.ts +6 -0
- package/dist/input/root/input-root.js +7 -0
- package/dist/lightbox/root/lightbox-root.d.ts +4 -1
- package/dist/lightbox/root/lightbox-root.js +10 -8
- package/dist/listbox/root/listbox-root.d.ts +21 -0
- package/dist/listbox/root/listbox-root.js +37 -2
- package/dist/log/group/log-group.d.ts +7 -1
- package/dist/log/group/log-group.js +14 -1
- package/dist/log/root/log-root.d.ts +13 -3
- package/dist/log/root/log-root.js +5 -2
- package/dist/map/root/map-root.d.ts +11 -0
- package/dist/map/root/map-root.js +28 -12
- package/dist/menu/root/menu-root.d.ts +8 -0
- package/dist/menu/root/menu-root.js +22 -1
- package/dist/menu/section/menu-section.d.ts +10 -0
- package/dist/menu/section/menu-section.js +10 -0
- package/dist/meter/index.d.ts +1 -0
- package/dist/meter/index.js +1 -0
- package/dist/meter/root/meter-root.d.ts +16 -1
- package/dist/meter/root/meter-root.js +27 -11
- package/dist/meter/segment/meter-segment.d.ts +74 -0
- package/dist/meter/segment/meter-segment.js +47 -0
- package/dist/scroll-area/root/scroll-area-root.d.ts +20 -3
- package/dist/scroll-area/root/scroll-area-root.js +23 -4
- package/dist/spatial-bar-chart/bars.d.ts +125 -5
- package/dist/spatial-bar-chart/bars.js +194 -17
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts +148 -6
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js +285 -16
- package/dist/splitter/root/splitter-root.js +1 -0
- package/dist/tabs/root/tabs-root.d.ts +4 -0
- package/dist/tabs/tab/tab.d.ts +1 -0
- package/dist/tabs/tab/tab.js +2 -2
- package/dist/tag/root/tag-root.d.ts +1 -1
- package/dist/terminal/root/terminal-root.d.ts +11 -0
- package/dist/terminal/root/terminal-root.js +23 -10
- package/dist/toolbar/root/toolbar-root.d.ts +4 -1
- package/dist/tooltip/root/tooltip-root.d.ts +23 -1
- package/dist/tooltip/root/tooltip-root.js +28 -5
- package/dist/tour/root/tour-root.d.ts +1 -0
- package/dist/tour/root/tour-root.js +4 -1
- package/dist/tour/stop/tour-stop.js +1 -0
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +1373 -52
- package/types/svelte.d.ts +1 -0
- package/types/vue.d.ts +312 -17
- package/types/words.d.ts +9 -1
package/types/jsx.d.ts
CHANGED
|
@@ -137,6 +137,7 @@ import type {
|
|
|
137
137
|
HelixHeadlessMenuItem,
|
|
138
138
|
HelixHeadlessMenuSection,
|
|
139
139
|
HelixHeadlessMeter,
|
|
140
|
+
HelixHeadlessMeterSegment,
|
|
140
141
|
HelixHeadlessMotionToggle,
|
|
141
142
|
HelixHeadlessNavigation,
|
|
142
143
|
HelixHeadlessNotification,
|
|
@@ -256,6 +257,7 @@ import type {
|
|
|
256
257
|
HelixShortcutEvent,
|
|
257
258
|
HelixSortEvent,
|
|
258
259
|
HelixSortedEvent,
|
|
260
|
+
HelixStopEvent,
|
|
259
261
|
HelixTerminalBellEvent,
|
|
260
262
|
HelixTerminalInputEvent,
|
|
261
263
|
HelixTerminalLinkEvent,
|
|
@@ -2650,6 +2652,19 @@ into one, counting the first and the last. Unset, it never folds. At least
|
|
|
2650
2652
|
into one, counting the first and the last. Unset, it never folds. At least
|
|
2651
2653
|
2, so the first crumb and the current page always show. */
|
|
2652
2654
|
maxItems?: (HelixHeadlessBreadcrumbs["maxItems"]) | undefined;
|
|
2655
|
+
/** The mark between one crumb and the next, for the whole trail. Unset is a
|
|
2656
|
+
chevron; `slash` is a slash, as a path or a repository and its branch is
|
|
2657
|
+
written.
|
|
2658
|
+
|
|
2659
|
+
**On the trail rather than on each crumb**, because the marks are one
|
|
2660
|
+
decision: a trail whose separators differ from crumb to crumb is a
|
|
2661
|
+
mistake, and a trail drawn from `items` has no crumb of yours to set it
|
|
2662
|
+
on. A crumb's own `separator` slot still replaces its mark, for the rare
|
|
2663
|
+
crumb that needs something else.
|
|
2664
|
+
|
|
2665
|
+
Optional and reflected, per the rule that a reflected property takes no
|
|
2666
|
+
default, so a stylesheet can select on it. */
|
|
2667
|
+
separator?: (HelixHeadlessBreadcrumbs["separator"]) | undefined;
|
|
2653
2668
|
/** The trail as data, drawn as crumbs before any you slot. The last item is the
|
|
2654
2669
|
current page.
|
|
2655
2670
|
|
|
@@ -2680,6 +2695,19 @@ into one, counting the first and the last. Unset, it never folds. At least
|
|
|
2680
2695
|
into one, counting the first and the last. Unset, it never folds. At least
|
|
2681
2696
|
2, so the first crumb and the current page always show. */
|
|
2682
2697
|
"prop:maxItems"?: (HelixHeadlessBreadcrumbs["maxItems"]) | undefined;
|
|
2698
|
+
/** The mark between one crumb and the next, for the whole trail. Unset is a
|
|
2699
|
+
chevron; `slash` is a slash, as a path or a repository and its branch is
|
|
2700
|
+
written.
|
|
2701
|
+
|
|
2702
|
+
**On the trail rather than on each crumb**, because the marks are one
|
|
2703
|
+
decision: a trail whose separators differ from crumb to crumb is a
|
|
2704
|
+
mistake, and a trail drawn from `items` has no crumb of yours to set it
|
|
2705
|
+
on. A crumb's own `separator` slot still replaces its mark, for the rare
|
|
2706
|
+
crumb that needs something else.
|
|
2707
|
+
|
|
2708
|
+
Optional and reflected, per the rule that a reflected property takes no
|
|
2709
|
+
default, so a stylesheet can select on it. */
|
|
2710
|
+
"prop:separator"?: (HelixHeadlessBreadcrumbs["separator"]) | undefined;
|
|
2683
2711
|
/** The trail as data, drawn as crumbs before any you slot. The last item is the
|
|
2684
2712
|
current page.
|
|
2685
2713
|
|
|
@@ -2866,6 +2894,36 @@ is the platform's `commandfor`. */
|
|
|
2866
2894
|
commandfor?: (HelixHeadlessButton["commandFor"]) | undefined;
|
|
2867
2895
|
/** The id of the element the command is sent to. */
|
|
2868
2896
|
commandFor?: (HelixHeadlessButton["commandFor"]) | undefined;
|
|
2897
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
2898
|
+
can say why it is disabled.
|
|
2899
|
+
|
|
2900
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
2901
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
2902
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
2903
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
2904
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
2905
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
2906
|
+
The styled button keeps the disabled look.
|
|
2907
|
+
|
|
2908
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
2909
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
2910
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
2911
|
+
"focusable-when-disabled"?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
|
|
2912
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
2913
|
+
can say why it is disabled.
|
|
2914
|
+
|
|
2915
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
2916
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
2917
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
2918
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
2919
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
2920
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
2921
|
+
The styled button keeps the disabled look.
|
|
2922
|
+
|
|
2923
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
2924
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
2925
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
2926
|
+
focusableWhenDisabled?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
|
|
2869
2927
|
/** Where this button's submission goes, overriding the form's own.
|
|
2870
2928
|
|
|
2871
2929
|
**The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -3047,6 +3105,36 @@ is the platform's `commandfor`. */
|
|
|
3047
3105
|
"attr:commandfor"?: (HelixHeadlessButton["commandFor"]) | undefined;
|
|
3048
3106
|
/** The id of the element the command is sent to. */
|
|
3049
3107
|
"prop:commandFor"?: (HelixHeadlessButton["commandFor"]) | undefined;
|
|
3108
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
3109
|
+
can say why it is disabled.
|
|
3110
|
+
|
|
3111
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
3112
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
3113
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
3114
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
3115
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
3116
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
3117
|
+
The styled button keeps the disabled look.
|
|
3118
|
+
|
|
3119
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
3120
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
3121
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
3122
|
+
"bool:focusable-when-disabled"?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
|
|
3123
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
3124
|
+
can say why it is disabled.
|
|
3125
|
+
|
|
3126
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
3127
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
3128
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
3129
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
3130
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
3131
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
3132
|
+
The styled button keeps the disabled look.
|
|
3133
|
+
|
|
3134
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
3135
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
3136
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
3137
|
+
"prop:focusableWhenDisabled"?: (HelixHeadlessButton["focusableWhenDisabled"]) | undefined;
|
|
3050
3138
|
/** Where this button's submission goes, overriding the form's own.
|
|
3051
3139
|
|
|
3052
3140
|
**The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -5302,11 +5390,26 @@ export type HelixHeadlessChatComposerHelixListenElementEvent =
|
|
|
5302
5390
|
/** `helix-send` event type */
|
|
5303
5391
|
export type HelixHeadlessChatComposerHelixSendElementEvent =
|
|
5304
5392
|
HelixHeadlessChatComposerElementEvent<HelixSendEvent>;
|
|
5393
|
+
/** `helix-stop` event type */
|
|
5394
|
+
export type HelixHeadlessChatComposerHelixStopElementEvent =
|
|
5395
|
+
HelixHeadlessChatComposerElementEvent<HelixStopEvent>;
|
|
5305
5396
|
/** `helix-typing` event type */
|
|
5306
5397
|
export type HelixHeadlessChatComposerHelixTypingElementEvent =
|
|
5307
5398
|
HelixHeadlessChatComposerElementEvent<HelixTypingEvent>;
|
|
5308
5399
|
|
|
5309
5400
|
export type HelixHeadlessChatComposerProps = {
|
|
5401
|
+
/** Whether the draft holds something besides its text, such as an attached
|
|
5402
|
+
file. The draft then counts as one though the field is empty, so the
|
|
5403
|
+
send button shows in place of the `idle` slot. */
|
|
5404
|
+
attached?: (HelixHeadlessChatComposer["attached"]) | undefined;
|
|
5405
|
+
/** Whether a reply is on its way. While set, the send button is a stop
|
|
5406
|
+
button that sends `helix-stop`, and the draft does not send.
|
|
5407
|
+
|
|
5408
|
+
**The same button rather than one beside it**, because sending and
|
|
5409
|
+
stopping are never both possible: while a reply is on its way there is
|
|
5410
|
+
nothing to send to, and the place the reader's eye goes to act is the
|
|
5411
|
+
place that can act. The field stays open for the next turn. */
|
|
5412
|
+
busy?: (HelixHeadlessChatComposer["busy"]) | undefined;
|
|
5310
5413
|
/** A message about the draft, shown under the field. While set, the composer
|
|
5311
5414
|
is invalid, does not send, and does not submit, as a field's `feedback`
|
|
5312
5415
|
does, and the message is announced as it appears. */
|
|
@@ -5325,6 +5428,14 @@ the field, as on a `<textarea>`. */
|
|
|
5325
5428
|
minLength?: (HelixHeadlessChatComposer["minLength"]) | undefined;
|
|
5326
5429
|
/** Placeholder text shown in an empty field. */
|
|
5327
5430
|
placeholder?: (HelixHeadlessChatComposer["placeholder"]) | undefined;
|
|
5431
|
+
/** Whether Enter sends while `busy`, for a page that queues the turn or
|
|
5432
|
+
hands it to the reply under way.
|
|
5433
|
+
|
|
5434
|
+
Off by default, because a page that does neither would drop the turn: it
|
|
5435
|
+
has nowhere to put a message while a reply is coming. The button stays
|
|
5436
|
+
the stop button either way, since stopping is still the one thing it
|
|
5437
|
+
should do while a reply is on its way. */
|
|
5438
|
+
queue?: (HelixHeadlessChatComposer["queue"]) | undefined;
|
|
5328
5439
|
/** Whether the form needs a draft to submit. An empty draft never sends,
|
|
5329
5440
|
required or not. */
|
|
5330
5441
|
required?: (HelixHeadlessChatComposer["required"]) | undefined;
|
|
@@ -5332,10 +5443,34 @@ required or not. */
|
|
|
5332
5443
|
|
|
5333
5444
|
It grows from there. */
|
|
5334
5445
|
rows?: (HelixHeadlessChatComposer["rows"]) | undefined;
|
|
5446
|
+
/** Whether the draft waits to be sent, such as while an attachment is still
|
|
5447
|
+
read. The send button is unavailable and Enter does not send, while the
|
|
5448
|
+
field stays open. The stop button shown while `busy` still stops. */
|
|
5449
|
+
"send-disabled"?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
|
|
5450
|
+
/** Whether the draft waits to be sent, such as while an attachment is still
|
|
5451
|
+
read. The send button is unavailable and Enter does not send, while the
|
|
5452
|
+
field stays open. The stop button shown while `busy` still stops. */
|
|
5453
|
+
sendDisabled?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
|
|
5335
5454
|
/** Label for the send button. */
|
|
5336
5455
|
"send-label"?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
|
|
5337
5456
|
/** Label for the send button. */
|
|
5338
5457
|
sendLabel?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
|
|
5458
|
+
/** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
5459
|
+
the send button while `send-disabled` is set. The button then stays in
|
|
5460
|
+
the tab order and takes the pointer, with `aria-disabled` in place of
|
|
5461
|
+
`disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
5462
|
+
Button's `focusable-when-disabled` does. A press still sends nothing. */
|
|
5463
|
+
"send-reason"?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
|
|
5464
|
+
/** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
5465
|
+
the send button while `send-disabled` is set. The button then stays in
|
|
5466
|
+
the tab order and takes the pointer, with `aria-disabled` in place of
|
|
5467
|
+
`disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
5468
|
+
Button's `focusable-when-disabled` does. A press still sends nothing. */
|
|
5469
|
+
sendReason?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
|
|
5470
|
+
/** Label for the stop button shown while `busy`. */
|
|
5471
|
+
"stop-label"?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
|
|
5472
|
+
/** Label for the stop button shown while `busy`. */
|
|
5473
|
+
stopLabel?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
|
|
5339
5474
|
/** What sends the turn: `enter` for the Enter key, or `button` for the send
|
|
5340
5475
|
button only.
|
|
5341
5476
|
|
|
@@ -5408,6 +5543,23 @@ imperatively later, and nothing is hydrating by then.
|
|
|
5408
5543
|
|
|
5409
5544
|
Here rather than on each control. */
|
|
5410
5545
|
name?: (HelixHeadlessChatComposer["name"]) | undefined;
|
|
5546
|
+
/** Examples the empty field shows in turn, in place of `placeholder`, such
|
|
5547
|
+
as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
|
|
5548
|
+
one shows longer, up to 10 seconds.
|
|
5549
|
+
|
|
5550
|
+
**Each is the field's placeholder in its turn**, so a screen reader that
|
|
5551
|
+
reaches the field hears the one showing. The swap runs through
|
|
5552
|
+
`:state(example-leaving)`, as one example leaves, and
|
|
5553
|
+
`:state(example-entering)`, as the next arrives.
|
|
5554
|
+
|
|
5555
|
+
**They move only while nobody is about to write, and while the reader
|
|
5556
|
+
can see them.** An empty field without focus moves on. Focus or text
|
|
5557
|
+
holds the example showing, and an example already leaving finishes its
|
|
5558
|
+
turn. A composer scrolled out of view holds its example, and the example
|
|
5559
|
+
gets its full time again when the composer comes back. Where the reader
|
|
5560
|
+
asked for less motion, or the page paused its motion, the first example
|
|
5561
|
+
stays. */
|
|
5562
|
+
placeholders?: (HelixHeadlessChatComposer["placeholders"]) | undefined;
|
|
5411
5563
|
/** The engine this field listens through, in place of the one
|
|
5412
5564
|
`registerSpeechEngine` gave the page, or the browser's own. */
|
|
5413
5565
|
speechEngine?: (HelixHeadlessChatComposer["speechEngine"]) | undefined;
|
|
@@ -5422,6 +5574,8 @@ Here rather than on each control. */
|
|
|
5422
5574
|
) => void) | undefined;
|
|
5423
5575
|
/** Fired when the user sends their turn, and cancelable. */
|
|
5424
5576
|
"onhelix-send"?: ((e: HelixHeadlessChatComposerHelixSendElementEvent) => void) | undefined;
|
|
5577
|
+
/** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
|
|
5578
|
+
"onhelix-stop"?: ((e: HelixHeadlessChatComposerHelixStopElementEvent) => void) | undefined;
|
|
5425
5579
|
/** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
|
|
5426
5580
|
"onhelix-typing"?: ((
|
|
5427
5581
|
e: HelixHeadlessChatComposerHelixTypingElementEvent,
|
|
@@ -5431,6 +5585,18 @@ Here rather than on each control. */
|
|
|
5431
5585
|
};
|
|
5432
5586
|
|
|
5433
5587
|
export type HelixHeadlessChatComposerSolidJsProps = {
|
|
5588
|
+
/** Whether the draft holds something besides its text, such as an attached
|
|
5589
|
+
file. The draft then counts as one though the field is empty, so the
|
|
5590
|
+
send button shows in place of the `idle` slot. */
|
|
5591
|
+
"prop:attached"?: (HelixHeadlessChatComposer["attached"]) | undefined;
|
|
5592
|
+
/** Whether a reply is on its way. While set, the send button is a stop
|
|
5593
|
+
button that sends `helix-stop`, and the draft does not send.
|
|
5594
|
+
|
|
5595
|
+
**The same button rather than one beside it**, because sending and
|
|
5596
|
+
stopping are never both possible: while a reply is on its way there is
|
|
5597
|
+
nothing to send to, and the place the reader's eye goes to act is the
|
|
5598
|
+
place that can act. The field stays open for the next turn. */
|
|
5599
|
+
"prop:busy"?: (HelixHeadlessChatComposer["busy"]) | undefined;
|
|
5434
5600
|
/** A message about the draft, shown under the field. While set, the composer
|
|
5435
5601
|
is invalid, does not send, and does not submit, as a field's `feedback`
|
|
5436
5602
|
does, and the message is announced as it appears. */
|
|
@@ -5449,6 +5615,14 @@ the field, as on a `<textarea>`. */
|
|
|
5449
5615
|
"prop:minLength"?: (HelixHeadlessChatComposer["minLength"]) | undefined;
|
|
5450
5616
|
/** Placeholder text shown in an empty field. */
|
|
5451
5617
|
"prop:placeholder"?: (HelixHeadlessChatComposer["placeholder"]) | undefined;
|
|
5618
|
+
/** Whether Enter sends while `busy`, for a page that queues the turn or
|
|
5619
|
+
hands it to the reply under way.
|
|
5620
|
+
|
|
5621
|
+
Off by default, because a page that does neither would drop the turn: it
|
|
5622
|
+
has nowhere to put a message while a reply is coming. The button stays
|
|
5623
|
+
the stop button either way, since stopping is still the one thing it
|
|
5624
|
+
should do while a reply is on its way. */
|
|
5625
|
+
"prop:queue"?: (HelixHeadlessChatComposer["queue"]) | undefined;
|
|
5452
5626
|
/** Whether the form needs a draft to submit. An empty draft never sends,
|
|
5453
5627
|
required or not. */
|
|
5454
5628
|
"prop:required"?: (HelixHeadlessChatComposer["required"]) | undefined;
|
|
@@ -5456,10 +5630,34 @@ required or not. */
|
|
|
5456
5630
|
|
|
5457
5631
|
It grows from there. */
|
|
5458
5632
|
"prop:rows"?: (HelixHeadlessChatComposer["rows"]) | undefined;
|
|
5633
|
+
/** Whether the draft waits to be sent, such as while an attachment is still
|
|
5634
|
+
read. The send button is unavailable and Enter does not send, while the
|
|
5635
|
+
field stays open. The stop button shown while `busy` still stops. */
|
|
5636
|
+
"bool:send-disabled"?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
|
|
5637
|
+
/** Whether the draft waits to be sent, such as while an attachment is still
|
|
5638
|
+
read. The send button is unavailable and Enter does not send, while the
|
|
5639
|
+
field stays open. The stop button shown while `busy` still stops. */
|
|
5640
|
+
"prop:sendDisabled"?: (HelixHeadlessChatComposer["sendDisabled"]) | undefined;
|
|
5459
5641
|
/** Label for the send button. */
|
|
5460
5642
|
"attr:send-label"?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
|
|
5461
5643
|
/** Label for the send button. */
|
|
5462
5644
|
"prop:sendLabel"?: (HelixHeadlessChatComposer["sendLabel"]) | undefined;
|
|
5645
|
+
/** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
5646
|
+
the send button while `send-disabled` is set. The button then stays in
|
|
5647
|
+
the tab order and takes the pointer, with `aria-disabled` in place of
|
|
5648
|
+
`disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
5649
|
+
Button's `focusable-when-disabled` does. A press still sends nothing. */
|
|
5650
|
+
"attr:send-reason"?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
|
|
5651
|
+
/** Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
5652
|
+
the send button while `send-disabled` is set. The button then stays in
|
|
5653
|
+
the tab order and takes the pointer, with `aria-disabled` in place of
|
|
5654
|
+
`disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
5655
|
+
Button's `focusable-when-disabled` does. A press still sends nothing. */
|
|
5656
|
+
"prop:sendReason"?: (HelixHeadlessChatComposer["sendReason"]) | undefined;
|
|
5657
|
+
/** Label for the stop button shown while `busy`. */
|
|
5658
|
+
"attr:stop-label"?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
|
|
5659
|
+
/** Label for the stop button shown while `busy`. */
|
|
5660
|
+
"prop:stopLabel"?: (HelixHeadlessChatComposer["stopLabel"]) | undefined;
|
|
5463
5661
|
/** What sends the turn: `enter` for the Enter key, or `button` for the send
|
|
5464
5662
|
button only.
|
|
5465
5663
|
|
|
@@ -5532,6 +5730,23 @@ imperatively later, and nothing is hydrating by then.
|
|
|
5532
5730
|
|
|
5533
5731
|
Here rather than on each control. */
|
|
5534
5732
|
"prop:name"?: (HelixHeadlessChatComposer["name"]) | undefined;
|
|
5733
|
+
/** Examples the empty field shows in turn, in place of `placeholder`, such
|
|
5734
|
+
as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
|
|
5735
|
+
one shows longer, up to 10 seconds.
|
|
5736
|
+
|
|
5737
|
+
**Each is the field's placeholder in its turn**, so a screen reader that
|
|
5738
|
+
reaches the field hears the one showing. The swap runs through
|
|
5739
|
+
`:state(example-leaving)`, as one example leaves, and
|
|
5740
|
+
`:state(example-entering)`, as the next arrives.
|
|
5741
|
+
|
|
5742
|
+
**They move only while nobody is about to write, and while the reader
|
|
5743
|
+
can see them.** An empty field without focus moves on. Focus or text
|
|
5744
|
+
holds the example showing, and an example already leaving finishes its
|
|
5745
|
+
turn. A composer scrolled out of view holds its example, and the example
|
|
5746
|
+
gets its full time again when the composer comes back. Where the reader
|
|
5747
|
+
asked for less motion, or the page paused its motion, the first example
|
|
5748
|
+
stays. */
|
|
5749
|
+
"prop:placeholders"?: (HelixHeadlessChatComposer["placeholders"]) | undefined;
|
|
5535
5750
|
/** The engine this field listens through, in place of the one
|
|
5536
5751
|
`registerSpeechEngine` gave the page, or the browser's own. */
|
|
5537
5752
|
"prop:speechEngine"?: (HelixHeadlessChatComposer["speechEngine"]) | undefined;
|
|
@@ -5545,6 +5760,8 @@ Here rather than on each control. */
|
|
|
5545
5760
|
) => void) | undefined;
|
|
5546
5761
|
/** Fired when the user sends their turn, and cancelable. */
|
|
5547
5762
|
"on:helix-send"?: ((e: HelixHeadlessChatComposerHelixSendElementEvent) => void) | undefined;
|
|
5763
|
+
/** Fired when the user presses the stop button, shown in place of the send button while `busy` is set. */
|
|
5764
|
+
"on:helix-stop"?: ((e: HelixHeadlessChatComposerHelixStopElementEvent) => void) | undefined;
|
|
5548
5765
|
/** The user started or stopped writing, with `typing` saying which, as the composer's `typing` does. */
|
|
5549
5766
|
"on:helix-typing"?: ((
|
|
5550
5767
|
e: HelixHeadlessChatComposerHelixTypingElementEvent,
|
|
@@ -10381,6 +10598,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
|
|
|
10381
10598
|
value?: (HelixHeadlessCopyButton["value"]) | undefined;
|
|
10382
10599
|
/** */
|
|
10383
10600
|
"aria-label"?: (string) | undefined;
|
|
10601
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
10602
|
+
can say why it is disabled.
|
|
10603
|
+
|
|
10604
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
10605
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
10606
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
10607
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
10608
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
10609
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
10610
|
+
The styled button keeps the disabled look.
|
|
10611
|
+
|
|
10612
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
10613
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
10614
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
10615
|
+
"focusable-when-disabled"?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
|
|
10616
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
10617
|
+
can say why it is disabled.
|
|
10618
|
+
|
|
10619
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
10620
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
10621
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
10622
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
10623
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
10624
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
10625
|
+
The styled button keeps the disabled look.
|
|
10626
|
+
|
|
10627
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
10628
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
10629
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
10630
|
+
focusableWhenDisabled?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
|
|
10384
10631
|
/** Whether the action the button started is still running.
|
|
10385
10632
|
|
|
10386
10633
|
A pending button keeps focus and stays in the tab order, and refuses every
|
|
@@ -10514,6 +10761,36 @@ whatever its `type`. Declared here so its own page says what it holds. */
|
|
|
10514
10761
|
"prop:value"?: (HelixHeadlessCopyButton["value"]) | undefined;
|
|
10515
10762
|
/** */
|
|
10516
10763
|
"attr:aria-label"?: (string) | undefined;
|
|
10764
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
10765
|
+
can say why it is disabled.
|
|
10766
|
+
|
|
10767
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
10768
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
10769
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
10770
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
10771
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
10772
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
10773
|
+
The styled button keeps the disabled look.
|
|
10774
|
+
|
|
10775
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
10776
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
10777
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
10778
|
+
"bool:focusable-when-disabled"?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
|
|
10779
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
10780
|
+
can say why it is disabled.
|
|
10781
|
+
|
|
10782
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
10783
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
10784
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
10785
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
10786
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
10787
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
10788
|
+
The styled button keeps the disabled look.
|
|
10789
|
+
|
|
10790
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
10791
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
10792
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
10793
|
+
"prop:focusableWhenDisabled"?: (HelixHeadlessCopyButton["focusableWhenDisabled"]) | undefined;
|
|
10517
10794
|
/** Whether the action the button started is still running.
|
|
10518
10795
|
|
|
10519
10796
|
A pending button keeps focus and stays in the tab order, and refuses every
|
|
@@ -18024,6 +18301,36 @@ is the platform's `commandfor`. */
|
|
|
18024
18301
|
commandfor?: (HelixHeadlessIconButton["commandFor"]) | undefined;
|
|
18025
18302
|
/** The id of the element the command is sent to. */
|
|
18026
18303
|
commandFor?: (HelixHeadlessIconButton["commandFor"]) | undefined;
|
|
18304
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
18305
|
+
can say why it is disabled.
|
|
18306
|
+
|
|
18307
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
18308
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
18309
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
18310
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
18311
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
18312
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
18313
|
+
The styled button keeps the disabled look.
|
|
18314
|
+
|
|
18315
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
18316
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
18317
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
18318
|
+
"focusable-when-disabled"?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
|
|
18319
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
18320
|
+
can say why it is disabled.
|
|
18321
|
+
|
|
18322
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
18323
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
18324
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
18325
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
18326
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
18327
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
18328
|
+
The styled button keeps the disabled look.
|
|
18329
|
+
|
|
18330
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
18331
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
18332
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
18333
|
+
focusableWhenDisabled?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
|
|
18027
18334
|
/** Where this button's submission goes, overriding the form's own.
|
|
18028
18335
|
|
|
18029
18336
|
**The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -18205,6 +18512,36 @@ is the platform's `commandfor`. */
|
|
|
18205
18512
|
"attr:commandfor"?: (HelixHeadlessIconButton["commandFor"]) | undefined;
|
|
18206
18513
|
/** The id of the element the command is sent to. */
|
|
18207
18514
|
"prop:commandFor"?: (HelixHeadlessIconButton["commandFor"]) | undefined;
|
|
18515
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
18516
|
+
can say why it is disabled.
|
|
18517
|
+
|
|
18518
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
18519
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
18520
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
18521
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
18522
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
18523
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
18524
|
+
The styled button keeps the disabled look.
|
|
18525
|
+
|
|
18526
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
18527
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
18528
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
18529
|
+
"bool:focusable-when-disabled"?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
|
|
18530
|
+
/** Whether a disabled button stays in the tab order, so a tooltip around it
|
|
18531
|
+
can say why it is disabled.
|
|
18532
|
+
|
|
18533
|
+
Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
18534
|
+
changes to save. While the button is disabled, it keeps focus and takes
|
|
18535
|
+
hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
18536
|
+
a field of its form. The click does not reach your listeners, and a submit
|
|
18537
|
+
button submits nothing. The inner control carries `aria-disabled` in place
|
|
18538
|
+
of the native `disabled`, so a screen reader still says it is unavailable.
|
|
18539
|
+
The styled button keeps the disabled look.
|
|
18540
|
+
|
|
18541
|
+
Leave it unset on a button with no reason to give. A plain disabled button
|
|
18542
|
+
leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
18543
|
+
stop that does nothing. Set `pending` for the wait after a press. */
|
|
18544
|
+
"prop:focusableWhenDisabled"?: (HelixHeadlessIconButton["focusableWhenDisabled"]) | undefined;
|
|
18208
18545
|
/** Where this button's submission goes, overriding the form's own.
|
|
18209
18546
|
|
|
18210
18547
|
**The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -18715,6 +19052,10 @@ token.
|
|
|
18715
19052
|
Empty leaves the attribute off, which is the browser's default. Set it to
|
|
18716
19053
|
a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
|
|
18717
19054
|
autocomplete?: (HelixHeadlessInput["autocomplete"]) | undefined;
|
|
19055
|
+
/** Whether the browser corrects words as the reader types, as the platform's
|
|
19056
|
+
`autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
|
|
19057
|
+
prose, such as an address or a code, which corrections would change. */
|
|
19058
|
+
autocorrect?: (HelixHeadlessInput["autocorrect"]) | undefined;
|
|
18718
19059
|
/** Whether the field shows a button that empties it.
|
|
18719
19060
|
|
|
18720
19061
|
Shown only while there is something to clear, because a control that does
|
|
@@ -18977,6 +19318,10 @@ token.
|
|
|
18977
19318
|
Empty leaves the attribute off, which is the browser's default. Set it to
|
|
18978
19319
|
a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
|
|
18979
19320
|
"prop:autocomplete"?: (HelixHeadlessInput["autocomplete"]) | undefined;
|
|
19321
|
+
/** Whether the browser corrects words as the reader types, as the platform's
|
|
19322
|
+
`autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
|
|
19323
|
+
prose, such as an address or a code, which corrections would change. */
|
|
19324
|
+
"prop:autocorrect"?: (HelixHeadlessInput["autocorrect"]) | undefined;
|
|
18980
19325
|
/** Whether the field shows a button that empties it.
|
|
18981
19326
|
|
|
18982
19327
|
Shown only while there is something to clear, because a control that does
|
|
@@ -21819,9 +22164,13 @@ stream ends. */
|
|
|
21819
22164
|
"dropped-label"?: (HelixHeadlessLog["droppedLabel"]) | undefined;
|
|
21820
22165
|
/** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
|
|
21821
22166
|
droppedLabel?: (HelixHeadlessLog["droppedLabel"]) | undefined;
|
|
21822
|
-
/** The text shown and announced when the log has no lines.
|
|
22167
|
+
/** The text shown and announced when the log has no lines and no steps. A
|
|
22168
|
+
step with nothing in it yet, such as one still `pending`, is its heading
|
|
22169
|
+
alone, so a log holding one says nothing. */
|
|
21823
22170
|
"empty-text"?: (HelixHeadlessLog["emptyText"]) | undefined;
|
|
21824
|
-
/** The text shown and announced when the log has no lines.
|
|
22171
|
+
/** The text shown and announced when the log has no lines and no steps. A
|
|
22172
|
+
step with nothing in it yet, such as one still `pending`, is its heading
|
|
22173
|
+
alone, so a log holding one says nothing. */
|
|
21825
22174
|
emptyText?: (HelixHeadlessLog["emptyText"]) | undefined;
|
|
21826
22175
|
/** What a screen reader hears when lines at `error` arrive. `{count}` is how
|
|
21827
22176
|
many arrived together and `{text}` is the first of them. */
|
|
@@ -21984,9 +22333,13 @@ stream ends. */
|
|
|
21984
22333
|
"attr:dropped-label"?: (HelixHeadlessLog["droppedLabel"]) | undefined;
|
|
21985
22334
|
/** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
|
|
21986
22335
|
"prop:droppedLabel"?: (HelixHeadlessLog["droppedLabel"]) | undefined;
|
|
21987
|
-
/** The text shown and announced when the log has no lines.
|
|
22336
|
+
/** The text shown and announced when the log has no lines and no steps. A
|
|
22337
|
+
step with nothing in it yet, such as one still `pending`, is its heading
|
|
22338
|
+
alone, so a log holding one says nothing. */
|
|
21988
22339
|
"attr:empty-text"?: (HelixHeadlessLog["emptyText"]) | undefined;
|
|
21989
|
-
/** The text shown and announced when the log has no lines.
|
|
22340
|
+
/** The text shown and announced when the log has no lines and no steps. A
|
|
22341
|
+
step with nothing in it yet, such as one still `pending`, is its heading
|
|
22342
|
+
alone, so a log holding one says nothing. */
|
|
21990
22343
|
"prop:emptyText"?: (HelixHeadlessLog["emptyText"]) | undefined;
|
|
21991
22344
|
/** What a screen reader hears when lines at `error` arrive. `{count}` is how
|
|
21992
22345
|
many arrived together and `{text}` is the first of them. */
|
|
@@ -24797,6 +25150,43 @@ fair summary of a task and a poor one of a quantity. */
|
|
|
24797
25150
|
textContent?: (string | number) | undefined;
|
|
24798
25151
|
};
|
|
24799
25152
|
|
|
25153
|
+
export type HelixHeadlessMeterSegmentProps = {
|
|
25154
|
+
/** What the segment is, such as "Tools", which names the slice when a pointer
|
|
25155
|
+
rests on it.
|
|
25156
|
+
|
|
25157
|
+
Not announced: see the note on a meter's children above. */
|
|
25158
|
+
label?: (HelixHeadlessMeterSegment["label"]) | undefined;
|
|
25159
|
+
/** What the segment means, as it does on a callout. Takes the tone's color in
|
|
25160
|
+
place of the next color in the series. */
|
|
25161
|
+
tone?: (HelixHeadlessMeterSegment["tone"]) | undefined;
|
|
25162
|
+
/** How much of the meter's range the segment takes, in the units of the meter's
|
|
25163
|
+
`min` and `max`.
|
|
25164
|
+
|
|
25165
|
+
A value that is not a number, or is below zero, draws nothing. */
|
|
25166
|
+
value?: (HelixHeadlessMeterSegment["value"]) | undefined;
|
|
25167
|
+
};
|
|
25168
|
+
|
|
25169
|
+
export type HelixHeadlessMeterSegmentSolidJsProps = {
|
|
25170
|
+
/** What the segment is, such as "Tools", which names the slice when a pointer
|
|
25171
|
+
rests on it.
|
|
25172
|
+
|
|
25173
|
+
Not announced: see the note on a meter's children above. */
|
|
25174
|
+
"prop:label"?: (HelixHeadlessMeterSegment["label"]) | undefined;
|
|
25175
|
+
/** What the segment means, as it does on a callout. Takes the tone's color in
|
|
25176
|
+
place of the next color in the series. */
|
|
25177
|
+
"prop:tone"?: (HelixHeadlessMeterSegment["tone"]) | undefined;
|
|
25178
|
+
/** How much of the meter's range the segment takes, in the units of the meter's
|
|
25179
|
+
`min` and `max`.
|
|
25180
|
+
|
|
25181
|
+
A value that is not a number, or is below zero, draws nothing. */
|
|
25182
|
+
"prop:value"?: (HelixHeadlessMeterSegment["value"]) | undefined;
|
|
25183
|
+
|
|
25184
|
+
/** Set the innerHTML of the element */
|
|
25185
|
+
innerHTML?: (string) | undefined;
|
|
25186
|
+
/** Set the textContent of the element */
|
|
25187
|
+
textContent?: (string | number) | undefined;
|
|
25188
|
+
};
|
|
25189
|
+
|
|
24800
25190
|
/** `HelixHeadlessMotionToggle` component event */
|
|
24801
25191
|
export type HelixHeadlessMotionToggleElementEvent<E = Event> = TypedEvent<
|
|
24802
25192
|
HelixHeadlessMotionToggle,
|
|
@@ -31013,13 +31403,42 @@ export type HelixHeadlessSpatialBarChartHelixReadingPressElementEvent =
|
|
|
31013
31403
|
HelixHeadlessSpatialBarChartElementEvent<HelixReadingPressEvent>;
|
|
31014
31404
|
|
|
31015
31405
|
export type HelixHeadlessSpatialBarChartProps = {
|
|
31016
|
-
/**
|
|
31017
|
-
|
|
31406
|
+
/** Grows the bars up from the floor the first time the chart comes into
|
|
31407
|
+
view with readings, each category a little after the one before it, so
|
|
31408
|
+
the drawing arrives the way a page's own picture does. The growth is
|
|
31409
|
+
fast at first, slows to rest, and never passes a bar's value.
|
|
31410
|
+
|
|
31411
|
+
Under `prefers-reduced-motion`, or where the page has paused its motion
|
|
31412
|
+
through `pauseMotion` or `Motion Toggle`, the bars stand at their height
|
|
31413
|
+
from the start. A later table draws the bars it already had at their
|
|
31414
|
+
height, and grows the bars it adds, each from the floor, so a reading that
|
|
31415
|
+
arrives while the chart is in view arrives the same way. */
|
|
31416
|
+
grow?: (HelixHeadlessSpatialBarChart["grow"]) | undefined;
|
|
31417
|
+
/** Grows the bars again each time the chart comes back into view after it
|
|
31418
|
+
left it, as a pane does when it is opened again, where `grow` alone grows
|
|
31419
|
+
them the first time only. Only a chart that grows takes it.
|
|
31420
|
+
|
|
31421
|
+
While it is out of view the bars stand at the floor, so the first frame
|
|
31422
|
+
after it returns is the start of the growth and never a flash at full
|
|
31423
|
+
height. */
|
|
31424
|
+
"grow-again"?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
|
|
31425
|
+
/** Grows the bars again each time the chart comes back into view after it
|
|
31426
|
+
left it, as a pane does when it is opened again, where `grow` alone grows
|
|
31427
|
+
them the first time only. Only a chart that grows takes it.
|
|
31428
|
+
|
|
31429
|
+
While it is out of view the bars stand at the floor, so the first frame
|
|
31430
|
+
after it returns is the start of the growth and never a flash at full
|
|
31431
|
+
height. */
|
|
31432
|
+
growAgain?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
|
|
31433
|
+
/** Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
31434
|
+
floor, so the readings stand alone and fill the plot, as a picture on a
|
|
31435
|
+
product's own page does. The
|
|
31018
31436
|
table, the summary, the tooltip, and the keys still carry every value,
|
|
31019
31437
|
and a renderer draws no box either. */
|
|
31020
31438
|
"no-box"?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
|
|
31021
|
-
/** Draws no box: no edges, grid, numbers, or names,
|
|
31022
|
-
alone and fill the plot, as a picture on a
|
|
31439
|
+
/** Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
31440
|
+
floor, so the readings stand alone and fill the plot, as a picture on a
|
|
31441
|
+
product's own page does. The
|
|
31023
31442
|
table, the summary, the tooltip, and the keys still carry every value,
|
|
31024
31443
|
and a renderer draws no box either. */
|
|
31025
31444
|
noBox?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
|
|
@@ -31033,6 +31452,15 @@ and a renderer draws no box either. */
|
|
|
31033
31452
|
"plot-label"?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
|
|
31034
31453
|
/** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
|
|
31035
31454
|
plotLabel?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
|
|
31455
|
+
/** Stacks a category's series into one column, each block standing on the
|
|
31456
|
+
ones before it, so the column is as tall as the category's total, as a
|
|
31457
|
+
flat `Bar Chart` stacks them.
|
|
31458
|
+
|
|
31459
|
+
Absent stands the series one behind another in depth. Stacked, every
|
|
31460
|
+
series stands in the front row, so none hides another, and the parts of
|
|
31461
|
+
one total read together. A negative reading hangs below zero on the
|
|
31462
|
+
negatives before it. The scale fits the stacks. */
|
|
31463
|
+
stacked?: (HelixHeadlessSpatialBarChart["stacked"]) | undefined;
|
|
31036
31464
|
/** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
|
|
31037
31465
|
are the number of bars, series, and categories, written in the locale,
|
|
31038
31466
|
and `{low}` and `{high}` the lowest and the highest value. */
|
|
@@ -31041,6 +31469,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
|
|
|
31041
31469
|
are the number of bars, series, and categories, written in the locale,
|
|
31042
31470
|
and `{low}` and `{high}` the lowest and the highest value. */
|
|
31043
31471
|
summaryLabel?: (HelixHeadlessSpatialBarChart["summaryLabel"]) | undefined;
|
|
31472
|
+
/** How the bars stand.
|
|
31473
|
+
|
|
31474
|
+
Unset, they stand on a grid of categories across and series in depth,
|
|
31475
|
+
in a box the camera looks at from a corner, so the grid recedes at an
|
|
31476
|
+
angle. `row` lays the categories in a straight line across the page and
|
|
31477
|
+
turns each bar to the camera, showing its top and two sides, for one row
|
|
31478
|
+
of readings in a small space such as a pane: turning the view turns each
|
|
31479
|
+
bar where it stands, and the row stays level. It is the chart's own
|
|
31480
|
+
drawing that lays the row: a renderer connected through
|
|
31481
|
+
`@fusion.dev/helix-plot` stands the bars on the grid.
|
|
31482
|
+
|
|
31483
|
+
`diagonal` is the same row climbing to the right as it recedes, each
|
|
31484
|
+
place a step further back than the one before, as a row of days on a
|
|
31485
|
+
product's page is drawn: the row rises one part in five across the page
|
|
31486
|
+
from any turn, and its floor and names climb with it. A row whose bars
|
|
31487
|
+
have a size climbs at most a quarter of the plot's height, so the bars
|
|
31488
|
+
of a long row keep theirs.
|
|
31489
|
+
|
|
31490
|
+
**A row draws its floor in place of a box**: each place as an outline a
|
|
31491
|
+
little wider than its bar, and each category's name under it, as many
|
|
31492
|
+
names as fit without touching. A name whose bar names a tone is written
|
|
31493
|
+
first, in that tone. `no-box` leaves the floor and the names out.
|
|
31494
|
+
|
|
31495
|
+
**A `column-gap` on the `fallback` part gives a row's bars one width**,
|
|
31496
|
+
which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
|
|
31497
|
+
stands as wide as each of twenty, the row is as long as its bars and
|
|
31498
|
+
centered, the tallest bar stands as high as the plot has room for and
|
|
31499
|
+
no taller than the row is long and a quarter again, so one bar stands
|
|
31500
|
+
as a block, and `fits` says how many bars the plot holds, so a page
|
|
31501
|
+
can give it the latest of a longer table. It is read when the plot's
|
|
31502
|
+
size changes. */
|
|
31503
|
+
variant?: (HelixHeadlessSpatialBarChart["variant"]) | undefined;
|
|
31044
31504
|
/** The words shown in place of the drawing when the table has no readings,
|
|
31045
31505
|
and the fallback of the `empty` slot. */
|
|
31046
31506
|
"empty-text"?: (HelixHeadlessSpatialBarChart["emptyText"]) | undefined;
|
|
@@ -31186,13 +31646,42 @@ does not look inside the one it has. */
|
|
|
31186
31646
|
};
|
|
31187
31647
|
|
|
31188
31648
|
export type HelixHeadlessSpatialBarChartSolidJsProps = {
|
|
31189
|
-
/**
|
|
31190
|
-
|
|
31649
|
+
/** Grows the bars up from the floor the first time the chart comes into
|
|
31650
|
+
view with readings, each category a little after the one before it, so
|
|
31651
|
+
the drawing arrives the way a page's own picture does. The growth is
|
|
31652
|
+
fast at first, slows to rest, and never passes a bar's value.
|
|
31653
|
+
|
|
31654
|
+
Under `prefers-reduced-motion`, or where the page has paused its motion
|
|
31655
|
+
through `pauseMotion` or `Motion Toggle`, the bars stand at their height
|
|
31656
|
+
from the start. A later table draws the bars it already had at their
|
|
31657
|
+
height, and grows the bars it adds, each from the floor, so a reading that
|
|
31658
|
+
arrives while the chart is in view arrives the same way. */
|
|
31659
|
+
"prop:grow"?: (HelixHeadlessSpatialBarChart["grow"]) | undefined;
|
|
31660
|
+
/** Grows the bars again each time the chart comes back into view after it
|
|
31661
|
+
left it, as a pane does when it is opened again, where `grow` alone grows
|
|
31662
|
+
them the first time only. Only a chart that grows takes it.
|
|
31663
|
+
|
|
31664
|
+
While it is out of view the bars stand at the floor, so the first frame
|
|
31665
|
+
after it returns is the start of the growth and never a flash at full
|
|
31666
|
+
height. */
|
|
31667
|
+
"bool:grow-again"?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
|
|
31668
|
+
/** Grows the bars again each time the chart comes back into view after it
|
|
31669
|
+
left it, as a pane does when it is opened again, where `grow` alone grows
|
|
31670
|
+
them the first time only. Only a chart that grows takes it.
|
|
31671
|
+
|
|
31672
|
+
While it is out of view the bars stand at the floor, so the first frame
|
|
31673
|
+
after it returns is the start of the growth and never a flash at full
|
|
31674
|
+
height. */
|
|
31675
|
+
"prop:growAgain"?: (HelixHeadlessSpatialBarChart["growAgain"]) | undefined;
|
|
31676
|
+
/** Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
31677
|
+
floor, so the readings stand alone and fill the plot, as a picture on a
|
|
31678
|
+
product's own page does. The
|
|
31191
31679
|
table, the summary, the tooltip, and the keys still carry every value,
|
|
31192
31680
|
and a renderer draws no box either. */
|
|
31193
31681
|
"bool:no-box"?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
|
|
31194
|
-
/** Draws no box: no edges, grid, numbers, or names,
|
|
31195
|
-
alone and fill the plot, as a picture on a
|
|
31682
|
+
/** Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
31683
|
+
floor, so the readings stand alone and fill the plot, as a picture on a
|
|
31684
|
+
product's own page does. The
|
|
31196
31685
|
table, the summary, the tooltip, and the keys still carry every value,
|
|
31197
31686
|
and a renderer draws no box either. */
|
|
31198
31687
|
"prop:noBox"?: (HelixHeadlessSpatialBarChart["noBox"]) | undefined;
|
|
@@ -31206,6 +31695,15 @@ and a renderer draws no box either. */
|
|
|
31206
31695
|
"attr:plot-label"?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
|
|
31207
31696
|
/** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
|
|
31208
31697
|
"prop:plotLabel"?: (HelixHeadlessSpatialBarChart["plotLabel"]) | undefined;
|
|
31698
|
+
/** Stacks a category's series into one column, each block standing on the
|
|
31699
|
+
ones before it, so the column is as tall as the category's total, as a
|
|
31700
|
+
flat `Bar Chart` stacks them.
|
|
31701
|
+
|
|
31702
|
+
Absent stands the series one behind another in depth. Stacked, every
|
|
31703
|
+
series stands in the front row, so none hides another, and the parts of
|
|
31704
|
+
one total read together. A negative reading hangs below zero on the
|
|
31705
|
+
negatives before it. The scale fits the stacks. */
|
|
31706
|
+
"prop:stacked"?: (HelixHeadlessSpatialBarChart["stacked"]) | undefined;
|
|
31209
31707
|
/** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
|
|
31210
31708
|
are the number of bars, series, and categories, written in the locale,
|
|
31211
31709
|
and `{low}` and `{high}` the lowest and the highest value. */
|
|
@@ -31214,6 +31712,38 @@ and `{low}` and `{high}` the lowest and the highest value. */
|
|
|
31214
31712
|
are the number of bars, series, and categories, written in the locale,
|
|
31215
31713
|
and `{low}` and `{high}` the lowest and the highest value. */
|
|
31216
31714
|
"prop:summaryLabel"?: (HelixHeadlessSpatialBarChart["summaryLabel"]) | undefined;
|
|
31715
|
+
/** How the bars stand.
|
|
31716
|
+
|
|
31717
|
+
Unset, they stand on a grid of categories across and series in depth,
|
|
31718
|
+
in a box the camera looks at from a corner, so the grid recedes at an
|
|
31719
|
+
angle. `row` lays the categories in a straight line across the page and
|
|
31720
|
+
turns each bar to the camera, showing its top and two sides, for one row
|
|
31721
|
+
of readings in a small space such as a pane: turning the view turns each
|
|
31722
|
+
bar where it stands, and the row stays level. It is the chart's own
|
|
31723
|
+
drawing that lays the row: a renderer connected through
|
|
31724
|
+
`@fusion.dev/helix-plot` stands the bars on the grid.
|
|
31725
|
+
|
|
31726
|
+
`diagonal` is the same row climbing to the right as it recedes, each
|
|
31727
|
+
place a step further back than the one before, as a row of days on a
|
|
31728
|
+
product's page is drawn: the row rises one part in five across the page
|
|
31729
|
+
from any turn, and its floor and names climb with it. A row whose bars
|
|
31730
|
+
have a size climbs at most a quarter of the plot's height, so the bars
|
|
31731
|
+
of a long row keep theirs.
|
|
31732
|
+
|
|
31733
|
+
**A row draws its floor in place of a box**: each place as an outline a
|
|
31734
|
+
little wider than its bar, and each category's name under it, as many
|
|
31735
|
+
names as fit without touching. A name whose bar names a tone is written
|
|
31736
|
+
first, in that tone. `no-box` leaves the floor and the names out.
|
|
31737
|
+
|
|
31738
|
+
**A `column-gap` on the `fallback` part gives a row's bars one width**,
|
|
31739
|
+
which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
|
|
31740
|
+
stands as wide as each of twenty, the row is as long as its bars and
|
|
31741
|
+
centered, the tallest bar stands as high as the plot has room for and
|
|
31742
|
+
no taller than the row is long and a quarter again, so one bar stands
|
|
31743
|
+
as a block, and `fits` says how many bars the plot holds, so a page
|
|
31744
|
+
can give it the latest of a longer table. It is read when the plot's
|
|
31745
|
+
size changes. */
|
|
31746
|
+
"prop:variant"?: (HelixHeadlessSpatialBarChart["variant"]) | undefined;
|
|
31217
31747
|
/** The words shown in place of the drawing when the table has no readings,
|
|
31218
31748
|
and the fallback of the `empty` slot. */
|
|
31219
31749
|
"attr:empty-text"?: (HelixHeadlessSpatialBarChart["emptyText"]) | undefined;
|
|
@@ -44718,7 +45248,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
44718
45248
|
*
|
|
44719
45249
|
* - `(default)`: The step's label. Without an `href`, you can slot your own anchor here. Give it `data-link="quiet"`, because a slotted anchor belongs to the outer tree and the crumb's styles cannot reach it.
|
|
44720
45250
|
* - `end`: Content after the label and outside the link, such as a switcher's menu trigger, a count, or a mark. It can hold a control, and it is not read as part of the link's accessible name.
|
|
44721
|
-
* - `separator`: Replaces the
|
|
45251
|
+
* - `separator`: Replaces the mark shown before this item, a chevron or the trail's `separator`.
|
|
44722
45252
|
* - `start`: Content before the label, such as an icon.
|
|
44723
45253
|
*
|
|
44724
45254
|
* ## CSS Parts
|
|
@@ -44729,7 +45259,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
44729
45259
|
* - `fold-separator`: The chevron before that button.
|
|
44730
45260
|
* - `link`: The crumb itself, which is an `<a>` where `href` is set.
|
|
44731
45261
|
* - `separator`: The separator preceding the item.
|
|
44732
|
-
* - `separator-mark`: The chevron between crumbs, shown when no separator is slotted.
|
|
45262
|
+
* - `separator-mark`: The chevron between crumbs, or the slash under the trail's `separator="slash"`, shown when no separator is slotted.
|
|
44733
45263
|
*
|
|
44734
45264
|
* ## CSS States
|
|
44735
45265
|
*
|
|
@@ -44793,6 +45323,18 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
44793
45323
|
* - `max-items`/`maxItems`: The most crumbs a trail drawn from `items` shows before it folds its middle
|
|
44794
45324
|
* into one, counting the first and the last. Unset, it never folds. At least
|
|
44795
45325
|
* 2, so the first crumb and the current page always show.
|
|
45326
|
+
* - `separator`: The mark between one crumb and the next, for the whole trail. Unset is a
|
|
45327
|
+
* chevron; `slash` is a slash, as a path or a repository and its branch is
|
|
45328
|
+
* written.
|
|
45329
|
+
*
|
|
45330
|
+
* **On the trail rather than on each crumb**, because the marks are one
|
|
45331
|
+
* decision: a trail whose separators differ from crumb to crumb is a
|
|
45332
|
+
* mistake, and a trail drawn from `items` has no crumb of yours to set it
|
|
45333
|
+
* on. A crumb's own `separator` slot still replaces its mark, for the rare
|
|
45334
|
+
* crumb that needs something else.
|
|
45335
|
+
*
|
|
45336
|
+
* Optional and reflected, per the rule that a reflected property takes no
|
|
45337
|
+
* default, so a stylesheet can select on it.
|
|
44796
45338
|
* - `items`: The trail as data, drawn as crumbs before any you slot. The last item is the
|
|
44797
45339
|
* current page.
|
|
44798
45340
|
*
|
|
@@ -44836,7 +45378,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
44836
45378
|
* - `crumb-fold-separator`: The chevron before that button.
|
|
44837
45379
|
* - `crumb-link`: The link, or the current page's words, of a crumb drawn from `items`.
|
|
44838
45380
|
* - `crumb-separator`: The separator before a crumb drawn from `items`.
|
|
44839
|
-
* - `crumb-separator-mark`: The chevron before a crumb drawn from `items`.
|
|
45381
|
+
* - `crumb-separator-mark`: The chevron, or the slash under `separator="slash"`, before a crumb drawn from `items`.
|
|
44840
45382
|
* - `expand`: The button in the folded crumb that shows the whole trail.
|
|
44841
45383
|
* - `list`: The ordered list.
|
|
44842
45384
|
*
|
|
@@ -45039,6 +45581,10 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
45039
45581
|
* Set `pending` while the action a press started is still running. The button
|
|
45040
45582
|
* keeps focus and refuses presses, and a reader on it hears `pending-label`.
|
|
45041
45583
|
*
|
|
45584
|
+
* Set `focusable-when-disabled` on a disabled button whose reason a Tooltip
|
|
45585
|
+
* gives. It stays in the tab order and takes hover, so the tooltip opens, and
|
|
45586
|
+
* it refuses every press.
|
|
45587
|
+
*
|
|
45042
45588
|
* Every press that acts sends `helix-press` with what pressed it in
|
|
45043
45589
|
* `detail.pointerType`: `mouse`, `pen`, `touch`, `keyboard`, or `virtual` for
|
|
45044
45590
|
* a screen reader's press or a script's `click()`, as React Aria's `onPress`
|
|
@@ -45068,6 +45614,20 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
45068
45614
|
* name to derive one rather than dash-casing it, and what a consumer writes
|
|
45069
45615
|
* is the platform's `commandfor`.
|
|
45070
45616
|
* - `commandfor`/`commandFor`: The id of the element the command is sent to.
|
|
45617
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
45618
|
+
* can say why it is disabled.
|
|
45619
|
+
*
|
|
45620
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
45621
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
45622
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
45623
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
45624
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
45625
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
45626
|
+
* The styled button keeps the disabled look.
|
|
45627
|
+
*
|
|
45628
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
45629
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
45630
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
45071
45631
|
* - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
|
|
45072
45632
|
*
|
|
45073
45633
|
* **The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -46203,6 +46763,16 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46203
46763
|
* - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
|
|
46204
46764
|
* - `pan-up-text`: The box `pan-up`'s glyph sits in.
|
|
46205
46765
|
* - `region`: The named region the board is drawn in.
|
|
46766
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
46767
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
46768
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
46769
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
46770
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
46771
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
46772
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
46773
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
46774
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
46775
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
46206
46776
|
* - `viewport`: The box the board is drawn inside.
|
|
46207
46777
|
* - `zoom-in`: The button that zooms in.
|
|
46208
46778
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -46656,8 +47226,8 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46656
47226
|
|
|
46657
47227
|
/**
|
|
46658
47228
|
* The composer is a separate element so you can replace it. If you need
|
|
46659
|
-
*
|
|
46660
|
-
*
|
|
47229
|
+
* slash commands or a layout of your own, replace the composer and keep the
|
|
47230
|
+
* transcript.
|
|
46661
47231
|
*
|
|
46662
47232
|
* By default, Enter sends and Shift+Enter starts a new line, the convention in
|
|
46663
47233
|
* messaging apps. Document editors mostly use the opposite, so `submit-on`
|
|
@@ -46697,10 +47267,41 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46697
47267
|
* `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
|
|
46698
47268
|
* side.
|
|
46699
47269
|
*
|
|
47270
|
+
* **`busy` says a reply is on its way**, and turns the send button into a
|
|
47271
|
+
* stop button, named by `stop-label`, that sends `helix-stop`. The field
|
|
47272
|
+
* stays open so the reader can write the next turn, and Enter does not send
|
|
47273
|
+
* it until `busy` is cleared. With `queue`, Enter sends while `busy` too, for
|
|
47274
|
+
* a page that holds a turn until the reply ends or hands it to the reply
|
|
47275
|
+
* under way; the button stays the stop button.
|
|
47276
|
+
*
|
|
47277
|
+
* **The `idle` slot takes the send button's place while there is nothing to
|
|
47278
|
+
* send**: the field is empty, `attached` is not set, and no reply is on its
|
|
47279
|
+
* way. Put the action an empty draft offers there, such as a button that
|
|
47280
|
+
* starts a voice conversation. The send button comes back as soon as there
|
|
47281
|
+
* is a draft. Where focus was on the one that goes, it moves to the one that
|
|
47282
|
+
* comes, so a keyboard reader stays in the same place.
|
|
47283
|
+
*
|
|
47284
|
+
* **What the draft carries goes in `attachments`**, inside the box and above
|
|
47285
|
+
* the field, such as thumbnails of attached images and cards for attached
|
|
47286
|
+
* files. The region takes no room while nothing is in it. A press on its
|
|
47287
|
+
* empty space keeps the reader in the field, and a press on a control in it,
|
|
47288
|
+
* such as a button that removes an attachment, goes to that control. Set
|
|
47289
|
+
* `attached` as well, so the send button shows for a draft with no text.
|
|
47290
|
+
*
|
|
46700
47291
|
* ## Attributes & Properties
|
|
46701
47292
|
*
|
|
46702
47293
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
46703
47294
|
*
|
|
47295
|
+
* - `attached`: Whether the draft holds something besides its text, such as an attached
|
|
47296
|
+
* file. The draft then counts as one though the field is empty, so the
|
|
47297
|
+
* send button shows in place of the `idle` slot.
|
|
47298
|
+
* - `busy`: Whether a reply is on its way. While set, the send button is a stop
|
|
47299
|
+
* button that sends `helix-stop`, and the draft does not send.
|
|
47300
|
+
*
|
|
47301
|
+
* **The same button rather than one beside it**, because sending and
|
|
47302
|
+
* stopping are never both possible: while a reply is on its way there is
|
|
47303
|
+
* nothing to send to, and the place the reader's eye goes to act is the
|
|
47304
|
+
* place that can act. The field stays open for the next turn.
|
|
46704
47305
|
* - `feedback`: A message about the draft, shown under the field. While set, the composer
|
|
46705
47306
|
* is invalid, does not send, and does not submit, as a field's `feedback`
|
|
46706
47307
|
* does, and the message is announced as it appears.
|
|
@@ -46709,12 +47310,28 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46709
47310
|
* - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
|
|
46710
47311
|
* the field, as on a `<textarea>`.
|
|
46711
47312
|
* - `placeholder`: Placeholder text shown in an empty field.
|
|
47313
|
+
* - `queue`: Whether Enter sends while `busy`, for a page that queues the turn or
|
|
47314
|
+
* hands it to the reply under way.
|
|
47315
|
+
*
|
|
47316
|
+
* Off by default, because a page that does neither would drop the turn: it
|
|
47317
|
+
* has nowhere to put a message while a reply is coming. The button stays
|
|
47318
|
+
* the stop button either way, since stopping is still the one thing it
|
|
47319
|
+
* should do while a reply is on its way.
|
|
46712
47320
|
* - `required`: Whether the form needs a draft to submit. An empty draft never sends,
|
|
46713
47321
|
* required or not.
|
|
46714
47322
|
* - `rows`: How many rows the field opens at.
|
|
46715
47323
|
*
|
|
46716
47324
|
* It grows from there.
|
|
47325
|
+
* - `send-disabled`/`sendDisabled`: Whether the draft waits to be sent, such as while an attachment is still
|
|
47326
|
+
* read. The send button is unavailable and Enter does not send, while the
|
|
47327
|
+
* field stays open. The stop button shown while `busy` still stops.
|
|
46717
47328
|
* - `send-label`/`sendLabel`: Label for the send button.
|
|
47329
|
+
* - `send-reason`/`sendReason`: Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
47330
|
+
* the send button while `send-disabled` is set. The button then stays in
|
|
47331
|
+
* the tab order and takes the pointer, with `aria-disabled` in place of
|
|
47332
|
+
* `disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
47333
|
+
* Button's `focusable-when-disabled` does. A press still sends nothing.
|
|
47334
|
+
* - `stop-label`/`stopLabel`: Label for the stop button shown while `busy`.
|
|
46718
47335
|
* - `submit-on`/`submitOn`: What sends the turn: `enter` for the Enter key, or `button` for the send
|
|
46719
47336
|
* button only.
|
|
46720
47337
|
*
|
|
@@ -46759,6 +47376,22 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46759
47376
|
* imperatively later, and nothing is hydrating by then.
|
|
46760
47377
|
*
|
|
46761
47378
|
* Here rather than on each control.
|
|
47379
|
+
* - `placeholders`: Examples the empty field shows in turn, in place of `placeholder`, such
|
|
47380
|
+
* as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
|
|
47381
|
+
* one shows longer, up to 10 seconds.
|
|
47382
|
+
*
|
|
47383
|
+
* **Each is the field's placeholder in its turn**, so a screen reader that
|
|
47384
|
+
* reaches the field hears the one showing. The swap runs through
|
|
47385
|
+
* `:state(example-leaving)`, as one example leaves, and
|
|
47386
|
+
* `:state(example-entering)`, as the next arrives.
|
|
47387
|
+
*
|
|
47388
|
+
* **They move only while nobody is about to write, and while the reader
|
|
47389
|
+
* can see them.** An empty field without focus moves on. Focus or text
|
|
47390
|
+
* holds the example showing, and an example already leaving finishes its
|
|
47391
|
+
* turn. A composer scrolled out of view holds its example, and the example
|
|
47392
|
+
* gets its full time again when the composer comes back. Where the reader
|
|
47393
|
+
* asked for less motion, or the page paused its motion, the first example
|
|
47394
|
+
* stays. (property only)
|
|
46762
47395
|
* - `typing`: Whether the user is writing: true from their first keystroke until they
|
|
46763
47396
|
* send, clear the field, or pause for `typing-timeout` milliseconds. (property only) (readonly)
|
|
46764
47397
|
* - `speechEngine`: The engine this field listens through, in place of the one
|
|
@@ -46797,6 +47430,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46797
47430
|
* - `helix-before-listen`: The dictation button was pressed. Cancelable: cancel it to keep the composer from listening.
|
|
46798
47431
|
* - `helix-listen`: Dictation settled on a phrase and put it in the draft, after the draft's own `input`.
|
|
46799
47432
|
* - `helix-send`: Fired when the user sends their turn, and cancelable.
|
|
47433
|
+
* - `helix-stop`: Fired when the user presses the stop button, shown in place of the send button while `busy` is set.
|
|
46800
47434
|
* - `helix-typing`: The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
|
|
46801
47435
|
* - `input`: The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
|
|
46802
47436
|
*
|
|
@@ -46804,7 +47438,9 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46804
47438
|
*
|
|
46805
47439
|
* Areas where markup can be added to the component.
|
|
46806
47440
|
*
|
|
47441
|
+
* - `attachments`: What the draft carries, such as images or files, inside the box and above the field.
|
|
46807
47442
|
* - `end`: Content under the field, beside the send button.
|
|
47443
|
+
* - `idle`: A control shown in place of the send button while the draft is empty and no reply is on its way, such as a button that starts a voice conversation.
|
|
46808
47444
|
* - `start`: Content under the field at the leading edge, such as an attachment button or a model picker.
|
|
46809
47445
|
*
|
|
46810
47446
|
* ## Methods
|
|
@@ -46870,12 +47506,24 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46870
47506
|
*
|
|
46871
47507
|
* Custom selectors for styling elements within the component.
|
|
46872
47508
|
*
|
|
47509
|
+
* - `attachments`: The box around the `attachments` slot, above the field. It is hidden while the slot is empty.
|
|
46873
47510
|
* - `composer`: The whole composer.
|
|
46874
47511
|
* - `end`: The box around the `end` slot.
|
|
46875
47512
|
* - `feedback`: The `feedback` message, under the field while it is set.
|
|
46876
47513
|
* - `field`: The text field.
|
|
46877
|
-
* - `
|
|
46878
|
-
* - `
|
|
47514
|
+
* - `idle`: The box around the `idle` slot, shown in the send button's place while the draft is empty.
|
|
47515
|
+
* - `mark`: The icon inside the send button, a return key, or a square while `busy`.
|
|
47516
|
+
* - `reason-arrow`: The arrow of the bubble that says `send-reason`, forwarded from `Tooltip`.
|
|
47517
|
+
* - `reason-arrow-bottom`: The arrow while the bubble is below the send button, on the bubble's top edge. Set together with `reason-arrow`.
|
|
47518
|
+
* - `reason-arrow-left`: The arrow while the bubble is left of the send button, on the bubble's right edge. Set together with `reason-arrow`.
|
|
47519
|
+
* - `reason-arrow-right`: The arrow while the bubble is right of the send button, on the bubble's left edge. Set together with `reason-arrow`.
|
|
47520
|
+
* - `reason-arrow-top`: The arrow while the bubble is above the send button, on the bubble's bottom edge. Set together with `reason-arrow`.
|
|
47521
|
+
* - `reason-surface`: The bubble that says `send-reason` over the send button, forwarded from `Tooltip`.
|
|
47522
|
+
* - `reason-surface-bottom`: The bubble while it is below the send button. Set together with `reason-surface`.
|
|
47523
|
+
* - `reason-surface-left`: The bubble while it is left of the send button. Set together with `reason-surface`.
|
|
47524
|
+
* - `reason-surface-right`: The bubble while it is right of the send button. Set together with `reason-surface`.
|
|
47525
|
+
* - `reason-surface-top`: The bubble while it is above the send button. Set together with `reason-surface`.
|
|
47526
|
+
* - `send`: The send button, which is the stop button while `busy`.
|
|
46879
47527
|
* - `start`: The box around the `start` slot.
|
|
46880
47528
|
* - `tools`: The row under the field.
|
|
46881
47529
|
* - `voice`: The dictation button, under `voice`, before the send button.
|
|
@@ -46886,6 +47534,8 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46886
47534
|
*
|
|
46887
47535
|
* These can be used to apply styling when a component is in a given state.
|
|
46888
47536
|
*
|
|
47537
|
+
* - `example-entering`: The example in the empty field has just replaced the one before it, for an entrance. It holds for 350 milliseconds. See `placeholders`.
|
|
47538
|
+
* - `example-leaving`: The example in the empty field is giving way to the next one, for an exit. It holds for 250 milliseconds, and the next example becomes the placeholder 100 milliseconds in, so the two can cross. See `placeholders`.
|
|
46889
47539
|
* - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
|
|
46890
47540
|
* - `listening`: While the composer listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
|
|
46891
47541
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -46912,6 +47562,11 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46912
47562
|
* a page in another language sets them once there. The time moves on by
|
|
46913
47563
|
* itself, so "now" becomes "1 minute ago" while the page is open.
|
|
46914
47564
|
*
|
|
47565
|
+
* **What a turn carries goes in `attachments`**, above the bubble rather
|
|
47566
|
+
* in it: a picture inside a tinted bubble is framed twice, and one sent with
|
|
47567
|
+
* no words is an empty bubble around it. It sits against the same edge as the
|
|
47568
|
+
* turn, and the words keep their bubble under it.
|
|
47569
|
+
*
|
|
46915
47570
|
* **An agent's work goes in `work`, and its answer in the content.** The work,
|
|
46916
47571
|
* its thinking, the commands it ran and what they printed, is a record read
|
|
46917
47572
|
* the way a log is, so a `Log` with `separation="plain"` and `quiet` sits there
|
|
@@ -46983,6 +47638,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46983
47638
|
*
|
|
46984
47639
|
* - `(default)`: The turn's content.
|
|
46985
47640
|
* - `actions`: Controls for the turn, such as copy, retry, or react.
|
|
47641
|
+
* - `attachments`: What the turn carries, such as images or files, above its content and outside the bubble, against the author's edge.
|
|
46986
47642
|
* - `avatar`: The author's avatar.
|
|
46987
47643
|
* - `indicator`: The indicator shown before the first token arrives. Defaults to the typing indicator.
|
|
46988
47644
|
* - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
|
|
@@ -46993,6 +47649,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
46993
47649
|
* Custom selectors for styling elements within the component.
|
|
46994
47650
|
*
|
|
46995
47651
|
* - `actions`: The controls on the turn, beside its time.
|
|
47652
|
+
* - `attachments`: The box around the `attachments` slot, above the content and outside the bubble.
|
|
46996
47653
|
* - `avatar`: The box around the `avatar` slot.
|
|
46997
47654
|
* - `body`: The content and the line under it.
|
|
46998
47655
|
* - `content`: Your own markup.
|
|
@@ -47254,6 +47911,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
47254
47911
|
* - `log`: The transcript, which scrolls. On this tier, it needs only a block size.
|
|
47255
47912
|
* - `message`: The message drawn for a turn from `turns`, forwarded whole.
|
|
47256
47913
|
* - `message-actions`: The controls on a turn from `turns`, beside its time.
|
|
47914
|
+
* - `message-attachments`: The attachments above the bubble of a turn from `turns`.
|
|
47257
47915
|
* - `message-avatar`: The avatar box of a turn from `turns`.
|
|
47258
47916
|
* - `message-avatar-mine`: The avatar box of a turn from `turns` by `me`.
|
|
47259
47917
|
* - `message-body`: The content of a turn from `turns`, and the line under it.
|
|
@@ -50425,6 +51083,20 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
50425
51083
|
* It replaces `Button.value`, the submit value: a copy button never submits,
|
|
50426
51084
|
* whatever its `type`. Declared here so its own page says what it holds.
|
|
50427
51085
|
* - `aria-label`/`undefined`: undefined
|
|
51086
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
51087
|
+
* can say why it is disabled.
|
|
51088
|
+
*
|
|
51089
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
51090
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
51091
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
51092
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
51093
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
51094
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
51095
|
+
* The styled button keeps the disabled look.
|
|
51096
|
+
*
|
|
51097
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
51098
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
51099
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
50428
51100
|
* - `pending`: Whether the action the button started is still running.
|
|
50429
51101
|
*
|
|
50430
51102
|
* A pending button keeps focus and stays in the tab order, and refuses every
|
|
@@ -52504,6 +53176,16 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
52504
53176
|
* - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
|
|
52505
53177
|
* - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
|
|
52506
53178
|
* - `screenshot-text`: The box the screenshot button's icon sits in.
|
|
53179
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
53180
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
53181
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
53182
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
53183
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
53184
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
53185
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
53186
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
53187
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
53188
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
52507
53189
|
* - `touch`: A ring where a touch is or was.
|
|
52508
53190
|
* - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
|
|
52509
53191
|
* - `volume-down`: The Volume down button.
|
|
@@ -55675,6 +56357,16 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
55675
56357
|
* - `settling`: What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
|
|
55676
56358
|
* - `stage`: The drawing and its controls.
|
|
55677
56359
|
* - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
|
|
56360
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
56361
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
56362
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
56363
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
56364
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
56365
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
56366
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
56367
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
56368
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
56369
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
55678
56370
|
* - `viewport`: The box the renderer draws in.
|
|
55679
56371
|
* - `zoom-in`: The zoom in button.
|
|
55680
56372
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -56177,6 +56869,20 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
56177
56869
|
* name to derive one rather than dash-casing it, and what a consumer writes
|
|
56178
56870
|
* is the platform's `commandfor`.
|
|
56179
56871
|
* - `commandfor`/`commandFor`: The id of the element the command is sent to.
|
|
56872
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
56873
|
+
* can say why it is disabled.
|
|
56874
|
+
*
|
|
56875
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
56876
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
56877
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
56878
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
56879
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
56880
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
56881
|
+
* The styled button keeps the disabled look.
|
|
56882
|
+
*
|
|
56883
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
56884
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
56885
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
56180
56886
|
* - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
|
|
56181
56887
|
*
|
|
56182
56888
|
* **The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -56753,6 +57459,9 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
56753
57459
|
*
|
|
56754
57460
|
* Empty leaves the attribute off, which is the browser's default. Set it to
|
|
56755
57461
|
* a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
|
|
57462
|
+
* - `autocorrect`: Whether the browser corrects words as the reader types, as the platform's
|
|
57463
|
+
* `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
|
|
57464
|
+
* prose, such as an address or a code, which corrections would change.
|
|
56756
57465
|
* - `clearable`: Whether the field shows a button that empties it.
|
|
56757
57466
|
*
|
|
56758
57467
|
* Shown only while there is something to clear, because a control that does
|
|
@@ -57415,7 +58124,8 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
57415
58124
|
*
|
|
57416
58125
|
* Set `controls` for the viewer's own previous, next and close controls, named
|
|
57417
58126
|
* by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
|
|
57418
|
-
* replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots.
|
|
58127
|
+
* replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. A set
|
|
58128
|
+
* of one item has nothing to step to, so it draws no previous, next or counter. Without
|
|
57419
58129
|
* it, compose the chrome yourself in the `header` and `footer` slots, with
|
|
57420
58130
|
* buttons that send `--previous`, `--next` and `--close`.
|
|
57421
58131
|
*
|
|
@@ -59134,7 +59844,9 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
59134
59844
|
*
|
|
59135
59845
|
* These can be used to apply styling when a component is in a given state.
|
|
59136
59846
|
*
|
|
59847
|
+
* - `empty`: The group holds nothing to show, so opening it shows nothing.
|
|
59137
59848
|
* - `open`: The group shows its lines.
|
|
59849
|
+
* - `steps`: The group holds steps of its own, which a stylesheet draws as a tree.
|
|
59138
59850
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
59139
59851
|
*/
|
|
59140
59852
|
"helix-headless-log-group": Partial<
|
|
@@ -59322,7 +60034,9 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
59322
60034
|
* stream ends.
|
|
59323
60035
|
* - `done-label`/`doneLabel`: What a screen reader hears when the run is over.
|
|
59324
60036
|
* - `dropped-label`/`droppedLabel`: What the line above the log says once `limit` has let lines go. `{count}` is how many.
|
|
59325
|
-
* - `empty-text`/`emptyText`: The text shown and announced when the log has no lines.
|
|
60037
|
+
* - `empty-text`/`emptyText`: The text shown and announced when the log has no lines and no steps. A
|
|
60038
|
+
* step with nothing in it yet, such as one still `pending`, is its heading
|
|
60039
|
+
* alone, so a log holding one says nothing.
|
|
59326
60040
|
* - `error-label`/`errorLabel`: What a screen reader hears when lines at `error` arrive. `{count}` is how
|
|
59327
60041
|
* many arrived together and `{text}` is the first of them.
|
|
59328
60042
|
* - `fallback-label`/`fallbackLabel`: The log's name, read by screen readers, where `label` is empty.
|
|
@@ -59480,7 +60194,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
59480
60194
|
* - `after`: The space the rows below the drawn ones would take. Only for lines drawn from data.
|
|
59481
60195
|
* - `before`: The space the rows above the drawn ones would take. Only for lines drawn from data.
|
|
59482
60196
|
* - `dropped`: The line above the log that says how many earlier lines `limit` let go.
|
|
59483
|
-
* - `empty`: Shown when the log has no lines.
|
|
60197
|
+
* - `empty`: Shown when the log has no lines and no steps.
|
|
59484
60198
|
* - `group-content`: Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
|
|
59485
60199
|
* - `group-duration`: How long a step drawn from `groups` took.
|
|
59486
60200
|
* - `group-heading`: The heading of a step drawn from `groups`.
|
|
@@ -59526,7 +60240,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
59526
60240
|
* These can be used to apply styling when a component is in a given state.
|
|
59527
60241
|
*
|
|
59528
60242
|
* - `done`: The run is over: `done` is set, or `source` ended.
|
|
59529
|
-
* - `empty`: The log has no lines.
|
|
60243
|
+
* - `empty`: The log has no lines and no steps.
|
|
59530
60244
|
* - `filtered`: `query` or `level` is set, so only the lines they keep are shown.
|
|
59531
60245
|
* - `pinned`: The log follows its newest line.
|
|
59532
60246
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -60476,6 +61190,16 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
60476
61190
|
* - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
|
|
60477
61191
|
* - `tilt-spinner`: The ring `tilt` turns while it is pending.
|
|
60478
61192
|
* - `tilt-text`: The box `tilt`'s glyph sits in.
|
|
61193
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
61194
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
61195
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
61196
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
61197
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
61198
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
61199
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
61200
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
61201
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
61202
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
60479
61203
|
* - `viewport`: The box the map is drawn in.
|
|
60480
61204
|
* - `zoom-in`: The button that zooms in.
|
|
60481
61205
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -61520,6 +62244,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
61520
62244
|
*
|
|
61521
62245
|
* These can be used to apply styling when a component is in a given state.
|
|
61522
62246
|
*
|
|
62247
|
+
* - `start`: A row in the section has content before its label, so every row in it keeps the leading column. The menu decides it for each section, apart from the rows outside one.
|
|
61523
62248
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
61524
62249
|
*/
|
|
61525
62250
|
"helix-headless-menu-section": Partial<
|
|
@@ -61529,7 +62254,9 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
61529
62254
|
>;
|
|
61530
62255
|
|
|
61531
62256
|
/**
|
|
61532
|
-
* A meter shows a level within a range
|
|
62257
|
+
* A meter shows a level within a range, or how the level divides: write
|
|
62258
|
+
* `Meter.Segment` inside it for each part of the whole, and the meter measures
|
|
62259
|
+
* their sum. Use `Progress` to show how far along a
|
|
61533
62260
|
* task is. A progress bar starts empty and ends full, and full is always the
|
|
61534
62261
|
* good end. For a meter, which end is good depends on what is measured. There
|
|
61535
62262
|
* is no `indeterminate`, because a meter always has a value.
|
|
@@ -61689,6 +62416,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
61689
62416
|
*
|
|
61690
62417
|
* Areas where markup can be added to the component.
|
|
61691
62418
|
*
|
|
62419
|
+
* - `(default)`: `Meter.Segment` elements, one for each share of the whole, drawn in the bar.
|
|
61692
62420
|
* - `label`: A visible label. Its words name the meter in place of `label`.
|
|
61693
62421
|
*
|
|
61694
62422
|
* ## CSS Custom Properties
|
|
@@ -61698,6 +62426,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
61698
62426
|
* - `--meter-along`: Where a bound sits on the arc, as a length along it.
|
|
61699
62427
|
* - `--meter-at`: Where a bound sits on a linear track, as a percentage.
|
|
61700
62428
|
* - `--meter-fraction`: The value as a fraction of the range, 0 to 1.
|
|
62429
|
+
* - `--meter-span`: How much the range holds, `max` less `min`, which a segment divides its own value by to find its width.
|
|
61701
62430
|
* - `--meter-sweep`: How much of the circle the arc covers, as a path length.
|
|
61702
62431
|
*
|
|
61703
62432
|
* ## CSS Parts
|
|
@@ -61731,6 +62460,89 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
61731
62460
|
HelixHeadlessMeterProps & BaseProps<HelixHeadlessMeter, F> & BaseEvents<HelixHeadlessMeter>
|
|
61732
62461
|
>;
|
|
61733
62462
|
|
|
62463
|
+
/**
|
|
62464
|
+
* A segment says how much of the range one part of the whole takes, such as the
|
|
62465
|
+
* tokens a model's context holds for its tools, against the tokens it holds for
|
|
62466
|
+
* the conversation. Write one for each part inside a `Meter`.
|
|
62467
|
+
*
|
|
62468
|
+
* **The meter's reading is the sum of its segments.** `value` on the meter is
|
|
62469
|
+
* ignored while it has any, so the two cannot disagree, and the bands, the ticks
|
|
62470
|
+
* and the reading answer to the total. A segment is drawn as wide as its `value`
|
|
62471
|
+
* is of the meter's range, so segments that add up to less than the range leave
|
|
62472
|
+
* the rest of the track empty, and ones that add up to more are cut at the end.
|
|
62473
|
+
*
|
|
62474
|
+
* **A meter's children are presentational to a screen reader**, so a segment
|
|
62475
|
+
* reaches no one that cannot see the bar. Say the breakdown in text beside it,
|
|
62476
|
+
* such as a list with the name and the amount of each part, which is also where a
|
|
62477
|
+
* reader finds the exact figures.
|
|
62478
|
+
*
|
|
62479
|
+
* A segment draws only in the bar. A meter in `ring` or `arc` draws its total.
|
|
62480
|
+
*
|
|
62481
|
+
* ## Attributes & Properties
|
|
62482
|
+
*
|
|
62483
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
62484
|
+
*
|
|
62485
|
+
* - `label`: What the segment is, such as "Tools", which names the slice when a pointer
|
|
62486
|
+
* rests on it.
|
|
62487
|
+
*
|
|
62488
|
+
* Not announced: see the note on a meter's children above.
|
|
62489
|
+
* - `tone`: What the segment means, as it does on a callout. Takes the tone's color in
|
|
62490
|
+
* place of the next color in the series.
|
|
62491
|
+
* - `value`: How much of the meter's range the segment takes, in the units of the meter's
|
|
62492
|
+
* `min` and `max`.
|
|
62493
|
+
*
|
|
62494
|
+
* A value that is not a number, or is below zero, draws nothing.
|
|
62495
|
+
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
62496
|
+
*
|
|
62497
|
+
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
62498
|
+
* Image, Splitter and both color controls, none of them about transitions. A
|
|
62499
|
+
* base class takes the name every subclass then cannot use.
|
|
62500
|
+
*
|
|
62501
|
+
* **The state it reports cannot be watched, which is why this exists.** A
|
|
62502
|
+
* custom state is deliberately not in the DOM, so there is no
|
|
62503
|
+
* `MutationObserver` equivalent for `ElementInternals.states`. Await this
|
|
62504
|
+
* instead.
|
|
62505
|
+
*
|
|
62506
|
+
* Separate from `updateComplete`, which resolves in the microtask checkpoint
|
|
62507
|
+
* the suppression is still active in. That is the distinction `readyToMove`
|
|
62508
|
+
* in `@fusion.dev/helix-testing` is written around.
|
|
62509
|
+
*
|
|
62510
|
+
* It never resolves where `requestAnimationFrame` never fires, which is a
|
|
62511
|
+
* server, a hidden tab, and happy-dom. Callers that must not hang there race
|
|
62512
|
+
* it against a timeout, as the happy-dom harness's `readyToMove` does. The
|
|
62513
|
+
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
62514
|
+
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
62515
|
+
*
|
|
62516
|
+
* ## Slots
|
|
62517
|
+
*
|
|
62518
|
+
* Areas where markup can be added to the component.
|
|
62519
|
+
*
|
|
62520
|
+
* - `(default)`: Nothing. A segment draws its share and has no content.
|
|
62521
|
+
*
|
|
62522
|
+
* ## CSS Custom Properties
|
|
62523
|
+
*
|
|
62524
|
+
* CSS variables available for styling the component.
|
|
62525
|
+
*
|
|
62526
|
+
* - `--meter-segment-value`: How much of the range the segment takes, in the meter's own units.
|
|
62527
|
+
*
|
|
62528
|
+
* ## CSS Parts
|
|
62529
|
+
*
|
|
62530
|
+
* Custom selectors for styling elements within the component.
|
|
62531
|
+
*
|
|
62532
|
+
* - `fill`: The slice of the bar the segment takes.
|
|
62533
|
+
*
|
|
62534
|
+
* ## CSS States
|
|
62535
|
+
*
|
|
62536
|
+
* These can be used to apply styling when a component is in a given state.
|
|
62537
|
+
*
|
|
62538
|
+
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
62539
|
+
*/
|
|
62540
|
+
"helix-headless-meter-segment": Partial<
|
|
62541
|
+
HelixHeadlessMeterSegmentProps &
|
|
62542
|
+
BaseProps<HelixHeadlessMeterSegment, F> &
|
|
62543
|
+
BaseEvents<HelixHeadlessMeterSegment>
|
|
62544
|
+
>;
|
|
62545
|
+
|
|
61734
62546
|
/**
|
|
61735
62547
|
* WCAG 2.2.2 asks that motion which starts by itself and runs longer than
|
|
61736
62548
|
* five seconds can be paused. **This is one control for the whole page**: a
|
|
@@ -66055,6 +66867,11 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
66055
66867
|
* scrollbar, the browser's or the component's, and clips what is past it.
|
|
66056
66868
|
* Leave it unset to scroll both ways.
|
|
66057
66869
|
*
|
|
66870
|
+
* **A mask on the viewport also masks the browser's scrollbar.** While a
|
|
66871
|
+
* scrollbar takes room beside the content, the viewport carries its size in
|
|
66872
|
+
* `--scroll-area-gutter-inline-end` or `--scroll-area-gutter-block-end`, so a
|
|
66873
|
+
* mask can leave that room opaque. The styled tier's fades use them.
|
|
66874
|
+
*
|
|
66058
66875
|
* The viewport's `scroll` and `scrollend` are sent again from the host, which
|
|
66059
66876
|
* is the element you hold. A thumb dragged across the content sends one
|
|
66060
66877
|
* `scrollend`, once it is let go. In React, bind them with `onScroll` and
|
|
@@ -66134,6 +66951,8 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
66134
66951
|
*
|
|
66135
66952
|
* CSS variables available for styling the component.
|
|
66136
66953
|
*
|
|
66954
|
+
* - `--scroll-area-gutter-block-end`: The room the browser's horizontal scrollbar takes at the block end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
|
|
66955
|
+
* - `--scroll-area-gutter-inline-end`: The room the browser's vertical scrollbar takes at the inline end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
|
|
66137
66956
|
* - `--scroll-area-scroll-fraction`: How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page.
|
|
66138
66957
|
* - `--scroll-area-thumb-fraction`: The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part.
|
|
66139
66958
|
*
|
|
@@ -66142,7 +66961,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
66142
66961
|
* Custom selectors for styling elements within the component.
|
|
66143
66962
|
*
|
|
66144
66963
|
* - `corner`: The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
|
|
66145
|
-
* - `edges`: The layer
|
|
66964
|
+
* - `edges`: The layer over the viewport. The styled tier draws the focus ring on it, and the painted fades at the inline start and end.
|
|
66146
66965
|
* - `scrollbar`: Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
|
|
66147
66966
|
* - `scrollbar-horizontal`: The scrollbar along the inline axis, alongside `scrollbar`.
|
|
66148
66967
|
* - `scrollbar-vertical`: The scrollbar along the block axis, alongside `scrollbar`.
|
|
@@ -67405,6 +68224,11 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67405
68224
|
* depth, each as tall as its value from zero and colored by its series, so
|
|
67406
68225
|
* one series is a single row of bars and several make a block of them.
|
|
67407
68226
|
*
|
|
68227
|
+
* **A cell's `data-tone` colors its own bar and writes its value above it**,
|
|
68228
|
+
* such as `data-tone="primary"` on the one reading a chart is about, as on
|
|
68229
|
+
* `Bar Chart`. The value is the cell's own text. Without a tone, a bar takes
|
|
68230
|
+
* its series' color.
|
|
68231
|
+
*
|
|
67408
68232
|
* **The flat `Bar Chart` is read more exactly.** Measured, a reader judges
|
|
67409
68233
|
* a 3D bar's value less closely than a flat one's, and a bar can stand
|
|
67410
68234
|
* behind another. Use this one where the shape across two sets of names
|
|
@@ -67453,16 +68277,73 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67453
68277
|
*
|
|
67454
68278
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
67455
68279
|
*
|
|
67456
|
-
* - `
|
|
67457
|
-
*
|
|
68280
|
+
* - `grow`: Grows the bars up from the floor the first time the chart comes into
|
|
68281
|
+
* view with readings, each category a little after the one before it, so
|
|
68282
|
+
* the drawing arrives the way a page's own picture does. The growth is
|
|
68283
|
+
* fast at first, slows to rest, and never passes a bar's value.
|
|
68284
|
+
*
|
|
68285
|
+
* Under `prefers-reduced-motion`, or where the page has paused its motion
|
|
68286
|
+
* through `pauseMotion` or `Motion Toggle`, the bars stand at their height
|
|
68287
|
+
* from the start. A later table draws the bars it already had at their
|
|
68288
|
+
* height, and grows the bars it adds, each from the floor, so a reading that
|
|
68289
|
+
* arrives while the chart is in view arrives the same way.
|
|
68290
|
+
* - `grow-again`/`growAgain`: Grows the bars again each time the chart comes back into view after it
|
|
68291
|
+
* left it, as a pane does when it is opened again, where `grow` alone grows
|
|
68292
|
+
* them the first time only. Only a chart that grows takes it.
|
|
68293
|
+
*
|
|
68294
|
+
* While it is out of view the bars stand at the floor, so the first frame
|
|
68295
|
+
* after it returns is the start of the growth and never a flash at full
|
|
68296
|
+
* height.
|
|
68297
|
+
* - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
68298
|
+
* floor, so the readings stand alone and fill the plot, as a picture on a
|
|
68299
|
+
* product's own page does. The
|
|
67458
68300
|
* table, the summary, the tooltip, and the keys still carry every value,
|
|
67459
68301
|
* and a renderer draws no box either.
|
|
67460
68302
|
* - `open-label`/`openLabel`: What the readout says for a place with no value. `{category}` and
|
|
67461
68303
|
* `{series}` name the place.
|
|
67462
68304
|
* - `plot-label`/`plotLabel`: The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
|
|
68305
|
+
* - `stacked`: Stacks a category's series into one column, each block standing on the
|
|
68306
|
+
* ones before it, so the column is as tall as the category's total, as a
|
|
68307
|
+
* flat `Bar Chart` stacks them.
|
|
68308
|
+
*
|
|
68309
|
+
* Absent stands the series one behind another in depth. Stacked, every
|
|
68310
|
+
* series stands in the front row, so none hides another, and the parts of
|
|
68311
|
+
* one total read together. A negative reading hangs below zero on the
|
|
68312
|
+
* negatives before it. The scale fits the stacks.
|
|
67463
68313
|
* - `summary-label`/`summaryLabel`: The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
|
|
67464
68314
|
* are the number of bars, series, and categories, written in the locale,
|
|
67465
68315
|
* and `{low}` and `{high}` the lowest and the highest value.
|
|
68316
|
+
* - `variant`: How the bars stand.
|
|
68317
|
+
*
|
|
68318
|
+
* Unset, they stand on a grid of categories across and series in depth,
|
|
68319
|
+
* in a box the camera looks at from a corner, so the grid recedes at an
|
|
68320
|
+
* angle. `row` lays the categories in a straight line across the page and
|
|
68321
|
+
* turns each bar to the camera, showing its top and two sides, for one row
|
|
68322
|
+
* of readings in a small space such as a pane: turning the view turns each
|
|
68323
|
+
* bar where it stands, and the row stays level. It is the chart's own
|
|
68324
|
+
* drawing that lays the row: a renderer connected through
|
|
68325
|
+
* `@fusion.dev/helix-plot` stands the bars on the grid.
|
|
68326
|
+
*
|
|
68327
|
+
* `diagonal` is the same row climbing to the right as it recedes, each
|
|
68328
|
+
* place a step further back than the one before, as a row of days on a
|
|
68329
|
+
* product's page is drawn: the row rises one part in five across the page
|
|
68330
|
+
* from any turn, and its floor and names climb with it. A row whose bars
|
|
68331
|
+
* have a size climbs at most a quarter of the plot's height, so the bars
|
|
68332
|
+
* of a long row keep theirs.
|
|
68333
|
+
*
|
|
68334
|
+
* **A row draws its floor in place of a box**: each place as an outline a
|
|
68335
|
+
* little wider than its bar, and each category's name under it, as many
|
|
68336
|
+
* names as fit without touching. A name whose bar names a tone is written
|
|
68337
|
+
* first, in that tone. `no-box` leaves the floor and the names out.
|
|
68338
|
+
*
|
|
68339
|
+
* **A `column-gap` on the `fallback` part gives a row's bars one width**,
|
|
68340
|
+
* which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
|
|
68341
|
+
* stands as wide as each of twenty, the row is as long as its bars and
|
|
68342
|
+
* centered, the tallest bar stands as high as the plot has room for and
|
|
68343
|
+
* no taller than the row is long and a quarter again, so one bar stands
|
|
68344
|
+
* as a block, and `fits` says how many bars the plot holds, so a page
|
|
68345
|
+
* can give it the latest of a longer table. It is read when the plot's
|
|
68346
|
+
* size changes.
|
|
67466
68347
|
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
67467
68348
|
* and the fallback of the `empty` slot.
|
|
67468
68349
|
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
@@ -67523,6 +68404,11 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67523
68404
|
* column a series.** A renderer reads it. (property only) (readonly)
|
|
67524
68405
|
* - `active`: The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. (property only) (readonly)
|
|
67525
68406
|
* - `readings`: The number of places on the grid, which the keys walk. (property only) (readonly)
|
|
68407
|
+
* - `fits`: How many categories a `row` or a `diagonal` has room for across the
|
|
68408
|
+
* plot at its bar size, measured as it is read, or
|
|
68409
|
+
* `undefined` where there is no row, no bar size, or nothing drawn to
|
|
68410
|
+
* measure. A page with a longer table gives the chart its latest that
|
|
68411
|
+
* many rows, and says so. (property only) (readonly)
|
|
67526
68412
|
* - `sounding`: Whether the chart is playing as sound now. (property only) (readonly)
|
|
67527
68413
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
67528
68414
|
* table to point `for` at. `for` wins where both are set.
|
|
@@ -67654,7 +68540,14 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67654
68540
|
*
|
|
67655
68541
|
* CSS variables available for styling the component.
|
|
67656
68542
|
*
|
|
67657
|
-
* - `--spatial-bar-chart-shade
|
|
68543
|
+
* - `--spatial-bar-chart-shade -How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.`: undefined
|
|
68544
|
+
* - `--spatial-bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
|
|
68545
|
+
* - `--spatial-bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
|
|
68546
|
+
* - `--spatial-bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
|
|
68547
|
+
* - `--spatial-bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
|
|
68548
|
+
* - `--spatial-bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
|
|
68549
|
+
* - `--spatial-bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
|
|
68550
|
+
* - `--spatial-bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
|
|
67658
68551
|
*
|
|
67659
68552
|
* ## CSS Parts
|
|
67660
68553
|
*
|
|
@@ -67667,6 +68560,8 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67667
68560
|
* - `empty`: The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
|
|
67668
68561
|
* - `face`: One face of a bar the view shows, shaded by which way it faces.
|
|
67669
68562
|
* - `fallback`: The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
|
|
68563
|
+
* - `floor`: One place on the floor of a `row`, under a bar or where one would stand, drawn as its outline.
|
|
68564
|
+
* - `glow`: The outline of a bar whose cell names a tone, blurred by 8 CSS pixels and painted under the bar, with no fill until a stylesheet gives it one: a soft glow in the bar's tone.
|
|
67670
68565
|
* - `grid`: The box's edges and its grid, in the chart's own drawing.
|
|
67671
68566
|
* - `live`: The readout: a polite live region that says the bar the keys moved to. Hide it visually.
|
|
67672
68567
|
* - `loading`: The words while `loading` is set and there are no readings.
|
|
@@ -67678,7 +68573,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67678
68573
|
* - `summary`: The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
|
|
67679
68574
|
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
|
|
67680
68575
|
* - `table-pages`: Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.
|
|
67681
|
-
* - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
|
|
68576
|
+
* - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, or a category's name under its place in a `row`, in the chart's own drawing.
|
|
67682
68577
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
67683
68578
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
67684
68579
|
* - `tooltip-arrow-bottom`: The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
|
|
@@ -67695,6 +68590,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
67695
68590
|
* - `tooltip-surface-right`: The bubble while it is right of the reading. Set alongside `tooltip-surface`.
|
|
67696
68591
|
* - `tooltip-surface-top`: The bubble while it is above the reading. Set alongside `tooltip-surface`.
|
|
67697
68592
|
* - `tooltip-value`: A column's value inside the tooltip.
|
|
68593
|
+
* - `value`: The value of a bar whose cell names a tone, written above it in the chart's own drawing.
|
|
67698
68594
|
*
|
|
67699
68595
|
* ## CSS States
|
|
67700
68596
|
*
|
|
@@ -71669,6 +72565,10 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
71669
72565
|
*
|
|
71670
72566
|
* A tab with `dismissible` can be closed: see `Tabs.Tab`.
|
|
71671
72567
|
*
|
|
72568
|
+
* **Panels are optional.** A set with none is a strip whose tabs stand for
|
|
72569
|
+
* something the page shows elsewhere: the keys, the selection, `active` and
|
|
72570
|
+
* `helix-activate` work the same, and no tab names a panel it controls.
|
|
72571
|
+
*
|
|
71672
72572
|
* The `indicator` part moves to the selected tab and carries its place and
|
|
71673
72573
|
* size, so a mark of your own can be drawn there: style the part, or slot an
|
|
71674
72574
|
* element into `indicator`, which sits inside the part and reads the same
|
|
@@ -71901,6 +72801,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
71901
72801
|
*
|
|
71902
72802
|
* - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
|
|
71903
72803
|
* - `dismiss-mark`: The glyph on that mark, where none is slotted.
|
|
72804
|
+
* - `label`: The slot the tab's label is in.
|
|
71904
72805
|
* - `tab`: The tab itself.
|
|
71905
72806
|
*
|
|
71906
72807
|
* ## CSS States
|
|
@@ -72131,7 +73032,7 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
72131
73032
|
*
|
|
72132
73033
|
* - `(default)`: The tag's label.
|
|
72133
73034
|
* - `dismiss-icon`: Replaces the glyph on the remove button.
|
|
72134
|
-
* - `start`: The category the label belongs to, shown before it in a heavier weight.
|
|
73035
|
+
* - `start`: The category the label belongs to, shown before it in a heavier weight, or an icon.
|
|
72135
73036
|
*
|
|
72136
73037
|
* ## Methods
|
|
72137
73038
|
*
|
|
@@ -72436,6 +73337,16 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
72436
73337
|
* - `restart-spinner`: The ring the Restart button turns while it is pending.
|
|
72437
73338
|
* - `restart-text`: The Restart button's label.
|
|
72438
73339
|
* - `status`: The line under the terminal that says the process exited, or that Tab moves focus.
|
|
73340
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
73341
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
73342
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
73343
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
73344
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
73345
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
73346
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
73347
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
73348
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
73349
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
72439
73350
|
* - `viewport`: The box the terminal is drawn in.
|
|
72440
73351
|
*
|
|
72441
73352
|
* ## CSS States
|
|
@@ -74755,7 +75666,10 @@ export type CustomElements<F extends Framework = "other"> = {
|
|
|
74755
75666
|
* The toolbar is one tab stop, and the arrow keys move between its controls, so
|
|
74756
75667
|
* three toolbars take three presses of Tab to pass. Any element the browser can
|
|
74757
75668
|
* focus counts as a control, including your own elements. A child that takes no
|
|
74758
|
-
* focus, such as a divider, is skipped. A menu is reached at its trigger.
|
|
75669
|
+
* focus, such as a divider, is skipped. A menu is reached at its trigger. A
|
|
75670
|
+
* disabled control is skipped too, except a Button with
|
|
75671
|
+
* `focusable-when-disabled`, which the arrows still reach so its tooltip can
|
|
75672
|
+
* say why it is disabled.
|
|
74759
75673
|
*
|
|
74760
75674
|
* A Divider in the toolbar is a separator across the toolbar's axis, as React
|
|
74761
75675
|
* Aria's is: vertical in a horizontal toolbar and horizontal in a vertical
|
|
@@ -79171,7 +80085,7 @@ export type CustomElementsSolidJs = {
|
|
|
79171
80085
|
*
|
|
79172
80086
|
* - `(default)`: The step's label. Without an `href`, you can slot your own anchor here. Give it `data-link="quiet"`, because a slotted anchor belongs to the outer tree and the crumb's styles cannot reach it.
|
|
79173
80087
|
* - `end`: Content after the label and outside the link, such as a switcher's menu trigger, a count, or a mark. It can hold a control, and it is not read as part of the link's accessible name.
|
|
79174
|
-
* - `separator`: Replaces the
|
|
80088
|
+
* - `separator`: Replaces the mark shown before this item, a chevron or the trail's `separator`.
|
|
79175
80089
|
* - `start`: Content before the label, such as an icon.
|
|
79176
80090
|
*
|
|
79177
80091
|
* ## CSS Parts
|
|
@@ -79182,7 +80096,7 @@ export type CustomElementsSolidJs = {
|
|
|
79182
80096
|
* - `fold-separator`: The chevron before that button.
|
|
79183
80097
|
* - `link`: The crumb itself, which is an `<a>` where `href` is set.
|
|
79184
80098
|
* - `separator`: The separator preceding the item.
|
|
79185
|
-
* - `separator-mark`: The chevron between crumbs, shown when no separator is slotted.
|
|
80099
|
+
* - `separator-mark`: The chevron between crumbs, or the slash under the trail's `separator="slash"`, shown when no separator is slotted.
|
|
79186
80100
|
*
|
|
79187
80101
|
* ## CSS States
|
|
79188
80102
|
*
|
|
@@ -79247,6 +80161,18 @@ export type CustomElementsSolidJs = {
|
|
|
79247
80161
|
* - `max-items`/`maxItems`: The most crumbs a trail drawn from `items` shows before it folds its middle
|
|
79248
80162
|
* into one, counting the first and the last. Unset, it never folds. At least
|
|
79249
80163
|
* 2, so the first crumb and the current page always show.
|
|
80164
|
+
* - `separator`: The mark between one crumb and the next, for the whole trail. Unset is a
|
|
80165
|
+
* chevron; `slash` is a slash, as a path or a repository and its branch is
|
|
80166
|
+
* written.
|
|
80167
|
+
*
|
|
80168
|
+
* **On the trail rather than on each crumb**, because the marks are one
|
|
80169
|
+
* decision: a trail whose separators differ from crumb to crumb is a
|
|
80170
|
+
* mistake, and a trail drawn from `items` has no crumb of yours to set it
|
|
80171
|
+
* on. A crumb's own `separator` slot still replaces its mark, for the rare
|
|
80172
|
+
* crumb that needs something else.
|
|
80173
|
+
*
|
|
80174
|
+
* Optional and reflected, per the rule that a reflected property takes no
|
|
80175
|
+
* default, so a stylesheet can select on it.
|
|
79250
80176
|
* - `items`: The trail as data, drawn as crumbs before any you slot. The last item is the
|
|
79251
80177
|
* current page.
|
|
79252
80178
|
*
|
|
@@ -79290,7 +80216,7 @@ export type CustomElementsSolidJs = {
|
|
|
79290
80216
|
* - `crumb-fold-separator`: The chevron before that button.
|
|
79291
80217
|
* - `crumb-link`: The link, or the current page's words, of a crumb drawn from `items`.
|
|
79292
80218
|
* - `crumb-separator`: The separator before a crumb drawn from `items`.
|
|
79293
|
-
* - `crumb-separator-mark`: The chevron before a crumb drawn from `items`.
|
|
80219
|
+
* - `crumb-separator-mark`: The chevron, or the slash under `separator="slash"`, before a crumb drawn from `items`.
|
|
79294
80220
|
* - `expand`: The button in the folded crumb that shows the whole trail.
|
|
79295
80221
|
* - `list`: The ordered list.
|
|
79296
80222
|
*
|
|
@@ -79495,6 +80421,10 @@ export type CustomElementsSolidJs = {
|
|
|
79495
80421
|
* Set `pending` while the action a press started is still running. The button
|
|
79496
80422
|
* keeps focus and refuses presses, and a reader on it hears `pending-label`.
|
|
79497
80423
|
*
|
|
80424
|
+
* Set `focusable-when-disabled` on a disabled button whose reason a Tooltip
|
|
80425
|
+
* gives. It stays in the tab order and takes hover, so the tooltip opens, and
|
|
80426
|
+
* it refuses every press.
|
|
80427
|
+
*
|
|
79498
80428
|
* Every press that acts sends `helix-press` with what pressed it in
|
|
79499
80429
|
* `detail.pointerType`: `mouse`, `pen`, `touch`, `keyboard`, or `virtual` for
|
|
79500
80430
|
* a screen reader's press or a script's `click()`, as React Aria's `onPress`
|
|
@@ -79524,6 +80454,20 @@ export type CustomElementsSolidJs = {
|
|
|
79524
80454
|
* name to derive one rather than dash-casing it, and what a consumer writes
|
|
79525
80455
|
* is the platform's `commandfor`.
|
|
79526
80456
|
* - `commandfor`/`commandFor`: The id of the element the command is sent to.
|
|
80457
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
80458
|
+
* can say why it is disabled.
|
|
80459
|
+
*
|
|
80460
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
80461
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
80462
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
80463
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
80464
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
80465
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
80466
|
+
* The styled button keeps the disabled look.
|
|
80467
|
+
*
|
|
80468
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
80469
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
80470
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
79527
80471
|
* - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
|
|
79528
80472
|
*
|
|
79529
80473
|
* **The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -80667,6 +81611,16 @@ export type CustomElementsSolidJs = {
|
|
|
80667
81611
|
* - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
|
|
80668
81612
|
* - `pan-up-text`: The box `pan-up`'s glyph sits in.
|
|
80669
81613
|
* - `region`: The named region the board is drawn in.
|
|
81614
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
81615
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
81616
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
81617
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
81618
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
81619
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
81620
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
81621
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
81622
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
81623
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
80670
81624
|
* - `viewport`: The box the board is drawn inside.
|
|
80671
81625
|
* - `zoom-in`: The button that zooms in.
|
|
80672
81626
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -81129,8 +82083,8 @@ export type CustomElementsSolidJs = {
|
|
|
81129
82083
|
|
|
81130
82084
|
/**
|
|
81131
82085
|
* The composer is a separate element so you can replace it. If you need
|
|
81132
|
-
*
|
|
81133
|
-
*
|
|
82086
|
+
* slash commands or a layout of your own, replace the composer and keep the
|
|
82087
|
+
* transcript.
|
|
81134
82088
|
*
|
|
81135
82089
|
* By default, Enter sends and Shift+Enter starts a new line, the convention in
|
|
81136
82090
|
* messaging apps. Document editors mostly use the opposite, so `submit-on`
|
|
@@ -81170,10 +82124,41 @@ export type CustomElementsSolidJs = {
|
|
|
81170
82124
|
* `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
|
|
81171
82125
|
* side.
|
|
81172
82126
|
*
|
|
82127
|
+
* **`busy` says a reply is on its way**, and turns the send button into a
|
|
82128
|
+
* stop button, named by `stop-label`, that sends `helix-stop`. The field
|
|
82129
|
+
* stays open so the reader can write the next turn, and Enter does not send
|
|
82130
|
+
* it until `busy` is cleared. With `queue`, Enter sends while `busy` too, for
|
|
82131
|
+
* a page that holds a turn until the reply ends or hands it to the reply
|
|
82132
|
+
* under way; the button stays the stop button.
|
|
82133
|
+
*
|
|
82134
|
+
* **The `idle` slot takes the send button's place while there is nothing to
|
|
82135
|
+
* send**: the field is empty, `attached` is not set, and no reply is on its
|
|
82136
|
+
* way. Put the action an empty draft offers there, such as a button that
|
|
82137
|
+
* starts a voice conversation. The send button comes back as soon as there
|
|
82138
|
+
* is a draft. Where focus was on the one that goes, it moves to the one that
|
|
82139
|
+
* comes, so a keyboard reader stays in the same place.
|
|
82140
|
+
*
|
|
82141
|
+
* **What the draft carries goes in `attachments`**, inside the box and above
|
|
82142
|
+
* the field, such as thumbnails of attached images and cards for attached
|
|
82143
|
+
* files. The region takes no room while nothing is in it. A press on its
|
|
82144
|
+
* empty space keeps the reader in the field, and a press on a control in it,
|
|
82145
|
+
* such as a button that removes an attachment, goes to that control. Set
|
|
82146
|
+
* `attached` as well, so the send button shows for a draft with no text.
|
|
82147
|
+
*
|
|
81173
82148
|
* ## Attributes & Properties
|
|
81174
82149
|
*
|
|
81175
82150
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
81176
82151
|
*
|
|
82152
|
+
* - `attached`: Whether the draft holds something besides its text, such as an attached
|
|
82153
|
+
* file. The draft then counts as one though the field is empty, so the
|
|
82154
|
+
* send button shows in place of the `idle` slot.
|
|
82155
|
+
* - `busy`: Whether a reply is on its way. While set, the send button is a stop
|
|
82156
|
+
* button that sends `helix-stop`, and the draft does not send.
|
|
82157
|
+
*
|
|
82158
|
+
* **The same button rather than one beside it**, because sending and
|
|
82159
|
+
* stopping are never both possible: while a reply is on its way there is
|
|
82160
|
+
* nothing to send to, and the place the reader's eye goes to act is the
|
|
82161
|
+
* place that can act. The field stays open for the next turn.
|
|
81177
82162
|
* - `feedback`: A message about the draft, shown under the field. While set, the composer
|
|
81178
82163
|
* is invalid, does not send, and does not submit, as a field's `feedback`
|
|
81179
82164
|
* does, and the message is announced as it appears.
|
|
@@ -81182,12 +82167,28 @@ export type CustomElementsSolidJs = {
|
|
|
81182
82167
|
* - `minlength`/`minLength`: The fewest characters a draft can have, once the reader has written in
|
|
81183
82168
|
* the field, as on a `<textarea>`.
|
|
81184
82169
|
* - `placeholder`: Placeholder text shown in an empty field.
|
|
82170
|
+
* - `queue`: Whether Enter sends while `busy`, for a page that queues the turn or
|
|
82171
|
+
* hands it to the reply under way.
|
|
82172
|
+
*
|
|
82173
|
+
* Off by default, because a page that does neither would drop the turn: it
|
|
82174
|
+
* has nowhere to put a message while a reply is coming. The button stays
|
|
82175
|
+
* the stop button either way, since stopping is still the one thing it
|
|
82176
|
+
* should do while a reply is on its way.
|
|
81185
82177
|
* - `required`: Whether the form needs a draft to submit. An empty draft never sends,
|
|
81186
82178
|
* required or not.
|
|
81187
82179
|
* - `rows`: How many rows the field opens at.
|
|
81188
82180
|
*
|
|
81189
82181
|
* It grows from there.
|
|
82182
|
+
* - `send-disabled`/`sendDisabled`: Whether the draft waits to be sent, such as while an attachment is still
|
|
82183
|
+
* read. The send button is unavailable and Enter does not send, while the
|
|
82184
|
+
* field stays open. The stop button shown while `busy` still stops.
|
|
81190
82185
|
* - `send-label`/`sendLabel`: Label for the send button.
|
|
82186
|
+
* - `send-reason`/`sendReason`: Why the draft waits, such as "Reading photo.jpg", shown in a tooltip on
|
|
82187
|
+
* the send button while `send-disabled` is set. The button then stays in
|
|
82188
|
+
* the tab order and takes the pointer, with `aria-disabled` in place of
|
|
82189
|
+
* `disabled`, so the reason can be reached by keyboard and by pointer, as
|
|
82190
|
+
* Button's `focusable-when-disabled` does. A press still sends nothing.
|
|
82191
|
+
* - `stop-label`/`stopLabel`: Label for the stop button shown while `busy`.
|
|
81191
82192
|
* - `submit-on`/`submitOn`: What sends the turn: `enter` for the Enter key, or `button` for the send
|
|
81192
82193
|
* button only.
|
|
81193
82194
|
*
|
|
@@ -81232,6 +82233,22 @@ export type CustomElementsSolidJs = {
|
|
|
81232
82233
|
* imperatively later, and nothing is hydrating by then.
|
|
81233
82234
|
*
|
|
81234
82235
|
* Here rather than on each control.
|
|
82236
|
+
* - `placeholders`: Examples the empty field shows in turn, in place of `placeholder`, such
|
|
82237
|
+
* as tasks a reader might ask for. Each shows for 6.5 seconds, and a longer
|
|
82238
|
+
* one shows longer, up to 10 seconds.
|
|
82239
|
+
*
|
|
82240
|
+
* **Each is the field's placeholder in its turn**, so a screen reader that
|
|
82241
|
+
* reaches the field hears the one showing. The swap runs through
|
|
82242
|
+
* `:state(example-leaving)`, as one example leaves, and
|
|
82243
|
+
* `:state(example-entering)`, as the next arrives.
|
|
82244
|
+
*
|
|
82245
|
+
* **They move only while nobody is about to write, and while the reader
|
|
82246
|
+
* can see them.** An empty field without focus moves on. Focus or text
|
|
82247
|
+
* holds the example showing, and an example already leaving finishes its
|
|
82248
|
+
* turn. A composer scrolled out of view holds its example, and the example
|
|
82249
|
+
* gets its full time again when the composer comes back. Where the reader
|
|
82250
|
+
* asked for less motion, or the page paused its motion, the first example
|
|
82251
|
+
* stays. (property only)
|
|
81235
82252
|
* - `typing`: Whether the user is writing: true from their first keystroke until they
|
|
81236
82253
|
* send, clear the field, or pause for `typing-timeout` milliseconds. (property only) (readonly)
|
|
81237
82254
|
* - `speechEngine`: The engine this field listens through, in place of the one
|
|
@@ -81270,6 +82287,7 @@ export type CustomElementsSolidJs = {
|
|
|
81270
82287
|
* - `helix-before-listen`: The dictation button was pressed. Cancelable: cancel it to keep the composer from listening.
|
|
81271
82288
|
* - `helix-listen`: Dictation settled on a phrase and put it in the draft, after the draft's own `input`.
|
|
81272
82289
|
* - `helix-send`: Fired when the user sends their turn, and cancelable.
|
|
82290
|
+
* - `helix-stop`: Fired when the user presses the stop button, shown in place of the send button while `busy` is set.
|
|
81273
82291
|
* - `helix-typing`: The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
|
|
81274
82292
|
* - `input`: The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
|
|
81275
82293
|
*
|
|
@@ -81277,7 +82295,9 @@ export type CustomElementsSolidJs = {
|
|
|
81277
82295
|
*
|
|
81278
82296
|
* Areas where markup can be added to the component.
|
|
81279
82297
|
*
|
|
82298
|
+
* - `attachments`: What the draft carries, such as images or files, inside the box and above the field.
|
|
81280
82299
|
* - `end`: Content under the field, beside the send button.
|
|
82300
|
+
* - `idle`: A control shown in place of the send button while the draft is empty and no reply is on its way, such as a button that starts a voice conversation.
|
|
81281
82301
|
* - `start`: Content under the field at the leading edge, such as an attachment button or a model picker.
|
|
81282
82302
|
*
|
|
81283
82303
|
* ## Methods
|
|
@@ -81343,12 +82363,24 @@ export type CustomElementsSolidJs = {
|
|
|
81343
82363
|
*
|
|
81344
82364
|
* Custom selectors for styling elements within the component.
|
|
81345
82365
|
*
|
|
82366
|
+
* - `attachments`: The box around the `attachments` slot, above the field. It is hidden while the slot is empty.
|
|
81346
82367
|
* - `composer`: The whole composer.
|
|
81347
82368
|
* - `end`: The box around the `end` slot.
|
|
81348
82369
|
* - `feedback`: The `feedback` message, under the field while it is set.
|
|
81349
82370
|
* - `field`: The text field.
|
|
81350
|
-
* - `
|
|
81351
|
-
* - `
|
|
82371
|
+
* - `idle`: The box around the `idle` slot, shown in the send button's place while the draft is empty.
|
|
82372
|
+
* - `mark`: The icon inside the send button, a return key, or a square while `busy`.
|
|
82373
|
+
* - `reason-arrow`: The arrow of the bubble that says `send-reason`, forwarded from `Tooltip`.
|
|
82374
|
+
* - `reason-arrow-bottom`: The arrow while the bubble is below the send button, on the bubble's top edge. Set together with `reason-arrow`.
|
|
82375
|
+
* - `reason-arrow-left`: The arrow while the bubble is left of the send button, on the bubble's right edge. Set together with `reason-arrow`.
|
|
82376
|
+
* - `reason-arrow-right`: The arrow while the bubble is right of the send button, on the bubble's left edge. Set together with `reason-arrow`.
|
|
82377
|
+
* - `reason-arrow-top`: The arrow while the bubble is above the send button, on the bubble's bottom edge. Set together with `reason-arrow`.
|
|
82378
|
+
* - `reason-surface`: The bubble that says `send-reason` over the send button, forwarded from `Tooltip`.
|
|
82379
|
+
* - `reason-surface-bottom`: The bubble while it is below the send button. Set together with `reason-surface`.
|
|
82380
|
+
* - `reason-surface-left`: The bubble while it is left of the send button. Set together with `reason-surface`.
|
|
82381
|
+
* - `reason-surface-right`: The bubble while it is right of the send button. Set together with `reason-surface`.
|
|
82382
|
+
* - `reason-surface-top`: The bubble while it is above the send button. Set together with `reason-surface`.
|
|
82383
|
+
* - `send`: The send button, which is the stop button while `busy`.
|
|
81352
82384
|
* - `start`: The box around the `start` slot.
|
|
81353
82385
|
* - `tools`: The row under the field.
|
|
81354
82386
|
* - `voice`: The dictation button, under `voice`, before the send button.
|
|
@@ -81359,6 +82391,8 @@ export type CustomElementsSolidJs = {
|
|
|
81359
82391
|
*
|
|
81360
82392
|
* These can be used to apply styling when a component is in a given state.
|
|
81361
82393
|
*
|
|
82394
|
+
* - `example-entering`: The example in the empty field has just replaced the one before it, for an entrance. It holds for 350 milliseconds. See `placeholders`.
|
|
82395
|
+
* - `example-leaving`: The example in the empty field is giving way to the next one, for an exit. It holds for 250 milliseconds, and the next example becomes the placeholder 100 milliseconds in, so the two can cross. See `placeholders`.
|
|
81362
82396
|
* - `invalid`: The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
|
|
81363
82397
|
* - `listening`: While the composer listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
|
|
81364
82398
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -81386,6 +82420,11 @@ export type CustomElementsSolidJs = {
|
|
|
81386
82420
|
* a page in another language sets them once there. The time moves on by
|
|
81387
82421
|
* itself, so "now" becomes "1 minute ago" while the page is open.
|
|
81388
82422
|
*
|
|
82423
|
+
* **What a turn carries goes in `attachments`**, above the bubble rather
|
|
82424
|
+
* in it: a picture inside a tinted bubble is framed twice, and one sent with
|
|
82425
|
+
* no words is an empty bubble around it. It sits against the same edge as the
|
|
82426
|
+
* turn, and the words keep their bubble under it.
|
|
82427
|
+
*
|
|
81389
82428
|
* **An agent's work goes in `work`, and its answer in the content.** The work,
|
|
81390
82429
|
* its thinking, the commands it ran and what they printed, is a record read
|
|
81391
82430
|
* the way a log is, so a `Log` with `separation="plain"` and `quiet` sits there
|
|
@@ -81457,6 +82496,7 @@ export type CustomElementsSolidJs = {
|
|
|
81457
82496
|
*
|
|
81458
82497
|
* - `(default)`: The turn's content.
|
|
81459
82498
|
* - `actions`: Controls for the turn, such as copy, retry, or react.
|
|
82499
|
+
* - `attachments`: What the turn carries, such as images or files, above its content and outside the bubble, against the author's edge.
|
|
81460
82500
|
* - `avatar`: The author's avatar.
|
|
81461
82501
|
* - `indicator`: The indicator shown before the first token arrives. Defaults to the typing indicator.
|
|
81462
82502
|
* - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
|
|
@@ -81467,6 +82507,7 @@ export type CustomElementsSolidJs = {
|
|
|
81467
82507
|
* Custom selectors for styling elements within the component.
|
|
81468
82508
|
*
|
|
81469
82509
|
* - `actions`: The controls on the turn, beside its time.
|
|
82510
|
+
* - `attachments`: The box around the `attachments` slot, above the content and outside the bubble.
|
|
81470
82511
|
* - `avatar`: The box around the `avatar` slot.
|
|
81471
82512
|
* - `body`: The content and the line under it.
|
|
81472
82513
|
* - `content`: Your own markup.
|
|
@@ -81729,6 +82770,7 @@ export type CustomElementsSolidJs = {
|
|
|
81729
82770
|
* - `log`: The transcript, which scrolls. On this tier, it needs only a block size.
|
|
81730
82771
|
* - `message`: The message drawn for a turn from `turns`, forwarded whole.
|
|
81731
82772
|
* - `message-actions`: The controls on a turn from `turns`, beside its time.
|
|
82773
|
+
* - `message-attachments`: The attachments above the bubble of a turn from `turns`.
|
|
81732
82774
|
* - `message-avatar`: The avatar box of a turn from `turns`.
|
|
81733
82775
|
* - `message-avatar-mine`: The avatar box of a turn from `turns` by `me`.
|
|
81734
82776
|
* - `message-body`: The content of a turn from `turns`, and the line under it.
|
|
@@ -84925,6 +85967,20 @@ export type CustomElementsSolidJs = {
|
|
|
84925
85967
|
* It replaces `Button.value`, the submit value: a copy button never submits,
|
|
84926
85968
|
* whatever its `type`. Declared here so its own page says what it holds.
|
|
84927
85969
|
* - `aria-label`/`undefined`: undefined
|
|
85970
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
85971
|
+
* can say why it is disabled.
|
|
85972
|
+
*
|
|
85973
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
85974
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
85975
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
85976
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
85977
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
85978
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
85979
|
+
* The styled button keeps the disabled look.
|
|
85980
|
+
*
|
|
85981
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
85982
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
85983
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
84928
85984
|
* - `pending`: Whether the action the button started is still running.
|
|
84929
85985
|
*
|
|
84930
85986
|
* A pending button keeps focus and stays in the tab order, and refuses every
|
|
@@ -87014,6 +88070,16 @@ export type CustomElementsSolidJs = {
|
|
|
87014
88070
|
* - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
|
|
87015
88071
|
* - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
|
|
87016
88072
|
* - `screenshot-text`: The box the screenshot button's icon sits in.
|
|
88073
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
88074
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
88075
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
88076
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
88077
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
88078
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
88079
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
88080
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
88081
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
88082
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
87017
88083
|
* - `touch`: A ring where a touch is or was.
|
|
87018
88084
|
* - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
|
|
87019
88085
|
* - `volume-down`: The Volume down button.
|
|
@@ -90212,6 +91278,16 @@ export type CustomElementsSolidJs = {
|
|
|
90212
91278
|
* - `settling`: What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
|
|
90213
91279
|
* - `stage`: The drawing and its controls.
|
|
90214
91280
|
* - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
|
|
91281
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
91282
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
91283
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
91284
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
91285
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
91286
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
91287
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
91288
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
91289
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
91290
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
90215
91291
|
* - `viewport`: The box the renderer draws in.
|
|
90216
91292
|
* - `zoom-in`: The zoom in button.
|
|
90217
91293
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -90720,6 +91796,20 @@ export type CustomElementsSolidJs = {
|
|
|
90720
91796
|
* name to derive one rather than dash-casing it, and what a consumer writes
|
|
90721
91797
|
* is the platform's `commandfor`.
|
|
90722
91798
|
* - `commandfor`/`commandFor`: The id of the element the command is sent to.
|
|
91799
|
+
* - `focusable-when-disabled`/`focusableWhenDisabled`: Whether a disabled button stays in the tab order, so a tooltip around it
|
|
91800
|
+
* can say why it is disabled.
|
|
91801
|
+
*
|
|
91802
|
+
* Set it on a button whose reason a Tooltip gives, such as a Save with no
|
|
91803
|
+
* changes to save. While the button is disabled, it keeps focus and takes
|
|
91804
|
+
* hover, and it refuses every press: a click, Enter and Space, and Enter in
|
|
91805
|
+
* a field of its form. The click does not reach your listeners, and a submit
|
|
91806
|
+
* button submits nothing. The inner control carries `aria-disabled` in place
|
|
91807
|
+
* of the native `disabled`, so a screen reader still says it is unavailable.
|
|
91808
|
+
* The styled button keeps the disabled look.
|
|
91809
|
+
*
|
|
91810
|
+
* Leave it unset on a button with no reason to give. A plain disabled button
|
|
91811
|
+
* leaves the tab order, as a native one does, and a keyboard reader skips a
|
|
91812
|
+
* stop that does nothing. Set `pending` for the wait after a press.
|
|
90723
91813
|
* - `formaction`/`formAction`: Where this button's submission goes, overriding the form's own.
|
|
90724
91814
|
*
|
|
90725
91815
|
* **The five `form*` overrides ride on a native submit button that stands in
|
|
@@ -91303,6 +92393,9 @@ export type CustomElementsSolidJs = {
|
|
|
91303
92393
|
*
|
|
91304
92394
|
* Empty leaves the attribute off, which is the browser's default. Set it to
|
|
91305
92395
|
* a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
|
|
92396
|
+
* - `autocorrect`: Whether the browser corrects words as the reader types, as the platform's
|
|
92397
|
+
* `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
|
|
92398
|
+
* prose, such as an address or a code, which corrections would change.
|
|
91306
92399
|
* - `clearable`: Whether the field shows a button that empties it.
|
|
91307
92400
|
*
|
|
91308
92401
|
* Shown only while there is something to clear, because a control that does
|
|
@@ -91975,7 +93068,8 @@ export type CustomElementsSolidJs = {
|
|
|
91975
93068
|
*
|
|
91976
93069
|
* Set `controls` for the viewer's own previous, next and close controls, named
|
|
91977
93070
|
* by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
|
|
91978
|
-
* replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots.
|
|
93071
|
+
* replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. A set
|
|
93072
|
+
* of one item has nothing to step to, so it draws no previous, next or counter. Without
|
|
91979
93073
|
* it, compose the chrome yourself in the `header` and `footer` slots, with
|
|
91980
93074
|
* buttons that send `--previous`, `--next` and `--close`.
|
|
91981
93075
|
*
|
|
@@ -93712,7 +94806,9 @@ export type CustomElementsSolidJs = {
|
|
|
93712
94806
|
*
|
|
93713
94807
|
* These can be used to apply styling when a component is in a given state.
|
|
93714
94808
|
*
|
|
94809
|
+
* - `empty`: The group holds nothing to show, so opening it shows nothing.
|
|
93715
94810
|
* - `open`: The group shows its lines.
|
|
94811
|
+
* - `steps`: The group holds steps of its own, which a stylesheet draws as a tree.
|
|
93716
94812
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
93717
94813
|
*/
|
|
93718
94814
|
"helix-headless-log-group": Partial<
|
|
@@ -93906,7 +95002,9 @@ export type CustomElementsSolidJs = {
|
|
|
93906
95002
|
* stream ends.
|
|
93907
95003
|
* - `done-label`/`doneLabel`: What a screen reader hears when the run is over.
|
|
93908
95004
|
* - `dropped-label`/`droppedLabel`: What the line above the log says once `limit` has let lines go. `{count}` is how many.
|
|
93909
|
-
* - `empty-text`/`emptyText`: The text shown and announced when the log has no lines.
|
|
95005
|
+
* - `empty-text`/`emptyText`: The text shown and announced when the log has no lines and no steps. A
|
|
95006
|
+
* step with nothing in it yet, such as one still `pending`, is its heading
|
|
95007
|
+
* alone, so a log holding one says nothing.
|
|
93910
95008
|
* - `error-label`/`errorLabel`: What a screen reader hears when lines at `error` arrive. `{count}` is how
|
|
93911
95009
|
* many arrived together and `{text}` is the first of them.
|
|
93912
95010
|
* - `fallback-label`/`fallbackLabel`: The log's name, read by screen readers, where `label` is empty.
|
|
@@ -94064,7 +95162,7 @@ export type CustomElementsSolidJs = {
|
|
|
94064
95162
|
* - `after`: The space the rows below the drawn ones would take. Only for lines drawn from data.
|
|
94065
95163
|
* - `before`: The space the rows above the drawn ones would take. Only for lines drawn from data.
|
|
94066
95164
|
* - `dropped`: The line above the log that says how many earlier lines `limit` let go.
|
|
94067
|
-
* - `empty`: Shown when the log has no lines.
|
|
95165
|
+
* - `empty`: Shown when the log has no lines and no steps.
|
|
94068
95166
|
* - `group-content`: Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
|
|
94069
95167
|
* - `group-duration`: How long a step drawn from `groups` took.
|
|
94070
95168
|
* - `group-heading`: The heading of a step drawn from `groups`.
|
|
@@ -94110,7 +95208,7 @@ export type CustomElementsSolidJs = {
|
|
|
94110
95208
|
* These can be used to apply styling when a component is in a given state.
|
|
94111
95209
|
*
|
|
94112
95210
|
* - `done`: The run is over: `done` is set, or `source` ended.
|
|
94113
|
-
* - `empty`: The log has no lines.
|
|
95211
|
+
* - `empty`: The log has no lines and no steps.
|
|
94114
95212
|
* - `filtered`: `query` or `level` is set, so only the lines they keep are shown.
|
|
94115
95213
|
* - `pinned`: The log follows its newest line.
|
|
94116
95214
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -95079,6 +96177,16 @@ export type CustomElementsSolidJs = {
|
|
|
95079
96177
|
* - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
|
|
95080
96178
|
* - `tilt-spinner`: The ring `tilt` turns while it is pending.
|
|
95081
96179
|
* - `tilt-text`: The box `tilt`'s glyph sits in.
|
|
96180
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
96181
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
96182
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
96183
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
96184
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
96185
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
96186
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
96187
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
96188
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
96189
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
95082
96190
|
* - `viewport`: The box the map is drawn in.
|
|
95083
96191
|
* - `zoom-in`: The button that zooms in.
|
|
95084
96192
|
* - `zoom-in-button`: `zoom-in`'s inner button.
|
|
@@ -96142,6 +97250,7 @@ export type CustomElementsSolidJs = {
|
|
|
96142
97250
|
*
|
|
96143
97251
|
* These can be used to apply styling when a component is in a given state.
|
|
96144
97252
|
*
|
|
97253
|
+
* - `start`: A row in the section has content before its label, so every row in it keeps the leading column. The menu decides it for each section, apart from the rows outside one.
|
|
96145
97254
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
96146
97255
|
*/
|
|
96147
97256
|
"helix-headless-menu-section": Partial<
|
|
@@ -96152,7 +97261,9 @@ export type CustomElementsSolidJs = {
|
|
|
96152
97261
|
>;
|
|
96153
97262
|
|
|
96154
97263
|
/**
|
|
96155
|
-
* A meter shows a level within a range
|
|
97264
|
+
* A meter shows a level within a range, or how the level divides: write
|
|
97265
|
+
* `Meter.Segment` inside it for each part of the whole, and the meter measures
|
|
97266
|
+
* their sum. Use `Progress` to show how far along a
|
|
96156
97267
|
* task is. A progress bar starts empty and ends full, and full is always the
|
|
96157
97268
|
* good end. For a meter, which end is good depends on what is measured. There
|
|
96158
97269
|
* is no `indeterminate`, because a meter always has a value.
|
|
@@ -96312,6 +97423,7 @@ export type CustomElementsSolidJs = {
|
|
|
96312
97423
|
*
|
|
96313
97424
|
* Areas where markup can be added to the component.
|
|
96314
97425
|
*
|
|
97426
|
+
* - `(default)`: `Meter.Segment` elements, one for each share of the whole, drawn in the bar.
|
|
96315
97427
|
* - `label`: A visible label. Its words name the meter in place of `label`.
|
|
96316
97428
|
*
|
|
96317
97429
|
* ## CSS Custom Properties
|
|
@@ -96321,6 +97433,7 @@ export type CustomElementsSolidJs = {
|
|
|
96321
97433
|
* - `--meter-along`: Where a bound sits on the arc, as a length along it.
|
|
96322
97434
|
* - `--meter-at`: Where a bound sits on a linear track, as a percentage.
|
|
96323
97435
|
* - `--meter-fraction`: The value as a fraction of the range, 0 to 1.
|
|
97436
|
+
* - `--meter-span`: How much the range holds, `max` less `min`, which a segment divides its own value by to find its width.
|
|
96324
97437
|
* - `--meter-sweep`: How much of the circle the arc covers, as a path length.
|
|
96325
97438
|
*
|
|
96326
97439
|
* ## CSS Parts
|
|
@@ -96357,6 +97470,90 @@ export type CustomElementsSolidJs = {
|
|
|
96357
97470
|
BaseEvents<HelixHeadlessMeter>
|
|
96358
97471
|
>;
|
|
96359
97472
|
|
|
97473
|
+
/**
|
|
97474
|
+
* A segment says how much of the range one part of the whole takes, such as the
|
|
97475
|
+
* tokens a model's context holds for its tools, against the tokens it holds for
|
|
97476
|
+
* the conversation. Write one for each part inside a `Meter`.
|
|
97477
|
+
*
|
|
97478
|
+
* **The meter's reading is the sum of its segments.** `value` on the meter is
|
|
97479
|
+
* ignored while it has any, so the two cannot disagree, and the bands, the ticks
|
|
97480
|
+
* and the reading answer to the total. A segment is drawn as wide as its `value`
|
|
97481
|
+
* is of the meter's range, so segments that add up to less than the range leave
|
|
97482
|
+
* the rest of the track empty, and ones that add up to more are cut at the end.
|
|
97483
|
+
*
|
|
97484
|
+
* **A meter's children are presentational to a screen reader**, so a segment
|
|
97485
|
+
* reaches no one that cannot see the bar. Say the breakdown in text beside it,
|
|
97486
|
+
* such as a list with the name and the amount of each part, which is also where a
|
|
97487
|
+
* reader finds the exact figures.
|
|
97488
|
+
*
|
|
97489
|
+
* A segment draws only in the bar. A meter in `ring` or `arc` draws its total.
|
|
97490
|
+
*
|
|
97491
|
+
* ## Attributes & Properties
|
|
97492
|
+
*
|
|
97493
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
97494
|
+
*
|
|
97495
|
+
* - `label`: What the segment is, such as "Tools", which names the slice when a pointer
|
|
97496
|
+
* rests on it.
|
|
97497
|
+
*
|
|
97498
|
+
* Not announced: see the note on a meter's children above.
|
|
97499
|
+
* - `tone`: What the segment means, as it does on a callout. Takes the tone's color in
|
|
97500
|
+
* place of the next color in the series.
|
|
97501
|
+
* - `value`: How much of the meter's range the segment takes, in the units of the meter's
|
|
97502
|
+
* `min` and `max`.
|
|
97503
|
+
*
|
|
97504
|
+
* A value that is not a number, or is below zero, draws nothing.
|
|
97505
|
+
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
97506
|
+
*
|
|
97507
|
+
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
97508
|
+
* Image, Splitter and both color controls, none of them about transitions. A
|
|
97509
|
+
* base class takes the name every subclass then cannot use.
|
|
97510
|
+
*
|
|
97511
|
+
* **The state it reports cannot be watched, which is why this exists.** A
|
|
97512
|
+
* custom state is deliberately not in the DOM, so there is no
|
|
97513
|
+
* `MutationObserver` equivalent for `ElementInternals.states`. Await this
|
|
97514
|
+
* instead.
|
|
97515
|
+
*
|
|
97516
|
+
* Separate from `updateComplete`, which resolves in the microtask checkpoint
|
|
97517
|
+
* the suppression is still active in. That is the distinction `readyToMove`
|
|
97518
|
+
* in `@fusion.dev/helix-testing` is written around.
|
|
97519
|
+
*
|
|
97520
|
+
* It never resolves where `requestAnimationFrame` never fires, which is a
|
|
97521
|
+
* server, a hidden tab, and happy-dom. Callers that must not hang there race
|
|
97522
|
+
* it against a timeout, as the happy-dom harness's `readyToMove` does. The
|
|
97523
|
+
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
97524
|
+
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
97525
|
+
*
|
|
97526
|
+
* ## Slots
|
|
97527
|
+
*
|
|
97528
|
+
* Areas where markup can be added to the component.
|
|
97529
|
+
*
|
|
97530
|
+
* - `(default)`: Nothing. A segment draws its share and has no content.
|
|
97531
|
+
*
|
|
97532
|
+
* ## CSS Custom Properties
|
|
97533
|
+
*
|
|
97534
|
+
* CSS variables available for styling the component.
|
|
97535
|
+
*
|
|
97536
|
+
* - `--meter-segment-value`: How much of the range the segment takes, in the meter's own units.
|
|
97537
|
+
*
|
|
97538
|
+
* ## CSS Parts
|
|
97539
|
+
*
|
|
97540
|
+
* Custom selectors for styling elements within the component.
|
|
97541
|
+
*
|
|
97542
|
+
* - `fill`: The slice of the bar the segment takes.
|
|
97543
|
+
*
|
|
97544
|
+
* ## CSS States
|
|
97545
|
+
*
|
|
97546
|
+
* These can be used to apply styling when a component is in a given state.
|
|
97547
|
+
*
|
|
97548
|
+
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
97549
|
+
*/
|
|
97550
|
+
"helix-headless-meter-segment": Partial<
|
|
97551
|
+
HelixHeadlessMeterSegmentProps &
|
|
97552
|
+
HelixHeadlessMeterSegmentSolidJsProps &
|
|
97553
|
+
BaseProps<HelixHeadlessMeterSegment, "solid"> &
|
|
97554
|
+
BaseEvents<HelixHeadlessMeterSegment>
|
|
97555
|
+
>;
|
|
97556
|
+
|
|
96360
97557
|
/**
|
|
96361
97558
|
* WCAG 2.2.2 asks that motion which starts by itself and runs longer than
|
|
96362
97559
|
* five seconds can be paused. **This is one control for the whole page**: a
|
|
@@ -100722,6 +101919,11 @@ export type CustomElementsSolidJs = {
|
|
|
100722
101919
|
* scrollbar, the browser's or the component's, and clips what is past it.
|
|
100723
101920
|
* Leave it unset to scroll both ways.
|
|
100724
101921
|
*
|
|
101922
|
+
* **A mask on the viewport also masks the browser's scrollbar.** While a
|
|
101923
|
+
* scrollbar takes room beside the content, the viewport carries its size in
|
|
101924
|
+
* `--scroll-area-gutter-inline-end` or `--scroll-area-gutter-block-end`, so a
|
|
101925
|
+
* mask can leave that room opaque. The styled tier's fades use them.
|
|
101926
|
+
*
|
|
100725
101927
|
* The viewport's `scroll` and `scrollend` are sent again from the host, which
|
|
100726
101928
|
* is the element you hold. A thumb dragged across the content sends one
|
|
100727
101929
|
* `scrollend`, once it is let go. In React, bind them with `onScroll` and
|
|
@@ -100801,6 +102003,8 @@ export type CustomElementsSolidJs = {
|
|
|
100801
102003
|
*
|
|
100802
102004
|
* CSS variables available for styling the component.
|
|
100803
102005
|
*
|
|
102006
|
+
* - `--scroll-area-gutter-block-end`: The room the browser's horizontal scrollbar takes at the block end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
|
|
102007
|
+
* - `--scroll-area-gutter-inline-end`: The room the browser's vertical scrollbar takes at the inline end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
|
|
100804
102008
|
* - `--scroll-area-scroll-fraction`: How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page.
|
|
100805
102009
|
* - `--scroll-area-thumb-fraction`: The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part.
|
|
100806
102010
|
*
|
|
@@ -100809,7 +102013,7 @@ export type CustomElementsSolidJs = {
|
|
|
100809
102013
|
* Custom selectors for styling elements within the component.
|
|
100810
102014
|
*
|
|
100811
102015
|
* - `corner`: The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
|
|
100812
|
-
* - `edges`: The layer
|
|
102016
|
+
* - `edges`: The layer over the viewport. The styled tier draws the focus ring on it, and the painted fades at the inline start and end.
|
|
100813
102017
|
* - `scrollbar`: Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
|
|
100814
102018
|
* - `scrollbar-horizontal`: The scrollbar along the inline axis, alongside `scrollbar`.
|
|
100815
102019
|
* - `scrollbar-vertical`: The scrollbar along the block axis, alongside `scrollbar`.
|
|
@@ -102089,6 +103293,11 @@ export type CustomElementsSolidJs = {
|
|
|
102089
103293
|
* depth, each as tall as its value from zero and colored by its series, so
|
|
102090
103294
|
* one series is a single row of bars and several make a block of them.
|
|
102091
103295
|
*
|
|
103296
|
+
* **A cell's `data-tone` colors its own bar and writes its value above it**,
|
|
103297
|
+
* such as `data-tone="primary"` on the one reading a chart is about, as on
|
|
103298
|
+
* `Bar Chart`. The value is the cell's own text. Without a tone, a bar takes
|
|
103299
|
+
* its series' color.
|
|
103300
|
+
*
|
|
102092
103301
|
* **The flat `Bar Chart` is read more exactly.** Measured, a reader judges
|
|
102093
103302
|
* a 3D bar's value less closely than a flat one's, and a bar can stand
|
|
102094
103303
|
* behind another. Use this one where the shape across two sets of names
|
|
@@ -102137,16 +103346,73 @@ export type CustomElementsSolidJs = {
|
|
|
102137
103346
|
*
|
|
102138
103347
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
102139
103348
|
*
|
|
102140
|
-
* - `
|
|
102141
|
-
*
|
|
103349
|
+
* - `grow`: Grows the bars up from the floor the first time the chart comes into
|
|
103350
|
+
* view with readings, each category a little after the one before it, so
|
|
103351
|
+
* the drawing arrives the way a page's own picture does. The growth is
|
|
103352
|
+
* fast at first, slows to rest, and never passes a bar's value.
|
|
103353
|
+
*
|
|
103354
|
+
* Under `prefers-reduced-motion`, or where the page has paused its motion
|
|
103355
|
+
* through `pauseMotion` or `Motion Toggle`, the bars stand at their height
|
|
103356
|
+
* from the start. A later table draws the bars it already had at their
|
|
103357
|
+
* height, and grows the bars it adds, each from the floor, so a reading that
|
|
103358
|
+
* arrives while the chart is in view arrives the same way.
|
|
103359
|
+
* - `grow-again`/`growAgain`: Grows the bars again each time the chart comes back into view after it
|
|
103360
|
+
* left it, as a pane does when it is opened again, where `grow` alone grows
|
|
103361
|
+
* them the first time only. Only a chart that grows takes it.
|
|
103362
|
+
*
|
|
103363
|
+
* While it is out of view the bars stand at the floor, so the first frame
|
|
103364
|
+
* after it returns is the start of the growth and never a flash at full
|
|
103365
|
+
* height.
|
|
103366
|
+
* - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, and in a `row` no
|
|
103367
|
+
* floor, so the readings stand alone and fill the plot, as a picture on a
|
|
103368
|
+
* product's own page does. The
|
|
102142
103369
|
* table, the summary, the tooltip, and the keys still carry every value,
|
|
102143
103370
|
* and a renderer draws no box either.
|
|
102144
103371
|
* - `open-label`/`openLabel`: What the readout says for a place with no value. `{category}` and
|
|
102145
103372
|
* `{series}` name the place.
|
|
102146
103373
|
* - `plot-label`/`plotLabel`: The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
|
|
103374
|
+
* - `stacked`: Stacks a category's series into one column, each block standing on the
|
|
103375
|
+
* ones before it, so the column is as tall as the category's total, as a
|
|
103376
|
+
* flat `Bar Chart` stacks them.
|
|
103377
|
+
*
|
|
103378
|
+
* Absent stands the series one behind another in depth. Stacked, every
|
|
103379
|
+
* series stands in the front row, so none hides another, and the parts of
|
|
103380
|
+
* one total read together. A negative reading hangs below zero on the
|
|
103381
|
+
* negatives before it. The scale fits the stacks.
|
|
102147
103382
|
* - `summary-label`/`summaryLabel`: The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
|
|
102148
103383
|
* are the number of bars, series, and categories, written in the locale,
|
|
102149
103384
|
* and `{low}` and `{high}` the lowest and the highest value.
|
|
103385
|
+
* - `variant`: How the bars stand.
|
|
103386
|
+
*
|
|
103387
|
+
* Unset, they stand on a grid of categories across and series in depth,
|
|
103388
|
+
* in a box the camera looks at from a corner, so the grid recedes at an
|
|
103389
|
+
* angle. `row` lays the categories in a straight line across the page and
|
|
103390
|
+
* turns each bar to the camera, showing its top and two sides, for one row
|
|
103391
|
+
* of readings in a small space such as a pane: turning the view turns each
|
|
103392
|
+
* bar where it stands, and the row stays level. It is the chart's own
|
|
103393
|
+
* drawing that lays the row: a renderer connected through
|
|
103394
|
+
* `@fusion.dev/helix-plot` stands the bars on the grid.
|
|
103395
|
+
*
|
|
103396
|
+
* `diagonal` is the same row climbing to the right as it recedes, each
|
|
103397
|
+
* place a step further back than the one before, as a row of days on a
|
|
103398
|
+
* product's page is drawn: the row rises one part in five across the page
|
|
103399
|
+
* from any turn, and its floor and names climb with it. A row whose bars
|
|
103400
|
+
* have a size climbs at most a quarter of the plot's height, so the bars
|
|
103401
|
+
* of a long row keep theirs.
|
|
103402
|
+
*
|
|
103403
|
+
* **A row draws its floor in place of a box**: each place as an outline a
|
|
103404
|
+
* little wider than its bar, and each category's name under it, as many
|
|
103405
|
+
* names as fit without touching. A name whose bar names a tone is written
|
|
103406
|
+
* first, in that tone. `no-box` leaves the floor and the names out.
|
|
103407
|
+
*
|
|
103408
|
+
* **A `column-gap` on the `fallback` part gives a row's bars one width**,
|
|
103409
|
+
* which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
|
|
103410
|
+
* stands as wide as each of twenty, the row is as long as its bars and
|
|
103411
|
+
* centered, the tallest bar stands as high as the plot has room for and
|
|
103412
|
+
* no taller than the row is long and a quarter again, so one bar stands
|
|
103413
|
+
* as a block, and `fits` says how many bars the plot holds, so a page
|
|
103414
|
+
* can give it the latest of a longer table. It is read when the plot's
|
|
103415
|
+
* size changes.
|
|
102150
103416
|
* - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
|
|
102151
103417
|
* and the fallback of the `empty` slot.
|
|
102152
103418
|
* - `loading`: Whether the readings are still on their way. The chart shows
|
|
@@ -102207,6 +103473,11 @@ export type CustomElementsSolidJs = {
|
|
|
102207
103473
|
* column a series.** A renderer reads it. (property only) (readonly)
|
|
102208
103474
|
* - `active`: The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. (property only) (readonly)
|
|
102209
103475
|
* - `readings`: The number of places on the grid, which the keys walk. (property only) (readonly)
|
|
103476
|
+
* - `fits`: How many categories a `row` or a `diagonal` has room for across the
|
|
103477
|
+
* plot at its bar size, measured as it is read, or
|
|
103478
|
+
* `undefined` where there is no row, no bar size, or nothing drawn to
|
|
103479
|
+
* measure. A page with a longer table gives the chart its latest that
|
|
103480
|
+
* many rows, and says so. (property only) (readonly)
|
|
102210
103481
|
* - `sounding`: Whether the chart is playing as sound now. (property only) (readonly)
|
|
102211
103482
|
* - `data`: The readings as data, in the shape of a table, where the page has no
|
|
102212
103483
|
* table to point `for` at. `for` wins where both are set.
|
|
@@ -102338,7 +103609,14 @@ export type CustomElementsSolidJs = {
|
|
|
102338
103609
|
*
|
|
102339
103610
|
* CSS variables available for styling the component.
|
|
102340
103611
|
*
|
|
102341
|
-
* - `--spatial-bar-chart-shade
|
|
103612
|
+
* - `--spatial-bar-chart-shade -How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.`: undefined
|
|
103613
|
+
* - `--spatial-bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
|
|
103614
|
+
* - `--spatial-bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
|
|
103615
|
+
* - `--spatial-bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
|
|
103616
|
+
* - `--spatial-bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
|
|
103617
|
+
* - `--spatial-bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
|
|
103618
|
+
* - `--spatial-bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
|
|
103619
|
+
* - `--spatial-bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
|
|
102342
103620
|
*
|
|
102343
103621
|
* ## CSS Parts
|
|
102344
103622
|
*
|
|
@@ -102351,6 +103629,8 @@ export type CustomElementsSolidJs = {
|
|
|
102351
103629
|
* - `empty`: The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
|
|
102352
103630
|
* - `face`: One face of a bar the view shows, shaded by which way it faces.
|
|
102353
103631
|
* - `fallback`: The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
|
|
103632
|
+
* - `floor`: One place on the floor of a `row`, under a bar or where one would stand, drawn as its outline.
|
|
103633
|
+
* - `glow`: The outline of a bar whose cell names a tone, blurred by 8 CSS pixels and painted under the bar, with no fill until a stylesheet gives it one: a soft glow in the bar's tone.
|
|
102354
103634
|
* - `grid`: The box's edges and its grid, in the chart's own drawing.
|
|
102355
103635
|
* - `live`: The readout: a polite live region that says the bar the keys moved to. Hide it visually.
|
|
102356
103636
|
* - `loading`: The words while `loading` is set and there are no readings.
|
|
@@ -102362,7 +103642,7 @@ export type CustomElementsSolidJs = {
|
|
|
102362
103642
|
* - `summary`: The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
|
|
102363
103643
|
* - `table`: The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.
|
|
102364
103644
|
* - `table-pages`: Which readings a page of the `table` holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.
|
|
102365
|
-
* - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
|
|
103645
|
+
* - `tick`: A category's or a series' name, or a value at a tick, along its edge of the box, or a category's name under its place in a `row`, in the chart's own drawing.
|
|
102366
103646
|
* - `tooltip-anchor`: The `Tooltip` element itself.
|
|
102367
103647
|
* - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
|
|
102368
103648
|
* - `tooltip-arrow-bottom`: The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
|
|
@@ -102379,6 +103659,7 @@ export type CustomElementsSolidJs = {
|
|
|
102379
103659
|
* - `tooltip-surface-right`: The bubble while it is right of the reading. Set alongside `tooltip-surface`.
|
|
102380
103660
|
* - `tooltip-surface-top`: The bubble while it is above the reading. Set alongside `tooltip-surface`.
|
|
102381
103661
|
* - `tooltip-value`: A column's value inside the tooltip.
|
|
103662
|
+
* - `value`: The value of a bar whose cell names a tone, written above it in the chart's own drawing.
|
|
102382
103663
|
*
|
|
102383
103664
|
* ## CSS States
|
|
102384
103665
|
*
|
|
@@ -106395,6 +107676,10 @@ export type CustomElementsSolidJs = {
|
|
|
106395
107676
|
*
|
|
106396
107677
|
* A tab with `dismissible` can be closed: see `Tabs.Tab`.
|
|
106397
107678
|
*
|
|
107679
|
+
* **Panels are optional.** A set with none is a strip whose tabs stand for
|
|
107680
|
+
* something the page shows elsewhere: the keys, the selection, `active` and
|
|
107681
|
+
* `helix-activate` work the same, and no tab names a panel it controls.
|
|
107682
|
+
*
|
|
106398
107683
|
* The `indicator` part moves to the selected tab and carries its place and
|
|
106399
107684
|
* size, so a mark of your own can be drawn there: style the part, or slot an
|
|
106400
107685
|
* element into `indicator`, which sits inside the part and reads the same
|
|
@@ -106630,6 +107915,7 @@ export type CustomElementsSolidJs = {
|
|
|
106630
107915
|
*
|
|
106631
107916
|
* - `dismiss`: The mark a pointer presses to close a `dismissible` tab.
|
|
106632
107917
|
* - `dismiss-mark`: The glyph on that mark, where none is slotted.
|
|
107918
|
+
* - `label`: The slot the tab's label is in.
|
|
106633
107919
|
* - `tab`: The tab itself.
|
|
106634
107920
|
*
|
|
106635
107921
|
* ## CSS States
|
|
@@ -106866,7 +108152,7 @@ export type CustomElementsSolidJs = {
|
|
|
106866
108152
|
*
|
|
106867
108153
|
* - `(default)`: The tag's label.
|
|
106868
108154
|
* - `dismiss-icon`: Replaces the glyph on the remove button.
|
|
106869
|
-
* - `start`: The category the label belongs to, shown before it in a heavier weight.
|
|
108155
|
+
* - `start`: The category the label belongs to, shown before it in a heavier weight, or an icon.
|
|
106870
108156
|
*
|
|
106871
108157
|
* ## Methods
|
|
106872
108158
|
*
|
|
@@ -107174,6 +108460,16 @@ export type CustomElementsSolidJs = {
|
|
|
107174
108460
|
* - `restart-spinner`: The ring the Restart button turns while it is pending.
|
|
107175
108461
|
* - `restart-text`: The Restart button's label.
|
|
107176
108462
|
* - `status`: The line under the terminal that says the process exited, or that Tab moves focus.
|
|
108463
|
+
* - `tooltip-arrow`: The arrow of the tooltip that names each button, forwarded from `Tooltip`.
|
|
108464
|
+
* - `tooltip-arrow-bottom`: The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
108465
|
+
* - `tooltip-arrow-left`: The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
|
|
108466
|
+
* - `tooltip-arrow-right`: The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
|
|
108467
|
+
* - `tooltip-arrow-top`: The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
|
|
108468
|
+
* - `tooltip-surface`: The bubble of the tooltip that names each button, forwarded from `Tooltip`.
|
|
108469
|
+
* - `tooltip-surface-bottom`: The bubble while it is below its button. Set together with `tooltip-surface`.
|
|
108470
|
+
* - `tooltip-surface-left`: The bubble while it is left of its button. Set together with `tooltip-surface`.
|
|
108471
|
+
* - `tooltip-surface-right`: The bubble while it is right of its button. Set together with `tooltip-surface`.
|
|
108472
|
+
* - `tooltip-surface-top`: The bubble while it is above its button. Set together with `tooltip-surface`.
|
|
107177
108473
|
* - `viewport`: The box the terminal is drawn in.
|
|
107178
108474
|
*
|
|
107179
108475
|
* ## CSS States
|
|
@@ -109518,7 +110814,10 @@ export type CustomElementsSolidJs = {
|
|
|
109518
110814
|
* The toolbar is one tab stop, and the arrow keys move between its controls, so
|
|
109519
110815
|
* three toolbars take three presses of Tab to pass. Any element the browser can
|
|
109520
110816
|
* focus counts as a control, including your own elements. A child that takes no
|
|
109521
|
-
* focus, such as a divider, is skipped. A menu is reached at its trigger.
|
|
110817
|
+
* focus, such as a divider, is skipped. A menu is reached at its trigger. A
|
|
110818
|
+
* disabled control is skipped too, except a Button with
|
|
110819
|
+
* `focusable-when-disabled`, which the arrows still reach so its tooltip can
|
|
110820
|
+
* say why it is disabled.
|
|
109522
110821
|
*
|
|
109523
110822
|
* A Divider in the toolbar is a separator across the toolbar's axis, as React
|
|
109524
110823
|
* Aria's is: vertical in a horizontal toolbar and horizontal in a vertical
|
|
@@ -112251,8 +113550,12 @@ export type CustomCssProperties = {
|
|
|
112251
113550
|
"--meter-at"?: (string) | undefined;
|
|
112252
113551
|
/** The value as a fraction of the range, 0 to 1. */
|
|
112253
113552
|
"--meter-fraction"?: (string) | undefined;
|
|
113553
|
+
/** How much the range holds, `max` less `min`, which a segment divides its own value by to find its width. */
|
|
113554
|
+
"--meter-span"?: (string) | undefined;
|
|
112254
113555
|
/** How much of the circle the arc covers, as a path length. */
|
|
112255
113556
|
"--meter-sweep"?: (string) | undefined;
|
|
113557
|
+
/** How much of the range the segment takes, in the meter's own units. */
|
|
113558
|
+
"--meter-segment-value"?: (string) | undefined;
|
|
112256
113559
|
/** How deep a row is, from 0 at the root, for indenting it. */
|
|
112257
113560
|
"--object-inspector-level"?: (string) | undefined;
|
|
112258
113561
|
/** The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. */
|
|
@@ -112273,6 +113576,10 @@ export type CustomCssProperties = {
|
|
|
112273
113576
|
"--chart-point-y"?: (string) | undefined;
|
|
112274
113577
|
/** A tick's position along its axis, as a percentage. The component writes it. */
|
|
112275
113578
|
"--chart-tick"?: (string) | undefined;
|
|
113579
|
+
/** The room the browser's horizontal scrollbar takes at the block end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content. */
|
|
113580
|
+
"--scroll-area-gutter-block-end"?: (string) | undefined;
|
|
113581
|
+
/** The room the browser's vertical scrollbar takes at the inline end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content. */
|
|
113582
|
+
"--scroll-area-gutter-inline-end"?: (string) | undefined;
|
|
112276
113583
|
/** How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page. */
|
|
112277
113584
|
"--scroll-area-scroll-fraction"?: (string) | undefined;
|
|
112278
113585
|
/** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
|
|
@@ -112287,8 +113594,22 @@ export type CustomCssProperties = {
|
|
|
112287
113594
|
"--slider-marker-at"?: (string) | undefined;
|
|
112288
113595
|
/** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
|
|
112289
113596
|
"--slider-to"?: (string) | undefined;
|
|
112290
|
-
/**
|
|
112291
|
-
"--spatial-bar-chart-shade"?: (string) | undefined;
|
|
113597
|
+
/** */
|
|
113598
|
+
"--spatial-bar-chart-shade -How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it."?: (string) | undefined;
|
|
113599
|
+
/** The color of a bar whose cell says `data-tone="accent"`. */
|
|
113600
|
+
"--spatial-bar-chart-tone-accent"?: (string) | undefined;
|
|
113601
|
+
/** The color of a bar whose cell says `data-tone="danger"`. */
|
|
113602
|
+
"--spatial-bar-chart-tone-danger"?: (string) | undefined;
|
|
113603
|
+
/** The color of a bar whose cell says `data-tone="info"`. */
|
|
113604
|
+
"--spatial-bar-chart-tone-info"?: (string) | undefined;
|
|
113605
|
+
/** The color of a bar whose cell says `data-tone="muted"`. */
|
|
113606
|
+
"--spatial-bar-chart-tone-muted"?: (string) | undefined;
|
|
113607
|
+
/** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
|
|
113608
|
+
"--spatial-bar-chart-tone-primary"?: (string) | undefined;
|
|
113609
|
+
/** The color of a bar whose cell says `data-tone="success"`. */
|
|
113610
|
+
"--spatial-bar-chart-tone-success"?: (string) | undefined;
|
|
113611
|
+
/** The color of a bar whose cell says `data-tone="warning"`. */
|
|
113612
|
+
"--spatial-bar-chart-tone-warning"?: (string) | undefined;
|
|
112292
113613
|
/** Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
|
|
112293
113614
|
"--spatial-heatmap-label-x"?: (string) | undefined;
|
|
112294
113615
|
/** Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
|