@fusion.dev/helix 0.172.0 → 0.173.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1963 -69
- package/dist/copy-button/root/copy-button-root.css.js +1 -1
- package/dist/element-events.generated.js +8 -1
- package/dist/graph/root/graph-root.css.js +2 -1
- package/dist/orb/root/orb-root.css.js +1 -1
- package/dist/orb/root/orb-root.d.ts +24 -5
- package/dist/orb/root/orb-root.js +24 -6
- package/dist/sandbox/index.d.ts +1 -0
- package/dist/sandbox/index.js +1 -0
- package/dist/sandbox/preview/sandbox-preview.d.ts +39 -2
- package/dist/sandbox/preview/sandbox-preview.js +37 -5
- package/dist/sandbox/root/sandbox-root.css.js +1 -1
- package/dist/sandbox/root/sandbox-root.d.ts +44 -4
- package/dist/sandbox/root/sandbox-root.js +92 -17
- package/dist/sandbox/source/editing.d.ts +111 -0
- package/dist/sandbox/source/editing.js +185 -0
- package/dist/sandbox/source/sandbox-source.css.js +2 -1
- package/dist/sandbox/source/sandbox-source.d.ts +131 -6
- package/dist/sandbox/source/sandbox-source.js +301 -17
- package/dist/timeline/root/timeline-root.css.js +1 -1
- package/dist/virtual-list/reorder/index.d.ts +1 -0
- package/dist/virtual-list/reorder/index.js +5 -0
- package/dist/virtual-list/reorder/virtual-list-reorder.css.d.ts +1 -0
- package/dist/virtual-list/reorder/virtual-list-reorder.css.js +12 -0
- package/dist/virtual-list/root/virtual-list-root.d.ts +9 -0
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +802 -34
- package/types/vue.d.ts +184 -5
- package/types/words.d.ts +27 -0
package/types/jsx.d.ts
CHANGED
|
@@ -3229,6 +3229,9 @@ separate actions. The semantics and the joining are separate questions:
|
|
|
3229
3229
|
`role="group"` and a shared name are what make a set of buttons a set, and
|
|
3230
3230
|
`helix-flex` gives the spacing without the group. */
|
|
3231
3231
|
variant?: (HelixButtonGroup["variant"]) | undefined;
|
|
3232
|
+
/** Disables every button in the group, and says so on the group with
|
|
3233
|
+
`aria-disabled`. Reflected, so a stylesheet can select on it. */
|
|
3234
|
+
disabled?: (HelixButtonGroup["disabled"]) | undefined;
|
|
3232
3235
|
/** Keeps at least one button pressed once one is, as React Aria's
|
|
3233
3236
|
`disallowEmptySelection`: a press that would leave none pressed is
|
|
3234
3237
|
refused. */
|
|
@@ -3278,6 +3281,9 @@ A button's own `value` names it, so a value holds no comma.
|
|
|
3278
3281
|
The attribute is the seed, and a press changes the property, which does
|
|
3279
3282
|
not reflect, as a native control's `value` does not. */
|
|
3280
3283
|
value?: (HelixButtonGroup["value"]) | undefined;
|
|
3284
|
+
/** The pressed values as a list, in a selection mode, and an empty list
|
|
3285
|
+
otherwise. Written, it presses exactly those buttons. */
|
|
3286
|
+
values?: (HelixButtonGroup["values"]) | undefined;
|
|
3281
3287
|
|
|
3282
3288
|
/** Fired after a press changes `value`, in a selection mode. */
|
|
3283
3289
|
onchange?: ((e: HelixButtonGroupElementEvent) => void) | undefined;
|
|
@@ -3302,6 +3308,9 @@ separate actions. The semantics and the joining are separate questions:
|
|
|
3302
3308
|
`role="group"` and a shared name are what make a set of buttons a set, and
|
|
3303
3309
|
`helix-flex` gives the spacing without the group. */
|
|
3304
3310
|
"prop:variant"?: (HelixButtonGroup["variant"]) | undefined;
|
|
3311
|
+
/** Disables every button in the group, and says so on the group with
|
|
3312
|
+
`aria-disabled`. Reflected, so a stylesheet can select on it. */
|
|
3313
|
+
"prop:disabled"?: (HelixButtonGroup["disabled"]) | undefined;
|
|
3305
3314
|
/** Keeps at least one button pressed once one is, as React Aria's
|
|
3306
3315
|
`disallowEmptySelection`: a press that would leave none pressed is
|
|
3307
3316
|
refused. */
|
|
@@ -3351,6 +3360,9 @@ A button's own `value` names it, so a value holds no comma.
|
|
|
3351
3360
|
The attribute is the seed, and a press changes the property, which does
|
|
3352
3361
|
not reflect, as a native control's `value` does not. */
|
|
3353
3362
|
"prop:value"?: (HelixButtonGroup["value"]) | undefined;
|
|
3363
|
+
/** The pressed values as a list, in a selection mode, and an empty list
|
|
3364
|
+
otherwise. Written, it presses exactly those buttons. */
|
|
3365
|
+
"prop:values"?: (HelixButtonGroup["values"]) | undefined;
|
|
3354
3366
|
/** Fired after a press changes `value`, in a selection mode. */
|
|
3355
3367
|
"on:change"?: ((e: HelixButtonGroupElementEvent) => void) | undefined;
|
|
3356
3368
|
/** Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are. */
|
|
@@ -4594,6 +4606,9 @@ Third", rather than with a comma this component chose. */
|
|
|
4594
4606
|
/** The text read with a card that has connections both ways. `{leadsTo}` is
|
|
4595
4607
|
`leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in. */
|
|
4596
4608
|
linkedLabel?: (HelixCanvas["linkedLabel"]) | undefined;
|
|
4609
|
+
/** Marks the board as busy while its document arrives: the board is
|
|
4610
|
+
`aria-busy`, and the `loading` slot is shown. */
|
|
4611
|
+
loading?: (HelixCanvas["loading"]) | undefined;
|
|
4597
4612
|
/** What screen readers hear after a key moves a card, with `{name}` for the
|
|
4598
4613
|
card and `{x}` and `{y}` for where it now is, in the document's units.
|
|
4599
4614
|
|
|
@@ -5077,6 +5092,9 @@ Third", rather than with a comma this component chose. */
|
|
|
5077
5092
|
/** The text read with a card that has connections both ways. `{leadsTo}` is
|
|
5078
5093
|
`leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in. */
|
|
5079
5094
|
"prop:linkedLabel"?: (HelixCanvas["linkedLabel"]) | undefined;
|
|
5095
|
+
/** Marks the board as busy while its document arrives: the board is
|
|
5096
|
+
`aria-busy`, and the `loading` slot is shown. */
|
|
5097
|
+
"prop:loading"?: (HelixCanvas["loading"]) | undefined;
|
|
5080
5098
|
/** What screen readers hear after a key moves a card, with `{name}` for the
|
|
5081
5099
|
card and `{x}` and `{y}` for where it now is, in the document's units.
|
|
5082
5100
|
|
|
@@ -10726,6 +10744,24 @@ Defaulted rather than left empty. An icon-only control must be named, and
|
|
|
10726
10744
|
the name of this one is not a judgment call: every copy button in the
|
|
10727
10745
|
world is called Copy. A consumer with a better word still sets it. */
|
|
10728
10746
|
label?: (HelixCopyButton["label"]) | undefined;
|
|
10747
|
+
/** Draws the name as words beside the icon, and the result in their place
|
|
10748
|
+
after a press. The button stays as wide as the longest of them. */
|
|
10749
|
+
"show-label"?: (HelixCopyButton["showLabel"]) | undefined;
|
|
10750
|
+
/** Draws the name as words beside the icon, and the result in their place
|
|
10751
|
+
after a press. The button stays as wide as the longest of them. */
|
|
10752
|
+
showLabel?: (HelixCopyButton["showLabel"]) | undefined;
|
|
10753
|
+
/** When the tooltip shows: `full` on hover and focus and after a press,
|
|
10754
|
+
`copy` only after a press, to show the result, and `none` never, for a
|
|
10755
|
+
button whose result shows another way, such as under `show-label`.
|
|
10756
|
+
|
|
10757
|
+
Unset is `full`, and the attribute stays absent until you write it. */
|
|
10758
|
+
tooltip?: (HelixCopyButton["tooltip"]) | undefined;
|
|
10759
|
+
/** The side the tooltip prefers. It moves to another side where this one
|
|
10760
|
+
does not fit. */
|
|
10761
|
+
"tooltip-placement"?: (HelixCopyButton["tooltipPlacement"]) | undefined;
|
|
10762
|
+
/** The side the tooltip prefers. It moves to another side where this one
|
|
10763
|
+
does not fit. */
|
|
10764
|
+
tooltipPlacement?: (HelixCopyButton["tooltipPlacement"]) | undefined;
|
|
10729
10765
|
/** The text copied to the clipboard.
|
|
10730
10766
|
|
|
10731
10767
|
It replaces `Button.value`, the submit value: a copy button never submits,
|
|
@@ -10862,6 +10898,24 @@ Defaulted rather than left empty. An icon-only control must be named, and
|
|
|
10862
10898
|
the name of this one is not a judgment call: every copy button in the
|
|
10863
10899
|
world is called Copy. A consumer with a better word still sets it. */
|
|
10864
10900
|
"prop:label"?: (HelixCopyButton["label"]) | undefined;
|
|
10901
|
+
/** Draws the name as words beside the icon, and the result in their place
|
|
10902
|
+
after a press. The button stays as wide as the longest of them. */
|
|
10903
|
+
"bool:show-label"?: (HelixCopyButton["showLabel"]) | undefined;
|
|
10904
|
+
/** Draws the name as words beside the icon, and the result in their place
|
|
10905
|
+
after a press. The button stays as wide as the longest of them. */
|
|
10906
|
+
"prop:showLabel"?: (HelixCopyButton["showLabel"]) | undefined;
|
|
10907
|
+
/** When the tooltip shows: `full` on hover and focus and after a press,
|
|
10908
|
+
`copy` only after a press, to show the result, and `none` never, for a
|
|
10909
|
+
button whose result shows another way, such as under `show-label`.
|
|
10910
|
+
|
|
10911
|
+
Unset is `full`, and the attribute stays absent until you write it. */
|
|
10912
|
+
"prop:tooltip"?: (HelixCopyButton["tooltip"]) | undefined;
|
|
10913
|
+
/** The side the tooltip prefers. It moves to another side where this one
|
|
10914
|
+
does not fit. */
|
|
10915
|
+
"attr:tooltip-placement"?: (HelixCopyButton["tooltipPlacement"]) | undefined;
|
|
10916
|
+
/** The side the tooltip prefers. It moves to another side where this one
|
|
10917
|
+
does not fit. */
|
|
10918
|
+
"prop:tooltipPlacement"?: (HelixCopyButton["tooltipPlacement"]) | undefined;
|
|
10865
10919
|
/** The text copied to the clipboard.
|
|
10866
10920
|
|
|
10867
10921
|
It replaces `Button.value`, the submit value: a copy button never submits,
|
|
@@ -17035,6 +17089,13 @@ or hides its notes. Drawn where the notes have two groups or more. */
|
|
|
17035
17089
|
"links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
|
|
17036
17090
|
/** How a note that links to the selected one is described, with `{note}`. */
|
|
17037
17091
|
linksToLabel?: (HelixGraph["linksToLabel"]) | undefined;
|
|
17092
|
+
/** Marks the graph as busy while its notes arrive: the list is `aria-busy`,
|
|
17093
|
+
and the panel says so where it holds no notes yet. */
|
|
17094
|
+
loading?: (HelixGraph["loading"]) | undefined;
|
|
17095
|
+
/** What the panel says while `loading` is set and the list holds no notes. */
|
|
17096
|
+
"loading-label"?: (HelixGraph["loadingLabel"]) | undefined;
|
|
17097
|
+
/** What the panel says while `loading` is set and the list holds no notes. */
|
|
17098
|
+
loadingLabel?: (HelixGraph["loadingLabel"]) | undefined;
|
|
17038
17099
|
/** What screen readers hear once the drawing has moved down, after `moved()`. */
|
|
17039
17100
|
"moved-down-label"?: (HelixGraph["movedDownLabel"]) | undefined;
|
|
17040
17101
|
/** What screen readers hear once the drawing has moved down, after `moved()`. */
|
|
@@ -17107,6 +17168,16 @@ own, since the fallback name is the same word. Empty leaves the role. */
|
|
|
17107
17168
|
links?: (HelixGraph["links"]) | undefined;
|
|
17108
17169
|
/** The notes. A property, never an attribute. */
|
|
17109
17170
|
nodes?: (HelixGraph["nodes"]) | undefined;
|
|
17171
|
+
/** What each note's row in the list shows in place of its name: a function
|
|
17172
|
+
given the note that returns text, an element or a Lit template.
|
|
17173
|
+
|
|
17174
|
+
For an icon by its kind, or a date under its name, as React Aria's
|
|
17175
|
+
`ListBoxItem` takes children. The row is still named by the note's name,
|
|
17176
|
+
which typeahead and the search find it by, and described by how it stands
|
|
17177
|
+
to the selected note. Return the name with your content where it should
|
|
17178
|
+
still show. A property only, there being no way to write a function in
|
|
17179
|
+
markup. */
|
|
17180
|
+
noteContent?: (HelixGraph["noteContent"]) | undefined;
|
|
17110
17181
|
|
|
17111
17182
|
/** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
|
|
17112
17183
|
"onhelix-activate"?: ((e: HelixGraphHelixActivateElementEvent) => void) | undefined;
|
|
@@ -17337,6 +17408,13 @@ or hides its notes. Drawn where the notes have two groups or more. */
|
|
|
17337
17408
|
"attr:links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
|
|
17338
17409
|
/** How a note that links to the selected one is described, with `{note}`. */
|
|
17339
17410
|
"prop:linksToLabel"?: (HelixGraph["linksToLabel"]) | undefined;
|
|
17411
|
+
/** Marks the graph as busy while its notes arrive: the list is `aria-busy`,
|
|
17412
|
+
and the panel says so where it holds no notes yet. */
|
|
17413
|
+
"prop:loading"?: (HelixGraph["loading"]) | undefined;
|
|
17414
|
+
/** What the panel says while `loading` is set and the list holds no notes. */
|
|
17415
|
+
"attr:loading-label"?: (HelixGraph["loadingLabel"]) | undefined;
|
|
17416
|
+
/** What the panel says while `loading` is set and the list holds no notes. */
|
|
17417
|
+
"prop:loadingLabel"?: (HelixGraph["loadingLabel"]) | undefined;
|
|
17340
17418
|
/** What screen readers hear once the drawing has moved down, after `moved()`. */
|
|
17341
17419
|
"attr:moved-down-label"?: (HelixGraph["movedDownLabel"]) | undefined;
|
|
17342
17420
|
/** What screen readers hear once the drawing has moved down, after `moved()`. */
|
|
@@ -17409,6 +17487,16 @@ own, since the fallback name is the same word. Empty leaves the role. */
|
|
|
17409
17487
|
"prop:links"?: (HelixGraph["links"]) | undefined;
|
|
17410
17488
|
/** The notes. A property, never an attribute. */
|
|
17411
17489
|
"prop:nodes"?: (HelixGraph["nodes"]) | undefined;
|
|
17490
|
+
/** What each note's row in the list shows in place of its name: a function
|
|
17491
|
+
given the note that returns text, an element or a Lit template.
|
|
17492
|
+
|
|
17493
|
+
For an icon by its kind, or a date under its name, as React Aria's
|
|
17494
|
+
`ListBoxItem` takes children. The row is still named by the note's name,
|
|
17495
|
+
which typeahead and the search find it by, and described by how it stands
|
|
17496
|
+
to the selected note. Return the name with your content where it should
|
|
17497
|
+
still show. A property only, there being no way to write a function in
|
|
17498
|
+
markup. */
|
|
17499
|
+
"prop:noteContent"?: (HelixGraph["noteContent"]) | undefined;
|
|
17412
17500
|
/** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
|
|
17413
17501
|
"on:helix-activate"?: ((e: HelixGraphHelixActivateElementEvent) => void) | undefined;
|
|
17414
17502
|
/** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
|
|
@@ -20978,7 +21066,8 @@ itself. */
|
|
|
20978
21066
|
type?: (HelixList["type"]) | undefined;
|
|
20979
21067
|
/** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
|
|
20980
21068
|
|
|
20981
|
-
|
|
21069
|
+
A press or a key writes it in row order, as Data Table does, whatever
|
|
21070
|
+
order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
|
|
20982
21071
|
words where it has none. */
|
|
20983
21072
|
value?: (HelixList["value"]) | undefined;
|
|
20984
21073
|
|
|
@@ -21139,7 +21228,8 @@ itself. */
|
|
|
21139
21228
|
"prop:type"?: (HelixList["type"]) | undefined;
|
|
21140
21229
|
/** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
|
|
21141
21230
|
|
|
21142
|
-
|
|
21231
|
+
A press or a key writes it in row order, as Data Table does, whatever
|
|
21232
|
+
order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
|
|
21143
21233
|
words where it has none. */
|
|
21144
21234
|
"prop:value"?: (HelixList["value"]) | undefined;
|
|
21145
21235
|
/** Fired once a press has changed which rows are selected. */
|
|
@@ -26628,6 +26718,10 @@ box the sections scroll in. */
|
|
|
26628
26718
|
/** The navigation's name, read by screen readers. A heading in the `heading`
|
|
26629
26719
|
slot names it in place of this. */
|
|
26630
26720
|
label?: (HelixOutline["label"]) | undefined;
|
|
26721
|
+
/** Which links are marked. `reading` marks the one section being read, the
|
|
26722
|
+
last whose heading has passed the reading line. `visible` marks every
|
|
26723
|
+
section with part of it on screen, and the mark runs across their links. */
|
|
26724
|
+
marks?: (HelixOutline["marks"]) | undefined;
|
|
26631
26725
|
/** How far below the top of the scroll container a heading counts as reached,
|
|
26632
26726
|
in pixels. The scroll container is the window or the panel the sections
|
|
26633
26727
|
scroll in.
|
|
@@ -26670,6 +26764,10 @@ box the sections scroll in. */
|
|
|
26670
26764
|
/** The navigation's name, read by screen readers. A heading in the `heading`
|
|
26671
26765
|
slot names it in place of this. */
|
|
26672
26766
|
"prop:label"?: (HelixOutline["label"]) | undefined;
|
|
26767
|
+
/** Which links are marked. `reading` marks the one section being read, the
|
|
26768
|
+
last whose heading has passed the reading line. `visible` marks every
|
|
26769
|
+
section with part of it on screen, and the mark runs across their links. */
|
|
26770
|
+
"prop:marks"?: (HelixOutline["marks"]) | undefined;
|
|
26673
26771
|
/** How far below the top of the scroll container a heading counts as reached,
|
|
26674
26772
|
in pixels. The scroll container is the window or the panel the sections
|
|
26675
26773
|
scroll in.
|
|
@@ -29355,6 +29453,9 @@ export type HelixSandboxPreviewHelixResizeElementEvent =
|
|
|
29355
29453
|
HelixSandboxPreviewElementEvent<HelixResizeEvent>;
|
|
29356
29454
|
|
|
29357
29455
|
export type HelixSandboxPreviewProps = {
|
|
29456
|
+
/** The address the packages in `dependencies` load from, which the name, an
|
|
29457
|
+
`@` and the version follow. */
|
|
29458
|
+
cdn?: (HelixSandboxPreview["cdn"]) | undefined;
|
|
29358
29459
|
/** The color mode the frame renders in.
|
|
29359
29460
|
|
|
29360
29461
|
**The frame is a document and a document has its own color mode.** Setting
|
|
@@ -29386,6 +29487,11 @@ including every one of the 24 series colors a chart reads. */
|
|
|
29386
29487
|
/** Whether the preview draws a reload button and a button that opens the
|
|
29387
29488
|
example in a new tab, in its corner. */
|
|
29388
29489
|
controls?: (HelixSandboxPreview["controls"]) | undefined;
|
|
29490
|
+
/** The npm packages an example can import by name in the built-in document,
|
|
29491
|
+
each name to a version or a range, as a `package.json` lists them. Each
|
|
29492
|
+
loads from `cdn`. Set it as JSON in the attribute or as an object. Not
|
|
29493
|
+
read where `src` is set. */
|
|
29494
|
+
dependencies?: (HelixSandboxPreview["dependencies"]) | undefined;
|
|
29389
29495
|
/** Writing direction inside the frame.
|
|
29390
29496
|
|
|
29391
29497
|
Not reflected. It is payload for the render message and nothing selects on
|
|
@@ -29412,6 +29518,10 @@ Not reflected, for `direction`'s reason: the placement is applied by the
|
|
|
29412
29518
|
document inside the frame, against its own root, so no rule on this side
|
|
29413
29519
|
could read it. */
|
|
29414
29520
|
layout?: (HelixSandboxPreview["layout"]) | undefined;
|
|
29521
|
+
/** Module files an example imports by a relative path in the built-in
|
|
29522
|
+
document, each path, such as `utils.js`, to its source. Not read where
|
|
29523
|
+
`src` is set. */
|
|
29524
|
+
modules?: (HelixSandboxPreview["modules"]) | undefined;
|
|
29415
29525
|
/** The name of the button that opens the example in a new tab, under
|
|
29416
29526
|
`controls`. */
|
|
29417
29527
|
"open-label"?: (HelixSandboxPreview["openLabel"]) | undefined;
|
|
@@ -29442,6 +29552,9 @@ Empty loads the built-in document, which defines no element. */
|
|
|
29442
29552
|
};
|
|
29443
29553
|
|
|
29444
29554
|
export type HelixSandboxPreviewSolidJsProps = {
|
|
29555
|
+
/** The address the packages in `dependencies` load from, which the name, an
|
|
29556
|
+
`@` and the version follow. */
|
|
29557
|
+
"prop:cdn"?: (HelixSandboxPreview["cdn"]) | undefined;
|
|
29445
29558
|
/** The color mode the frame renders in.
|
|
29446
29559
|
|
|
29447
29560
|
**The frame is a document and a document has its own color mode.** Setting
|
|
@@ -29473,6 +29586,11 @@ including every one of the 24 series colors a chart reads. */
|
|
|
29473
29586
|
/** Whether the preview draws a reload button and a button that opens the
|
|
29474
29587
|
example in a new tab, in its corner. */
|
|
29475
29588
|
"prop:controls"?: (HelixSandboxPreview["controls"]) | undefined;
|
|
29589
|
+
/** The npm packages an example can import by name in the built-in document,
|
|
29590
|
+
each name to a version or a range, as a `package.json` lists them. Each
|
|
29591
|
+
loads from `cdn`. Set it as JSON in the attribute or as an object. Not
|
|
29592
|
+
read where `src` is set. */
|
|
29593
|
+
"prop:dependencies"?: (HelixSandboxPreview["dependencies"]) | undefined;
|
|
29476
29594
|
/** Writing direction inside the frame.
|
|
29477
29595
|
|
|
29478
29596
|
Not reflected. It is payload for the render message and nothing selects on
|
|
@@ -29499,6 +29617,10 @@ Not reflected, for `direction`'s reason: the placement is applied by the
|
|
|
29499
29617
|
document inside the frame, against its own root, so no rule on this side
|
|
29500
29618
|
could read it. */
|
|
29501
29619
|
"prop:layout"?: (HelixSandboxPreview["layout"]) | undefined;
|
|
29620
|
+
/** Module files an example imports by a relative path in the built-in
|
|
29621
|
+
document, each path, such as `utils.js`, to its source. Not read where
|
|
29622
|
+
`src` is set. */
|
|
29623
|
+
"prop:modules"?: (HelixSandboxPreview["modules"]) | undefined;
|
|
29502
29624
|
/** The name of the button that opens the example in a new tab, under
|
|
29503
29625
|
`controls`. */
|
|
29504
29626
|
"attr:open-label"?: (HelixSandboxPreview["openLabel"]) | undefined;
|
|
@@ -29628,6 +29750,12 @@ names below keeps that true whichever way round they sit.
|
|
|
29628
29750
|
`split` follows the lead pane rather than the source, so `split="30"` means
|
|
29629
29751
|
the same thing in both directions: thirty percent to whatever comes first. */
|
|
29630
29752
|
lead?: (HelixSandbox["lead"]) | undefined;
|
|
29753
|
+
/** The description of a file tab whose pane holds an edit, read by screen
|
|
29754
|
+
readers after the file's name. */
|
|
29755
|
+
"modified-label"?: (HelixSandbox["modifiedLabel"]) | undefined;
|
|
29756
|
+
/** The description of a file tab whose pane holds an edit, read by screen
|
|
29757
|
+
readers after the file's name. */
|
|
29758
|
+
modifiedLabel?: (HelixSandbox["modifiedLabel"]) | undefined;
|
|
29631
29759
|
/** Whether the panes sit side by side or stacked.
|
|
29632
29760
|
|
|
29633
29761
|
Not reflected, for `lead`'s reason above: no rule selects on it. The axis
|
|
@@ -29788,6 +29916,12 @@ names below keeps that true whichever way round they sit.
|
|
|
29788
29916
|
`split` follows the lead pane rather than the source, so `split="30"` means
|
|
29789
29917
|
the same thing in both directions: thirty percent to whatever comes first. */
|
|
29790
29918
|
"prop:lead"?: (HelixSandbox["lead"]) | undefined;
|
|
29919
|
+
/** The description of a file tab whose pane holds an edit, read by screen
|
|
29920
|
+
readers after the file's name. */
|
|
29921
|
+
"attr:modified-label"?: (HelixSandbox["modifiedLabel"]) | undefined;
|
|
29922
|
+
/** The description of a file tab whose pane holds an edit, read by screen
|
|
29923
|
+
readers after the file's name. */
|
|
29924
|
+
"prop:modifiedLabel"?: (HelixSandbox["modifiedLabel"]) | undefined;
|
|
29791
29925
|
/** Whether the panes sit side by side or stacked.
|
|
29792
29926
|
|
|
29793
29927
|
Not reflected, for `lead`'s reason above: no rule selects on it. The axis
|
|
@@ -29905,6 +30039,23 @@ export type HelixSandboxSourceHelixEditElementEvent =
|
|
|
29905
30039
|
HelixSandboxSourceElementEvent<HelixEditEvent>;
|
|
29906
30040
|
|
|
29907
30041
|
export type HelixSandboxSourceProps = {
|
|
30042
|
+
/** Whether typing an opening bracket or quote types its closing one too, and
|
|
30043
|
+
a bracket typed with text selected goes around it. */
|
|
30044
|
+
"close-brackets"?: (HelixSandboxSource["closeBrackets"]) | undefined;
|
|
30045
|
+
/** Whether typing an opening bracket or quote types its closing one too, and
|
|
30046
|
+
a bracket typed with text selected goes around it. */
|
|
30047
|
+
closeBrackets?: (HelixSandboxSource["closeBrackets"]) | undefined;
|
|
30048
|
+
/** Whether the pane offers completions for the word before the caret, from
|
|
30049
|
+
the words of the source and of `completions`. */
|
|
30050
|
+
complete?: (HelixSandboxSource["complete"]) | undefined;
|
|
30051
|
+
/** Words the pane offers under `complete` beside the words of the source,
|
|
30052
|
+
such as tag and attribute names. `manifestWords` reads them from a custom
|
|
30053
|
+
elements manifest. Set it as JSON in the attribute or as an array. */
|
|
30054
|
+
completions?: (HelixSandboxSource["completions"]) | undefined;
|
|
30055
|
+
/** The name of the list of completions, read by screen readers. */
|
|
30056
|
+
"completions-label"?: (HelixSandboxSource["completionsLabel"]) | undefined;
|
|
30057
|
+
/** The name of the list of completions, read by screen readers. */
|
|
30058
|
+
completionsLabel?: (HelixSandboxSource["completionsLabel"]) | undefined;
|
|
29908
30059
|
/** The editable region's name, read by screen readers. */
|
|
29909
30060
|
"field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29910
30061
|
/** The editable region's name, read by screen readers. */
|
|
@@ -29928,6 +30079,12 @@ holds several panes. Empty puts the pane's `name` on the tab. */
|
|
|
29928
30079
|
"line-numbers"?: (HelixSandboxSource["lineNumbers"]) | undefined;
|
|
29929
30080
|
/** Whether each line of the source is numbered, in a gutter beside it. */
|
|
29930
30081
|
lineNumbers?: (HelixSandboxSource["lineNumbers"]) | undefined;
|
|
30082
|
+
/** Whether the bracket beside the caret and its pair are marked while the
|
|
30083
|
+
field has focus. */
|
|
30084
|
+
"match-brackets"?: (HelixSandboxSource["matchBrackets"]) | undefined;
|
|
30085
|
+
/** Whether the bracket beside the caret and its pair are marked while the
|
|
30086
|
+
field has focus. */
|
|
30087
|
+
matchBrackets?: (HelixSandboxSource["matchBrackets"]) | undefined;
|
|
29931
30088
|
/** Which source this pane holds. Every `helix-before-edit` event includes it.
|
|
29932
30089
|
|
|
29933
30090
|
`html` and `css` are what the sandbox root routes on; any other name is
|
|
@@ -29935,6 +30092,14 @@ passed through untouched for a consumer wiring their own panes.
|
|
|
29935
30092
|
|
|
29936
30093
|
Not reflected: nothing selects on it, so it keeps a real default instead. */
|
|
29937
30094
|
name?: (HelixSandboxSource["name"]) | undefined;
|
|
30095
|
+
/** Whether the source is read only: it can be selected and copied, and not
|
|
30096
|
+
edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
30097
|
+
that is read only. */
|
|
30098
|
+
readonly?: (HelixSandboxSource["readOnly"]) | undefined;
|
|
30099
|
+
/** Whether the source is read only: it can be selected and copied, and not
|
|
30100
|
+
edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
30101
|
+
that is read only. */
|
|
30102
|
+
readOnly?: (HelixSandboxSource["readOnly"]) | undefined;
|
|
29938
30103
|
/** Whether Tab indents the source. When it is off, Tab moves focus. */
|
|
29939
30104
|
"tab-indents"?: (HelixSandboxSource["tabIndents"]) | undefined;
|
|
29940
30105
|
/** Whether Tab indents the source. When it is off, Tab moves focus. */
|
|
@@ -29965,6 +30130,23 @@ returns markup. */
|
|
|
29965
30130
|
};
|
|
29966
30131
|
|
|
29967
30132
|
export type HelixSandboxSourceSolidJsProps = {
|
|
30133
|
+
/** Whether typing an opening bracket or quote types its closing one too, and
|
|
30134
|
+
a bracket typed with text selected goes around it. */
|
|
30135
|
+
"bool:close-brackets"?: (HelixSandboxSource["closeBrackets"]) | undefined;
|
|
30136
|
+
/** Whether typing an opening bracket or quote types its closing one too, and
|
|
30137
|
+
a bracket typed with text selected goes around it. */
|
|
30138
|
+
"prop:closeBrackets"?: (HelixSandboxSource["closeBrackets"]) | undefined;
|
|
30139
|
+
/** Whether the pane offers completions for the word before the caret, from
|
|
30140
|
+
the words of the source and of `completions`. */
|
|
30141
|
+
"prop:complete"?: (HelixSandboxSource["complete"]) | undefined;
|
|
30142
|
+
/** Words the pane offers under `complete` beside the words of the source,
|
|
30143
|
+
such as tag and attribute names. `manifestWords` reads them from a custom
|
|
30144
|
+
elements manifest. Set it as JSON in the attribute or as an array. */
|
|
30145
|
+
"prop:completions"?: (HelixSandboxSource["completions"]) | undefined;
|
|
30146
|
+
/** The name of the list of completions, read by screen readers. */
|
|
30147
|
+
"attr:completions-label"?: (HelixSandboxSource["completionsLabel"]) | undefined;
|
|
30148
|
+
/** The name of the list of completions, read by screen readers. */
|
|
30149
|
+
"prop:completionsLabel"?: (HelixSandboxSource["completionsLabel"]) | undefined;
|
|
29968
30150
|
/** The editable region's name, read by screen readers. */
|
|
29969
30151
|
"attr:field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29970
30152
|
/** The editable region's name, read by screen readers. */
|
|
@@ -29988,6 +30170,12 @@ holds several panes. Empty puts the pane's `name` on the tab. */
|
|
|
29988
30170
|
"bool:line-numbers"?: (HelixSandboxSource["lineNumbers"]) | undefined;
|
|
29989
30171
|
/** Whether each line of the source is numbered, in a gutter beside it. */
|
|
29990
30172
|
"prop:lineNumbers"?: (HelixSandboxSource["lineNumbers"]) | undefined;
|
|
30173
|
+
/** Whether the bracket beside the caret and its pair are marked while the
|
|
30174
|
+
field has focus. */
|
|
30175
|
+
"bool:match-brackets"?: (HelixSandboxSource["matchBrackets"]) | undefined;
|
|
30176
|
+
/** Whether the bracket beside the caret and its pair are marked while the
|
|
30177
|
+
field has focus. */
|
|
30178
|
+
"prop:matchBrackets"?: (HelixSandboxSource["matchBrackets"]) | undefined;
|
|
29991
30179
|
/** Which source this pane holds. Every `helix-before-edit` event includes it.
|
|
29992
30180
|
|
|
29993
30181
|
`html` and `css` are what the sandbox root routes on; any other name is
|
|
@@ -29995,6 +30183,14 @@ passed through untouched for a consumer wiring their own panes.
|
|
|
29995
30183
|
|
|
29996
30184
|
Not reflected: nothing selects on it, so it keeps a real default instead. */
|
|
29997
30185
|
"prop:name"?: (HelixSandboxSource["name"]) | undefined;
|
|
30186
|
+
/** Whether the source is read only: it can be selected and copied, and not
|
|
30187
|
+
edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
30188
|
+
that is read only. */
|
|
30189
|
+
"bool:readonly"?: (HelixSandboxSource["readOnly"]) | undefined;
|
|
30190
|
+
/** Whether the source is read only: it can be selected and copied, and not
|
|
30191
|
+
edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
30192
|
+
that is read only. */
|
|
30193
|
+
"prop:readOnly"?: (HelixSandboxSource["readOnly"]) | undefined;
|
|
29998
30194
|
/** Whether Tab indents the source. When it is off, Tab moves focus. */
|
|
29999
30195
|
"bool:tab-indents"?: (HelixSandboxSource["tabIndents"]) | undefined;
|
|
30000
30196
|
/** Whether Tab indents the source. When it is off, Tab moves focus. */
|
|
@@ -32497,6 +32693,13 @@ that should survive its own collapse says how much of itself to keep, and
|
|
|
32497
32693
|
only whoever put it there knows that, which is the same reason `min` is a
|
|
32498
32694
|
consumer's to set. */
|
|
32499
32695
|
collapsedSize?: (HelixSplitter["collapsedSize"]) | undefined;
|
|
32696
|
+
/** Which panes can be collapsed, as Zag's panels each take `collapsible`:
|
|
32697
|
+
`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
|
|
32698
|
+
at the edge without shutting. `Enter` collapses the end pane where only
|
|
32699
|
+
the end pane can be collapsed, and the start pane otherwise.
|
|
32700
|
+
|
|
32701
|
+
Unset is `both`, and the attribute stays absent until you write it. */
|
|
32702
|
+
collapsible?: (HelixSplitter["collapsible"]) | undefined;
|
|
32500
32703
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
32501
32704
|
"corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
32502
32705
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
@@ -32525,6 +32728,18 @@ these words are the whole of where it is. */
|
|
|
32525
32728
|
"default-position"?: (HelixSplitter["defaultPosition"] | `${number}`) | undefined;
|
|
32526
32729
|
/** Where the divider starts, when `position` is not set. */
|
|
32527
32730
|
defaultPosition?: (HelixSplitter["defaultPosition"]) | undefined;
|
|
32731
|
+
/** The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
32732
|
+
a CSS length such as `16rem` resolved against the splitter's box. The
|
|
32733
|
+
divider stops that far from the end, whatever `max` allows, so `min` and
|
|
32734
|
+
`end-min` hold a minimum for each pane, as Zag's panels each take
|
|
32735
|
+
`minSize`. */
|
|
32736
|
+
"end-min"?: (HelixSplitter["endMin"]) | undefined;
|
|
32737
|
+
/** The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
32738
|
+
a CSS length such as `16rem` resolved against the splitter's box. The
|
|
32739
|
+
divider stops that far from the end, whatever `max` allows, so `min` and
|
|
32740
|
+
`end-min` hold a minimum for each pane, as Zag's panels each take
|
|
32741
|
+
`minSize`. */
|
|
32742
|
+
endMin?: (HelixSplitter["endMin"]) | undefined;
|
|
32528
32743
|
/** The divider's name, read by screen readers.
|
|
32529
32744
|
|
|
32530
32745
|
An `aria-label` or `aria-labelledby` on the host names the divider too,
|
|
@@ -32669,6 +32884,13 @@ that should survive its own collapse says how much of itself to keep, and
|
|
|
32669
32884
|
only whoever put it there knows that, which is the same reason `min` is a
|
|
32670
32885
|
consumer's to set. */
|
|
32671
32886
|
"prop:collapsedSize"?: (HelixSplitter["collapsedSize"]) | undefined;
|
|
32887
|
+
/** Which panes can be collapsed, as Zag's panels each take `collapsible`:
|
|
32888
|
+
`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
|
|
32889
|
+
at the edge without shutting. `Enter` collapses the end pane where only
|
|
32890
|
+
the end pane can be collapsed, and the start pane otherwise.
|
|
32891
|
+
|
|
32892
|
+
Unset is `both`, and the attribute stays absent until you write it. */
|
|
32893
|
+
"prop:collapsible"?: (HelixSplitter["collapsible"]) | undefined;
|
|
32672
32894
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
32673
32895
|
"attr:corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
|
|
32674
32896
|
/** The name of the handle where two dividers cross, read by screen readers. */
|
|
@@ -32697,6 +32919,18 @@ these words are the whole of where it is. */
|
|
|
32697
32919
|
"attr:default-position"?: (HelixSplitter["defaultPosition"] | `${number}`) | undefined;
|
|
32698
32920
|
/** Where the divider starts, when `position` is not set. */
|
|
32699
32921
|
"prop:defaultPosition"?: (HelixSplitter["defaultPosition"]) | undefined;
|
|
32922
|
+
/** The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
32923
|
+
a CSS length such as `16rem` resolved against the splitter's box. The
|
|
32924
|
+
divider stops that far from the end, whatever `max` allows, so `min` and
|
|
32925
|
+
`end-min` hold a minimum for each pane, as Zag's panels each take
|
|
32926
|
+
`minSize`. */
|
|
32927
|
+
"attr:end-min"?: (HelixSplitter["endMin"]) | undefined;
|
|
32928
|
+
/** The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
32929
|
+
a CSS length such as `16rem` resolved against the splitter's box. The
|
|
32930
|
+
divider stops that far from the end, whatever `max` allows, so `min` and
|
|
32931
|
+
`end-min` hold a minimum for each pane, as Zag's panels each take
|
|
32932
|
+
`minSize`. */
|
|
32933
|
+
"prop:endMin"?: (HelixSplitter["endMin"]) | undefined;
|
|
32700
32934
|
/** The divider's name, read by screen readers.
|
|
32701
32935
|
|
|
32702
32936
|
An `aria-label` or `aria-labelledby` on the host names the divider too,
|
|
@@ -37040,6 +37274,18 @@ imperatively later, and nothing is hydrating by then.
|
|
|
37040
37274
|
|
|
37041
37275
|
Here rather than on each control. */
|
|
37042
37276
|
name?: (HelixTimePicker["name"]) | undefined;
|
|
37277
|
+
/** What each time in the list shows: a function given the time as `HH:mm`,
|
|
37278
|
+
or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
|
|
37279
|
+
returns text, an element or a Lit template.
|
|
37280
|
+
|
|
37281
|
+
For the seats left at a time, or a caption under it, as React Aria's
|
|
37282
|
+
`ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
|
|
37283
|
+
or `slot="description"` goes to that slot of the row, and a description
|
|
37284
|
+
is read after the time. The row is still named by the written time, and
|
|
37285
|
+
typeahead still finds it by that. Return the written time with your
|
|
37286
|
+
content where it should still show. A property only, there being no way
|
|
37287
|
+
to write a function in markup. The wheels draw their own figures. */
|
|
37288
|
+
timeContent?: (HelixTimePicker["timeContent"]) | undefined;
|
|
37043
37289
|
/** The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
|
|
37044
37290
|
|
|
37045
37291
|
The platform's own pair on `<input type="time">`, epoch day included: a time
|
|
@@ -37376,6 +37622,18 @@ imperatively later, and nothing is hydrating by then.
|
|
|
37376
37622
|
|
|
37377
37623
|
Here rather than on each control. */
|
|
37378
37624
|
"prop:name"?: (HelixTimePicker["name"]) | undefined;
|
|
37625
|
+
/** What each time in the list shows: a function given the time as `HH:mm`,
|
|
37626
|
+
or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
|
|
37627
|
+
returns text, an element or a Lit template.
|
|
37628
|
+
|
|
37629
|
+
For the seats left at a time, or a caption under it, as React Aria's
|
|
37630
|
+
`ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
|
|
37631
|
+
or `slot="description"` goes to that slot of the row, and a description
|
|
37632
|
+
is read after the time. The row is still named by the written time, and
|
|
37633
|
+
typeahead still finds it by that. Return the written time with your
|
|
37634
|
+
content where it should still show. A property only, there being no way
|
|
37635
|
+
to write a function in markup. The wheels draw their own figures. */
|
|
37636
|
+
"prop:timeContent"?: (HelixTimePicker["timeContent"]) | undefined;
|
|
37379
37637
|
/** The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
|
|
37380
37638
|
|
|
37381
37639
|
The platform's own pair on `<input type="time">`, epoch day included: a time
|
|
@@ -37523,6 +37781,13 @@ they run down it. */
|
|
|
37523
37781
|
orientation?: (HelixTimeline["orientation"]) | undefined;
|
|
37524
37782
|
/** Accessible name for the timeline, for people who reach it out of context. */
|
|
37525
37783
|
label?: (HelixTimeline["label"]) | undefined;
|
|
37784
|
+
/** Marks the timeline as busy fetching more entries, and draws an entry
|
|
37785
|
+
after the last that says so. */
|
|
37786
|
+
loading?: (HelixTimeline["loading"]) | undefined;
|
|
37787
|
+
/** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
|
|
37788
|
+
"loading-label"?: (HelixTimeline["loadingLabel"]) | undefined;
|
|
37789
|
+
/** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
|
|
37790
|
+
loadingLabel?: (HelixTimeline["loadingLabel"]) | undefined;
|
|
37526
37791
|
};
|
|
37527
37792
|
|
|
37528
37793
|
export type HelixTimelineSolidJsProps = {
|
|
@@ -37537,6 +37802,13 @@ they run down it. */
|
|
|
37537
37802
|
"prop:orientation"?: (HelixTimeline["orientation"]) | undefined;
|
|
37538
37803
|
/** Accessible name for the timeline, for people who reach it out of context. */
|
|
37539
37804
|
"prop:label"?: (HelixTimeline["label"]) | undefined;
|
|
37805
|
+
/** Marks the timeline as busy fetching more entries, and draws an entry
|
|
37806
|
+
after the last that says so. */
|
|
37807
|
+
"prop:loading"?: (HelixTimeline["loading"]) | undefined;
|
|
37808
|
+
/** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
|
|
37809
|
+
"attr:loading-label"?: (HelixTimeline["loadingLabel"]) | undefined;
|
|
37810
|
+
/** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
|
|
37811
|
+
"prop:loadingLabel"?: (HelixTimeline["loadingLabel"]) | undefined;
|
|
37540
37812
|
|
|
37541
37813
|
/** Set the innerHTML of the element */
|
|
37542
37814
|
innerHTML?: (string) | undefined;
|
|
@@ -41241,12 +41513,18 @@ export type HelixVirtualListElementEvent<E = Event> = TypedEvent<
|
|
|
41241
41513
|
/** `helix-before-change` event type */
|
|
41242
41514
|
export type HelixVirtualListHelixBeforeChangeElementEvent =
|
|
41243
41515
|
HelixVirtualListElementEvent<HelixBeforeChangeEvent>;
|
|
41516
|
+
/** `helix-before-reorder` event type */
|
|
41517
|
+
export type HelixVirtualListHelixBeforeReorderElementEvent =
|
|
41518
|
+
HelixVirtualListElementEvent<HelixBeforeReorderEvent>;
|
|
41244
41519
|
/** `helix-load-more` event type */
|
|
41245
41520
|
export type HelixVirtualListHelixLoadMoreElementEvent =
|
|
41246
41521
|
HelixVirtualListElementEvent<HelixLoadMoreEvent>;
|
|
41247
41522
|
/** `helix-range-change` event type */
|
|
41248
41523
|
export type HelixVirtualListHelixRangeChangeElementEvent =
|
|
41249
41524
|
HelixVirtualListElementEvent<HelixRangeChangeEvent>;
|
|
41525
|
+
/** `helix-reorder` event type */
|
|
41526
|
+
export type HelixVirtualListHelixReorderElementEvent =
|
|
41527
|
+
HelixVirtualListElementEvent<HelixReorderEvent>;
|
|
41250
41528
|
|
|
41251
41529
|
export type HelixVirtualListProps = {
|
|
41252
41530
|
/** How many items a line holds. One, the default, is a list; more lays the
|
|
@@ -41326,6 +41604,13 @@ and scrolls it sideways: Left and Right move between items, the other
|
|
|
41326
41604
|
way round on a right-to-left page, and `estimate` is an item's width. A
|
|
41327
41605
|
grid always runs down. */
|
|
41328
41606
|
orientation?: (HelixVirtualList["orientation"]) | undefined;
|
|
41607
|
+
/** Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
|
|
41608
|
+
(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
|
|
41609
|
+
with an arrow moves the row the keys are on, and a pointer drags a row.
|
|
41610
|
+
The list moves no item itself: you move your `items` on `helix-reorder`.
|
|
41611
|
+
Without that import it does nothing, so a list that never moves items
|
|
41612
|
+
carries none of the code. A list of one column, without sections. */
|
|
41613
|
+
reorderable?: (HelixVirtualList["reorderable"]) | undefined;
|
|
41329
41614
|
/** The field of each item that names its section, as a key or a path of
|
|
41330
41615
|
keys. Set, the items are drawn in sections: a header, then the items, in
|
|
41331
41616
|
an element with the `group` role that the header names. A section starts
|
|
@@ -41391,12 +41676,18 @@ it is unset, the header is the name as text. */
|
|
|
41391
41676
|
"onhelix-before-change"?: ((
|
|
41392
41677
|
e: HelixVirtualListHelixBeforeChangeElementEvent,
|
|
41393
41678
|
) => void) | undefined;
|
|
41679
|
+
/** Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is. */
|
|
41680
|
+
"onhelix-before-reorder"?: ((
|
|
41681
|
+
e: HelixVirtualListHelixBeforeReorderElementEvent,
|
|
41682
|
+
) => void) | undefined;
|
|
41394
41683
|
/** Fired when a reader comes within one screen of the last item, once for each length of the set. */
|
|
41395
41684
|
"onhelix-load-more"?: ((e: HelixVirtualListHelixLoadMoreElementEvent) => void) | undefined;
|
|
41396
41685
|
/** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
|
|
41397
41686
|
"onhelix-range-change"?: ((
|
|
41398
41687
|
e: HelixVirtualListHelixRangeChangeElementEvent,
|
|
41399
41688
|
) => void) | undefined;
|
|
41689
|
+
/** Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
|
|
41690
|
+
"onhelix-reorder"?: ((e: HelixVirtualListHelixReorderElementEvent) => void) | undefined;
|
|
41400
41691
|
};
|
|
41401
41692
|
|
|
41402
41693
|
export type HelixVirtualListSolidJsProps = {
|
|
@@ -41477,6 +41768,13 @@ and scrolls it sideways: Left and Right move between items, the other
|
|
|
41477
41768
|
way round on a right-to-left page, and `estimate` is an item's width. A
|
|
41478
41769
|
grid always runs down. */
|
|
41479
41770
|
"prop:orientation"?: (HelixVirtualList["orientation"]) | undefined;
|
|
41771
|
+
/** Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
|
|
41772
|
+
(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
|
|
41773
|
+
with an arrow moves the row the keys are on, and a pointer drags a row.
|
|
41774
|
+
The list moves no item itself: you move your `items` on `helix-reorder`.
|
|
41775
|
+
Without that import it does nothing, so a list that never moves items
|
|
41776
|
+
carries none of the code. A list of one column, without sections. */
|
|
41777
|
+
"prop:reorderable"?: (HelixVirtualList["reorderable"]) | undefined;
|
|
41480
41778
|
/** The field of each item that names its section, as a key or a path of
|
|
41481
41779
|
keys. Set, the items are drawn in sections: a header, then the items, in
|
|
41482
41780
|
an element with the `group` role that the header names. A section starts
|
|
@@ -41541,12 +41839,18 @@ it is unset, the header is the name as text. */
|
|
|
41541
41839
|
"on:helix-before-change"?: ((
|
|
41542
41840
|
e: HelixVirtualListHelixBeforeChangeElementEvent,
|
|
41543
41841
|
) => void) | undefined;
|
|
41842
|
+
/** Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is. */
|
|
41843
|
+
"on:helix-before-reorder"?: ((
|
|
41844
|
+
e: HelixVirtualListHelixBeforeReorderElementEvent,
|
|
41845
|
+
) => void) | undefined;
|
|
41544
41846
|
/** Fired when a reader comes within one screen of the last item, once for each length of the set. */
|
|
41545
41847
|
"on:helix-load-more"?: ((e: HelixVirtualListHelixLoadMoreElementEvent) => void) | undefined;
|
|
41546
41848
|
/** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
|
|
41547
41849
|
"on:helix-range-change"?: ((
|
|
41548
41850
|
e: HelixVirtualListHelixRangeChangeElementEvent,
|
|
41549
41851
|
) => void) | undefined;
|
|
41852
|
+
/** Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
|
|
41853
|
+
"on:helix-reorder"?: ((e: HelixVirtualListHelixReorderElementEvent) => void) | undefined;
|
|
41550
41854
|
|
|
41551
41855
|
/** Set the innerHTML of the element */
|
|
41552
41856
|
innerHTML?: (string) | undefined;
|
|
@@ -43789,6 +44093,8 @@ export type CustomElements = {
|
|
|
43789
44093
|
* separate actions. The semantics and the joining are separate questions:
|
|
43790
44094
|
* `role="group"` and a shared name are what make a set of buttons a set, and
|
|
43791
44095
|
* `helix-flex` gives the spacing without the group.
|
|
44096
|
+
* - `disabled`: Disables every button in the group, and says so on the group with
|
|
44097
|
+
* `aria-disabled`. Reflected, so a stylesheet can select on it.
|
|
43792
44098
|
* - `disallow-empty-selection`/`disallowEmptySelection`: Keeps at least one button pressed once one is, as React Aria's
|
|
43793
44099
|
* `disallowEmptySelection`: a press that would leave none pressed is
|
|
43794
44100
|
* refused.
|
|
@@ -43823,6 +44129,8 @@ export type CustomElements = {
|
|
|
43823
44129
|
*
|
|
43824
44130
|
* The attribute is the seed, and a press changes the property, which does
|
|
43825
44131
|
* not reflect, as a native control's `value` does not.
|
|
44132
|
+
* - `values`: The pressed values as a list, in a selection mode, and an empty list
|
|
44133
|
+
* otherwise. Written, it presses exactly those buttons. (property only)
|
|
43826
44134
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
43827
44135
|
*
|
|
43828
44136
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -44727,6 +45035,8 @@ export type CustomElements = {
|
|
|
44727
45035
|
* Third", rather than with a comma this component chose.
|
|
44728
45036
|
* - `linked-label`/`linkedLabel`: The text read with a card that has connections both ways. `{leadsTo}` is
|
|
44729
45037
|
* `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in.
|
|
45038
|
+
* - `loading`: Marks the board as busy while its document arrives: the board is
|
|
45039
|
+
* `aria-busy`, and the `loading` slot is shown.
|
|
44730
45040
|
* - `moved-label`/`movedLabel`: What screen readers hear after a key moves a card, with `{name}` for the
|
|
44731
45041
|
* card and `{x}` and `{y}` for where it now is, in the document's units.
|
|
44732
45042
|
*
|
|
@@ -44892,6 +45202,7 @@ export type CustomElements = {
|
|
|
44892
45202
|
* - `footer`: Content below the board.
|
|
44893
45203
|
* - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
|
|
44894
45204
|
* - `header`: Content above the board.
|
|
45205
|
+
* - `loading`: Content shown while `loading` is set, such as a progress bar while the document arrives.
|
|
44895
45206
|
* - `pan-down-icon`: Replaces the glyph inside the pan down button.
|
|
44896
45207
|
* - `pan-end-icon`: Replaces the glyph inside the button that pans toward the end of a line of text.
|
|
44897
45208
|
* - `pan-start-icon`: Replaces the glyph inside the button that pans toward the start of a line of text.
|
|
@@ -45014,6 +45325,7 @@ export type CustomElements = {
|
|
|
45014
45325
|
* - `fullscreen`: While the board fills the screen.
|
|
45015
45326
|
* - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
|
|
45016
45327
|
* - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
|
|
45328
|
+
* - `loading`: While `loading` is set.
|
|
45017
45329
|
* - `pressing`: While a press on the board, its cards or its connections is under way.
|
|
45018
45330
|
* - `sharing`: The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a board with `gestures="activate"` waits to be pressed.
|
|
45019
45331
|
* - `using`: A board with `gestures="activate"` has been pressed and has the gestures.
|
|
@@ -48314,6 +48626,15 @@ export type CustomElements = {
|
|
|
48314
48626
|
* Defaulted rather than left empty. An icon-only control must be named, and
|
|
48315
48627
|
* the name of this one is not a judgment call: every copy button in the
|
|
48316
48628
|
* world is called Copy. A consumer with a better word still sets it.
|
|
48629
|
+
* - `show-label`/`showLabel`: Draws the name as words beside the icon, and the result in their place
|
|
48630
|
+
* after a press. The button stays as wide as the longest of them.
|
|
48631
|
+
* - `tooltip`: When the tooltip shows: `full` on hover and focus and after a press,
|
|
48632
|
+
* `copy` only after a press, to show the result, and `none` never, for a
|
|
48633
|
+
* button whose result shows another way, such as under `show-label`.
|
|
48634
|
+
*
|
|
48635
|
+
* Unset is `full`, and the attribute stays absent until you write it.
|
|
48636
|
+
* - `tooltip-placement`/`tooltipPlacement`: The side the tooltip prefers. It moves to another side where this one
|
|
48637
|
+
* does not fit.
|
|
48317
48638
|
* - `value`: The text copied to the clipboard.
|
|
48318
48639
|
*
|
|
48319
48640
|
* It replaces `Button.value`, the submit value: a copy button never submits,
|
|
@@ -48497,6 +48818,7 @@ export type CustomElements = {
|
|
|
48497
48818
|
* - `live`: The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
|
|
48498
48819
|
* - `mark`: The clipboard icon, and the confirmation icon that replaces it.
|
|
48499
48820
|
* - `spinner`: The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
|
|
48821
|
+
* - `text`: The words beside the icon, under `show-label`. It holds all three, `label`, `copied-label` and `error-label`, with all but the current one hidden.
|
|
48500
48822
|
* - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
|
|
48501
48823
|
* - `tooltip-arrow`: The tooltip's arrow, which points at the button.
|
|
48502
48824
|
* - `tooltip-arrow-bottom`: The arrow while the bubble is below the button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
@@ -52644,6 +52966,9 @@ export type CustomElements = {
|
|
|
52644
52966
|
* - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
|
|
52645
52967
|
* - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
|
|
52646
52968
|
* - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
|
|
52969
|
+
* - `loading`: Marks the graph as busy while its notes arrive: the list is `aria-busy`,
|
|
52970
|
+
* and the panel says so where it holds no notes yet.
|
|
52971
|
+
* - `loading-label`/`loadingLabel`: What the panel says while `loading` is set and the list holds no notes.
|
|
52647
52972
|
* - `moved-down-label`/`movedDownLabel`: What screen readers hear once the drawing has moved down, after `moved()`.
|
|
52648
52973
|
* - `moved-left-label`/`movedLeftLabel`: What screen readers hear once the drawing has moved left, after `moved()`.
|
|
52649
52974
|
* - `moved-right-label`/`movedRightLabel`: What screen readers hear once the drawing has moved right, after `moved()`.
|
|
@@ -52666,6 +52991,15 @@ export type CustomElements = {
|
|
|
52666
52991
|
* - `hiddenGroups`: The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. (property only)
|
|
52667
52992
|
* - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
|
|
52668
52993
|
* - `nodes`: The notes. A property, never an attribute. (property only)
|
|
52994
|
+
* - `noteContent`: What each note's row in the list shows in place of its name: a function
|
|
52995
|
+
* given the note that returns text, an element or a Lit template.
|
|
52996
|
+
*
|
|
52997
|
+
* For an icon by its kind, or a date under its name, as React Aria's
|
|
52998
|
+
* `ListBoxItem` takes children. The row is still named by the note's name,
|
|
52999
|
+
* which typeahead and the search find it by, and described by how it stands
|
|
53000
|
+
* to the selected note. Return the name with your content where it should
|
|
53001
|
+
* still show. A property only, there being no way to write a function in
|
|
53002
|
+
* markup. (property only)
|
|
52669
53003
|
* - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (property only) (readonly)
|
|
52670
53004
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
52671
53005
|
*
|
|
@@ -52712,6 +53046,7 @@ export type CustomElements = {
|
|
|
52712
53046
|
* - `footer`: Content below the graph.
|
|
52713
53047
|
* - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
|
|
52714
53048
|
* - `header`: Content above the graph.
|
|
53049
|
+
* - `loading`: What the panel shows while `loading` is set and the list holds no notes. Defaults to `loading-label`.
|
|
52715
53050
|
* - `pan-down-icon`: Replaces the glyph inside the pan down button.
|
|
52716
53051
|
* - `pan-end-icon`: Replaces the glyph inside the button that pans toward the end of a line of text.
|
|
52717
53052
|
* - `pan-start-icon`: Replaces the glyph inside the button that pans toward the start of a line of text.
|
|
@@ -52803,6 +53138,7 @@ export type CustomElements = {
|
|
|
52803
53138
|
* - `legend-swatch`: The mark in a group's color, before its name.
|
|
52804
53139
|
* - `list`: The list of notes, which draws only the rows in view.
|
|
52805
53140
|
* - `live`: What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
|
|
53141
|
+
* - `loading`: The box in place of the list while `loading` is set and it holds no notes, holding the `loading` slot.
|
|
52806
53142
|
* - `note`: One note in the list.
|
|
52807
53143
|
* - `note-cursor`: The note the keyboard is on in the list.
|
|
52808
53144
|
* - `note-linked`: A note linked to or from the selected one.
|
|
@@ -52830,6 +53166,7 @@ export type CustomElements = {
|
|
|
52830
53166
|
* - `empty`: The list holds no notes: the graph has none, or a search or the groups hid them all.
|
|
52831
53167
|
* - `fullscreen`: The graph fills the screen.
|
|
52832
53168
|
* - `idle`: The user has been still long enough for the header and footer to fade.
|
|
53169
|
+
* - `loading`: While `loading` is set.
|
|
52833
53170
|
* - `local`: The drawing shows the selected note's local graph, with `depth`.
|
|
52834
53171
|
* - `panel-open`: A graph with `no-panel` has the search and the list open over the drawing.
|
|
52835
53172
|
* - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
|
|
@@ -55415,7 +55752,8 @@ export type CustomElements = {
|
|
|
55415
55752
|
* itself.
|
|
55416
55753
|
* - `value`: The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
|
|
55417
55754
|
*
|
|
55418
|
-
*
|
|
55755
|
+
* A press or a key writes it in row order, as Data Table does, whatever
|
|
55756
|
+
* order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
|
|
55419
55757
|
* words where it has none.
|
|
55420
55758
|
* - `rows`: The rows the list holds, in order. (property only) (readonly)
|
|
55421
55759
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -59436,10 +59774,18 @@ export type CustomElements = {
|
|
|
59436
59774
|
*
|
|
59437
59775
|
* The orb is styled only and has behavior, which the tier split does not
|
|
59438
59776
|
* otherwise allow. Its role, name and busy state follow `state`, unless
|
|
59439
|
-
* `announce` makes it a status region, and the rest
|
|
59440
|
-
*
|
|
59441
|
-
*
|
|
59442
|
-
*
|
|
59777
|
+
* `announce` makes it a status region, and the rest is drawing dots to a
|
|
59778
|
+
* canvas.
|
|
59779
|
+
*
|
|
59780
|
+
* **A shape of your own goes in the default slot**, such as an SVG, an
|
|
59781
|
+
* image, or an animation. The orb draws it over its box in place of the dots
|
|
59782
|
+
* and stops drawing them, and keeps its role, name, busy state and custom
|
|
59783
|
+
* states, so your stylesheet can change what you slotted by state, such as
|
|
59784
|
+
* `helix-orb:state(working) svg { animation-duration: 1s }`. What you slot is
|
|
59785
|
+
* for the eye: a screen reader hears the orb's name.
|
|
59786
|
+
*
|
|
59787
|
+
* `--orb-speed` scales how fast the dots move, so `0.5` is a calmer orb at
|
|
59788
|
+
* half the tempo.
|
|
59443
59789
|
*
|
|
59444
59790
|
* Each state is also a custom state, such as `:state(thinking)` or
|
|
59445
59791
|
* `:state(done)`, so a page can style what sits around an orb by what it shows,
|
|
@@ -59521,6 +59867,12 @@ export type CustomElements = {
|
|
|
59521
59867
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
59522
59868
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
59523
59869
|
*
|
|
59870
|
+
* ## Slots
|
|
59871
|
+
*
|
|
59872
|
+
* Areas where markup can be added to the component.
|
|
59873
|
+
*
|
|
59874
|
+
* - `(default)`: A shape of your own, drawn over the orb's box in place of the dots.
|
|
59875
|
+
*
|
|
59524
59876
|
* ## CSS Custom Properties
|
|
59525
59877
|
*
|
|
59526
59878
|
* CSS variables available for styling the component.
|
|
@@ -59528,12 +59880,13 @@ export type CustomElements = {
|
|
|
59528
59880
|
* - `--orb-color`: The color of the nearest dots. Defaults to `currentColor`.
|
|
59529
59881
|
* - `--orb-ground`: The color the farthest dots fade toward. Defaults to the page's background.
|
|
59530
59882
|
* - `--orb-size`: The diameter. Overrides `size`.
|
|
59883
|
+
* - `--orb-speed`: How fast the dots move, as a multiple of each state's own tempo. Defaults to `1`.
|
|
59531
59884
|
*
|
|
59532
59885
|
* ## CSS Parts
|
|
59533
59886
|
*
|
|
59534
59887
|
* Custom selectors for styling elements within the component.
|
|
59535
59888
|
*
|
|
59536
|
-
* - `canvas`: The canvas the dots are drawn on.
|
|
59889
|
+
* - `canvas`: The canvas the dots are drawn on. Hidden while the default slot holds a shape.
|
|
59537
59890
|
* - `live`: The word for the state, which the orb says as it changes when `announce` is set. Rendered only then, and clipped out of view.
|
|
59538
59891
|
*
|
|
59539
59892
|
* ## CSS States
|
|
@@ -59597,6 +59950,9 @@ export type CustomElements = {
|
|
|
59597
59950
|
* box the sections scroll in.
|
|
59598
59951
|
* - `label`: The navigation's name, read by screen readers. A heading in the `heading`
|
|
59599
59952
|
* slot names it in place of this.
|
|
59953
|
+
* - `marks`: Which links are marked. `reading` marks the one section being read, the
|
|
59954
|
+
* last whose heading has passed the reading line. `visible` marks every
|
|
59955
|
+
* section with part of it on screen, and the mark runs across their links.
|
|
59600
59956
|
* - `offset`: How far below the top of the scroll container a heading counts as reached,
|
|
59601
59957
|
* in pixels. The scroll container is the window or the panel the sections
|
|
59602
59958
|
* scroll in.
|
|
@@ -59612,6 +59968,9 @@ export type CustomElements = {
|
|
|
59612
59968
|
* writable property in this library that a component also writes is state a
|
|
59613
59969
|
* consumer can own; this one cannot be, and saying so with the type is better
|
|
59614
59970
|
* than saying it in a sentence nobody reads. (property only) (readonly)
|
|
59971
|
+
* - `marked`: The ids of the sections whose links are marked, in page order: the one
|
|
59972
|
+
* `current` names, or under `marks="visible"` every section on screen.
|
|
59973
|
+
* Read-only, for the reason `current` gives. (property only) (readonly)
|
|
59615
59974
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
59616
59975
|
*
|
|
59617
59976
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -59647,6 +60006,14 @@ export type CustomElements = {
|
|
|
59647
60006
|
* - `heading`: A heading above the links, such as "On this page". It names the navigation.
|
|
59648
60007
|
* - `indicator`: A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
|
|
59649
60008
|
*
|
|
60009
|
+
* ## Methods
|
|
60010
|
+
*
|
|
60011
|
+
* Methods that can be called to access component functionality.
|
|
60012
|
+
*
|
|
60013
|
+
* - `scrollToSection(id: string) => boolean`: Scrolls to the section with this id, as a press on its link does, with
|
|
60014
|
+
* `behavior`, and marks its link at once. The address and focus stay where
|
|
60015
|
+
* they are. Returns whether the outline has a link to that section.
|
|
60016
|
+
*
|
|
59650
60017
|
* ## CSS Custom Properties
|
|
59651
60018
|
*
|
|
59652
60019
|
* CSS variables available for styling the component.
|
|
@@ -61719,6 +62086,16 @@ export type CustomElements = {
|
|
|
61719
62086
|
* since a browser reads one only as a document starts. A `src` document
|
|
61720
62087
|
* declares its own.
|
|
61721
62088
|
*
|
|
62089
|
+
* **`dependencies` names packages by version instead**, as a `package.json`
|
|
62090
|
+
* does: `{"canvas-confetti": "^1.9"}` loads `canvas-confetti` and the paths
|
|
62091
|
+
* under it from `cdn`, `https://esm.sh/` by default, at the version or range
|
|
62092
|
+
* given. An address in `imports` wins over a package of the same name.
|
|
62093
|
+
*
|
|
62094
|
+
* **`modules` holds files the example imports by a relative path**: each path,
|
|
62095
|
+
* such as `utils.js`, to its source, and `import { add } from './utils.js'`
|
|
62096
|
+
* in the `js` pane or in another module loads it. A sandbox writes each pane
|
|
62097
|
+
* named for a module file here.
|
|
62098
|
+
*
|
|
61722
62099
|
* **Examples render in a frame**, so an example's styles and scripts do not
|
|
61723
62100
|
* affect the page around the sandbox, and `position: fixed` stays inside the
|
|
61724
62101
|
* pane. The frame starts empty, with its own stylesheets and its own custom
|
|
@@ -61739,8 +62116,9 @@ export type CustomElements = {
|
|
|
61739
62116
|
*
|
|
61740
62117
|
* **A failed preview shows the error over the example**, in the `error` part,
|
|
61741
62118
|
* until the next source is sent. The terminal says it too, so the part is not
|
|
61742
|
-
* announced
|
|
61743
|
-
*
|
|
62119
|
+
* announced, and it is the frame's description while it shows, so a screen
|
|
62120
|
+
* reader reads it with the frame. Hide it with `::part(error) { display: none }`
|
|
62121
|
+
* where the page draws its own.
|
|
61744
62122
|
*
|
|
61745
62123
|
* **`controls` draws two buttons in the preview's corner**: one reloads the
|
|
61746
62124
|
* frame's document, as `reload()` does, and one opens the example in a new
|
|
@@ -61750,6 +62128,8 @@ export type CustomElements = {
|
|
|
61750
62128
|
*
|
|
61751
62129
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
61752
62130
|
*
|
|
62131
|
+
* - `cdn`: The address the packages in `dependencies` load from, which the name, an
|
|
62132
|
+
* `@` and the version follow.
|
|
61753
62133
|
* - `color-mode`/`colorMode`: The color mode the frame renders in.
|
|
61754
62134
|
*
|
|
61755
62135
|
* **The frame is a document and a document has its own color mode.** Setting
|
|
@@ -61765,6 +62145,10 @@ export type CustomElements = {
|
|
|
61765
62145
|
* including every one of the 24 series colors a chart reads.
|
|
61766
62146
|
* - `controls`: Whether the preview draws a reload button and a button that opens the
|
|
61767
62147
|
* example in a new tab, in its corner.
|
|
62148
|
+
* - `dependencies`: The npm packages an example can import by name in the built-in document,
|
|
62149
|
+
* each name to a version or a range, as a `package.json` lists them. Each
|
|
62150
|
+
* loads from `cdn`. Set it as JSON in the attribute or as an object. Not
|
|
62151
|
+
* read where `src` is set.
|
|
61768
62152
|
* - `direction`: Writing direction inside the frame.
|
|
61769
62153
|
*
|
|
61770
62154
|
* Not reflected. It is payload for the render message and nothing selects on
|
|
@@ -61787,6 +62171,9 @@ export type CustomElements = {
|
|
|
61787
62171
|
* Not reflected, for `direction`'s reason: the placement is applied by the
|
|
61788
62172
|
* document inside the frame, against its own root, so no rule on this side
|
|
61789
62173
|
* could read it.
|
|
62174
|
+
* - `modules`: Module files an example imports by a relative path in the built-in
|
|
62175
|
+
* document, each path, such as `utils.js`, to its source. Not read where
|
|
62176
|
+
* `src` is set.
|
|
61790
62177
|
* - `open-label`/`openLabel`: The name of the button that opens the example in a new tab, under
|
|
61791
62178
|
* `controls`.
|
|
61792
62179
|
* - `reload-label`/`reloadLabel`: The name of the button that reloads the frame's document, under
|
|
@@ -61885,10 +62272,22 @@ export type CustomElements = {
|
|
|
61885
62272
|
* milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
|
|
61886
62273
|
*
|
|
61887
62274
|
* The event carries the pane's `name`, so one sandbox can hold several panes.
|
|
61888
|
-
*
|
|
61889
|
-
*
|
|
61890
|
-
*
|
|
61891
|
-
*
|
|
62275
|
+
* The names the sandbox writes into its previews:
|
|
62276
|
+
*
|
|
62277
|
+
* - `html` sets the preview's markup.
|
|
62278
|
+
* - `css` sets its stylesheet.
|
|
62279
|
+
* - `js` sets a script that runs as a module after the markup.
|
|
62280
|
+
* - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
|
|
62281
|
+
* module the other scripts import by its path, `./utils.js`.
|
|
62282
|
+
* - `package.json` sets the npm packages the scripts import by name, from its
|
|
62283
|
+
* `dependencies`, which load from the preview's `cdn`.
|
|
62284
|
+
*
|
|
62285
|
+
* The sandbox ignores a pane with any other name, so that pane can show
|
|
62286
|
+
* content without changing the preview.
|
|
62287
|
+
*
|
|
62288
|
+
* **The sandbox is `:state(modified)` while a source pane holds an edit**, and
|
|
62289
|
+
* that pane's file tab is also `file-modified` and described as modified to
|
|
62290
|
+
* a screen reader. `reset()` puts every pane back to the source it was given.
|
|
61892
62291
|
*
|
|
61893
62292
|
* **The dividers are two nested `helix-splitter` elements**, which handle the
|
|
61894
62293
|
* pointer, the keyboard, and the corner. The inner splitter holds the panes and
|
|
@@ -61963,6 +62362,8 @@ export type CustomElements = {
|
|
|
61963
62362
|
*
|
|
61964
62363
|
* `split` follows the lead pane rather than the source, so `split="30"` means
|
|
61965
62364
|
* the same thing in both directions: thirty percent to whatever comes first.
|
|
62365
|
+
* - `modified-label`/`modifiedLabel`: The description of a file tab whose pane holds an edit, read by screen
|
|
62366
|
+
* readers after the file's name.
|
|
61966
62367
|
* - `orientation`: Whether the panes sit side by side or stacked.
|
|
61967
62368
|
*
|
|
61968
62369
|
* Not reflected, for `lead`'s reason above: no rule selects on it. The axis
|
|
@@ -62040,6 +62441,15 @@ export type CustomElements = {
|
|
|
62040
62441
|
* - `status`: A status bar, spanning both panes at the bottom.
|
|
62041
62442
|
* - `toolbar`: A bar across the top, spanning both panes.
|
|
62042
62443
|
*
|
|
62444
|
+
* ## Methods
|
|
62445
|
+
*
|
|
62446
|
+
* Methods that can be called to access component functionality.
|
|
62447
|
+
*
|
|
62448
|
+
* - `reset() => void`: Puts every source pane back to the source it was given: through the
|
|
62449
|
+
* pane's own `reset()` where it has one, which sends an edit the previews
|
|
62450
|
+
* take, and otherwise by setting its `value` and writing it into the
|
|
62451
|
+
* previews.
|
|
62452
|
+
*
|
|
62043
62453
|
* ## CSS Custom Properties
|
|
62044
62454
|
*
|
|
62045
62455
|
* CSS variables available for styling the component.
|
|
@@ -62055,6 +62465,7 @@ export type CustomElements = {
|
|
|
62055
62465
|
* - `body`: The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
|
|
62056
62466
|
* - `corner`: The handle where the two dividers cross.
|
|
62057
62467
|
* - `file`: One file tab, `aria-selected` while its pane is shown.
|
|
62468
|
+
* - `file-modified`: A file tab whose pane holds an edit.
|
|
62058
62469
|
* - `files`: The file tabs over the source panes, where there are several.
|
|
62059
62470
|
* - `pane`: Either pane.
|
|
62060
62471
|
* - `panel`: The box that holds the slotted panel.
|
|
@@ -62065,6 +62476,7 @@ export type CustomElements = {
|
|
|
62065
62476
|
*
|
|
62066
62477
|
* These can be used to apply styling when a component is in a given state.
|
|
62067
62478
|
*
|
|
62479
|
+
* - `modified`: While a source pane holds an edit, until `reset()`.
|
|
62068
62480
|
* - `panel-collapsed`: While there is a panel and it is no taller than `panel-collapsed-size`.
|
|
62069
62481
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
62070
62482
|
*/
|
|
@@ -62096,8 +62508,37 @@ export type CustomElements = {
|
|
|
62096
62508
|
* that wraps keeps one number. The numbers are drawn, and hidden from screen
|
|
62097
62509
|
* readers, which read the field.
|
|
62098
62510
|
*
|
|
62099
|
-
* Enter keeps the indentation of the line it breaks,
|
|
62100
|
-
*
|
|
62511
|
+
* Enter keeps the indentation of the line it breaks, one level deeper after
|
|
62512
|
+
* an opening bracket, and puts the closing bracket of an empty pair on a line
|
|
62513
|
+
* of its own. The new line is undone with the next undo as typing is.
|
|
62514
|
+
*
|
|
62515
|
+
* **The editing keys are CodeMirror's.** Tab with text selected indents every
|
|
62516
|
+
* line the selection touches. `Mod+]` indents the lines and `Mod+[` outdents
|
|
62517
|
+
* them, and `Mod+/` comments them out or back in: `//` in a `js` pane, and one
|
|
62518
|
+
* block comment in an `html` or `css` pane. `Mod` is Command on a Mac and
|
|
62519
|
+
* Control elsewhere. Each is one step of undo.
|
|
62520
|
+
*
|
|
62521
|
+
* **`close-brackets` closes brackets and quotes** as you type them: `(`, `[`,
|
|
62522
|
+
* `{` and the three quotes. A closing character typed before the same one
|
|
62523
|
+
* steps over it, Backspace between an empty pair deletes both, and a bracket
|
|
62524
|
+
* typed with text selected goes around the text. **`match-brackets` marks
|
|
62525
|
+
* the bracket beside the caret and its pair** while the field has focus, each
|
|
62526
|
+
* a `bracket` part, and a bracket with no pair is also `bracket-unmatched`.
|
|
62527
|
+
* A bracket in a string or a comment is not matched, where `tokenize` says
|
|
62528
|
+
* which runs those are.
|
|
62529
|
+
*
|
|
62530
|
+
* **`complete` offers completions as you type**: the words of the source and
|
|
62531
|
+
* of `completions` that start with the word before the caret. They open in a
|
|
62532
|
+
* list under the word. The arrow keys move through it, Enter or Tab takes the
|
|
62533
|
+
* word, and Escape closes it. `Ctrl+Space` opens it where it is closed. The
|
|
62534
|
+
* field is `aria-autocomplete="list"` and points at the word chosen with
|
|
62535
|
+
* `aria-activedescendant`, so a screen reader reads each one. Give
|
|
62536
|
+
* `completions` the names a page uses, such as the tag and attribute names of
|
|
62537
|
+
* a custom elements manifest through `manifestWords`.
|
|
62538
|
+
*
|
|
62539
|
+
* **The pane is `:state(modified)` while its source differs from the source it
|
|
62540
|
+
* was given**, the first `value` or the last one set from outside. `reset()`
|
|
62541
|
+
* puts that source back, as an edit the sandbox passes on to its preview.
|
|
62101
62542
|
*
|
|
62102
62543
|
* **The source can be written inside the pane** where `value` is not set: its
|
|
62103
62544
|
* text, or the markup of a `<template>` it holds, without the indentation the
|
|
@@ -62108,6 +62549,14 @@ export type CustomElements = {
|
|
|
62108
62549
|
*
|
|
62109
62550
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
62110
62551
|
*
|
|
62552
|
+
* - `close-brackets`/`closeBrackets`: Whether typing an opening bracket or quote types its closing one too, and
|
|
62553
|
+
* a bracket typed with text selected goes around it.
|
|
62554
|
+
* - `complete`: Whether the pane offers completions for the word before the caret, from
|
|
62555
|
+
* the words of the source and of `completions`.
|
|
62556
|
+
* - `completions`: Words the pane offers under `complete` beside the words of the source,
|
|
62557
|
+
* such as tag and attribute names. `manifestWords` reads them from a custom
|
|
62558
|
+
* elements manifest. Set it as JSON in the attribute or as an array.
|
|
62559
|
+
* - `completions-label`/`completionsLabel`: The name of the list of completions, read by screen readers.
|
|
62111
62560
|
* - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
|
|
62112
62561
|
* - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
|
|
62113
62562
|
* field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
@@ -62116,12 +62565,17 @@ export type CustomElements = {
|
|
|
62116
62565
|
* - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
|
|
62117
62566
|
* holds several panes. Empty puts the pane's `name` on the tab.
|
|
62118
62567
|
* - `line-numbers`/`lineNumbers`: Whether each line of the source is numbered, in a gutter beside it.
|
|
62568
|
+
* - `match-brackets`/`matchBrackets`: Whether the bracket beside the caret and its pair are marked while the
|
|
62569
|
+
* field has focus.
|
|
62119
62570
|
* - `name`: Which source this pane holds. Every `helix-before-edit` event includes it.
|
|
62120
62571
|
*
|
|
62121
62572
|
* `html` and `css` are what the sandbox root routes on; any other name is
|
|
62122
62573
|
* passed through untouched for a consumer wiring their own panes.
|
|
62123
62574
|
*
|
|
62124
62575
|
* Not reflected: nothing selects on it, so it keeps a real default instead.
|
|
62576
|
+
* - `readonly`/`readOnly`: Whether the source is read only: it can be selected and copied, and not
|
|
62577
|
+
* edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
62578
|
+
* that is read only.
|
|
62125
62579
|
* - `tab-indents`/`tabIndents`: Whether Tab indents the source. When it is off, Tab moves focus.
|
|
62126
62580
|
* - `value`: The source being edited.
|
|
62127
62581
|
* - `tokenize`: Colors the source: a function from the source and the pane's `name` to
|
|
@@ -62135,6 +62589,8 @@ export type CustomElements = {
|
|
|
62135
62589
|
*
|
|
62136
62590
|
* Named for what it returns, runs of text, where Code Block's `highlight`
|
|
62137
62591
|
* returns markup. (property only)
|
|
62592
|
+
* - `modified`: Whether the source differs from the source the pane was given: its first
|
|
62593
|
+
* `value`, or the last one set from outside. (property only) (readonly)
|
|
62138
62594
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
62139
62595
|
*
|
|
62140
62596
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -62164,13 +62620,23 @@ export type CustomElements = {
|
|
|
62164
62620
|
* - `helix-caret`: Fired when the cursor moves.
|
|
62165
62621
|
* - `helix-edit`: Fired after the source was edited, with the new source.
|
|
62166
62622
|
*
|
|
62623
|
+
* ## Methods
|
|
62624
|
+
*
|
|
62625
|
+
* Methods that can be called to access component functionality.
|
|
62626
|
+
*
|
|
62627
|
+
* - `reset() => void`: Puts back the source the pane was given, as an edit: `helix-before-edit`
|
|
62628
|
+
* is sent first and can refuse it, and the sandbox passes it to its preview.
|
|
62629
|
+
*
|
|
62167
62630
|
* ## CSS Custom Properties
|
|
62168
62631
|
*
|
|
62169
62632
|
* CSS variables available for styling the component.
|
|
62170
62633
|
*
|
|
62171
62634
|
* - `--sandbox-source-background-color`: Fill behind the source.
|
|
62635
|
+
* - `--sandbox-source-bracket-color`: Fill behind a matched bracket, under `match-brackets`. Defaults to `--helix-color-accent-subtle`.
|
|
62172
62636
|
* - `--sandbox-source-callable-color`: Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`.
|
|
62173
62637
|
* - `--sandbox-source-comment-color`: Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`.
|
|
62638
|
+
* - `--sandbox-source-completions-border-width`: Width of the edge of the list of completions, under `complete`. Defaults to `--helix-border-floating`.
|
|
62639
|
+
* - `--sandbox-source-completions-shadow`: Shadow under the list of completions, under `complete`. Defaults to `--helix-shadow-floating`.
|
|
62174
62640
|
* - `--sandbox-source-constant-color`: Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`.
|
|
62175
62641
|
* - `--sandbox-source-invalid-color`: Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`.
|
|
62176
62642
|
* - `--sandbox-source-keyword-color`: Color of a `keyword` run, under `tokenize`. Defaults to `--helix-color-syntax-keyword`.
|
|
@@ -62184,8 +62650,13 @@ export type CustomElements = {
|
|
|
62184
62650
|
*
|
|
62185
62651
|
* Custom selectors for styling elements within the component.
|
|
62186
62652
|
*
|
|
62187
|
-
* - `
|
|
62188
|
-
* - `
|
|
62653
|
+
* - `bracket`: The bracket beside the caret and its pair, under `match-brackets`.
|
|
62654
|
+
* - `bracket-unmatched`: A bracket beside the caret with no pair, under `match-brackets`.
|
|
62655
|
+
* - `completion`: One word in the list of completions, under `complete`.
|
|
62656
|
+
* - `completion-active`: The word chosen in that list, which Enter or Tab takes.
|
|
62657
|
+
* - `completions`: The list of completions under the word being typed, under `complete`.
|
|
62658
|
+
* - `field`: The box that scrolls the field and its colors together, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
|
|
62659
|
+
* - `highlight`: The colored copy of the source drawn under the field, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
|
|
62189
62660
|
* - `line`: One line of that copy, under `line-numbers`, numbered in the gutter by its `::before`.
|
|
62190
62661
|
* - `source`: The editable region.
|
|
62191
62662
|
* - `token`: One run of the source that has a kind, under `tokenize`.
|
|
@@ -62194,6 +62665,7 @@ export type CustomElements = {
|
|
|
62194
62665
|
*
|
|
62195
62666
|
* These can be used to apply styling when a component is in a given state.
|
|
62196
62667
|
*
|
|
62668
|
+
* - `modified`: While the source differs from the source the pane was given, until `reset()` or a new `value`.
|
|
62197
62669
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
62198
62670
|
*/
|
|
62199
62671
|
"helix-sandbox-source": Partial<
|
|
@@ -64350,6 +64822,12 @@ export type CustomElements = {
|
|
|
64350
64822
|
* that should survive its own collapse says how much of itself to keep, and
|
|
64351
64823
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
64352
64824
|
* consumer's to set.
|
|
64825
|
+
* - `collapsible`: Which panes can be collapsed, as Zag's panels each take `collapsible`:
|
|
64826
|
+
* `start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
|
|
64827
|
+
* at the edge without shutting. `Enter` collapses the end pane where only
|
|
64828
|
+
* the end pane can be collapsed, and the start pane otherwise.
|
|
64829
|
+
*
|
|
64830
|
+
* Unset is `both`, and the attribute stays absent until you write it.
|
|
64353
64831
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
64354
64832
|
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
64355
64833
|
* at once: `{across}` is where the divider that runs down stands, and
|
|
@@ -64360,6 +64838,11 @@ export type CustomElements = {
|
|
|
64360
64838
|
* these words are the whole of where it is.
|
|
64361
64839
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
64362
64840
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
64841
|
+
* - `end-min`/`endMin`: The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
64842
|
+
* a CSS length such as `16rem` resolved against the splitter's box. The
|
|
64843
|
+
* divider stops that far from the end, whatever `max` allows, so `min` and
|
|
64844
|
+
* `end-min` hold a minimum for each pane, as Zag's panels each take
|
|
64845
|
+
* `minSize`.
|
|
64363
64846
|
* - `label`: The divider's name, read by screen readers.
|
|
64364
64847
|
*
|
|
64365
64848
|
* An `aria-label` or `aria-labelledby` on the host names the divider too,
|
|
@@ -66583,6 +67066,7 @@ export type CustomElements = {
|
|
|
66583
67066
|
*
|
|
66584
67067
|
* These can be used to apply styling when a component is in a given state.
|
|
66585
67068
|
*
|
|
67069
|
+
* - `focus-visible`: The tag's cell has keyboard focus that the browser shows, in a `Tag.Group`.
|
|
66586
67070
|
* - `selected`: The tag is selected in a `Tag.Group` that selects.
|
|
66587
67071
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
66588
67072
|
*/
|
|
@@ -67634,6 +68118,17 @@ export type CustomElements = {
|
|
|
67634
68118
|
* imperatively later, and nothing is hydrating by then.
|
|
67635
68119
|
*
|
|
67636
68120
|
* Here rather than on each control.
|
|
68121
|
+
* - `timeContent`: What each time in the list shows: a function given the time as `HH:mm`,
|
|
68122
|
+
* or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
|
|
68123
|
+
* returns text, an element or a Lit template.
|
|
68124
|
+
*
|
|
68125
|
+
* For the seats left at a time, or a caption under it, as React Aria's
|
|
68126
|
+
* `ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
|
|
68127
|
+
* or `slot="description"` goes to that slot of the row, and a description
|
|
68128
|
+
* is read after the time. The row is still named by the written time, and
|
|
68129
|
+
* typeahead still finds it by that. Return the written time with your
|
|
68130
|
+
* content where it should still show. A property only, there being no way
|
|
68131
|
+
* to write a function in markup. The wheels draw their own figures. (property only)
|
|
67637
68132
|
* - `valueAsDate`: The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
|
|
67638
68133
|
*
|
|
67639
68134
|
* The platform's own pair on `<input type="time">`, epoch day included: a time
|
|
@@ -68040,6 +68535,9 @@ export type CustomElements = {
|
|
|
68040
68535
|
* - `orientation`: Which way time runs: `horizontal` lays the entries across the page. Unset,
|
|
68041
68536
|
* they run down it.
|
|
68042
68537
|
* - `label`: Accessible name for the timeline, for people who reach it out of context.
|
|
68538
|
+
* - `loading`: Marks the timeline as busy fetching more entries, and draws an entry
|
|
68539
|
+
* after the last that says so.
|
|
68540
|
+
* - `loading-label`/`loadingLabel`: The text of the entry drawn while `loading` is set, where the `loading` slot is empty.
|
|
68043
68541
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
68044
68542
|
*
|
|
68045
68543
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -68066,6 +68564,7 @@ export type CustomElements = {
|
|
|
68066
68564
|
* Areas where markup can be added to the component.
|
|
68067
68565
|
*
|
|
68068
68566
|
* - `(default)`: The entries, and any groups of them.
|
|
68567
|
+
* - `loading`: Content for the entry after the last while `loading` is set. Falls back to `loading-label`.
|
|
68069
68568
|
*
|
|
68070
68569
|
* ## CSS Custom Properties
|
|
68071
68570
|
*
|
|
@@ -68073,10 +68572,17 @@ export type CustomElements = {
|
|
|
68073
68572
|
*
|
|
68074
68573
|
* - `--timeline-gap`: Space between one entry and the next.
|
|
68075
68574
|
*
|
|
68575
|
+
* ## CSS Parts
|
|
68576
|
+
*
|
|
68577
|
+
* Custom selectors for styling elements within the component.
|
|
68578
|
+
*
|
|
68579
|
+
* - `loading`: The entry after the last while `loading` is set.
|
|
68580
|
+
*
|
|
68076
68581
|
* ## CSS States
|
|
68077
68582
|
*
|
|
68078
68583
|
* These can be used to apply styling when a component is in a given state.
|
|
68079
68584
|
*
|
|
68585
|
+
* - `loading`: While `loading` is set.
|
|
68080
68586
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
68081
68587
|
*/
|
|
68082
68588
|
"helix-timeline": Partial<
|
|
@@ -70761,6 +71267,12 @@ export type CustomElements = {
|
|
|
70761
71267
|
* and scrolls it sideways: Left and Right move between items, the other
|
|
70762
71268
|
* way round on a right-to-left page, and `estimate` is an item's width. A
|
|
70763
71269
|
* grid always runs down.
|
|
71270
|
+
* - `reorderable`: Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
|
|
71271
|
+
* (or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
|
|
71272
|
+
* with an arrow moves the row the keys are on, and a pointer drags a row.
|
|
71273
|
+
* The list moves no item itself: you move your `items` on `helix-reorder`.
|
|
71274
|
+
* Without that import it does nothing, so a list that never moves items
|
|
71275
|
+
* carries none of the code. A list of one column, without sections.
|
|
70764
71276
|
* - `section-field`/`sectionField`: The field of each item that names its section, as a key or a path of
|
|
70765
71277
|
* keys. Set, the items are drawn in sections: a header, then the items, in
|
|
70766
71278
|
* an element with the `group` role that the header names. A section starts
|
|
@@ -70823,8 +71335,10 @@ export type CustomElements = {
|
|
|
70823
71335
|
*
|
|
70824
71336
|
* - `change`: Fired once a press or a key has changed which items are selected, in a list with `selection-mode`.
|
|
70825
71337
|
* - `helix-before-change`: Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable.
|
|
71338
|
+
* - `helix-before-reorder`: Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is.
|
|
70826
71339
|
* - `helix-load-more`: Fired when a reader comes within one screen of the last item, once for each length of the set.
|
|
70827
71340
|
* - `helix-range-change`: Fired when the items on screen change, with the new `first` and `last`, which `range` also holds.
|
|
71341
|
+
* - `helix-reorder`: Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen.
|
|
70828
71342
|
*
|
|
70829
71343
|
* ## Slots
|
|
70830
71344
|
*
|
|
@@ -70850,6 +71364,15 @@ export type CustomElements = {
|
|
|
70850
71364
|
*
|
|
70851
71365
|
* - `--virtual-list-block-size`: How tall the scrolling box is. A list that runs across is as tall as its rows unless you set it.
|
|
70852
71366
|
* - `--virtual-list-disabled-opacity`: How faint a row `disabled-keys` names is drawn.
|
|
71367
|
+
* - `--virtual-list-drag-preview-background-color`: The fill behind the copy of a row a pointer drags, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
|
|
71368
|
+
* - `--virtual-list-drag-preview-border-color`: The color of the edge around the copy of a row a pointer drags.
|
|
71369
|
+
* - `--virtual-list-drag-preview-border-width`: The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
|
|
71370
|
+
* - `--virtual-list-drag-preview-opacity`: The opacity of the copy of a row a pointer drags.
|
|
71371
|
+
* - `--virtual-list-drag-preview-radius`: The corner radius of the copy of a row a pointer drags.
|
|
71372
|
+
* - `--virtual-list-drag-preview-shadow`: The shadow that raises the copy of a row a pointer drags over the page.
|
|
71373
|
+
* - `--virtual-list-dragging-opacity`: The opacity of a row being dragged, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
|
|
71374
|
+
* - `--virtual-list-drop-indicator-color`: The color of the line where a dragged row would land.
|
|
71375
|
+
* - `--virtual-list-drop-indicator-size`: The thickness of the line where a dragged row would land.
|
|
70853
71376
|
* - `--virtual-list-empty-color`: The color of the text in the row shown when there are no items.
|
|
70854
71377
|
* - `--virtual-list-empty-padding`: The space around the text in the row shown when there are no items.
|
|
70855
71378
|
* - `--virtual-list-loading-color`: The color of the text in the row drawn while `loading` is set.
|
|
@@ -73159,6 +73682,8 @@ export type CustomElementsSolidJs = {
|
|
|
73159
73682
|
* separate actions. The semantics and the joining are separate questions:
|
|
73160
73683
|
* `role="group"` and a shared name are what make a set of buttons a set, and
|
|
73161
73684
|
* `helix-flex` gives the spacing without the group.
|
|
73685
|
+
* - `disabled`: Disables every button in the group, and says so on the group with
|
|
73686
|
+
* `aria-disabled`. Reflected, so a stylesheet can select on it.
|
|
73162
73687
|
* - `disallow-empty-selection`/`disallowEmptySelection`: Keeps at least one button pressed once one is, as React Aria's
|
|
73163
73688
|
* `disallowEmptySelection`: a press that would leave none pressed is
|
|
73164
73689
|
* refused.
|
|
@@ -73193,6 +73718,8 @@ export type CustomElementsSolidJs = {
|
|
|
73193
73718
|
*
|
|
73194
73719
|
* The attribute is the seed, and a press changes the property, which does
|
|
73195
73720
|
* not reflect, as a native control's `value` does not.
|
|
73721
|
+
* - `values`: The pressed values as a list, in a selection mode, and an empty list
|
|
73722
|
+
* otherwise. Written, it presses exactly those buttons. (property only)
|
|
73196
73723
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
73197
73724
|
*
|
|
73198
73725
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -74112,6 +74639,8 @@ export type CustomElementsSolidJs = {
|
|
|
74112
74639
|
* Third", rather than with a comma this component chose.
|
|
74113
74640
|
* - `linked-label`/`linkedLabel`: The text read with a card that has connections both ways. `{leadsTo}` is
|
|
74114
74641
|
* `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in.
|
|
74642
|
+
* - `loading`: Marks the board as busy while its document arrives: the board is
|
|
74643
|
+
* `aria-busy`, and the `loading` slot is shown.
|
|
74115
74644
|
* - `moved-label`/`movedLabel`: What screen readers hear after a key moves a card, with `{name}` for the
|
|
74116
74645
|
* card and `{x}` and `{y}` for where it now is, in the document's units.
|
|
74117
74646
|
*
|
|
@@ -74277,6 +74806,7 @@ export type CustomElementsSolidJs = {
|
|
|
74277
74806
|
* - `footer`: Content below the board.
|
|
74278
74807
|
* - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
|
|
74279
74808
|
* - `header`: Content above the board.
|
|
74809
|
+
* - `loading`: Content shown while `loading` is set, such as a progress bar while the document arrives.
|
|
74280
74810
|
* - `pan-down-icon`: Replaces the glyph inside the pan down button.
|
|
74281
74811
|
* - `pan-end-icon`: Replaces the glyph inside the button that pans toward the end of a line of text.
|
|
74282
74812
|
* - `pan-start-icon`: Replaces the glyph inside the button that pans toward the start of a line of text.
|
|
@@ -74399,6 +74929,7 @@ export type CustomElementsSolidJs = {
|
|
|
74399
74929
|
* - `fullscreen`: While the board fills the screen.
|
|
74400
74930
|
* - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
|
|
74401
74931
|
* - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
|
|
74932
|
+
* - `loading`: While `loading` is set.
|
|
74402
74933
|
* - `pressing`: While a press on the board, its cards or its connections is under way.
|
|
74403
74934
|
* - `sharing`: The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a board with `gestures="activate"` waits to be pressed.
|
|
74404
74935
|
* - `using`: A board with `gestures="activate"` has been pressed and has the gestures.
|
|
@@ -77738,6 +78269,15 @@ export type CustomElementsSolidJs = {
|
|
|
77738
78269
|
* Defaulted rather than left empty. An icon-only control must be named, and
|
|
77739
78270
|
* the name of this one is not a judgment call: every copy button in the
|
|
77740
78271
|
* world is called Copy. A consumer with a better word still sets it.
|
|
78272
|
+
* - `show-label`/`showLabel`: Draws the name as words beside the icon, and the result in their place
|
|
78273
|
+
* after a press. The button stays as wide as the longest of them.
|
|
78274
|
+
* - `tooltip`: When the tooltip shows: `full` on hover and focus and after a press,
|
|
78275
|
+
* `copy` only after a press, to show the result, and `none` never, for a
|
|
78276
|
+
* button whose result shows another way, such as under `show-label`.
|
|
78277
|
+
*
|
|
78278
|
+
* Unset is `full`, and the attribute stays absent until you write it.
|
|
78279
|
+
* - `tooltip-placement`/`tooltipPlacement`: The side the tooltip prefers. It moves to another side where this one
|
|
78280
|
+
* does not fit.
|
|
77741
78281
|
* - `value`: The text copied to the clipboard.
|
|
77742
78282
|
*
|
|
77743
78283
|
* It replaces `Button.value`, the submit value: a copy button never submits,
|
|
@@ -77921,6 +78461,7 @@ export type CustomElementsSolidJs = {
|
|
|
77921
78461
|
* - `live`: The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
|
|
77922
78462
|
* - `mark`: The clipboard icon, and the confirmation icon that replaces it.
|
|
77923
78463
|
* - `spinner`: The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
|
|
78464
|
+
* - `text`: The words beside the icon, under `show-label`. It holds all three, `label`, `copied-label` and `error-label`, with all but the current one hidden.
|
|
77924
78465
|
* - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
|
|
77925
78466
|
* - `tooltip-arrow`: The tooltip's arrow, which points at the button.
|
|
77926
78467
|
* - `tooltip-arrow-bottom`: The arrow while the bubble is below the button, on the bubble's top edge. Set together with `tooltip-arrow`.
|
|
@@ -82130,6 +82671,9 @@ export type CustomElementsSolidJs = {
|
|
|
82130
82671
|
* - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
|
|
82131
82672
|
* - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
|
|
82132
82673
|
* - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
|
|
82674
|
+
* - `loading`: Marks the graph as busy while its notes arrive: the list is `aria-busy`,
|
|
82675
|
+
* and the panel says so where it holds no notes yet.
|
|
82676
|
+
* - `loading-label`/`loadingLabel`: What the panel says while `loading` is set and the list holds no notes.
|
|
82133
82677
|
* - `moved-down-label`/`movedDownLabel`: What screen readers hear once the drawing has moved down, after `moved()`.
|
|
82134
82678
|
* - `moved-left-label`/`movedLeftLabel`: What screen readers hear once the drawing has moved left, after `moved()`.
|
|
82135
82679
|
* - `moved-right-label`/`movedRightLabel`: What screen readers hear once the drawing has moved right, after `moved()`.
|
|
@@ -82152,6 +82696,15 @@ export type CustomElementsSolidJs = {
|
|
|
82152
82696
|
* - `hiddenGroups`: The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. (property only)
|
|
82153
82697
|
* - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
|
|
82154
82698
|
* - `nodes`: The notes. A property, never an attribute. (property only)
|
|
82699
|
+
* - `noteContent`: What each note's row in the list shows in place of its name: a function
|
|
82700
|
+
* given the note that returns text, an element or a Lit template.
|
|
82701
|
+
*
|
|
82702
|
+
* For an icon by its kind, or a date under its name, as React Aria's
|
|
82703
|
+
* `ListBoxItem` takes children. The row is still named by the note's name,
|
|
82704
|
+
* which typeahead and the search find it by, and described by how it stands
|
|
82705
|
+
* to the selected note. Return the name with your content where it should
|
|
82706
|
+
* still show. A property only, there being no way to write a function in
|
|
82707
|
+
* markup. (property only)
|
|
82155
82708
|
* - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (property only) (readonly)
|
|
82156
82709
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
82157
82710
|
*
|
|
@@ -82198,6 +82751,7 @@ export type CustomElementsSolidJs = {
|
|
|
82198
82751
|
* - `footer`: Content below the graph.
|
|
82199
82752
|
* - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
|
|
82200
82753
|
* - `header`: Content above the graph.
|
|
82754
|
+
* - `loading`: What the panel shows while `loading` is set and the list holds no notes. Defaults to `loading-label`.
|
|
82201
82755
|
* - `pan-down-icon`: Replaces the glyph inside the pan down button.
|
|
82202
82756
|
* - `pan-end-icon`: Replaces the glyph inside the button that pans toward the end of a line of text.
|
|
82203
82757
|
* - `pan-start-icon`: Replaces the glyph inside the button that pans toward the start of a line of text.
|
|
@@ -82289,6 +82843,7 @@ export type CustomElementsSolidJs = {
|
|
|
82289
82843
|
* - `legend-swatch`: The mark in a group's color, before its name.
|
|
82290
82844
|
* - `list`: The list of notes, which draws only the rows in view.
|
|
82291
82845
|
* - `live`: What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
|
|
82846
|
+
* - `loading`: The box in place of the list while `loading` is set and it holds no notes, holding the `loading` slot.
|
|
82292
82847
|
* - `note`: One note in the list.
|
|
82293
82848
|
* - `note-cursor`: The note the keyboard is on in the list.
|
|
82294
82849
|
* - `note-linked`: A note linked to or from the selected one.
|
|
@@ -82316,6 +82871,7 @@ export type CustomElementsSolidJs = {
|
|
|
82316
82871
|
* - `empty`: The list holds no notes: the graph has none, or a search or the groups hid them all.
|
|
82317
82872
|
* - `fullscreen`: The graph fills the screen.
|
|
82318
82873
|
* - `idle`: The user has been still long enough for the header and footer to fade.
|
|
82874
|
+
* - `loading`: While `loading` is set.
|
|
82319
82875
|
* - `local`: The drawing shows the selected note's local graph, with `depth`.
|
|
82320
82876
|
* - `panel-open`: A graph with `no-panel` has the search and the list open over the drawing.
|
|
82321
82877
|
* - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
|
|
@@ -84943,7 +85499,8 @@ export type CustomElementsSolidJs = {
|
|
|
84943
85499
|
* itself.
|
|
84944
85500
|
* - `value`: The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
|
|
84945
85501
|
*
|
|
84946
|
-
*
|
|
85502
|
+
* A press or a key writes it in row order, as Data Table does, whatever
|
|
85503
|
+
* order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
|
|
84947
85504
|
* words where it has none.
|
|
84948
85505
|
* - `rows`: The rows the list holds, in order. (property only) (readonly)
|
|
84949
85506
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
@@ -89047,10 +89604,18 @@ export type CustomElementsSolidJs = {
|
|
|
89047
89604
|
*
|
|
89048
89605
|
* The orb is styled only and has behavior, which the tier split does not
|
|
89049
89606
|
* otherwise allow. Its role, name and busy state follow `state`, unless
|
|
89050
|
-
* `announce` makes it a status region, and the rest
|
|
89051
|
-
*
|
|
89052
|
-
*
|
|
89053
|
-
*
|
|
89607
|
+
* `announce` makes it a status region, and the rest is drawing dots to a
|
|
89608
|
+
* canvas.
|
|
89609
|
+
*
|
|
89610
|
+
* **A shape of your own goes in the default slot**, such as an SVG, an
|
|
89611
|
+
* image, or an animation. The orb draws it over its box in place of the dots
|
|
89612
|
+
* and stops drawing them, and keeps its role, name, busy state and custom
|
|
89613
|
+
* states, so your stylesheet can change what you slotted by state, such as
|
|
89614
|
+
* `helix-orb:state(working) svg { animation-duration: 1s }`. What you slot is
|
|
89615
|
+
* for the eye: a screen reader hears the orb's name.
|
|
89616
|
+
*
|
|
89617
|
+
* `--orb-speed` scales how fast the dots move, so `0.5` is a calmer orb at
|
|
89618
|
+
* half the tempo.
|
|
89054
89619
|
*
|
|
89055
89620
|
* Each state is also a custom state, such as `:state(thinking)` or
|
|
89056
89621
|
* `:state(done)`, so a page can style what sits around an orb by what it shows,
|
|
@@ -89132,6 +89697,12 @@ export type CustomElementsSolidJs = {
|
|
|
89132
89697
|
* browser harness's awaits it alone: a browser always runs the frame, and a
|
|
89133
89698
|
* timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
|
|
89134
89699
|
*
|
|
89700
|
+
* ## Slots
|
|
89701
|
+
*
|
|
89702
|
+
* Areas where markup can be added to the component.
|
|
89703
|
+
*
|
|
89704
|
+
* - `(default)`: A shape of your own, drawn over the orb's box in place of the dots.
|
|
89705
|
+
*
|
|
89135
89706
|
* ## CSS Custom Properties
|
|
89136
89707
|
*
|
|
89137
89708
|
* CSS variables available for styling the component.
|
|
@@ -89139,12 +89710,13 @@ export type CustomElementsSolidJs = {
|
|
|
89139
89710
|
* - `--orb-color`: The color of the nearest dots. Defaults to `currentColor`.
|
|
89140
89711
|
* - `--orb-ground`: The color the farthest dots fade toward. Defaults to the page's background.
|
|
89141
89712
|
* - `--orb-size`: The diameter. Overrides `size`.
|
|
89713
|
+
* - `--orb-speed`: How fast the dots move, as a multiple of each state's own tempo. Defaults to `1`.
|
|
89142
89714
|
*
|
|
89143
89715
|
* ## CSS Parts
|
|
89144
89716
|
*
|
|
89145
89717
|
* Custom selectors for styling elements within the component.
|
|
89146
89718
|
*
|
|
89147
|
-
* - `canvas`: The canvas the dots are drawn on.
|
|
89719
|
+
* - `canvas`: The canvas the dots are drawn on. Hidden while the default slot holds a shape.
|
|
89148
89720
|
* - `live`: The word for the state, which the orb says as it changes when `announce` is set. Rendered only then, and clipped out of view.
|
|
89149
89721
|
*
|
|
89150
89722
|
* ## CSS States
|
|
@@ -89210,6 +89782,9 @@ export type CustomElementsSolidJs = {
|
|
|
89210
89782
|
* box the sections scroll in.
|
|
89211
89783
|
* - `label`: The navigation's name, read by screen readers. A heading in the `heading`
|
|
89212
89784
|
* slot names it in place of this.
|
|
89785
|
+
* - `marks`: Which links are marked. `reading` marks the one section being read, the
|
|
89786
|
+
* last whose heading has passed the reading line. `visible` marks every
|
|
89787
|
+
* section with part of it on screen, and the mark runs across their links.
|
|
89213
89788
|
* - `offset`: How far below the top of the scroll container a heading counts as reached,
|
|
89214
89789
|
* in pixels. The scroll container is the window or the panel the sections
|
|
89215
89790
|
* scroll in.
|
|
@@ -89225,6 +89800,9 @@ export type CustomElementsSolidJs = {
|
|
|
89225
89800
|
* writable property in this library that a component also writes is state a
|
|
89226
89801
|
* consumer can own; this one cannot be, and saying so with the type is better
|
|
89227
89802
|
* than saying it in a sentence nobody reads. (property only) (readonly)
|
|
89803
|
+
* - `marked`: The ids of the sections whose links are marked, in page order: the one
|
|
89804
|
+
* `current` names, or under `marks="visible"` every section on screen.
|
|
89805
|
+
* Read-only, for the reason `current` gives. (property only) (readonly)
|
|
89228
89806
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
89229
89807
|
*
|
|
89230
89808
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -89260,6 +89838,14 @@ export type CustomElementsSolidJs = {
|
|
|
89260
89838
|
* - `heading`: A heading above the links, such as "On this page". It names the navigation.
|
|
89261
89839
|
* - `indicator`: A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
|
|
89262
89840
|
*
|
|
89841
|
+
* ## Methods
|
|
89842
|
+
*
|
|
89843
|
+
* Methods that can be called to access component functionality.
|
|
89844
|
+
*
|
|
89845
|
+
* - `scrollToSection(id: string) => boolean`: Scrolls to the section with this id, as a press on its link does, with
|
|
89846
|
+
* `behavior`, and marks its link at once. The address and focus stay where
|
|
89847
|
+
* they are. Returns whether the outline has a link to that section.
|
|
89848
|
+
*
|
|
89263
89849
|
* ## CSS Custom Properties
|
|
89264
89850
|
*
|
|
89265
89851
|
* CSS variables available for styling the component.
|
|
@@ -91372,6 +91958,16 @@ export type CustomElementsSolidJs = {
|
|
|
91372
91958
|
* since a browser reads one only as a document starts. A `src` document
|
|
91373
91959
|
* declares its own.
|
|
91374
91960
|
*
|
|
91961
|
+
* **`dependencies` names packages by version instead**, as a `package.json`
|
|
91962
|
+
* does: `{"canvas-confetti": "^1.9"}` loads `canvas-confetti` and the paths
|
|
91963
|
+
* under it from `cdn`, `https://esm.sh/` by default, at the version or range
|
|
91964
|
+
* given. An address in `imports` wins over a package of the same name.
|
|
91965
|
+
*
|
|
91966
|
+
* **`modules` holds files the example imports by a relative path**: each path,
|
|
91967
|
+
* such as `utils.js`, to its source, and `import { add } from './utils.js'`
|
|
91968
|
+
* in the `js` pane or in another module loads it. A sandbox writes each pane
|
|
91969
|
+
* named for a module file here.
|
|
91970
|
+
*
|
|
91375
91971
|
* **Examples render in a frame**, so an example's styles and scripts do not
|
|
91376
91972
|
* affect the page around the sandbox, and `position: fixed` stays inside the
|
|
91377
91973
|
* pane. The frame starts empty, with its own stylesheets and its own custom
|
|
@@ -91392,8 +91988,9 @@ export type CustomElementsSolidJs = {
|
|
|
91392
91988
|
*
|
|
91393
91989
|
* **A failed preview shows the error over the example**, in the `error` part,
|
|
91394
91990
|
* until the next source is sent. The terminal says it too, so the part is not
|
|
91395
|
-
* announced
|
|
91396
|
-
*
|
|
91991
|
+
* announced, and it is the frame's description while it shows, so a screen
|
|
91992
|
+
* reader reads it with the frame. Hide it with `::part(error) { display: none }`
|
|
91993
|
+
* where the page draws its own.
|
|
91397
91994
|
*
|
|
91398
91995
|
* **`controls` draws two buttons in the preview's corner**: one reloads the
|
|
91399
91996
|
* frame's document, as `reload()` does, and one opens the example in a new
|
|
@@ -91403,6 +92000,8 @@ export type CustomElementsSolidJs = {
|
|
|
91403
92000
|
*
|
|
91404
92001
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
91405
92002
|
*
|
|
92003
|
+
* - `cdn`: The address the packages in `dependencies` load from, which the name, an
|
|
92004
|
+
* `@` and the version follow.
|
|
91406
92005
|
* - `color-mode`/`colorMode`: The color mode the frame renders in.
|
|
91407
92006
|
*
|
|
91408
92007
|
* **The frame is a document and a document has its own color mode.** Setting
|
|
@@ -91418,6 +92017,10 @@ export type CustomElementsSolidJs = {
|
|
|
91418
92017
|
* including every one of the 24 series colors a chart reads.
|
|
91419
92018
|
* - `controls`: Whether the preview draws a reload button and a button that opens the
|
|
91420
92019
|
* example in a new tab, in its corner.
|
|
92020
|
+
* - `dependencies`: The npm packages an example can import by name in the built-in document,
|
|
92021
|
+
* each name to a version or a range, as a `package.json` lists them. Each
|
|
92022
|
+
* loads from `cdn`. Set it as JSON in the attribute or as an object. Not
|
|
92023
|
+
* read where `src` is set.
|
|
91421
92024
|
* - `direction`: Writing direction inside the frame.
|
|
91422
92025
|
*
|
|
91423
92026
|
* Not reflected. It is payload for the render message and nothing selects on
|
|
@@ -91440,6 +92043,9 @@ export type CustomElementsSolidJs = {
|
|
|
91440
92043
|
* Not reflected, for `direction`'s reason: the placement is applied by the
|
|
91441
92044
|
* document inside the frame, against its own root, so no rule on this side
|
|
91442
92045
|
* could read it.
|
|
92046
|
+
* - `modules`: Module files an example imports by a relative path in the built-in
|
|
92047
|
+
* document, each path, such as `utils.js`, to its source. Not read where
|
|
92048
|
+
* `src` is set.
|
|
91443
92049
|
* - `open-label`/`openLabel`: The name of the button that opens the example in a new tab, under
|
|
91444
92050
|
* `controls`.
|
|
91445
92051
|
* - `reload-label`/`reloadLabel`: The name of the button that reloads the frame's document, under
|
|
@@ -91541,10 +92147,22 @@ export type CustomElementsSolidJs = {
|
|
|
91541
92147
|
* milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
|
|
91542
92148
|
*
|
|
91543
92149
|
* The event carries the pane's `name`, so one sandbox can hold several panes.
|
|
91544
|
-
*
|
|
91545
|
-
*
|
|
91546
|
-
*
|
|
91547
|
-
*
|
|
92150
|
+
* The names the sandbox writes into its previews:
|
|
92151
|
+
*
|
|
92152
|
+
* - `html` sets the preview's markup.
|
|
92153
|
+
* - `css` sets its stylesheet.
|
|
92154
|
+
* - `js` sets a script that runs as a module after the markup.
|
|
92155
|
+
* - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
|
|
92156
|
+
* module the other scripts import by its path, `./utils.js`.
|
|
92157
|
+
* - `package.json` sets the npm packages the scripts import by name, from its
|
|
92158
|
+
* `dependencies`, which load from the preview's `cdn`.
|
|
92159
|
+
*
|
|
92160
|
+
* The sandbox ignores a pane with any other name, so that pane can show
|
|
92161
|
+
* content without changing the preview.
|
|
92162
|
+
*
|
|
92163
|
+
* **The sandbox is `:state(modified)` while a source pane holds an edit**, and
|
|
92164
|
+
* that pane's file tab is also `file-modified` and described as modified to
|
|
92165
|
+
* a screen reader. `reset()` puts every pane back to the source it was given.
|
|
91548
92166
|
*
|
|
91549
92167
|
* **The dividers are two nested `helix-splitter` elements**, which handle the
|
|
91550
92168
|
* pointer, the keyboard, and the corner. The inner splitter holds the panes and
|
|
@@ -91619,6 +92237,8 @@ export type CustomElementsSolidJs = {
|
|
|
91619
92237
|
*
|
|
91620
92238
|
* `split` follows the lead pane rather than the source, so `split="30"` means
|
|
91621
92239
|
* the same thing in both directions: thirty percent to whatever comes first.
|
|
92240
|
+
* - `modified-label`/`modifiedLabel`: The description of a file tab whose pane holds an edit, read by screen
|
|
92241
|
+
* readers after the file's name.
|
|
91622
92242
|
* - `orientation`: Whether the panes sit side by side or stacked.
|
|
91623
92243
|
*
|
|
91624
92244
|
* Not reflected, for `lead`'s reason above: no rule selects on it. The axis
|
|
@@ -91696,6 +92316,15 @@ export type CustomElementsSolidJs = {
|
|
|
91696
92316
|
* - `status`: A status bar, spanning both panes at the bottom.
|
|
91697
92317
|
* - `toolbar`: A bar across the top, spanning both panes.
|
|
91698
92318
|
*
|
|
92319
|
+
* ## Methods
|
|
92320
|
+
*
|
|
92321
|
+
* Methods that can be called to access component functionality.
|
|
92322
|
+
*
|
|
92323
|
+
* - `reset() => void`: Puts every source pane back to the source it was given: through the
|
|
92324
|
+
* pane's own `reset()` where it has one, which sends an edit the previews
|
|
92325
|
+
* take, and otherwise by setting its `value` and writing it into the
|
|
92326
|
+
* previews.
|
|
92327
|
+
*
|
|
91699
92328
|
* ## CSS Custom Properties
|
|
91700
92329
|
*
|
|
91701
92330
|
* CSS variables available for styling the component.
|
|
@@ -91711,6 +92340,7 @@ export type CustomElementsSolidJs = {
|
|
|
91711
92340
|
* - `body`: The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
|
|
91712
92341
|
* - `corner`: The handle where the two dividers cross.
|
|
91713
92342
|
* - `file`: One file tab, `aria-selected` while its pane is shown.
|
|
92343
|
+
* - `file-modified`: A file tab whose pane holds an edit.
|
|
91714
92344
|
* - `files`: The file tabs over the source panes, where there are several.
|
|
91715
92345
|
* - `pane`: Either pane.
|
|
91716
92346
|
* - `panel`: The box that holds the slotted panel.
|
|
@@ -91721,6 +92351,7 @@ export type CustomElementsSolidJs = {
|
|
|
91721
92351
|
*
|
|
91722
92352
|
* These can be used to apply styling when a component is in a given state.
|
|
91723
92353
|
*
|
|
92354
|
+
* - `modified`: While a source pane holds an edit, until `reset()`.
|
|
91724
92355
|
* - `panel-collapsed`: While there is a panel and it is no taller than `panel-collapsed-size`.
|
|
91725
92356
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
91726
92357
|
*/
|
|
@@ -91755,8 +92386,37 @@ export type CustomElementsSolidJs = {
|
|
|
91755
92386
|
* that wraps keeps one number. The numbers are drawn, and hidden from screen
|
|
91756
92387
|
* readers, which read the field.
|
|
91757
92388
|
*
|
|
91758
|
-
* Enter keeps the indentation of the line it breaks,
|
|
91759
|
-
*
|
|
92389
|
+
* Enter keeps the indentation of the line it breaks, one level deeper after
|
|
92390
|
+
* an opening bracket, and puts the closing bracket of an empty pair on a line
|
|
92391
|
+
* of its own. The new line is undone with the next undo as typing is.
|
|
92392
|
+
*
|
|
92393
|
+
* **The editing keys are CodeMirror's.** Tab with text selected indents every
|
|
92394
|
+
* line the selection touches. `Mod+]` indents the lines and `Mod+[` outdents
|
|
92395
|
+
* them, and `Mod+/` comments them out or back in: `//` in a `js` pane, and one
|
|
92396
|
+
* block comment in an `html` or `css` pane. `Mod` is Command on a Mac and
|
|
92397
|
+
* Control elsewhere. Each is one step of undo.
|
|
92398
|
+
*
|
|
92399
|
+
* **`close-brackets` closes brackets and quotes** as you type them: `(`, `[`,
|
|
92400
|
+
* `{` and the three quotes. A closing character typed before the same one
|
|
92401
|
+
* steps over it, Backspace between an empty pair deletes both, and a bracket
|
|
92402
|
+
* typed with text selected goes around the text. **`match-brackets` marks
|
|
92403
|
+
* the bracket beside the caret and its pair** while the field has focus, each
|
|
92404
|
+
* a `bracket` part, and a bracket with no pair is also `bracket-unmatched`.
|
|
92405
|
+
* A bracket in a string or a comment is not matched, where `tokenize` says
|
|
92406
|
+
* which runs those are.
|
|
92407
|
+
*
|
|
92408
|
+
* **`complete` offers completions as you type**: the words of the source and
|
|
92409
|
+
* of `completions` that start with the word before the caret. They open in a
|
|
92410
|
+
* list under the word. The arrow keys move through it, Enter or Tab takes the
|
|
92411
|
+
* word, and Escape closes it. `Ctrl+Space` opens it where it is closed. The
|
|
92412
|
+
* field is `aria-autocomplete="list"` and points at the word chosen with
|
|
92413
|
+
* `aria-activedescendant`, so a screen reader reads each one. Give
|
|
92414
|
+
* `completions` the names a page uses, such as the tag and attribute names of
|
|
92415
|
+
* a custom elements manifest through `manifestWords`.
|
|
92416
|
+
*
|
|
92417
|
+
* **The pane is `:state(modified)` while its source differs from the source it
|
|
92418
|
+
* was given**, the first `value` or the last one set from outside. `reset()`
|
|
92419
|
+
* puts that source back, as an edit the sandbox passes on to its preview.
|
|
91760
92420
|
*
|
|
91761
92421
|
* **The source can be written inside the pane** where `value` is not set: its
|
|
91762
92422
|
* text, or the markup of a `<template>` it holds, without the indentation the
|
|
@@ -91767,6 +92427,14 @@ export type CustomElementsSolidJs = {
|
|
|
91767
92427
|
*
|
|
91768
92428
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
91769
92429
|
*
|
|
92430
|
+
* - `close-brackets`/`closeBrackets`: Whether typing an opening bracket or quote types its closing one too, and
|
|
92431
|
+
* a bracket typed with text selected goes around it.
|
|
92432
|
+
* - `complete`: Whether the pane offers completions for the word before the caret, from
|
|
92433
|
+
* the words of the source and of `completions`.
|
|
92434
|
+
* - `completions`: Words the pane offers under `complete` beside the words of the source,
|
|
92435
|
+
* such as tag and attribute names. `manifestWords` reads them from a custom
|
|
92436
|
+
* elements manifest. Set it as JSON in the attribute or as an array.
|
|
92437
|
+
* - `completions-label`/`completionsLabel`: The name of the list of completions, read by screen readers.
|
|
91770
92438
|
* - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
|
|
91771
92439
|
* - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
|
|
91772
92440
|
* field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
@@ -91775,12 +92443,17 @@ export type CustomElementsSolidJs = {
|
|
|
91775
92443
|
* - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
|
|
91776
92444
|
* holds several panes. Empty puts the pane's `name` on the tab.
|
|
91777
92445
|
* - `line-numbers`/`lineNumbers`: Whether each line of the source is numbered, in a gutter beside it.
|
|
92446
|
+
* - `match-brackets`/`matchBrackets`: Whether the bracket beside the caret and its pair are marked while the
|
|
92447
|
+
* field has focus.
|
|
91778
92448
|
* - `name`: Which source this pane holds. Every `helix-before-edit` event includes it.
|
|
91779
92449
|
*
|
|
91780
92450
|
* `html` and `css` are what the sandbox root routes on; any other name is
|
|
91781
92451
|
* passed through untouched for a consumer wiring their own panes.
|
|
91782
92452
|
*
|
|
91783
92453
|
* Not reflected: nothing selects on it, so it keeps a real default instead.
|
|
92454
|
+
* - `readonly`/`readOnly`: Whether the source is read only: it can be selected and copied, and not
|
|
92455
|
+
* edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
|
|
92456
|
+
* that is read only.
|
|
91784
92457
|
* - `tab-indents`/`tabIndents`: Whether Tab indents the source. When it is off, Tab moves focus.
|
|
91785
92458
|
* - `value`: The source being edited.
|
|
91786
92459
|
* - `tokenize`: Colors the source: a function from the source and the pane's `name` to
|
|
@@ -91794,6 +92467,8 @@ export type CustomElementsSolidJs = {
|
|
|
91794
92467
|
*
|
|
91795
92468
|
* Named for what it returns, runs of text, where Code Block's `highlight`
|
|
91796
92469
|
* returns markup. (property only)
|
|
92470
|
+
* - `modified`: Whether the source differs from the source the pane was given: its first
|
|
92471
|
+
* `value`, or the last one set from outside. (property only) (readonly)
|
|
91797
92472
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
91798
92473
|
*
|
|
91799
92474
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -91823,13 +92498,23 @@ export type CustomElementsSolidJs = {
|
|
|
91823
92498
|
* - `helix-caret`: Fired when the cursor moves.
|
|
91824
92499
|
* - `helix-edit`: Fired after the source was edited, with the new source.
|
|
91825
92500
|
*
|
|
92501
|
+
* ## Methods
|
|
92502
|
+
*
|
|
92503
|
+
* Methods that can be called to access component functionality.
|
|
92504
|
+
*
|
|
92505
|
+
* - `reset() => void`: Puts back the source the pane was given, as an edit: `helix-before-edit`
|
|
92506
|
+
* is sent first and can refuse it, and the sandbox passes it to its preview.
|
|
92507
|
+
*
|
|
91826
92508
|
* ## CSS Custom Properties
|
|
91827
92509
|
*
|
|
91828
92510
|
* CSS variables available for styling the component.
|
|
91829
92511
|
*
|
|
91830
92512
|
* - `--sandbox-source-background-color`: Fill behind the source.
|
|
92513
|
+
* - `--sandbox-source-bracket-color`: Fill behind a matched bracket, under `match-brackets`. Defaults to `--helix-color-accent-subtle`.
|
|
91831
92514
|
* - `--sandbox-source-callable-color`: Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`.
|
|
91832
92515
|
* - `--sandbox-source-comment-color`: Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`.
|
|
92516
|
+
* - `--sandbox-source-completions-border-width`: Width of the edge of the list of completions, under `complete`. Defaults to `--helix-border-floating`.
|
|
92517
|
+
* - `--sandbox-source-completions-shadow`: Shadow under the list of completions, under `complete`. Defaults to `--helix-shadow-floating`.
|
|
91833
92518
|
* - `--sandbox-source-constant-color`: Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`.
|
|
91834
92519
|
* - `--sandbox-source-invalid-color`: Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`.
|
|
91835
92520
|
* - `--sandbox-source-keyword-color`: Color of a `keyword` run, under `tokenize`. Defaults to `--helix-color-syntax-keyword`.
|
|
@@ -91843,8 +92528,13 @@ export type CustomElementsSolidJs = {
|
|
|
91843
92528
|
*
|
|
91844
92529
|
* Custom selectors for styling elements within the component.
|
|
91845
92530
|
*
|
|
91846
|
-
* - `
|
|
91847
|
-
* - `
|
|
92531
|
+
* - `bracket`: The bracket beside the caret and its pair, under `match-brackets`.
|
|
92532
|
+
* - `bracket-unmatched`: A bracket beside the caret with no pair, under `match-brackets`.
|
|
92533
|
+
* - `completion`: One word in the list of completions, under `complete`.
|
|
92534
|
+
* - `completion-active`: The word chosen in that list, which Enter or Tab takes.
|
|
92535
|
+
* - `completions`: The list of completions under the word being typed, under `complete`.
|
|
92536
|
+
* - `field`: The box that scrolls the field and its colors together, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
|
|
92537
|
+
* - `highlight`: The colored copy of the source drawn under the field, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
|
|
91848
92538
|
* - `line`: One line of that copy, under `line-numbers`, numbered in the gutter by its `::before`.
|
|
91849
92539
|
* - `source`: The editable region.
|
|
91850
92540
|
* - `token`: One run of the source that has a kind, under `tokenize`.
|
|
@@ -91853,6 +92543,7 @@ export type CustomElementsSolidJs = {
|
|
|
91853
92543
|
*
|
|
91854
92544
|
* These can be used to apply styling when a component is in a given state.
|
|
91855
92545
|
*
|
|
92546
|
+
* - `modified`: While the source differs from the source the pane was given, until `reset()` or a new `value`.
|
|
91856
92547
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
91857
92548
|
*/
|
|
91858
92549
|
"helix-sandbox-source": Partial<
|
|
@@ -94051,6 +94742,12 @@ export type CustomElementsSolidJs = {
|
|
|
94051
94742
|
* that should survive its own collapse says how much of itself to keep, and
|
|
94052
94743
|
* only whoever put it there knows that, which is the same reason `min` is a
|
|
94053
94744
|
* consumer's to set.
|
|
94745
|
+
* - `collapsible`: Which panes can be collapsed, as Zag's panels each take `collapsible`:
|
|
94746
|
+
* `start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
|
|
94747
|
+
* at the edge without shutting. `Enter` collapses the end pane where only
|
|
94748
|
+
* the end pane can be collapsed, and the start pane otherwise.
|
|
94749
|
+
*
|
|
94750
|
+
* Unset is `both`, and the attribute stays absent until you write it.
|
|
94054
94751
|
* - `corner-label`/`cornerLabel`: The name of the handle where two dividers cross, read by screen readers.
|
|
94055
94752
|
* - `corner-value-label`/`cornerValueLabel`: What the handle where two dividers cross says it is set to, both dividers
|
|
94056
94753
|
* at once: `{across}` is where the divider that runs down stands, and
|
|
@@ -94061,6 +94758,11 @@ export type CustomElementsSolidJs = {
|
|
|
94061
94758
|
* these words are the whole of where it is.
|
|
94062
94759
|
* - `default-collapsed`/`defaultCollapsed`: Which pane starts shut, when `collapsed` is not set.
|
|
94063
94760
|
* - `default-position`/`defaultPosition`: Where the divider starts, when `position` is not set.
|
|
94761
|
+
* - `end-min`/`endMin`: The least the end pane keeps, in the units `min` takes: a percentage, or
|
|
94762
|
+
* a CSS length such as `16rem` resolved against the splitter's box. The
|
|
94763
|
+
* divider stops that far from the end, whatever `max` allows, so `min` and
|
|
94764
|
+
* `end-min` hold a minimum for each pane, as Zag's panels each take
|
|
94765
|
+
* `minSize`.
|
|
94064
94766
|
* - `label`: The divider's name, read by screen readers.
|
|
94065
94767
|
*
|
|
94066
94768
|
* An `aria-label` or `aria-labelledby` on the host names the divider too,
|
|
@@ -96332,6 +97034,7 @@ export type CustomElementsSolidJs = {
|
|
|
96332
97034
|
*
|
|
96333
97035
|
* These can be used to apply styling when a component is in a given state.
|
|
96334
97036
|
*
|
|
97037
|
+
* - `focus-visible`: The tag's cell has keyboard focus that the browser shows, in a `Tag.Group`.
|
|
96335
97038
|
* - `selected`: The tag is selected in a `Tag.Group` that selects.
|
|
96336
97039
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
96337
97040
|
*/
|
|
@@ -97393,6 +98096,17 @@ export type CustomElementsSolidJs = {
|
|
|
97393
98096
|
* imperatively later, and nothing is hydrating by then.
|
|
97394
98097
|
*
|
|
97395
98098
|
* Here rather than on each control.
|
|
98099
|
+
* - `timeContent`: What each time in the list shows: a function given the time as `HH:mm`,
|
|
98100
|
+
* or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
|
|
98101
|
+
* returns text, an element or a Lit template.
|
|
98102
|
+
*
|
|
98103
|
+
* For the seats left at a time, or a caption under it, as React Aria's
|
|
98104
|
+
* `ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
|
|
98105
|
+
* or `slot="description"` goes to that slot of the row, and a description
|
|
98106
|
+
* is read after the time. The row is still named by the written time, and
|
|
98107
|
+
* typeahead still finds it by that. Return the written time with your
|
|
98108
|
+
* content where it should still show. A property only, there being no way
|
|
98109
|
+
* to write a function in markup. The wheels draw their own figures. (property only)
|
|
97396
98110
|
* - `valueAsDate`: The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
|
|
97397
98111
|
*
|
|
97398
98112
|
* The platform's own pair on `<input type="time">`, epoch day included: a time
|
|
@@ -97808,6 +98522,9 @@ export type CustomElementsSolidJs = {
|
|
|
97808
98522
|
* - `orientation`: Which way time runs: `horizontal` lays the entries across the page. Unset,
|
|
97809
98523
|
* they run down it.
|
|
97810
98524
|
* - `label`: Accessible name for the timeline, for people who reach it out of context.
|
|
98525
|
+
* - `loading`: Marks the timeline as busy fetching more entries, and draws an entry
|
|
98526
|
+
* after the last that says so.
|
|
98527
|
+
* - `loading-label`/`loadingLabel`: The text of the entry drawn while `loading` is set, where the `loading` slot is empty.
|
|
97811
98528
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
97812
98529
|
*
|
|
97813
98530
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -97834,6 +98551,7 @@ export type CustomElementsSolidJs = {
|
|
|
97834
98551
|
* Areas where markup can be added to the component.
|
|
97835
98552
|
*
|
|
97836
98553
|
* - `(default)`: The entries, and any groups of them.
|
|
98554
|
+
* - `loading`: Content for the entry after the last while `loading` is set. Falls back to `loading-label`.
|
|
97837
98555
|
*
|
|
97838
98556
|
* ## CSS Custom Properties
|
|
97839
98557
|
*
|
|
@@ -97841,10 +98559,17 @@ export type CustomElementsSolidJs = {
|
|
|
97841
98559
|
*
|
|
97842
98560
|
* - `--timeline-gap`: Space between one entry and the next.
|
|
97843
98561
|
*
|
|
98562
|
+
* ## CSS Parts
|
|
98563
|
+
*
|
|
98564
|
+
* Custom selectors for styling elements within the component.
|
|
98565
|
+
*
|
|
98566
|
+
* - `loading`: The entry after the last while `loading` is set.
|
|
98567
|
+
*
|
|
97844
98568
|
* ## CSS States
|
|
97845
98569
|
*
|
|
97846
98570
|
* These can be used to apply styling when a component is in a given state.
|
|
97847
98571
|
*
|
|
98572
|
+
* - `loading`: While `loading` is set.
|
|
97848
98573
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
97849
98574
|
*/
|
|
97850
98575
|
"helix-timeline": Partial<
|
|
@@ -100581,6 +101306,12 @@ export type CustomElementsSolidJs = {
|
|
|
100581
101306
|
* and scrolls it sideways: Left and Right move between items, the other
|
|
100582
101307
|
* way round on a right-to-left page, and `estimate` is an item's width. A
|
|
100583
101308
|
* grid always runs down.
|
|
101309
|
+
* - `reorderable`: Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
|
|
101310
|
+
* (or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
|
|
101311
|
+
* with an arrow moves the row the keys are on, and a pointer drags a row.
|
|
101312
|
+
* The list moves no item itself: you move your `items` on `helix-reorder`.
|
|
101313
|
+
* Without that import it does nothing, so a list that never moves items
|
|
101314
|
+
* carries none of the code. A list of one column, without sections.
|
|
100584
101315
|
* - `section-field`/`sectionField`: The field of each item that names its section, as a key or a path of
|
|
100585
101316
|
* keys. Set, the items are drawn in sections: a header, then the items, in
|
|
100586
101317
|
* an element with the `group` role that the header names. A section starts
|
|
@@ -100643,8 +101374,10 @@ export type CustomElementsSolidJs = {
|
|
|
100643
101374
|
*
|
|
100644
101375
|
* - `change`: Fired once a press or a key has changed which items are selected, in a list with `selection-mode`.
|
|
100645
101376
|
* - `helix-before-change`: Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable.
|
|
101377
|
+
* - `helix-before-reorder`: Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is.
|
|
100646
101378
|
* - `helix-load-more`: Fired when a reader comes within one screen of the last item, once for each length of the set.
|
|
100647
101379
|
* - `helix-range-change`: Fired when the items on screen change, with the new `first` and `last`, which `range` also holds.
|
|
101380
|
+
* - `helix-reorder`: Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen.
|
|
100648
101381
|
*
|
|
100649
101382
|
* ## Slots
|
|
100650
101383
|
*
|
|
@@ -100670,6 +101403,15 @@ export type CustomElementsSolidJs = {
|
|
|
100670
101403
|
*
|
|
100671
101404
|
* - `--virtual-list-block-size`: How tall the scrolling box is. A list that runs across is as tall as its rows unless you set it.
|
|
100672
101405
|
* - `--virtual-list-disabled-opacity`: How faint a row `disabled-keys` names is drawn.
|
|
101406
|
+
* - `--virtual-list-drag-preview-background-color`: The fill behind the copy of a row a pointer drags, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
|
|
101407
|
+
* - `--virtual-list-drag-preview-border-color`: The color of the edge around the copy of a row a pointer drags.
|
|
101408
|
+
* - `--virtual-list-drag-preview-border-width`: The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
|
|
101409
|
+
* - `--virtual-list-drag-preview-opacity`: The opacity of the copy of a row a pointer drags.
|
|
101410
|
+
* - `--virtual-list-drag-preview-radius`: The corner radius of the copy of a row a pointer drags.
|
|
101411
|
+
* - `--virtual-list-drag-preview-shadow`: The shadow that raises the copy of a row a pointer drags over the page.
|
|
101412
|
+
* - `--virtual-list-dragging-opacity`: The opacity of a row being dragged, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
|
|
101413
|
+
* - `--virtual-list-drop-indicator-color`: The color of the line where a dragged row would land.
|
|
101414
|
+
* - `--virtual-list-drop-indicator-size`: The thickness of the line where a dragged row would land.
|
|
100673
101415
|
* - `--virtual-list-empty-color`: The color of the text in the row shown when there are no items.
|
|
100674
101416
|
* - `--virtual-list-empty-padding`: The space around the text in the row shown when there are no items.
|
|
100675
101417
|
* - `--virtual-list-loading-color`: The color of the text in the row drawn while `loading` is set.
|
|
@@ -102214,6 +102956,8 @@ export type CustomCssProperties = {
|
|
|
102214
102956
|
"--orb-ground"?: (string) | undefined;
|
|
102215
102957
|
/** The diameter. Overrides `size`. */
|
|
102216
102958
|
"--orb-size"?: (string) | undefined;
|
|
102959
|
+
/** How fast the dots move, as a multiple of each state's own tempo. Defaults to `1`. */
|
|
102960
|
+
"--orb-speed"?: (string) | undefined;
|
|
102217
102961
|
/** The color of the heading in the `heading` slot. */
|
|
102218
102962
|
"--outline-heading-color"?: (string) | undefined;
|
|
102219
102963
|
/** How far each level is inset from the one above. */
|
|
@@ -102424,10 +103168,16 @@ export type CustomCssProperties = {
|
|
|
102424
103168
|
"--sandbox-separator-color"?: (string) | undefined;
|
|
102425
103169
|
/** Fill behind the source. */
|
|
102426
103170
|
"--sandbox-source-background-color"?: (string) | undefined;
|
|
103171
|
+
/** Fill behind a matched bracket, under `match-brackets`. Defaults to `--helix-color-accent-subtle`. */
|
|
103172
|
+
"--sandbox-source-bracket-color"?: (string) | undefined;
|
|
102427
103173
|
/** Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`. */
|
|
102428
103174
|
"--sandbox-source-callable-color"?: (string) | undefined;
|
|
102429
103175
|
/** Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`. */
|
|
102430
103176
|
"--sandbox-source-comment-color"?: (string) | undefined;
|
|
103177
|
+
/** Width of the edge of the list of completions, under `complete`. Defaults to `--helix-border-floating`. */
|
|
103178
|
+
"--sandbox-source-completions-border-width"?: (string) | undefined;
|
|
103179
|
+
/** Shadow under the list of completions, under `complete`. Defaults to `--helix-shadow-floating`. */
|
|
103180
|
+
"--sandbox-source-completions-shadow"?: (string) | undefined;
|
|
102431
103181
|
/** Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`. */
|
|
102432
103182
|
"--sandbox-source-constant-color"?: (string) | undefined;
|
|
102433
103183
|
/** Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`. */
|
|
@@ -103182,6 +103932,24 @@ export type CustomCssProperties = {
|
|
|
103182
103932
|
"--virtual-list-block-size"?: (string) | undefined;
|
|
103183
103933
|
/** How faint a row `disabled-keys` names is drawn. */
|
|
103184
103934
|
"--virtual-list-disabled-opacity"?: (string) | undefined;
|
|
103935
|
+
/** The fill behind the copy of a row a pointer drags, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported. */
|
|
103936
|
+
"--virtual-list-drag-preview-background-color"?: (string) | undefined;
|
|
103937
|
+
/** The color of the edge around the copy of a row a pointer drags. */
|
|
103938
|
+
"--virtual-list-drag-preview-border-color"?: (string) | undefined;
|
|
103939
|
+
/** The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it. */
|
|
103940
|
+
"--virtual-list-drag-preview-border-width"?: (string) | undefined;
|
|
103941
|
+
/** The opacity of the copy of a row a pointer drags. */
|
|
103942
|
+
"--virtual-list-drag-preview-opacity"?: (string) | undefined;
|
|
103943
|
+
/** The corner radius of the copy of a row a pointer drags. */
|
|
103944
|
+
"--virtual-list-drag-preview-radius"?: (string) | undefined;
|
|
103945
|
+
/** The shadow that raises the copy of a row a pointer drags over the page. */
|
|
103946
|
+
"--virtual-list-drag-preview-shadow"?: (string) | undefined;
|
|
103947
|
+
/** The opacity of a row being dragged, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported. */
|
|
103948
|
+
"--virtual-list-dragging-opacity"?: (string) | undefined;
|
|
103949
|
+
/** The color of the line where a dragged row would land. */
|
|
103950
|
+
"--virtual-list-drop-indicator-color"?: (string) | undefined;
|
|
103951
|
+
/** The thickness of the line where a dragged row would land. */
|
|
103952
|
+
"--virtual-list-drop-indicator-size"?: (string) | undefined;
|
|
103185
103953
|
/** The color of the text in the row shown when there are no items. */
|
|
103186
103954
|
"--virtual-list-empty-color"?: (string) | undefined;
|
|
103187
103955
|
/** The space around the text in the row shown when there are no items. */
|