@fusion.dev/helix 0.164.0 → 0.166.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 +1103 -14
- package/dist/code-block/root/code-block-root.css.js +2 -1
- package/dist/date-input/root/date-input-root.d.ts +1 -1
- package/dist/date-input/root/date-input-root.js +1 -1
- package/dist/element-events.generated.js +15 -2
- package/dist/menu/item/menu-item.css.js +3 -0
- package/dist/menu/root/menu-root.css.js +1 -1
- package/dist/option/root/index.d.ts +1 -0
- package/dist/option/root/index.js +1 -0
- package/dist/option/root/option-root.d.ts +1 -1
- package/dist/option/root/option-root.js +1 -1
- package/dist/sandbox/root/sandbox-root.d.ts +26 -0
- package/dist/sandbox/root/sandbox-root.js +28 -3
- package/dist/sandbox/source/sandbox-source.d.ts +6 -0
- package/dist/sandbox/source/sandbox-source.js +9 -2
- package/dist/tag/root/index.d.ts +1 -0
- package/dist/tag/root/index.js +1 -0
- package/dist/tag/root/tag-root.d.ts +1 -1
- package/dist/tag/root/tag-root.js +1 -1
- package/dist/time-input/root/time-input-root.d.ts +1 -1
- package/dist/time-input/root/time-input-root.js +1 -1
- package/dist/time-picker/root/time-picker-root.d.ts +1 -1
- package/dist/time-picker/root/time-picker-root.js +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +296 -22
- package/types/vue.d.ts +83 -8
- package/types/words.d.ts +20 -0
package/types/jsx.d.ts
CHANGED
|
@@ -7680,9 +7680,18 @@ export type HelixCodeBlockElementEvent<E = Event> = TypedEvent<
|
|
|
7680
7680
|
HelixCodeBlock,
|
|
7681
7681
|
E
|
|
7682
7682
|
>;
|
|
7683
|
+
/** `helix-before-change` event type */
|
|
7684
|
+
export type HelixCodeBlockHelixBeforeChangeElementEvent =
|
|
7685
|
+
HelixCodeBlockElementEvent<HelixBeforeChangeEvent>;
|
|
7683
7686
|
/** `helix-before-toggle` event type */
|
|
7684
7687
|
export type HelixCodeBlockHelixBeforeToggleElementEvent =
|
|
7685
7688
|
HelixCodeBlockElementEvent<HelixBeforeToggleEvent>;
|
|
7689
|
+
/** `helix-copy` event type */
|
|
7690
|
+
export type HelixCodeBlockHelixCopyElementEvent =
|
|
7691
|
+
HelixCodeBlockElementEvent<HelixCopyEvent>;
|
|
7692
|
+
/** `helix-copy-error` event type */
|
|
7693
|
+
export type HelixCodeBlockHelixCopyErrorElementEvent =
|
|
7694
|
+
HelixCodeBlockElementEvent<HelixCopyErrorEvent>;
|
|
7686
7695
|
/** `helix-toggle` event type */
|
|
7687
7696
|
export type HelixCodeBlockHelixToggleElementEvent =
|
|
7688
7697
|
HelixCodeBlockElementEvent<HelixToggleEvent>;
|
|
@@ -7754,6 +7763,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
|
|
|
7754
7763
|
"expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
|
|
7755
7764
|
/** The expand button's words while the cap hides lines. */
|
|
7756
7765
|
expandLabel?: (HelixCodeBlock["expandLabel"]) | undefined;
|
|
7766
|
+
/** The name of the file shown, where the block holds several Code Blocks:
|
|
7767
|
+
the `label` of one, or its `language` without one.
|
|
7768
|
+
|
|
7769
|
+
Unset, or a name no file has, shows the first. */
|
|
7770
|
+
file?: (HelixCodeBlock["file"]) | undefined;
|
|
7771
|
+
/** The name of the file tabs, read by screen readers. */
|
|
7772
|
+
"files-label"?: (HelixCodeBlock["filesLabel"]) | undefined;
|
|
7773
|
+
/** The name of the file tabs, read by screen readers. */
|
|
7774
|
+
filesLabel?: (HelixCodeBlock["filesLabel"]) | undefined;
|
|
7757
7775
|
/** The words of a button that hides a run of unchanged lines it showed, in a
|
|
7758
7776
|
diff with `context-lines`. `{count}` is how many, and each language
|
|
7759
7777
|
writes the forms it has. */
|
|
@@ -7888,10 +7906,20 @@ the script still has it. Not called on a server, which has no code to
|
|
|
7888
7906
|
read, nor for a diff. */
|
|
7889
7907
|
highlight?: (HelixCodeBlock["highlight"]) | undefined;
|
|
7890
7908
|
|
|
7909
|
+
/** A file tab showed its file, whose name `file` now holds. */
|
|
7910
|
+
onchange?: ((e: HelixCodeBlockElementEvent) => void) | undefined;
|
|
7911
|
+
/** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
|
|
7912
|
+
"onhelix-before-change"?: ((
|
|
7913
|
+
e: HelixCodeBlockHelixBeforeChangeElementEvent,
|
|
7914
|
+
) => void) | undefined;
|
|
7891
7915
|
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
7892
7916
|
"onhelix-before-toggle"?: ((
|
|
7893
7917
|
e: HelixCodeBlockHelixBeforeToggleElementEvent,
|
|
7894
7918
|
) => void) | undefined;
|
|
7919
|
+
/** The copy button put the code on the clipboard, with the text in `detail.value`. */
|
|
7920
|
+
"onhelix-copy"?: ((e: HelixCodeBlockHelixCopyElementEvent) => void) | undefined;
|
|
7921
|
+
/** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
|
|
7922
|
+
"onhelix-copy-error"?: ((e: HelixCodeBlockHelixCopyErrorElementEvent) => void) | undefined;
|
|
7895
7923
|
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
7896
7924
|
"onhelix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
|
|
7897
7925
|
};
|
|
@@ -7963,6 +7991,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
|
|
|
7963
7991
|
"attr:expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
|
|
7964
7992
|
/** The expand button's words while the cap hides lines. */
|
|
7965
7993
|
"prop:expandLabel"?: (HelixCodeBlock["expandLabel"]) | undefined;
|
|
7994
|
+
/** The name of the file shown, where the block holds several Code Blocks:
|
|
7995
|
+
the `label` of one, or its `language` without one.
|
|
7996
|
+
|
|
7997
|
+
Unset, or a name no file has, shows the first. */
|
|
7998
|
+
"prop:file"?: (HelixCodeBlock["file"]) | undefined;
|
|
7999
|
+
/** The name of the file tabs, read by screen readers. */
|
|
8000
|
+
"attr:files-label"?: (HelixCodeBlock["filesLabel"]) | undefined;
|
|
8001
|
+
/** The name of the file tabs, read by screen readers. */
|
|
8002
|
+
"prop:filesLabel"?: (HelixCodeBlock["filesLabel"]) | undefined;
|
|
7966
8003
|
/** The words of a button that hides a run of unchanged lines it showed, in a
|
|
7967
8004
|
diff with `context-lines`. `{count}` is how many, and each language
|
|
7968
8005
|
writes the forms it has. */
|
|
@@ -8096,10 +8133,20 @@ in the slot, so the copy button copies it as written and a reader without
|
|
|
8096
8133
|
the script still has it. Not called on a server, which has no code to
|
|
8097
8134
|
read, nor for a diff. */
|
|
8098
8135
|
"prop:highlight"?: (HelixCodeBlock["highlight"]) | undefined;
|
|
8136
|
+
/** A file tab showed its file, whose name `file` now holds. */
|
|
8137
|
+
"on:change"?: ((e: HelixCodeBlockElementEvent) => void) | undefined;
|
|
8138
|
+
/** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
|
|
8139
|
+
"on:helix-before-change"?: ((
|
|
8140
|
+
e: HelixCodeBlockHelixBeforeChangeElementEvent,
|
|
8141
|
+
) => void) | undefined;
|
|
8099
8142
|
/** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
|
|
8100
8143
|
"on:helix-before-toggle"?: ((
|
|
8101
8144
|
e: HelixCodeBlockHelixBeforeToggleElementEvent,
|
|
8102
8145
|
) => void) | undefined;
|
|
8146
|
+
/** The copy button put the code on the clipboard, with the text in `detail.value`. */
|
|
8147
|
+
"on:helix-copy"?: ((e: HelixCodeBlockHelixCopyElementEvent) => void) | undefined;
|
|
8148
|
+
/** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
|
|
8149
|
+
"on:helix-copy-error"?: ((e: HelixCodeBlockHelixCopyErrorElementEvent) => void) | undefined;
|
|
8103
8150
|
/** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
|
|
8104
8151
|
"on:helix-toggle"?: ((e: HelixCodeBlockHelixToggleElementEvent) => void) | undefined;
|
|
8105
8152
|
|
|
@@ -16352,7 +16399,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
|
|
|
16352
16399
|
`narrow` ("3h ago").
|
|
16353
16400
|
|
|
16354
16401
|
The reading refreshes as it goes stale, as `elapsed` does, and the whole
|
|
16355
|
-
date is its title. `elapsed` wins where both are set.
|
|
16402
|
+
date is its title. `elapsed` wins where both are set. Written with no
|
|
16403
|
+
value, as `elapsed` is, or with a style `Intl` does not know, it reads
|
|
16404
|
+
`long`. */
|
|
16356
16405
|
relative?: (HelixFormatDate["relative"]) | undefined;
|
|
16357
16406
|
/** How the second is written, where a time of day is shown. */
|
|
16358
16407
|
second?: (HelixFormatDate["second"]) | undefined;
|
|
@@ -16494,7 +16543,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
|
|
|
16494
16543
|
`narrow` ("3h ago").
|
|
16495
16544
|
|
|
16496
16545
|
The reading refreshes as it goes stale, as `elapsed` does, and the whole
|
|
16497
|
-
date is its title. `elapsed` wins where both are set.
|
|
16546
|
+
date is its title. `elapsed` wins where both are set. Written with no
|
|
16547
|
+
value, as `elapsed` is, or with a style `Intl` does not know, it reads
|
|
16548
|
+
`long`. */
|
|
16498
16549
|
"prop:relative"?: (HelixFormatDate["relative"]) | undefined;
|
|
16499
16550
|
/** How the second is written, where a time of day is shown. */
|
|
16500
16551
|
"prop:second"?: (HelixFormatDate["second"]) | undefined;
|
|
@@ -23559,6 +23610,9 @@ export type HelixMenuHelixBeforeCloseElementEvent =
|
|
|
23559
23610
|
/** `helix-before-open` event type */
|
|
23560
23611
|
export type HelixMenuHelixBeforeOpenElementEvent =
|
|
23561
23612
|
HelixMenuElementEvent<HelixBeforeOpenEvent>;
|
|
23613
|
+
/** `helix-filter` event type */
|
|
23614
|
+
export type HelixMenuHelixFilterElementEvent =
|
|
23615
|
+
HelixMenuElementEvent<HelixFilterEvent>;
|
|
23562
23616
|
/** `helix-select` event type */
|
|
23563
23617
|
export type HelixMenuHelixSelectElementEvent =
|
|
23564
23618
|
HelixMenuElementEvent<HelixSelectEvent>;
|
|
@@ -23614,6 +23668,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
|
|
|
23614
23668
|
/** Whether the menu is the trigger's context menu: it opens where the reader
|
|
23615
23669
|
asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
|
|
23616
23670
|
context?: (HelixMenu["context"]) | undefined;
|
|
23671
|
+
/** The text the rows are filtered by, which the filter field holds.
|
|
23672
|
+
|
|
23673
|
+
Cleared as the menu closes and as a submenu opens or closes, so each page
|
|
23674
|
+
starts with every row showing. */
|
|
23675
|
+
filter?: (HelixMenu["filter"]) | undefined;
|
|
23676
|
+
/** Whether the menu shows a field above its rows that narrows them as the
|
|
23677
|
+
reader types, with focus staying in the field. */
|
|
23678
|
+
filterable?: (HelixMenu["filterable"]) | undefined;
|
|
23679
|
+
/** The filter field's name and placeholder. */
|
|
23680
|
+
"filter-label"?: (HelixMenu["filterLabel"]) | undefined;
|
|
23681
|
+
/** The filter field's name and placeholder. */
|
|
23682
|
+
filterLabel?: (HelixMenu["filterLabel"]) | undefined;
|
|
23617
23683
|
/** Accessible name for the surface.
|
|
23618
23684
|
|
|
23619
23685
|
Empty by default, which names the surface by its trigger, so a menu opened
|
|
@@ -23626,6 +23692,10 @@ to open the menu. Translate it with the rest of your interface. */
|
|
|
23626
23692
|
/** The description a trigger gives under `open-on="long-press"`, saying how
|
|
23627
23693
|
to open the menu. Translate it with the rest of your interface. */
|
|
23628
23694
|
longPressLabel?: (HelixMenu["longPressLabel"]) | undefined;
|
|
23695
|
+
/** The text shown when the filter keeps no rows. */
|
|
23696
|
+
"no-results-text"?: (HelixMenu["noResultsText"]) | undefined;
|
|
23697
|
+
/** The text shown when the filter keeps no rows. */
|
|
23698
|
+
noResultsText?: (HelixMenu["noResultsText"]) | undefined;
|
|
23629
23699
|
/** Space between the trigger and the surface, in pixels. */
|
|
23630
23700
|
offset?: (HelixMenu["offset"]) | undefined;
|
|
23631
23701
|
/** What opens the menu from its trigger. `long-press` leaves a press to the
|
|
@@ -23643,6 +23713,13 @@ It moves if that side does not fit. */
|
|
|
23643
23713
|
/** How a submenu opens. `drill` shows it in place of the page showing, with
|
|
23644
23714
|
a way back. `flyout` opens it in a panel of its own beside its row. */
|
|
23645
23715
|
submenus?: (HelixMenu["submenus"]) | undefined;
|
|
23716
|
+
/** Whether a row is kept by the filter: a function given the row's words and
|
|
23717
|
+
the filter, trimmed, that returns `true` to keep it showing, as React
|
|
23718
|
+
Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
|
|
23719
|
+
|
|
23720
|
+
Absent, a row is kept where its words hold the filter, in any case. A
|
|
23721
|
+
property only, there being no way to write a function in markup. */
|
|
23722
|
+
filterMatch?: (HelixMenu["filterMatch"]) | undefined;
|
|
23646
23723
|
|
|
23647
23724
|
/** The menu opened or closed. The event carries `newState` and `oldState`. */
|
|
23648
23725
|
ontoggle?: ((e: HelixMenuToggleElementEvent) => void) | undefined;
|
|
@@ -23650,6 +23727,8 @@ a way back. `flyout` opens it in a panel of its own beside its row. */
|
|
|
23650
23727
|
"onhelix-before-close"?: ((e: HelixMenuHelixBeforeCloseElementEvent) => void) | undefined;
|
|
23651
23728
|
/** The menu is about to open. Cancelable: cancel it to keep it closed. */
|
|
23652
23729
|
"onhelix-before-open"?: ((e: HelixMenuHelixBeforeOpenElementEvent) => void) | undefined;
|
|
23730
|
+
/** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
|
|
23731
|
+
"onhelix-filter"?: ((e: HelixMenuHelixFilterElementEvent) => void) | undefined;
|
|
23653
23732
|
/** An item was chosen. Cancelable: cancel it to keep the menu open. */
|
|
23654
23733
|
"onhelix-select"?: ((e: HelixMenuHelixSelectElementEvent) => void) | undefined;
|
|
23655
23734
|
};
|
|
@@ -23705,6 +23784,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
|
|
|
23705
23784
|
/** Whether the menu is the trigger's context menu: it opens where the reader
|
|
23706
23785
|
asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
|
|
23707
23786
|
"prop:context"?: (HelixMenu["context"]) | undefined;
|
|
23787
|
+
/** The text the rows are filtered by, which the filter field holds.
|
|
23788
|
+
|
|
23789
|
+
Cleared as the menu closes and as a submenu opens or closes, so each page
|
|
23790
|
+
starts with every row showing. */
|
|
23791
|
+
"prop:filter"?: (HelixMenu["filter"]) | undefined;
|
|
23792
|
+
/** Whether the menu shows a field above its rows that narrows them as the
|
|
23793
|
+
reader types, with focus staying in the field. */
|
|
23794
|
+
"prop:filterable"?: (HelixMenu["filterable"]) | undefined;
|
|
23795
|
+
/** The filter field's name and placeholder. */
|
|
23796
|
+
"attr:filter-label"?: (HelixMenu["filterLabel"]) | undefined;
|
|
23797
|
+
/** The filter field's name and placeholder. */
|
|
23798
|
+
"prop:filterLabel"?: (HelixMenu["filterLabel"]) | undefined;
|
|
23708
23799
|
/** Accessible name for the surface.
|
|
23709
23800
|
|
|
23710
23801
|
Empty by default, which names the surface by its trigger, so a menu opened
|
|
@@ -23717,6 +23808,10 @@ to open the menu. Translate it with the rest of your interface. */
|
|
|
23717
23808
|
/** The description a trigger gives under `open-on="long-press"`, saying how
|
|
23718
23809
|
to open the menu. Translate it with the rest of your interface. */
|
|
23719
23810
|
"prop:longPressLabel"?: (HelixMenu["longPressLabel"]) | undefined;
|
|
23811
|
+
/** The text shown when the filter keeps no rows. */
|
|
23812
|
+
"attr:no-results-text"?: (HelixMenu["noResultsText"]) | undefined;
|
|
23813
|
+
/** The text shown when the filter keeps no rows. */
|
|
23814
|
+
"prop:noResultsText"?: (HelixMenu["noResultsText"]) | undefined;
|
|
23720
23815
|
/** Space between the trigger and the surface, in pixels. */
|
|
23721
23816
|
"prop:offset"?: (HelixMenu["offset"]) | undefined;
|
|
23722
23817
|
/** What opens the menu from its trigger. `long-press` leaves a press to the
|
|
@@ -23734,12 +23829,21 @@ It moves if that side does not fit. */
|
|
|
23734
23829
|
/** How a submenu opens. `drill` shows it in place of the page showing, with
|
|
23735
23830
|
a way back. `flyout` opens it in a panel of its own beside its row. */
|
|
23736
23831
|
"prop:submenus"?: (HelixMenu["submenus"]) | undefined;
|
|
23832
|
+
/** Whether a row is kept by the filter: a function given the row's words and
|
|
23833
|
+
the filter, trimmed, that returns `true` to keep it showing, as React
|
|
23834
|
+
Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
|
|
23835
|
+
|
|
23836
|
+
Absent, a row is kept where its words hold the filter, in any case. A
|
|
23837
|
+
property only, there being no way to write a function in markup. */
|
|
23838
|
+
"prop:filterMatch"?: (HelixMenu["filterMatch"]) | undefined;
|
|
23737
23839
|
/** The menu opened or closed. The event carries `newState` and `oldState`. */
|
|
23738
23840
|
"on:toggle"?: ((e: HelixMenuToggleElementEvent) => void) | undefined;
|
|
23739
23841
|
/** The menu is about to close. Cancelable: cancel it to keep it open. */
|
|
23740
23842
|
"on:helix-before-close"?: ((e: HelixMenuHelixBeforeCloseElementEvent) => void) | undefined;
|
|
23741
23843
|
/** The menu is about to open. Cancelable: cancel it to keep it closed. */
|
|
23742
23844
|
"on:helix-before-open"?: ((e: HelixMenuHelixBeforeOpenElementEvent) => void) | undefined;
|
|
23845
|
+
/** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
|
|
23846
|
+
"on:helix-filter"?: ((e: HelixMenuHelixFilterElementEvent) => void) | undefined;
|
|
23743
23847
|
/** An item was chosen. Cancelable: cancel it to keep the menu open. */
|
|
23744
23848
|
"on:helix-select"?: ((e: HelixMenuHelixSelectElementEvent) => void) | undefined;
|
|
23745
23849
|
|
|
@@ -24889,10 +24993,11 @@ one they already know. */
|
|
|
24889
24993
|
invalid, as it is in a native number field.
|
|
24890
24994
|
|
|
24891
24995
|
Unset, a step moves by one, or by one percent under a percent format, and
|
|
24892
|
-
a typed number is rounded to the smallest amount
|
|
24893
|
-
|
|
24894
|
-
|
|
24895
|
-
the
|
|
24996
|
+
a typed number is rounded to the smallest amount the format shows, as
|
|
24997
|
+
React Aria's NumberField does: a field showing dollars keeps the cents
|
|
24998
|
+
typed into it, and one with no `format-options` keeps three decimal
|
|
24999
|
+
places. `any` puts the number on no grid, as it does in a native number
|
|
25000
|
+
field: a step moves by one, and any number in range is valid. */
|
|
24896
25001
|
step?: (HelixNumberInput["step"]) | undefined;
|
|
24897
25002
|
/** The message the browser shows when the number is off the step grid, with
|
|
24898
25003
|
`{below}` and `{above}` filled in with the nearest valid values, written in
|
|
@@ -25167,10 +25272,11 @@ one they already know. */
|
|
|
25167
25272
|
invalid, as it is in a native number field.
|
|
25168
25273
|
|
|
25169
25274
|
Unset, a step moves by one, or by one percent under a percent format, and
|
|
25170
|
-
a typed number is rounded to the smallest amount
|
|
25171
|
-
|
|
25172
|
-
|
|
25173
|
-
the
|
|
25275
|
+
a typed number is rounded to the smallest amount the format shows, as
|
|
25276
|
+
React Aria's NumberField does: a field showing dollars keeps the cents
|
|
25277
|
+
typed into it, and one with no `format-options` keeps three decimal
|
|
25278
|
+
places. `any` puts the number on no grid, as it does in a native number
|
|
25279
|
+
field: a step moves by one, and any number in range is valid. */
|
|
25174
25280
|
"prop:step"?: (HelixNumberInput["step"]) | undefined;
|
|
25175
25281
|
/** The message the browser shows when the number is off the step grid, with
|
|
25176
25282
|
`{below}` and `{above}` filled in with the nearest valid values, written in
|
|
@@ -29195,6 +29301,16 @@ gives. */
|
|
|
29195
29301
|
"panel-size"?: (HelixSandbox["panelSize"] | `${number}`) | undefined;
|
|
29196
29302
|
/** Height of the panel, in pixels. */
|
|
29197
29303
|
panelSize?: (HelixSandbox["panelSize"]) | undefined;
|
|
29304
|
+
/** How long typing rests before the preview runs the new source, in
|
|
29305
|
+
milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
29306
|
+
frame on each run, so a word typed runs it once. `0` runs it on every
|
|
29307
|
+
edit. */
|
|
29308
|
+
"preview-delay"?: (HelixSandbox["previewDelay"] | `${number}`) | undefined;
|
|
29309
|
+
/** How long typing rests before the preview runs the new source, in
|
|
29310
|
+
milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
29311
|
+
frame on each run, so a word typed runs it once. `0` runs it on every
|
|
29312
|
+
edit. */
|
|
29313
|
+
previewDelay?: (HelixSandbox["previewDelay"]) | undefined;
|
|
29198
29314
|
/** The name of the divider between the panes, read by screen readers.
|
|
29199
29315
|
`{pane}` is the lead pane, `source` or `preview`, whose share the
|
|
29200
29316
|
divider's value is, so each is a whole sentence: "Resize source pane" or
|
|
@@ -29345,6 +29461,16 @@ gives. */
|
|
|
29345
29461
|
"attr:panel-size"?: (HelixSandbox["panelSize"] | `${number}`) | undefined;
|
|
29346
29462
|
/** Height of the panel, in pixels. */
|
|
29347
29463
|
"prop:panelSize"?: (HelixSandbox["panelSize"]) | undefined;
|
|
29464
|
+
/** How long typing rests before the preview runs the new source, in
|
|
29465
|
+
milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
29466
|
+
frame on each run, so a word typed runs it once. `0` runs it on every
|
|
29467
|
+
edit. */
|
|
29468
|
+
"attr:preview-delay"?: (HelixSandbox["previewDelay"] | `${number}`) | undefined;
|
|
29469
|
+
/** How long typing rests before the preview runs the new source, in
|
|
29470
|
+
milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
29471
|
+
frame on each run, so a word typed runs it once. `0` runs it on every
|
|
29472
|
+
edit. */
|
|
29473
|
+
"prop:previewDelay"?: (HelixSandbox["previewDelay"]) | undefined;
|
|
29348
29474
|
/** The name of the divider between the panes, read by screen readers.
|
|
29349
29475
|
`{pane}` is the lead pane, `source` or `preview`, whose share the
|
|
29350
29476
|
divider's value is, so each is a whole sentence: "Resize source pane" or
|
|
@@ -29415,6 +29541,14 @@ export type HelixSandboxSourceProps = {
|
|
|
29415
29541
|
"field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29416
29542
|
/** The editable region's name, read by screen readers. */
|
|
29417
29543
|
fieldLabel?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29544
|
+
/** The editable region's name where the pane has a `label`, so each file's
|
|
29545
|
+
field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
29546
|
+
the pane's `label`. */
|
|
29547
|
+
"field-name-label"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
|
|
29548
|
+
/** The editable region's name where the pane has a `label`, so each file's
|
|
29549
|
+
field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
29550
|
+
the pane's `label`. */
|
|
29551
|
+
fieldNameLabel?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
|
|
29418
29552
|
/** The field's description, read by screen readers while Tab indents. */
|
|
29419
29553
|
"keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
|
|
29420
29554
|
/** The field's description, read by screen readers while Tab indents. */
|
|
@@ -29463,6 +29597,14 @@ export type HelixSandboxSourceSolidJsProps = {
|
|
|
29463
29597
|
"attr:field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29464
29598
|
/** The editable region's name, read by screen readers. */
|
|
29465
29599
|
"prop:fieldLabel"?: (HelixSandboxSource["fieldLabel"]) | undefined;
|
|
29600
|
+
/** The editable region's name where the pane has a `label`, so each file's
|
|
29601
|
+
field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
29602
|
+
the pane's `label`. */
|
|
29603
|
+
"attr:field-name-label"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
|
|
29604
|
+
/** The editable region's name where the pane has a `label`, so each file's
|
|
29605
|
+
field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
29606
|
+
the pane's `label`. */
|
|
29607
|
+
"prop:fieldNameLabel"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
|
|
29466
29608
|
/** The field's description, read by screen readers while Tab indents. */
|
|
29467
29609
|
"attr:keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
|
|
29468
29610
|
/** The field's description, read by screen readers while Tab indents. */
|
|
@@ -45961,6 +46103,11 @@ export type CustomElements = {
|
|
|
45961
46103
|
* the button is drawn only while the cap hides something, measured as the
|
|
45962
46104
|
* block lays out. Not for a diff, whose files each scroll on their own.
|
|
45963
46105
|
* - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
|
|
46106
|
+
* - `file`: The name of the file shown, where the block holds several Code Blocks:
|
|
46107
|
+
* the `label` of one, or its `language` without one.
|
|
46108
|
+
*
|
|
46109
|
+
* Unset, or a name no file has, shows the first.
|
|
46110
|
+
* - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
|
|
45964
46111
|
* - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
|
|
45965
46112
|
* diff with `context-lines`. `{count}` is how many, and each language
|
|
45966
46113
|
* writes the forms it has.
|
|
@@ -46067,7 +46214,11 @@ export type CustomElements = {
|
|
|
46067
46214
|
*
|
|
46068
46215
|
* Events that will be emitted by the component.
|
|
46069
46216
|
*
|
|
46217
|
+
* - `change`: A file tab showed its file, whose name `file` now holds.
|
|
46218
|
+
* - `helix-before-change`: A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
|
|
46070
46219
|
* - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
|
|
46220
|
+
* - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
|
|
46221
|
+
* - `helix-copy-error`: A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
|
|
46071
46222
|
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
46072
46223
|
*
|
|
46073
46224
|
* ## Slots
|
|
@@ -46133,6 +46284,8 @@ export type CustomElements = {
|
|
|
46133
46284
|
* - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
|
|
46134
46285
|
* - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
|
|
46135
46286
|
* - `file`: In a diff, one file's header and block.
|
|
46287
|
+
* - `file-tab`: One file tab, `aria-selected` while its file is shown.
|
|
46288
|
+
* - `files`: The file tabs over the blocks a block holds, where there are several.
|
|
46136
46289
|
* - `filler`: In a split diff, the empty row opposite a line the other side does not have.
|
|
46137
46290
|
* - `fold`: In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
|
|
46138
46291
|
* - `frame`: The code, and the copy button beside it where there is no header.
|
|
@@ -46155,6 +46308,7 @@ export type CustomElements = {
|
|
|
46155
46308
|
* These can be used to apply styling when a component is in a given state.
|
|
46156
46309
|
*
|
|
46157
46310
|
* - `expanded`: The expand button has shown every line of a capped block.
|
|
46311
|
+
* - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
|
|
46158
46312
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
46159
46313
|
*/
|
|
46160
46314
|
"helix-code-block": Partial<
|
|
@@ -51100,6 +51254,7 @@ export type CustomElements = {
|
|
|
51100
51254
|
* - `menu-header`: The bar above a field's page, with the back button and the field's name.
|
|
51101
51255
|
* - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
|
|
51102
51256
|
* - `menu-loading`: Shown while the fields are loading.
|
|
51257
|
+
* - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
51103
51258
|
* - `menu-surface`: The floating panel the menu is drawn on.
|
|
51104
51259
|
* - `menu-title`: The name of the field whose page is showing.
|
|
51105
51260
|
*
|
|
@@ -51728,7 +51883,9 @@ export type CustomElements = {
|
|
|
51728
51883
|
* `narrow` ("3h ago").
|
|
51729
51884
|
*
|
|
51730
51885
|
* The reading refreshes as it goes stale, as `elapsed` does, and the whole
|
|
51731
|
-
* date is its title. `elapsed` wins where both are set.
|
|
51886
|
+
* date is its title. `elapsed` wins where both are set. Written with no
|
|
51887
|
+
* value, as `elapsed` is, or with a style `Intl` does not know, it reads
|
|
51888
|
+
* `long`.
|
|
51732
51889
|
* - `second`: How the second is written, where a time of day is shown.
|
|
51733
51890
|
* - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
|
|
51734
51891
|
* `short`. Set, it stands in for `hour`, `minute`, `second` and
|
|
@@ -56657,6 +56814,7 @@ export type CustomElements = {
|
|
|
56657
56814
|
* These can be used to apply styling when a component is in a given state.
|
|
56658
56815
|
*
|
|
56659
56816
|
* - `checked`: The row is checked.
|
|
56817
|
+
* - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
|
|
56660
56818
|
* - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
|
|
56661
56819
|
* - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
|
|
56662
56820
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -56704,6 +56862,13 @@ export type CustomElements = {
|
|
|
56704
56862
|
* Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
|
|
56705
56863
|
* - `context`: Whether the menu is the trigger's context menu: it opens where the reader
|
|
56706
56864
|
* asks for one, with a right-click, a long press, Shift+F10 or the menu key.
|
|
56865
|
+
* - `filter`: The text the rows are filtered by, which the filter field holds.
|
|
56866
|
+
*
|
|
56867
|
+
* Cleared as the menu closes and as a submenu opens or closes, so each page
|
|
56868
|
+
* starts with every row showing.
|
|
56869
|
+
* - `filterable`: Whether the menu shows a field above its rows that narrows them as the
|
|
56870
|
+
* reader types, with focus staying in the field.
|
|
56871
|
+
* - `filter-label`/`filterLabel`: The filter field's name and placeholder.
|
|
56707
56872
|
* - `label`: Accessible name for the surface.
|
|
56708
56873
|
*
|
|
56709
56874
|
* Empty by default, which names the surface by its trigger, so a menu opened
|
|
@@ -56711,6 +56876,7 @@ export type CustomElements = {
|
|
|
56711
56876
|
* `aria-labelledby` on the host names it too, and wins over both.
|
|
56712
56877
|
* - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
|
|
56713
56878
|
* to open the menu. Translate it with the rest of your interface.
|
|
56879
|
+
* - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
|
|
56714
56880
|
* - `offset`: Space between the trigger and the surface, in pixels.
|
|
56715
56881
|
* - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
|
|
56716
56882
|
* trigger's own action and opens the menu on a press held for half a second,
|
|
@@ -56720,6 +56886,12 @@ export type CustomElements = {
|
|
|
56720
56886
|
* It moves if that side does not fit.
|
|
56721
56887
|
* - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
|
|
56722
56888
|
* a way back. `flyout` opens it in a panel of its own beside its row.
|
|
56889
|
+
* - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
|
|
56890
|
+
* the filter, trimmed, that returns `true` to keep it showing, as React
|
|
56891
|
+
* Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
|
|
56892
|
+
*
|
|
56893
|
+
* Absent, a row is kept where its words hold the filter, in any case. A
|
|
56894
|
+
* property only, there being no way to write a function in markup. (property only)
|
|
56723
56895
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
56724
56896
|
*
|
|
56725
56897
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -56748,6 +56920,7 @@ export type CustomElements = {
|
|
|
56748
56920
|
* - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
|
|
56749
56921
|
* - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
|
|
56750
56922
|
* - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
|
|
56923
|
+
* - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
|
|
56751
56924
|
* - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
|
|
56752
56925
|
*
|
|
56753
56926
|
* ## Slots
|
|
@@ -56755,6 +56928,7 @@ export type CustomElements = {
|
|
|
56755
56928
|
* Areas where markup can be added to the component.
|
|
56756
56929
|
*
|
|
56757
56930
|
* - `(default)`: The items.
|
|
56931
|
+
* - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
|
|
56758
56932
|
* - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
|
|
56759
56933
|
*
|
|
56760
56934
|
* ## Methods
|
|
@@ -56796,7 +56970,8 @@ export type CustomElements = {
|
|
|
56796
56970
|
* - `header`: The bar above a submenu, holding the way back and its name.
|
|
56797
56971
|
* - `live`: A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
|
|
56798
56972
|
* - `loading`: The text shown while the items are loading.
|
|
56799
|
-
* - `
|
|
56973
|
+
* - `search-field`: With `filterable`, the field that narrows the rows.
|
|
56974
|
+
* - `surface`: The floating panel the menu is drawn on. It is the `menu` itself, and with `filterable` it holds the filter field and then the `menu`.
|
|
56800
56975
|
* - `title`: The name of the submenu that is showing.
|
|
56801
56976
|
*
|
|
56802
56977
|
* ## CSS States
|
|
@@ -57821,10 +57996,11 @@ export type CustomElements = {
|
|
|
57821
57996
|
* invalid, as it is in a native number field.
|
|
57822
57997
|
*
|
|
57823
57998
|
* Unset, a step moves by one, or by one percent under a percent format, and
|
|
57824
|
-
* a typed number is rounded to the smallest amount
|
|
57825
|
-
*
|
|
57826
|
-
*
|
|
57827
|
-
* the
|
|
57999
|
+
* a typed number is rounded to the smallest amount the format shows, as
|
|
58000
|
+
* React Aria's NumberField does: a field showing dollars keeps the cents
|
|
58001
|
+
* typed into it, and one with no `format-options` keeps three decimal
|
|
58002
|
+
* places. `any` puts the number on no grid, as it does in a native number
|
|
58003
|
+
* field: a step moves by one, and any number in range is valid.
|
|
57828
58004
|
* - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
|
|
57829
58005
|
* `{below}` and `{above}` filled in with the nearest valid values, written in
|
|
57830
58006
|
* the locale.
|
|
@@ -58020,6 +58196,8 @@ export type CustomElements = {
|
|
|
58020
58196
|
*
|
|
58021
58197
|
* These can be used to apply styling when a component is in a given state.
|
|
58022
58198
|
*
|
|
58199
|
+
* - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
|
|
58200
|
+
* - `at-min`: The number is at `min`, so it cannot step down.
|
|
58023
58201
|
* - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
|
|
58024
58202
|
* - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
|
|
58025
58203
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -58161,6 +58339,13 @@ export type CustomElements = {
|
|
|
58161
58339
|
*
|
|
58162
58340
|
* - `empty`: Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
|
|
58163
58341
|
*
|
|
58342
|
+
* ## Methods
|
|
58343
|
+
*
|
|
58344
|
+
* Methods that can be called to access component functionality.
|
|
58345
|
+
*
|
|
58346
|
+
* - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
|
|
58347
|
+
* is scrolled out of the window, as Tab reaches them.
|
|
58348
|
+
*
|
|
58164
58349
|
* ## CSS Custom Properties
|
|
58165
58350
|
*
|
|
58166
58351
|
* CSS variables available for styling the component.
|
|
@@ -61028,6 +61213,9 @@ export type CustomElements = {
|
|
|
61028
61213
|
* preview do not reference each other, so you can replace either one or use it
|
|
61029
61214
|
* alone.
|
|
61030
61215
|
*
|
|
61216
|
+
* The preview runs an edit once typing has rested for `preview-delay`, 300
|
|
61217
|
+
* milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
|
|
61218
|
+
*
|
|
61031
61219
|
* The event carries the pane's `name`, so one sandbox can hold several panes.
|
|
61032
61220
|
* `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
|
|
61033
61221
|
* a script that runs as a module after the markup. The sandbox ignores a pane
|
|
@@ -61052,6 +61240,16 @@ export type CustomElements = {
|
|
|
61052
61240
|
* like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
|
|
61053
61241
|
* preview. Dispatch `helix-caret` from it too for the status bar's position.
|
|
61054
61242
|
*
|
|
61243
|
+
* Sandbox is styled only and has behavior, as `Aura` is. Its behavior is the
|
|
61244
|
+
* hand-off from a source pane to a preview frame, which works with any pane
|
|
61245
|
+
* that sends `helix-before-edit`, and what it draws is the layout around them:
|
|
61246
|
+
* dividers, file tabs, and a panel. A page that wants another look slots its
|
|
61247
|
+
* own panes and keeps the hand-off, so there is nothing for a headless version
|
|
61248
|
+
* to hold.
|
|
61249
|
+
*
|
|
61250
|
+
* A development build warns about a source pane with no `label` and no `name`,
|
|
61251
|
+
* whose file tab would have no words.
|
|
61252
|
+
*
|
|
61055
61253
|
* On a focused divider, the arrow keys move it, and `Home` and `End` move it
|
|
61056
61254
|
* to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
|
|
61057
61255
|
* again it opens the pane where it was. `Enter` on the panel divider shuts the
|
|
@@ -61117,6 +61315,10 @@ export type CustomElements = {
|
|
|
61117
61315
|
* gives.
|
|
61118
61316
|
* - `panel-label`/`panelLabel`: The name of the panel's divider, read by screen readers.
|
|
61119
61317
|
* - `panel-size`/`panelSize`: Height of the panel, in pixels.
|
|
61318
|
+
* - `preview-delay`/`previewDelay`: How long typing rests before the preview runs the new source, in
|
|
61319
|
+
* milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
61320
|
+
* frame on each run, so a word typed runs it once. `0` runs it on every
|
|
61321
|
+
* edit.
|
|
61120
61322
|
* - `separator-label`/`separatorLabel`: The name of the divider between the panes, read by screen readers.
|
|
61121
61323
|
* `{pane}` is the lead pane, `source` or `preview`, whose share the
|
|
61122
61324
|
* divider's value is, so each is a whole sentence: "Resize source pane" or
|
|
@@ -61227,6 +61429,9 @@ export type CustomElements = {
|
|
|
61227
61429
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
61228
61430
|
*
|
|
61229
61431
|
* - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
|
|
61432
|
+
* - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
|
|
61433
|
+
* field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
61434
|
+
* the pane's `label`.
|
|
61230
61435
|
* - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
|
|
61231
61436
|
* - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
|
|
61232
61437
|
* holds several panes. Empty puts the pane's `name` on the tab.
|
|
@@ -69171,6 +69376,7 @@ export type CustomElements = {
|
|
|
69171
69376
|
* - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
|
|
69172
69377
|
* - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
|
|
69173
69378
|
* - `menu-loading`: Shown while the items are loading.
|
|
69379
|
+
* - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
69174
69380
|
* - `menu-surface`: The floating panel the menu is drawn on.
|
|
69175
69381
|
* - `menu-title`: The name of the submenu that is shown.
|
|
69176
69382
|
* - `poster`: An entry's poster image, if it has one.
|
|
@@ -69706,6 +69912,7 @@ export type CustomElements = {
|
|
|
69706
69912
|
* - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
|
|
69707
69913
|
* - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
|
|
69708
69914
|
* - `captions-menu-loading`: The text shown while the items are loading.
|
|
69915
|
+
* - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
69709
69916
|
* - `captions-menu-surface`: The floating panel the menu is drawn on.
|
|
69710
69917
|
* - `captions-menu-title`: The name of the submenu that is showing.
|
|
69711
69918
|
* - `controls`: The control bar along the bottom.
|
|
@@ -69737,6 +69944,7 @@ export type CustomElements = {
|
|
|
69737
69944
|
* - `overflow-header`: The bar above a submenu, holding the way back and its name.
|
|
69738
69945
|
* - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
|
|
69739
69946
|
* - `overflow-loading`: The text shown while the items are loading.
|
|
69947
|
+
* - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
69740
69948
|
* - `overflow-surface`: The floating panel the menu is drawn on.
|
|
69741
69949
|
* - `overflow-title`: The name of the submenu that is showing.
|
|
69742
69950
|
* - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.
|
|
@@ -75053,6 +75261,11 @@ export type CustomElementsSolidJs = {
|
|
|
75053
75261
|
* the button is drawn only while the cap hides something, measured as the
|
|
75054
75262
|
* block lays out. Not for a diff, whose files each scroll on their own.
|
|
75055
75263
|
* - `expand-label`/`expandLabel`: The expand button's words while the cap hides lines.
|
|
75264
|
+
* - `file`: The name of the file shown, where the block holds several Code Blocks:
|
|
75265
|
+
* the `label` of one, or its `language` without one.
|
|
75266
|
+
*
|
|
75267
|
+
* Unset, or a name no file has, shows the first.
|
|
75268
|
+
* - `files-label`/`filesLabel`: The name of the file tabs, read by screen readers.
|
|
75056
75269
|
* - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a
|
|
75057
75270
|
* diff with `context-lines`. `{count}` is how many, and each language
|
|
75058
75271
|
* writes the forms it has.
|
|
@@ -75159,7 +75372,11 @@ export type CustomElementsSolidJs = {
|
|
|
75159
75372
|
*
|
|
75160
75373
|
* Events that will be emitted by the component.
|
|
75161
75374
|
*
|
|
75375
|
+
* - `change`: A file tab showed its file, whose name `file` now holds.
|
|
75376
|
+
* - `helix-before-change`: A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
|
|
75162
75377
|
* - `helix-before-toggle`: The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
|
|
75378
|
+
* - `helix-copy`: The copy button put the code on the clipboard, with the text in `detail.value`.
|
|
75379
|
+
* - `helix-copy-error`: A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
|
|
75163
75380
|
* - `helix-toggle`: Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
|
|
75164
75381
|
*
|
|
75165
75382
|
* ## Slots
|
|
@@ -75225,6 +75442,8 @@ export type CustomElementsSolidJs = {
|
|
|
75225
75442
|
* - `copy-tooltip-top`: The tooltip while it is above the copy button. Applied with `copy-tooltip`.
|
|
75226
75443
|
* - `expand`: The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
|
|
75227
75444
|
* - `file`: In a diff, one file's header and block.
|
|
75445
|
+
* - `file-tab`: One file tab, `aria-selected` while its file is shown.
|
|
75446
|
+
* - `files`: The file tabs over the blocks a block holds, where there are several.
|
|
75228
75447
|
* - `filler`: In a split diff, the empty row opposite a line the other side does not have.
|
|
75229
75448
|
* - `fold`: In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
|
|
75230
75449
|
* - `frame`: The code, and the copy button beside it where there is no header.
|
|
@@ -75247,6 +75466,7 @@ export type CustomElementsSolidJs = {
|
|
|
75247
75466
|
* These can be used to apply styling when a component is in a given state.
|
|
75248
75467
|
*
|
|
75249
75468
|
* - `expanded`: The expand button has shown every line of a capped block.
|
|
75469
|
+
* - `tabbed`: The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
|
|
75250
75470
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
75251
75471
|
*/
|
|
75252
75472
|
"helix-code-block": Partial<
|
|
@@ -80257,6 +80477,7 @@ export type CustomElementsSolidJs = {
|
|
|
80257
80477
|
* - `menu-header`: The bar above a field's page, with the back button and the field's name.
|
|
80258
80478
|
* - `menu-live`: The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
|
|
80259
80479
|
* - `menu-loading`: Shown while the fields are loading.
|
|
80480
|
+
* - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
80260
80481
|
* - `menu-surface`: The floating panel the menu is drawn on.
|
|
80261
80482
|
* - `menu-title`: The name of the field whose page is showing.
|
|
80262
80483
|
*
|
|
@@ -80896,7 +81117,9 @@ export type CustomElementsSolidJs = {
|
|
|
80896
81117
|
* `narrow` ("3h ago").
|
|
80897
81118
|
*
|
|
80898
81119
|
* The reading refreshes as it goes stale, as `elapsed` does, and the whole
|
|
80899
|
-
* date is its title. `elapsed` wins where both are set.
|
|
81120
|
+
* date is its title. `elapsed` wins where both are set. Written with no
|
|
81121
|
+
* value, as `elapsed` is, or with a style `Intl` does not know, it reads
|
|
81122
|
+
* `long`.
|
|
80900
81123
|
* - `second`: How the second is written, where a time of day is shown.
|
|
80901
81124
|
* - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
|
|
80902
81125
|
* `short`. Set, it stands in for `hour`, `minute`, `second` and
|
|
@@ -85913,6 +86136,7 @@ export type CustomElementsSolidJs = {
|
|
|
85913
86136
|
* These can be used to apply styling when a component is in a given state.
|
|
85914
86137
|
*
|
|
85915
86138
|
* - `checked`: The row is checked.
|
|
86139
|
+
* - `highlighted`: In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
|
|
85916
86140
|
* - `submenu-mark`: Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
|
|
85917
86141
|
* - `submenu-start`: Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.
|
|
85918
86142
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -85963,6 +86187,13 @@ export type CustomElementsSolidJs = {
|
|
|
85963
86187
|
* Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
|
|
85964
86188
|
* - `context`: Whether the menu is the trigger's context menu: it opens where the reader
|
|
85965
86189
|
* asks for one, with a right-click, a long press, Shift+F10 or the menu key.
|
|
86190
|
+
* - `filter`: The text the rows are filtered by, which the filter field holds.
|
|
86191
|
+
*
|
|
86192
|
+
* Cleared as the menu closes and as a submenu opens or closes, so each page
|
|
86193
|
+
* starts with every row showing.
|
|
86194
|
+
* - `filterable`: Whether the menu shows a field above its rows that narrows them as the
|
|
86195
|
+
* reader types, with focus staying in the field.
|
|
86196
|
+
* - `filter-label`/`filterLabel`: The filter field's name and placeholder.
|
|
85966
86197
|
* - `label`: Accessible name for the surface.
|
|
85967
86198
|
*
|
|
85968
86199
|
* Empty by default, which names the surface by its trigger, so a menu opened
|
|
@@ -85970,6 +86201,7 @@ export type CustomElementsSolidJs = {
|
|
|
85970
86201
|
* `aria-labelledby` on the host names it too, and wins over both.
|
|
85971
86202
|
* - `long-press-label`/`longPressLabel`: The description a trigger gives under `open-on="long-press"`, saying how
|
|
85972
86203
|
* to open the menu. Translate it with the rest of your interface.
|
|
86204
|
+
* - `no-results-text`/`noResultsText`: The text shown when the filter keeps no rows.
|
|
85973
86205
|
* - `offset`: Space between the trigger and the surface, in pixels.
|
|
85974
86206
|
* - `open-on`/`openOn`: What opens the menu from its trigger. `long-press` leaves a press to the
|
|
85975
86207
|
* trigger's own action and opens the menu on a press held for half a second,
|
|
@@ -85979,6 +86211,12 @@ export type CustomElementsSolidJs = {
|
|
|
85979
86211
|
* It moves if that side does not fit.
|
|
85980
86212
|
* - `submenus`: How a submenu opens. `drill` shows it in place of the page showing, with
|
|
85981
86213
|
* a way back. `flyout` opens it in a panel of its own beside its row.
|
|
86214
|
+
* - `filterMatch`: Whether a row is kept by the filter: a function given the row's words and
|
|
86215
|
+
* the filter, trimmed, that returns `true` to keep it showing, as React
|
|
86216
|
+
* Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
|
|
86217
|
+
*
|
|
86218
|
+
* Absent, a row is kept where its words hold the filter, in any case. A
|
|
86219
|
+
* property only, there being no way to write a function in markup. (property only)
|
|
85982
86220
|
* - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
|
|
85983
86221
|
*
|
|
85984
86222
|
* **Named `whenSettled` because `settled` is taken four times over**, by
|
|
@@ -86007,6 +86245,7 @@ export type CustomElementsSolidJs = {
|
|
|
86007
86245
|
* - `toggle`: The menu opened or closed. The event carries `newState` and `oldState`.
|
|
86008
86246
|
* - `helix-before-close`: The menu is about to close. Cancelable: cancel it to keep it open.
|
|
86009
86247
|
* - `helix-before-open`: The menu is about to open. Cancelable: cancel it to keep it closed.
|
|
86248
|
+
* - `helix-filter`: The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
|
|
86010
86249
|
* - `helix-select`: An item was chosen. Cancelable: cancel it to keep the menu open.
|
|
86011
86250
|
*
|
|
86012
86251
|
* ## Slots
|
|
@@ -86014,6 +86253,7 @@ export type CustomElementsSolidJs = {
|
|
|
86014
86253
|
* Areas where markup can be added to the component.
|
|
86015
86254
|
*
|
|
86016
86255
|
* - `(default)`: The items.
|
|
86256
|
+
* - `no-results`: What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
|
|
86017
86257
|
* - `trigger`: The control that opens the menu, or with `context` the area a context menu opens over.
|
|
86018
86258
|
*
|
|
86019
86259
|
* ## Methods
|
|
@@ -86055,7 +86295,8 @@ export type CustomElementsSolidJs = {
|
|
|
86055
86295
|
* - `header`: The bar above a submenu, holding the way back and its name.
|
|
86056
86296
|
* - `live`: A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
|
|
86057
86297
|
* - `loading`: The text shown while the items are loading.
|
|
86058
|
-
* - `
|
|
86298
|
+
* - `search-field`: With `filterable`, the field that narrows the rows.
|
|
86299
|
+
* - `surface`: The floating panel the menu is drawn on. It is the `menu` itself, and with `filterable` it holds the filter field and then the `menu`.
|
|
86059
86300
|
* - `title`: The name of the submenu that is showing.
|
|
86060
86301
|
*
|
|
86061
86302
|
* ## CSS States
|
|
@@ -87102,10 +87343,11 @@ export type CustomElementsSolidJs = {
|
|
|
87102
87343
|
* invalid, as it is in a native number field.
|
|
87103
87344
|
*
|
|
87104
87345
|
* Unset, a step moves by one, or by one percent under a percent format, and
|
|
87105
|
-
* a typed number is rounded to the smallest amount
|
|
87106
|
-
*
|
|
87107
|
-
*
|
|
87108
|
-
* the
|
|
87346
|
+
* a typed number is rounded to the smallest amount the format shows, as
|
|
87347
|
+
* React Aria's NumberField does: a field showing dollars keeps the cents
|
|
87348
|
+
* typed into it, and one with no `format-options` keeps three decimal
|
|
87349
|
+
* places. `any` puts the number on no grid, as it does in a native number
|
|
87350
|
+
* field: a step moves by one, and any number in range is valid.
|
|
87109
87351
|
* - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
|
|
87110
87352
|
* `{below}` and `{above}` filled in with the nearest valid values, written in
|
|
87111
87353
|
* the locale.
|
|
@@ -87301,6 +87543,8 @@ export type CustomElementsSolidJs = {
|
|
|
87301
87543
|
*
|
|
87302
87544
|
* These can be used to apply styling when a component is in a given state.
|
|
87303
87545
|
*
|
|
87546
|
+
* - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
|
|
87547
|
+
* - `at-min`: The number is at `min`, so it cannot step down.
|
|
87304
87548
|
* - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
|
|
87305
87549
|
* - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
|
|
87306
87550
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
@@ -87445,6 +87689,13 @@ export type CustomElementsSolidJs = {
|
|
|
87445
87689
|
*
|
|
87446
87690
|
* - `empty`: Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
|
|
87447
87691
|
*
|
|
87692
|
+
* ## Methods
|
|
87693
|
+
*
|
|
87694
|
+
* Methods that can be called to access component functionality.
|
|
87695
|
+
*
|
|
87696
|
+
* - `focus(options?: FocusOptions) => void`: Moves focus to the row the keys move from, or to the tree while that row
|
|
87697
|
+
* is scrolled out of the window, as Tab reaches them.
|
|
87698
|
+
*
|
|
87448
87699
|
* ## CSS Custom Properties
|
|
87449
87700
|
*
|
|
87450
87701
|
* CSS variables available for styling the component.
|
|
@@ -90369,6 +90620,9 @@ export type CustomElementsSolidJs = {
|
|
|
90369
90620
|
* preview do not reference each other, so you can replace either one or use it
|
|
90370
90621
|
* alone.
|
|
90371
90622
|
*
|
|
90623
|
+
* The preview runs an edit once typing has rested for `preview-delay`, 300
|
|
90624
|
+
* milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
|
|
90625
|
+
*
|
|
90372
90626
|
* The event carries the pane's `name`, so one sandbox can hold several panes.
|
|
90373
90627
|
* `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
|
|
90374
90628
|
* a script that runs as a module after the markup. The sandbox ignores a pane
|
|
@@ -90393,6 +90647,16 @@ export type CustomElementsSolidJs = {
|
|
|
90393
90647
|
* like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
|
|
90394
90648
|
* preview. Dispatch `helix-caret` from it too for the status bar's position.
|
|
90395
90649
|
*
|
|
90650
|
+
* Sandbox is styled only and has behavior, as `Aura` is. Its behavior is the
|
|
90651
|
+
* hand-off from a source pane to a preview frame, which works with any pane
|
|
90652
|
+
* that sends `helix-before-edit`, and what it draws is the layout around them:
|
|
90653
|
+
* dividers, file tabs, and a panel. A page that wants another look slots its
|
|
90654
|
+
* own panes and keeps the hand-off, so there is nothing for a headless version
|
|
90655
|
+
* to hold.
|
|
90656
|
+
*
|
|
90657
|
+
* A development build warns about a source pane with no `label` and no `name`,
|
|
90658
|
+
* whose file tab would have no words.
|
|
90659
|
+
*
|
|
90396
90660
|
* On a focused divider, the arrow keys move it, and `Home` and `End` move it
|
|
90397
90661
|
* to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
|
|
90398
90662
|
* again it opens the pane where it was. `Enter` on the panel divider shuts the
|
|
@@ -90458,6 +90722,10 @@ export type CustomElementsSolidJs = {
|
|
|
90458
90722
|
* gives.
|
|
90459
90723
|
* - `panel-label`/`panelLabel`: The name of the panel's divider, read by screen readers.
|
|
90460
90724
|
* - `panel-size`/`panelSize`: Height of the panel, in pixels.
|
|
90725
|
+
* - `preview-delay`/`previewDelay`: How long typing rests before the preview runs the new source, in
|
|
90726
|
+
* milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
|
|
90727
|
+
* frame on each run, so a word typed runs it once. `0` runs it on every
|
|
90728
|
+
* edit.
|
|
90461
90729
|
* - `separator-label`/`separatorLabel`: The name of the divider between the panes, read by screen readers.
|
|
90462
90730
|
* `{pane}` is the lead pane, `source` or `preview`, whose share the
|
|
90463
90731
|
* divider's value is, so each is a whole sentence: "Resize source pane" or
|
|
@@ -90571,6 +90839,9 @@ export type CustomElementsSolidJs = {
|
|
|
90571
90839
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
90572
90840
|
*
|
|
90573
90841
|
* - `field-label`/`fieldLabel`: The editable region's name, read by screen readers.
|
|
90842
|
+
* - `field-name-label`/`fieldNameLabel`: The editable region's name where the pane has a `label`, so each file's
|
|
90843
|
+
* field says which file it holds. `{field}` is `field-label` and `{name}`
|
|
90844
|
+
* the pane's `label`.
|
|
90574
90845
|
* - `keys-description`/`keysDescription`: The field's description, read by screen readers while Tab indents.
|
|
90575
90846
|
* - `label`: The pane's file name, such as `index.html`, on its tab where a sandbox
|
|
90576
90847
|
* holds several panes. Empty puts the pane's `name` on the tab.
|
|
@@ -98665,6 +98936,7 @@ export type CustomElementsSolidJs = {
|
|
|
98665
98936
|
* - `menu-header`: The bar above a submenu, holding the back button and the submenu's name.
|
|
98666
98937
|
* - `menu-live`: The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
|
|
98667
98938
|
* - `menu-loading`: Shown while the items are loading.
|
|
98939
|
+
* - `menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
98668
98940
|
* - `menu-surface`: The floating panel the menu is drawn on.
|
|
98669
98941
|
* - `menu-title`: The name of the submenu that is shown.
|
|
98670
98942
|
* - `poster`: An entry's poster image, if it has one.
|
|
@@ -99206,6 +99478,7 @@ export type CustomElementsSolidJs = {
|
|
|
99206
99478
|
* - `captions-menu-header`: The bar above a submenu, holding the way back and its name.
|
|
99207
99479
|
* - `captions-menu-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
|
|
99208
99480
|
* - `captions-menu-loading`: The text shown while the items are loading.
|
|
99481
|
+
* - `captions-menu-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
99209
99482
|
* - `captions-menu-surface`: The floating panel the menu is drawn on.
|
|
99210
99483
|
* - `captions-menu-title`: The name of the submenu that is showing.
|
|
99211
99484
|
* - `controls`: The control bar along the bottom.
|
|
@@ -99237,6 +99510,7 @@ export type CustomElementsSolidJs = {
|
|
|
99237
99510
|
* - `overflow-header`: The bar above a submenu, holding the way back and its name.
|
|
99238
99511
|
* - `overflow-live`: The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
|
|
99239
99512
|
* - `overflow-loading`: The text shown while the items are loading.
|
|
99513
|
+
* - `overflow-search-field`: The inner menu's filter field, drawn with `filterable`.
|
|
99240
99514
|
* - `overflow-surface`: The floating panel the menu is drawn on.
|
|
99241
99515
|
* - `overflow-title`: The name of the submenu that is showing.
|
|
99242
99516
|
* - `pip`: The picture-in-picture button, when `extra-controls` includes it and the browser supports it.
|