@fusion.dev/helix 0.149.1 → 0.150.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 +545 -21
- package/dist/element-events.generated.js +1 -1
- package/dist/option/root/option-root.css.js +2 -1
- package/dist/tag/root/tag-root.css.js +1 -1
- package/dist/tag/root/tag-root.d.ts +5 -0
- package/dist/tag/root/tag-root.js +3 -0
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +118 -44
- package/types/vue.d.ts +25 -10
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fusion.dev/helix",
|
|
3
3
|
"description": "Styled component tier. Extends the headless tier with token-driven presentation.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.150.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ross Sheppard <ross.sheppard@fusion.dev>",
|
|
7
7
|
"repository": {
|
|
@@ -54,13 +54,13 @@
|
|
|
54
54
|
},
|
|
55
55
|
"bugs": "https://github.com/project-fusion/fusion/issues",
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@fusion.dev/helix-core": "0.
|
|
58
|
-
"@fusion.dev/helix-headless": "0.
|
|
59
|
-
"@fusion.dev/helix-styles": "0.
|
|
57
|
+
"@fusion.dev/helix-core": "0.150.0",
|
|
58
|
+
"@fusion.dev/helix-headless": "0.150.0",
|
|
59
|
+
"@fusion.dev/helix-styles": "0.150.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
|
-
"@fusion.dev/helix-cem": "0.
|
|
63
|
-
"@fusion.dev/helix-testing": "0.
|
|
62
|
+
"@fusion.dev/helix-cem": "0.150.0",
|
|
63
|
+
"@fusion.dev/helix-testing": "0.150.0",
|
|
64
64
|
"@fusion.dev/scripts": "0.0.0-dev",
|
|
65
65
|
"@happy-dom/global-registrator": "^20.14.5",
|
|
66
66
|
"@lit-labs/ssr": "^4.1.0",
|
package/types/jsx.d.ts
CHANGED
|
@@ -23344,14 +23344,10 @@ between them makes a reader parse the punctuation to find where the name
|
|
|
23344
23344
|
ends. Matching still reads the label, so what somebody types is matched
|
|
23345
23345
|
against the name rather than against prose about it.
|
|
23346
23346
|
|
|
23347
|
-
|
|
23348
|
-
|
|
23349
|
-
|
|
23350
|
-
|
|
23351
|
-
filled, so every option without a caption would carry an empty line. The
|
|
23352
|
-
detection that would avoid it does not exist, `:host(:has())` being invalid
|
|
23353
|
-
and the server having no children to inspect. A property is known at render
|
|
23354
|
-
time, so the component can decline to draw the box at all.
|
|
23347
|
+
For a caption richer than a string, slot it into `description`. The
|
|
23348
|
+
property is that slot's fallback inside the `description` part. With no
|
|
23349
|
+
property the slot is drawn bare, which takes no box while it is empty, so
|
|
23350
|
+
an option without a caption carries no empty line.
|
|
23355
23351
|
|
|
23356
23352
|
It does not reflect, per the rule that payload state stays off the host: a
|
|
23357
23353
|
string is not a fact a selector needs. */
|
|
@@ -23439,6 +23435,13 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
23439
23435
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
23440
23436
|
change of its own rather than a property being added. */
|
|
23441
23437
|
defaultSelected?: (HelixOption["defaultSelected"]) | undefined;
|
|
23438
|
+
/** Whether the option says it is selected while the keyboard is on it.
|
|
23439
|
+
|
|
23440
|
+
Written by a control whose list holds suggestions, such as `FilterInput`:
|
|
23441
|
+
nothing there stays chosen, so the row the keyboard is on is the
|
|
23442
|
+
selection, as the APG combobox's list with selection that follows focus
|
|
23443
|
+
says. No attribute: it is coordination between elements. */
|
|
23444
|
+
selectionFollowsActive?: (HelixOption["selectionFollowsActive"]) | undefined;
|
|
23442
23445
|
|
|
23443
23446
|
/** The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`. */
|
|
23444
23447
|
"onhelix-select"?: ((e: HelixOptionHelixSelectElementEvent) => void) | undefined;
|
|
@@ -23501,14 +23504,10 @@ between them makes a reader parse the punctuation to find where the name
|
|
|
23501
23504
|
ends. Matching still reads the label, so what somebody types is matched
|
|
23502
23505
|
against the name rather than against prose about it.
|
|
23503
23506
|
|
|
23504
|
-
|
|
23505
|
-
|
|
23506
|
-
|
|
23507
|
-
|
|
23508
|
-
filled, so every option without a caption would carry an empty line. The
|
|
23509
|
-
detection that would avoid it does not exist, `:host(:has())` being invalid
|
|
23510
|
-
and the server having no children to inspect. A property is known at render
|
|
23511
|
-
time, so the component can decline to draw the box at all.
|
|
23507
|
+
For a caption richer than a string, slot it into `description`. The
|
|
23508
|
+
property is that slot's fallback inside the `description` part. With no
|
|
23509
|
+
property the slot is drawn bare, which takes no box while it is empty, so
|
|
23510
|
+
an option without a caption carries no empty line.
|
|
23512
23511
|
|
|
23513
23512
|
It does not reflect, per the rule that payload state stays off the host: a
|
|
23514
23513
|
string is not a fact a selector needs. */
|
|
@@ -23596,6 +23595,13 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
23596
23595
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
23597
23596
|
change of its own rather than a property being added. */
|
|
23598
23597
|
"prop:defaultSelected"?: (HelixOption["defaultSelected"]) | undefined;
|
|
23598
|
+
/** Whether the option says it is selected while the keyboard is on it.
|
|
23599
|
+
|
|
23600
|
+
Written by a control whose list holds suggestions, such as `FilterInput`:
|
|
23601
|
+
nothing there stays chosen, so the row the keyboard is on is the
|
|
23602
|
+
selection, as the APG combobox's list with selection that follows focus
|
|
23603
|
+
says. No attribute: it is coordination between elements. */
|
|
23604
|
+
"prop:selectionFollowsActive"?: (HelixOption["selectionFollowsActive"]) | undefined;
|
|
23599
23605
|
/** The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`. */
|
|
23600
23606
|
"on:helix-select"?: ((e: HelixOptionHelixSelectElementEvent) => void) | undefined;
|
|
23601
23607
|
|
|
@@ -30959,6 +30965,9 @@ Independent of `tone` on purpose: an outlined danger tag and a solid danger
|
|
|
30959
30965
|
tag are both sensible, and one property welding color to fill can ask for
|
|
30960
30966
|
neither. That is the test the whole axis registry answers to. */
|
|
30961
30967
|
emphasis?: (HelixTag["emphasis"]) | undefined;
|
|
30968
|
+
/** The tag's outline. `pill` rounds its ends fully, for a set of tags among
|
|
30969
|
+
rounded controls. Absent is the theme's small radius. */
|
|
30970
|
+
shape?: (HelixTag["shape"]) | undefined;
|
|
30962
30971
|
/** The meaning the tag's color shows, such as `success` or `danger`.
|
|
30963
30972
|
|
|
30964
30973
|
`tone` is semantic color, which is what these are and what `helix-text`
|
|
@@ -31007,6 +31016,13 @@ be selected or removed. */
|
|
|
31007
31016
|
|
|
31008
31017
|
Absent is the tag's own words, its category first. */
|
|
31009
31018
|
value?: (HelixTag["value"]) | undefined;
|
|
31019
|
+
/** Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
|
|
31020
|
+
|
|
31021
|
+
A field that holds tags as its tokens, such as a `multiple` Combobox,
|
|
31022
|
+
writes `false`: the field's text is its one tab stop, and the arrow keys
|
|
31023
|
+
move from the text to the tags. No attribute: it is coordination between
|
|
31024
|
+
elements, as `focusable` is. */
|
|
31025
|
+
dismissTabStop?: (HelixTag["dismissTabStop"]) | undefined;
|
|
31010
31026
|
/** Whether the tag holds its group's tab stop.
|
|
31011
31027
|
|
|
31012
31028
|
Written by `Tag.Group` on every tag it holds, and unset outside one, which
|
|
@@ -31038,6 +31054,9 @@ Independent of `tone` on purpose: an outlined danger tag and a solid danger
|
|
|
31038
31054
|
tag are both sensible, and one property welding color to fill can ask for
|
|
31039
31055
|
neither. That is the test the whole axis registry answers to. */
|
|
31040
31056
|
"prop:emphasis"?: (HelixTag["emphasis"]) | undefined;
|
|
31057
|
+
/** The tag's outline. `pill` rounds its ends fully, for a set of tags among
|
|
31058
|
+
rounded controls. Absent is the theme's small radius. */
|
|
31059
|
+
"prop:shape"?: (HelixTag["shape"]) | undefined;
|
|
31041
31060
|
/** The meaning the tag's color shows, such as `success` or `danger`.
|
|
31042
31061
|
|
|
31043
31062
|
`tone` is semantic color, which is what these are and what `helix-text`
|
|
@@ -31086,6 +31105,13 @@ be selected or removed. */
|
|
|
31086
31105
|
|
|
31087
31106
|
Absent is the tag's own words, its category first. */
|
|
31088
31107
|
"prop:value"?: (HelixTag["value"]) | undefined;
|
|
31108
|
+
/** Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
|
|
31109
|
+
|
|
31110
|
+
A field that holds tags as its tokens, such as a `multiple` Combobox,
|
|
31111
|
+
writes `false`: the field's text is its one tab stop, and the arrow keys
|
|
31112
|
+
move from the text to the tags. No attribute: it is coordination between
|
|
31113
|
+
elements, as `focusable` is. */
|
|
31114
|
+
"prop:dismissTabStop"?: (HelixTag["dismissTabStop"]) | undefined;
|
|
31089
31115
|
/** Whether the tag holds its group's tab stop.
|
|
31090
31116
|
|
|
31091
31117
|
Written by `Tag.Group` on every tag it holds, and unset outside one, which
|
|
@@ -33668,8 +33694,8 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
33668
33694
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
33669
33695
|
change of its own rather than a property being added. */
|
|
33670
33696
|
defaultSelected?: (HelixToggle["defaultSelected"]) | undefined;
|
|
33671
|
-
/** Whether the item holds the group's tab stop. Unset,
|
|
33672
|
-
it.
|
|
33697
|
+
/** Whether the item holds the group's tab stop. Unset, no group holds the
|
|
33698
|
+
item, and it is a toggle button with a tab stop of its own.
|
|
33673
33699
|
|
|
33674
33700
|
Written by the group on every item: `true` for the chosen item, or for the
|
|
33675
33701
|
first item that can be chosen while there is no selection to carry the
|
|
@@ -33684,6 +33710,8 @@ React consumer's hydration reports and does not patch up. */
|
|
|
33684
33710
|
Written by the group, like `selected`, so no attribute. */
|
|
33685
33711
|
pressed?: (HelixToggle["pressed"]) | undefined;
|
|
33686
33712
|
|
|
33713
|
+
/** Fired after a toggle button on its own is pressed or released. */
|
|
33714
|
+
onchange?: ((e: HelixToggleElementEvent) => void) | undefined;
|
|
33687
33715
|
/** Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice. */
|
|
33688
33716
|
"onhelix-select"?: ((e: HelixToggleHelixSelectElementEvent) => void) | undefined;
|
|
33689
33717
|
};
|
|
@@ -33726,8 +33754,8 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
33726
33754
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
33727
33755
|
change of its own rather than a property being added. */
|
|
33728
33756
|
"prop:defaultSelected"?: (HelixToggle["defaultSelected"]) | undefined;
|
|
33729
|
-
/** Whether the item holds the group's tab stop. Unset,
|
|
33730
|
-
it.
|
|
33757
|
+
/** Whether the item holds the group's tab stop. Unset, no group holds the
|
|
33758
|
+
item, and it is a toggle button with a tab stop of its own.
|
|
33731
33759
|
|
|
33732
33760
|
Written by the group on every item: `true` for the chosen item, or for the
|
|
33733
33761
|
first item that can be chosen while there is no selection to carry the
|
|
@@ -33741,6 +33769,8 @@ React consumer's hydration reports and does not patch up. */
|
|
|
33741
33769
|
|
|
33742
33770
|
Written by the group, like `selected`, so no attribute. */
|
|
33743
33771
|
"prop:pressed"?: (HelixToggle["pressed"]) | undefined;
|
|
33772
|
+
/** Fired after a toggle button on its own is pressed or released. */
|
|
33773
|
+
"on:change"?: ((e: HelixToggleElementEvent) => void) | undefined;
|
|
33744
33774
|
/** Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice. */
|
|
33745
33775
|
"on:helix-select"?: ((e: HelixToggleHelixSelectElementEvent) => void) | undefined;
|
|
33746
33776
|
|
|
@@ -41744,6 +41774,7 @@ export type CustomElements = {
|
|
|
41744
41774
|
* - `end`: Content at the trailing end, before the trigger.
|
|
41745
41775
|
* - `feedback`: The message that says what is wrong with the value.
|
|
41746
41776
|
* - `hint`: Help text under the field.
|
|
41777
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
41747
41778
|
* - `panel-footer`: Content in the panel under the picker, such as a note or an action.
|
|
41748
41779
|
* - `panel-header`: Content in the panel above the picker, such as a heading or a shortcut.
|
|
41749
41780
|
* - `start`: Content at the leading end of the field, inside its border.
|
|
@@ -43049,7 +43080,7 @@ export type CustomElements = {
|
|
|
43049
43080
|
* Custom selectors for styling elements within the component.
|
|
43050
43081
|
*
|
|
43051
43082
|
* - `button`: The inner button.
|
|
43052
|
-
* - `live`: The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time
|
|
43083
|
+
* - `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.
|
|
43053
43084
|
* - `mark`: The clipboard icon, and the confirmation icon that replaces it.
|
|
43054
43085
|
* - `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.
|
|
43055
43086
|
* - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
|
|
@@ -43750,6 +43781,7 @@ export type CustomElements = {
|
|
|
43750
43781
|
*
|
|
43751
43782
|
* - `feedback`: The error message under the field.
|
|
43752
43783
|
* - `hint`: The help text under the field.
|
|
43784
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
43753
43785
|
* - `next-icon`: The icon on the calendar's next month control.
|
|
43754
43786
|
* - `panel-footer`: Content in the panel under the calendar, such as a note or an action.
|
|
43755
43787
|
* - `panel-header`: Content in the panel above the calendar, such as a heading or a shortcut.
|
|
@@ -53099,14 +53131,10 @@ export type CustomElements = {
|
|
|
53099
53131
|
* ends. Matching still reads the label, so what somebody types is matched
|
|
53100
53132
|
* against the name rather than against prose about it.
|
|
53101
53133
|
*
|
|
53102
|
-
*
|
|
53103
|
-
*
|
|
53104
|
-
*
|
|
53105
|
-
*
|
|
53106
|
-
* filled, so every option without a caption would carry an empty line. The
|
|
53107
|
-
* detection that would avoid it does not exist, `:host(:has())` being invalid
|
|
53108
|
-
* and the server having no children to inspect. A property is known at render
|
|
53109
|
-
* time, so the component can decline to draw the box at all.
|
|
53134
|
+
* For a caption richer than a string, slot it into `description`. The
|
|
53135
|
+
* property is that slot's fallback inside the `description` part. With no
|
|
53136
|
+
* property the slot is drawn bare, which takes no box while it is empty, so
|
|
53137
|
+
* an option without a caption carries no empty line.
|
|
53110
53138
|
*
|
|
53111
53139
|
* It does not reflect, per the rule that payload state stays off the host: a
|
|
53112
53140
|
* string is not a fact a selector needs.
|
|
@@ -53175,6 +53203,12 @@ export type CustomElements = {
|
|
|
53175
53203
|
* name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
53176
53204
|
* Splitting them means moving what every stylesheet selects on, which is a
|
|
53177
53205
|
* change of its own rather than a property being added. (property only)
|
|
53206
|
+
* - `selectionFollowsActive`: Whether the option says it is selected while the keyboard is on it.
|
|
53207
|
+
*
|
|
53208
|
+
* Written by a control whose list holds suggestions, such as `FilterInput`:
|
|
53209
|
+
* nothing there stays chosen, so the row the keyboard is on is the
|
|
53210
|
+
* selection, as the APG combobox's list with selection that follows focus
|
|
53211
|
+
* says. No attribute: it is coordination between elements. (property only)
|
|
53178
53212
|
* - `text`: The option's text, which a listbox matches typed text against.
|
|
53179
53213
|
*
|
|
53180
53214
|
* Read from the rendered content rather than required as a property, because
|
|
@@ -53247,7 +53281,9 @@ export type CustomElements = {
|
|
|
53247
53281
|
* Areas where markup can be added to the component.
|
|
53248
53282
|
*
|
|
53249
53283
|
* - `(default)`: The option's label.
|
|
53284
|
+
* - `description`: A second line under the label, for content richer than the `description` text.
|
|
53250
53285
|
* - `end`: Content after the label, such as a shortcut or a count.
|
|
53286
|
+
* - `indicator`: An icon shown while the option is chosen, in place of the check the styled option draws.
|
|
53251
53287
|
* - `start`: Content before the label, such as an icon or an avatar.
|
|
53252
53288
|
*
|
|
53253
53289
|
* ## Methods
|
|
@@ -53284,6 +53320,8 @@ export type CustomElements = {
|
|
|
53284
53320
|
* These can be used to apply styling when a component is in a given state.
|
|
53285
53321
|
*
|
|
53286
53322
|
* - `active`: While the keyboard is on the option, which is the option `aria-activedescendant` names.
|
|
53323
|
+
* - `disabled`: While the option cannot be chosen.
|
|
53324
|
+
* - `has-indicator`: An icon is slotted into `indicator`.
|
|
53287
53325
|
* - `selected`: While the option is chosen.
|
|
53288
53326
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
53289
53327
|
*/
|
|
@@ -54920,7 +54958,11 @@ export type CustomElements = {
|
|
|
54920
54958
|
*
|
|
54921
54959
|
* No attribute: it is coordination between elements, and a consumer has no
|
|
54922
54960
|
* reason to set it. (property only)
|
|
54923
|
-
* - `items`: The radios, in light-DOM order. Client only: the server has no tree.
|
|
54961
|
+
* - `items`: The radios, in light-DOM order. Client only: the server has no tree.
|
|
54962
|
+
*
|
|
54963
|
+
* Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
|
|
54964
|
+
* layout wrapper of yours is one of the group's. A radio held by a group
|
|
54965
|
+
* nested inside this one is that group's. (property only) (readonly)
|
|
54924
54966
|
* - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
|
|
54925
54967
|
* - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
|
|
54926
54968
|
* - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
|
|
@@ -59690,6 +59732,8 @@ export type CustomElements = {
|
|
|
59690
59732
|
* Independent of `tone` on purpose: an outlined danger tag and a solid danger
|
|
59691
59733
|
* tag are both sensible, and one property welding color to fill can ask for
|
|
59692
59734
|
* neither. That is the test the whole axis registry answers to.
|
|
59735
|
+
* - `shape`: The tag's outline. `pill` rounds its ends fully, for a set of tags among
|
|
59736
|
+
* rounded controls. Absent is the theme's small radius.
|
|
59693
59737
|
* - `tone`: The meaning the tag's color shows, such as `success` or `danger`.
|
|
59694
59738
|
*
|
|
59695
59739
|
* `tone` is semantic color, which is what these are and what `helix-text`
|
|
@@ -59721,6 +59765,12 @@ export type CustomElements = {
|
|
|
59721
59765
|
* - `value`: What the tag stands for in its group's `value`.
|
|
59722
59766
|
*
|
|
59723
59767
|
* Absent is the tag's own words, its category first.
|
|
59768
|
+
* - `dismissTabStop`: Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
|
|
59769
|
+
*
|
|
59770
|
+
* A field that holds tags as its tokens, such as a `multiple` Combobox,
|
|
59771
|
+
* writes `false`: the field's text is its one tab stop, and the arrow keys
|
|
59772
|
+
* move from the text to the tags. No attribute: it is coordination between
|
|
59773
|
+
* elements, as `focusable` is. (property only)
|
|
59724
59774
|
* - `focusable`: Whether the tag holds its group's tab stop.
|
|
59725
59775
|
*
|
|
59726
59776
|
* Written by `Tag.Group` on every tag it holds, and unset outside one, which
|
|
@@ -60447,6 +60497,7 @@ export type CustomElements = {
|
|
|
60447
60497
|
*
|
|
60448
60498
|
* - `feedback`: The message that says what is wrong with the value.
|
|
60449
60499
|
* - `hint`: Help under the field.
|
|
60500
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
60450
60501
|
* - `panel-footer`: Content in the panel under the times, such as a note or an action.
|
|
60451
60502
|
* - `panel-header`: Content in the panel above the times, such as a heading or a shortcut.
|
|
60452
60503
|
* - `trigger`: The icon on the field that shows a list opens.
|
|
@@ -61735,8 +61786,8 @@ export type CustomElements = {
|
|
|
61735
61786
|
* name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
61736
61787
|
* Splitting them means moving what every stylesheet selects on, which is a
|
|
61737
61788
|
* change of its own rather than a property being added. (property only)
|
|
61738
|
-
* - `focusable`: Whether the item holds the group's tab stop. Unset,
|
|
61739
|
-
* it.
|
|
61789
|
+
* - `focusable`: Whether the item holds the group's tab stop. Unset, no group holds the
|
|
61790
|
+
* item, and it is a toggle button with a tab stop of its own.
|
|
61740
61791
|
*
|
|
61741
61792
|
* Written by the group on every item: `true` for the chosen item, or for the
|
|
61742
61793
|
* first item that can be chosen while there is no selection to carry the
|
|
@@ -61773,6 +61824,7 @@ export type CustomElements = {
|
|
|
61773
61824
|
*
|
|
61774
61825
|
* Events that will be emitted by the component.
|
|
61775
61826
|
*
|
|
61827
|
+
* - `change`: Fired after a toggle button on its own is pressed or released.
|
|
61776
61828
|
* - `helix-select`: Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
|
|
61777
61829
|
*
|
|
61778
61830
|
* ## Slots
|
|
@@ -69077,6 +69129,7 @@ export type CustomElementsSolidJs = {
|
|
|
69077
69129
|
* - `end`: Content at the trailing end, before the trigger.
|
|
69078
69130
|
* - `feedback`: The message that says what is wrong with the value.
|
|
69079
69131
|
* - `hint`: Help text under the field.
|
|
69132
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
69080
69133
|
* - `panel-footer`: Content in the panel under the picker, such as a note or an action.
|
|
69081
69134
|
* - `panel-header`: Content in the panel above the picker, such as a heading or a shortcut.
|
|
69082
69135
|
* - `start`: Content at the leading end of the field, inside its border.
|
|
@@ -70394,7 +70447,7 @@ export type CustomElementsSolidJs = {
|
|
|
70394
70447
|
* Custom selectors for styling elements within the component.
|
|
70395
70448
|
*
|
|
70396
70449
|
* - `button`: The inner button.
|
|
70397
|
-
* - `live`: The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time
|
|
70450
|
+
* - `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.
|
|
70398
70451
|
* - `mark`: The clipboard icon, and the confirmation icon that replaces it.
|
|
70399
70452
|
* - `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.
|
|
70400
70453
|
* - `tooltip`: The tooltip bubble, forwarded from the tooltip inside the button.
|
|
@@ -71101,6 +71154,7 @@ export type CustomElementsSolidJs = {
|
|
|
71101
71154
|
*
|
|
71102
71155
|
* - `feedback`: The error message under the field.
|
|
71103
71156
|
* - `hint`: The help text under the field.
|
|
71157
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
71104
71158
|
* - `next-icon`: The icon on the calendar's next month control.
|
|
71105
71159
|
* - `panel-footer`: Content in the panel under the calendar, such as a note or an action.
|
|
71106
71160
|
* - `panel-header`: Content in the panel above the calendar, such as a heading or a shortcut.
|
|
@@ -80625,14 +80679,10 @@ export type CustomElementsSolidJs = {
|
|
|
80625
80679
|
* ends. Matching still reads the label, so what somebody types is matched
|
|
80626
80680
|
* against the name rather than against prose about it.
|
|
80627
80681
|
*
|
|
80628
|
-
*
|
|
80629
|
-
*
|
|
80630
|
-
*
|
|
80631
|
-
*
|
|
80632
|
-
* filled, so every option without a caption would carry an empty line. The
|
|
80633
|
-
* detection that would avoid it does not exist, `:host(:has())` being invalid
|
|
80634
|
-
* and the server having no children to inspect. A property is known at render
|
|
80635
|
-
* time, so the component can decline to draw the box at all.
|
|
80682
|
+
* For a caption richer than a string, slot it into `description`. The
|
|
80683
|
+
* property is that slot's fallback inside the `description` part. With no
|
|
80684
|
+
* property the slot is drawn bare, which takes no box while it is empty, so
|
|
80685
|
+
* an option without a caption carries no empty line.
|
|
80636
80686
|
*
|
|
80637
80687
|
* It does not reflect, per the rule that payload state stays off the host: a
|
|
80638
80688
|
* string is not a fact a selector needs.
|
|
@@ -80701,6 +80751,12 @@ export type CustomElementsSolidJs = {
|
|
|
80701
80751
|
* name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
80702
80752
|
* Splitting them means moving what every stylesheet selects on, which is a
|
|
80703
80753
|
* change of its own rather than a property being added. (property only)
|
|
80754
|
+
* - `selectionFollowsActive`: Whether the option says it is selected while the keyboard is on it.
|
|
80755
|
+
*
|
|
80756
|
+
* Written by a control whose list holds suggestions, such as `FilterInput`:
|
|
80757
|
+
* nothing there stays chosen, so the row the keyboard is on is the
|
|
80758
|
+
* selection, as the APG combobox's list with selection that follows focus
|
|
80759
|
+
* says. No attribute: it is coordination between elements. (property only)
|
|
80704
80760
|
* - `text`: The option's text, which a listbox matches typed text against.
|
|
80705
80761
|
*
|
|
80706
80762
|
* Read from the rendered content rather than required as a property, because
|
|
@@ -80773,7 +80829,9 @@ export type CustomElementsSolidJs = {
|
|
|
80773
80829
|
* Areas where markup can be added to the component.
|
|
80774
80830
|
*
|
|
80775
80831
|
* - `(default)`: The option's label.
|
|
80832
|
+
* - `description`: A second line under the label, for content richer than the `description` text.
|
|
80776
80833
|
* - `end`: Content after the label, such as a shortcut or a count.
|
|
80834
|
+
* - `indicator`: An icon shown while the option is chosen, in place of the check the styled option draws.
|
|
80777
80835
|
* - `start`: Content before the label, such as an icon or an avatar.
|
|
80778
80836
|
*
|
|
80779
80837
|
* ## Methods
|
|
@@ -80810,6 +80868,8 @@ export type CustomElementsSolidJs = {
|
|
|
80810
80868
|
* These can be used to apply styling when a component is in a given state.
|
|
80811
80869
|
*
|
|
80812
80870
|
* - `active`: While the keyboard is on the option, which is the option `aria-activedescendant` names.
|
|
80871
|
+
* - `disabled`: While the option cannot be chosen.
|
|
80872
|
+
* - `has-indicator`: An icon is slotted into `indicator`.
|
|
80813
80873
|
* - `selected`: While the option is chosen.
|
|
80814
80874
|
* - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
|
|
80815
80875
|
*/
|
|
@@ -82483,7 +82543,11 @@ export type CustomElementsSolidJs = {
|
|
|
82483
82543
|
*
|
|
82484
82544
|
* No attribute: it is coordination between elements, and a consumer has no
|
|
82485
82545
|
* reason to set it. (property only)
|
|
82486
|
-
* - `items`: The radios, in light-DOM order. Client only: the server has no tree.
|
|
82546
|
+
* - `items`: The radios, in light-DOM order. Client only: the server has no tree.
|
|
82547
|
+
*
|
|
82548
|
+
* Descendants, as `Checkbox.Group` reads its boxes, so a radio inside a
|
|
82549
|
+
* layout wrapper of yours is one of the group's. A radio held by a group
|
|
82550
|
+
* nested inside this one is that group's. (property only) (readonly)
|
|
82487
82551
|
* - `validity`: Whether the control meets its constraints, and why not. (property only) (readonly)
|
|
82488
82552
|
* - `validationMessage`: The message the browser would show for the control, or an empty string. (property only) (readonly)
|
|
82489
82553
|
* - `willValidate`: Whether the control is checked when its form is submitted. (property only) (readonly)
|
|
@@ -87354,6 +87418,8 @@ export type CustomElementsSolidJs = {
|
|
|
87354
87418
|
* Independent of `tone` on purpose: an outlined danger tag and a solid danger
|
|
87355
87419
|
* tag are both sensible, and one property welding color to fill can ask for
|
|
87356
87420
|
* neither. That is the test the whole axis registry answers to.
|
|
87421
|
+
* - `shape`: The tag's outline. `pill` rounds its ends fully, for a set of tags among
|
|
87422
|
+
* rounded controls. Absent is the theme's small radius.
|
|
87357
87423
|
* - `tone`: The meaning the tag's color shows, such as `success` or `danger`.
|
|
87358
87424
|
*
|
|
87359
87425
|
* `tone` is semantic color, which is what these are and what `helix-text`
|
|
@@ -87385,6 +87451,12 @@ export type CustomElementsSolidJs = {
|
|
|
87385
87451
|
* - `value`: What the tag stands for in its group's `value`.
|
|
87386
87452
|
*
|
|
87387
87453
|
* Absent is the tag's own words, its category first.
|
|
87454
|
+
* - `dismissTabStop`: Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
|
|
87455
|
+
*
|
|
87456
|
+
* A field that holds tags as its tokens, such as a `multiple` Combobox,
|
|
87457
|
+
* writes `false`: the field's text is its one tab stop, and the arrow keys
|
|
87458
|
+
* move from the text to the tags. No attribute: it is coordination between
|
|
87459
|
+
* elements, as `focusable` is. (property only)
|
|
87388
87460
|
* - `focusable`: Whether the tag holds its group's tab stop.
|
|
87389
87461
|
*
|
|
87390
87462
|
* Written by `Tag.Group` on every tag it holds, and unset outside one, which
|
|
@@ -88118,6 +88190,7 @@ export type CustomElementsSolidJs = {
|
|
|
88118
88190
|
*
|
|
88119
88191
|
* - `feedback`: The message that says what is wrong with the value.
|
|
88120
88192
|
* - `hint`: Help under the field.
|
|
88193
|
+
* - `label`: The label, for content richer than the `label` text.
|
|
88121
88194
|
* - `panel-footer`: Content in the panel under the times, such as a note or an action.
|
|
88122
88195
|
* - `panel-header`: Content in the panel above the times, such as a heading or a shortcut.
|
|
88123
88196
|
* - `trigger`: The icon on the field that shows a list opens.
|
|
@@ -89432,8 +89505,8 @@ export type CustomElementsSolidJs = {
|
|
|
89432
89505
|
* name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
89433
89506
|
* Splitting them means moving what every stylesheet selects on, which is a
|
|
89434
89507
|
* change of its own rather than a property being added. (property only)
|
|
89435
|
-
* - `focusable`: Whether the item holds the group's tab stop. Unset,
|
|
89436
|
-
* it.
|
|
89508
|
+
* - `focusable`: Whether the item holds the group's tab stop. Unset, no group holds the
|
|
89509
|
+
* item, and it is a toggle button with a tab stop of its own.
|
|
89437
89510
|
*
|
|
89438
89511
|
* Written by the group on every item: `true` for the chosen item, or for the
|
|
89439
89512
|
* first item that can be chosen while there is no selection to carry the
|
|
@@ -89470,6 +89543,7 @@ export type CustomElementsSolidJs = {
|
|
|
89470
89543
|
*
|
|
89471
89544
|
* Events that will be emitted by the component.
|
|
89472
89545
|
*
|
|
89546
|
+
* - `change`: Fired after a toggle button on its own is pressed or released.
|
|
89473
89547
|
* - `helix-select`: Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
|
|
89474
89548
|
*
|
|
89475
89549
|
* ## Slots
|
package/types/vue.d.ts
CHANGED
|
@@ -11990,14 +11990,10 @@ between them makes a reader parse the punctuation to find where the name
|
|
|
11990
11990
|
ends. Matching still reads the label, so what somebody types is matched
|
|
11991
11991
|
against the name rather than against prose about it.
|
|
11992
11992
|
|
|
11993
|
-
|
|
11994
|
-
|
|
11995
|
-
|
|
11996
|
-
|
|
11997
|
-
filled, so every option without a caption would carry an empty line. The
|
|
11998
|
-
detection that would avoid it does not exist, `:host(:has())` being invalid
|
|
11999
|
-
and the server having no children to inspect. A property is known at render
|
|
12000
|
-
time, so the component can decline to draw the box at all.
|
|
11993
|
+
For a caption richer than a string, slot it into `description`. The
|
|
11994
|
+
property is that slot's fallback inside the `description` part. With no
|
|
11995
|
+
property the slot is drawn bare, which takes no box while it is empty, so
|
|
11996
|
+
an option without a caption carries no empty line.
|
|
12001
11997
|
|
|
12002
11998
|
It does not reflect, per the rule that payload state stays off the host: a
|
|
12003
11999
|
string is not a fact a selector needs. */
|
|
@@ -12085,6 +12081,13 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
12085
12081
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
12086
12082
|
change of its own rather than a property being added. */
|
|
12087
12083
|
defaultSelected?: (HelixOption["defaultSelected"]) | undefined;
|
|
12084
|
+
/** Whether the option says it is selected while the keyboard is on it.
|
|
12085
|
+
|
|
12086
|
+
Written by a control whose list holds suggestions, such as `FilterInput`:
|
|
12087
|
+
nothing there stays chosen, so the row the keyboard is on is the
|
|
12088
|
+
selection, as the APG combobox's list with selection that follows focus
|
|
12089
|
+
says. No attribute: it is coordination between elements. */
|
|
12090
|
+
selectionFollowsActive?: (HelixOption["selectionFollowsActive"]) | undefined;
|
|
12088
12091
|
};
|
|
12089
12092
|
|
|
12090
12093
|
export type HelixOptionVueEvents = {
|
|
@@ -15870,6 +15873,9 @@ Independent of `tone` on purpose: an outlined danger tag and a solid danger
|
|
|
15870
15873
|
tag are both sensible, and one property welding color to fill can ask for
|
|
15871
15874
|
neither. That is the test the whole axis registry answers to. */
|
|
15872
15875
|
emphasis?: (HelixTag["emphasis"]) | undefined;
|
|
15876
|
+
/** The tag's outline. `pill` rounds its ends fully, for a set of tags among
|
|
15877
|
+
rounded controls. Absent is the theme's small radius. */
|
|
15878
|
+
shape?: (HelixTag["shape"]) | undefined;
|
|
15873
15879
|
/** The meaning the tag's color shows, such as `success` or `danger`.
|
|
15874
15880
|
|
|
15875
15881
|
`tone` is semantic color, which is what these are and what `helix-text`
|
|
@@ -15918,6 +15924,13 @@ be selected or removed. */
|
|
|
15918
15924
|
|
|
15919
15925
|
Absent is the tag's own words, its category first. */
|
|
15920
15926
|
value?: (HelixTag["value"]) | undefined;
|
|
15927
|
+
/** Whether the remove button is a tab stop of its own, outside a `Tag.Group`.
|
|
15928
|
+
|
|
15929
|
+
A field that holds tags as its tokens, such as a `multiple` Combobox,
|
|
15930
|
+
writes `false`: the field's text is its one tab stop, and the arrow keys
|
|
15931
|
+
move from the text to the tags. No attribute: it is coordination between
|
|
15932
|
+
elements, as `focusable` is. */
|
|
15933
|
+
dismissTabStop?: (HelixTag["dismissTabStop"]) | undefined;
|
|
15921
15934
|
/** Whether the tag holds its group's tab stop.
|
|
15922
15935
|
|
|
15923
15936
|
Written by `Tag.Group` on every tag it holds, and unset outside one, which
|
|
@@ -17251,8 +17264,8 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
|
|
|
17251
17264
|
Splitting them means moving what every stylesheet selects on, which is a
|
|
17252
17265
|
change of its own rather than a property being added. */
|
|
17253
17266
|
defaultSelected?: (HelixToggle["defaultSelected"]) | undefined;
|
|
17254
|
-
/** Whether the item holds the group's tab stop. Unset,
|
|
17255
|
-
it.
|
|
17267
|
+
/** Whether the item holds the group's tab stop. Unset, no group holds the
|
|
17268
|
+
item, and it is a toggle button with a tab stop of its own.
|
|
17256
17269
|
|
|
17257
17270
|
Written by the group on every item: `true` for the chosen item, or for the
|
|
17258
17271
|
first item that can be chosen while there is no selection to carry the
|
|
@@ -17269,6 +17282,8 @@ Written by the group, like `selected`, so no attribute. */
|
|
|
17269
17282
|
};
|
|
17270
17283
|
|
|
17271
17284
|
export type HelixToggleVueEvents = {
|
|
17285
|
+
/** Fired after a toggle button on its own is pressed or released. */
|
|
17286
|
+
change: HelixToggleElementEvent;
|
|
17272
17287
|
/** Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice. */
|
|
17273
17288
|
"helix-select": HelixToggleHelixSelectElementEvent;
|
|
17274
17289
|
};
|