@fusion.dev/helix-headless 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 +471 -45
- package/dist/button/root/button-root.d.ts +5 -0
- package/dist/button/root/button-root.js +3 -0
- package/dist/color-input/root/color-input-root.d.ts +1 -0
- package/dist/color-picker/root/color-picker-root.js +1 -0
- package/dist/combobox/root/combobox-root.d.ts +12 -1
- package/dist/combobox/root/combobox-root.js +8 -0
- package/dist/copy-button/root/copy-button-root.d.ts +4 -3
- package/dist/copy-button/root/copy-button-root.js +5 -1
- package/dist/date-input/root/date-input-root.d.ts +1 -0
- package/dist/element-events.generated.js +1 -1
- package/dist/filter-input/chip/filter-chip.d.ts +2 -1
- package/dist/filter-input/root/filter-input-root.d.ts +5 -0
- package/dist/filter-input/root/filter-input-root.js +7 -0
- package/dist/number-input/root/number-input-root.d.ts +6 -0
- package/dist/number-input/root/number-input-root.js +14 -3
- package/dist/option/root/option-root.d.ts +17 -8
- package/dist/option/root/option-root.js +18 -4
- package/dist/radio/group/radio-group.d.ts +8 -1
- package/dist/radio/group/radio-group.js +15 -1
- package/dist/slider/root/slider-root.d.ts +8 -0
- package/dist/slider/root/slider-root.js +6 -3
- package/dist/tag/group/tag-group.d.ts +22 -1
- package/dist/tag/group/tag-group.js +63 -3
- package/dist/tag/root/tag-root.d.ts +9 -0
- package/dist/tag/root/tag-root.js +5 -1
- package/dist/time-input/root/time-input-root.d.ts +1 -0
- package/dist/toggle/group/toggle-group.d.ts +6 -0
- package/dist/toggle/group/toggle-group.js +16 -1
- package/dist/toggle/root/toggle-root.d.ts +21 -3
- package/dist/toggle/root/toggle-root.js +22 -5
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +160 -58
- package/types/vue.d.ts +28 -16
package/custom-elements.json
CHANGED
|
@@ -30684,6 +30684,10 @@
|
|
|
30684
30684
|
"description": "Help text under the field.",
|
|
30685
30685
|
"name": "hint"
|
|
30686
30686
|
},
|
|
30687
|
+
{
|
|
30688
|
+
"description": "The label, for content richer than the `label` text.",
|
|
30689
|
+
"name": "label"
|
|
30690
|
+
},
|
|
30687
30691
|
{
|
|
30688
30692
|
"description": "Content in the panel under the picker, such as a note or an action.",
|
|
30689
30693
|
"name": "panel-footer"
|
|
@@ -35741,7 +35745,7 @@
|
|
|
35741
35745
|
"declarations": [
|
|
35742
35746
|
{
|
|
35743
35747
|
"kind": "class",
|
|
35744
|
-
"description": "The list is a `Listbox`, which handles filtering, the empty state, the\nhighlight, `aria-activedescendant`, and scrolling an option into view. This\nelement handles the field, the panel, and the communication between them.\n\nThe typed text and the value are separate. The text is a filter: it narrows\nthe list and is then discarded. The value is the option you choose, and the\nfield then shows that option's text. The filter clears on close, so a\nreopened combobox starts from the whole list.\n\nFocus stays in the text field. The arrow keys move through the list with the\nlistbox's public `navigate` method. As typing narrows the list, a screen\nreader hears how many options are left, such as \"3 results\". Emptying the\nfield and leaving it clears a single choice.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |\n| Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |\n| Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |\n| Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |\n| Tab | Closes the list and moves on. |\n| Backspace | With `multiple`, on an empty field, removes the last tag. |\n| Space, Home, End, letters | Edit the text. |\n\n**ARIA.** The input is the `combobox`, named by the label, with\n`aria-expanded`, `aria-controls` naming the list, `aria-autocomplete`\n(`both` with `suggest`, `list` otherwise) and `aria-activedescendant` on\nthe highlighted option. The list is the listbox `Listbox` describes.\n\nOn Apple devices, where VoiceOver does not read the option the field points\nto, the field says it in a live region as the highlight moves, says how many\noptions there are as the list opens, and says a choice once it is made, as\nReact Aria's combobox does there.\n\nSet `autocomplete` to let a browser's autofill choose an option.\n\nWith `multiple`, each chosen option is a tag in the field with its own remove\ncontrol. The panel stays open and the filter clears after each choice, so the\nnext choice starts from the whole list.\n\nWith `creatable`, the combobox offers a create row and fires `helix-create`.\nIt does not add the option. The options are your light DOM, and your\nframework would re-render over an element the combobox inserted, so add the\noption in your event handler.",
|
|
35748
|
+
"description": "The list is a `Listbox`, which handles filtering, the empty state, the\nhighlight, `aria-activedescendant`, and scrolling an option into view. This\nelement handles the field, the panel, and the communication between them.\n\nThe typed text and the value are separate. The text is a filter: it narrows\nthe list and is then discarded. The value is the option you choose, and the\nfield then shows that option's text. The filter clears on close, so a\nreopened combobox starts from the whole list.\n\nFocus stays in the text field. The arrow keys move through the list with the\nlistbox's public `navigate` method. As typing narrows the list, a screen\nreader hears how many options are left, such as \"3 results\". Emptying the\nfield and leaving it clears a single choice.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |\n| Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |\n| Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |\n| Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |\n| Tab | Closes the list and moves on. |\n| Backspace | With `multiple`, on an empty field, removes the last tag. |\n| Left | With `multiple`, with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. |\n| Left, Right on a tag | Move between the tags, and past the last back to the text. |\n| Delete, Backspace on a tag | Removes the tag. |\n| Space, Home, End, letters | Edit the text. |\n\n**ARIA.** The input is the `combobox`, named by the label, with\n`aria-expanded`, `aria-controls` naming the list, `aria-autocomplete`\n(`both` with `suggest`, `list` otherwise) and `aria-activedescendant` on\nthe highlighted option. The list is the listbox `Listbox` describes.\n\nOn Apple devices, where VoiceOver does not read the option the field points\nto, the field says it in a live region as the highlight moves, says how many\noptions there are as the list opens, and says a choice once it is made, as\nReact Aria's combobox does there.\n\nSet `autocomplete` to let a browser's autofill choose an option.\n\nWith `multiple`, each chosen option is a tag in the field with its own remove\ncontrol. The text is the field's one tab stop, and the arrow keys reach the\ntags from it. The panel stays open and the filter clears after each choice, so the\nnext choice starts from the whole list.\n\nWith `creatable`, the combobox offers a create row and fires `helix-create`.\nIt does not add the option. The options are your light DOM, and your\nframework would re-render over an element the combobox inserted, so add the\noption in your event handler.",
|
|
35745
35749
|
"name": "HelixHeadlessCombobox",
|
|
35746
35750
|
"cssParts": [
|
|
35747
35751
|
{
|
|
@@ -36719,6 +36723,35 @@
|
|
|
36719
36723
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
36720
36724
|
}
|
|
36721
36725
|
},
|
|
36726
|
+
{
|
|
36727
|
+
"kind": "method",
|
|
36728
|
+
"name": "tokenElements",
|
|
36729
|
+
"privacy": "protected",
|
|
36730
|
+
"return": {
|
|
36731
|
+
"type": {
|
|
36732
|
+
"text": "HTMLElement[]"
|
|
36733
|
+
}
|
|
36734
|
+
},
|
|
36735
|
+
"description": "The tags, which the arrow keys reach from the text.",
|
|
36736
|
+
"inheritedFrom": {
|
|
36737
|
+
"name": "MixinTokens",
|
|
36738
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
36739
|
+
}
|
|
36740
|
+
},
|
|
36741
|
+
{
|
|
36742
|
+
"kind": "field",
|
|
36743
|
+
"name": "focusTarget",
|
|
36744
|
+
"type": {
|
|
36745
|
+
"text": "HTMLElement | null"
|
|
36746
|
+
},
|
|
36747
|
+
"privacy": "protected",
|
|
36748
|
+
"description": "Focus goes to the text field, the one tab stop, and never to a tag's remove\nbutton ahead of it, where Enter or Space would take a choice away.",
|
|
36749
|
+
"readonly": true,
|
|
36750
|
+
"inheritedFrom": {
|
|
36751
|
+
"name": "HelixFormElement",
|
|
36752
|
+
"module": "src/helix-form-element/helix-form-element.ts"
|
|
36753
|
+
}
|
|
36754
|
+
},
|
|
36722
36755
|
{
|
|
36723
36756
|
"kind": "field",
|
|
36724
36757
|
"name": "handleDismiss",
|
|
@@ -37056,6 +37089,46 @@
|
|
|
37056
37089
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
37057
37090
|
}
|
|
37058
37091
|
},
|
|
37092
|
+
{
|
|
37093
|
+
"kind": "method",
|
|
37094
|
+
"name": "tokenStops",
|
|
37095
|
+
"privacy": "private",
|
|
37096
|
+
"return": {
|
|
37097
|
+
"type": {
|
|
37098
|
+
"text": "HTMLElement[]"
|
|
37099
|
+
}
|
|
37100
|
+
},
|
|
37101
|
+
"description": "The remove button of each token shown that has one, in order.",
|
|
37102
|
+
"inheritedFrom": {
|
|
37103
|
+
"name": "MixinTokens",
|
|
37104
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
37105
|
+
}
|
|
37106
|
+
},
|
|
37107
|
+
{
|
|
37108
|
+
"kind": "field",
|
|
37109
|
+
"name": "tokenControl",
|
|
37110
|
+
"type": {
|
|
37111
|
+
"text": "HTMLInputElement | null"
|
|
37112
|
+
},
|
|
37113
|
+
"privacy": "private",
|
|
37114
|
+
"description": "The host's text field.",
|
|
37115
|
+
"readonly": true,
|
|
37116
|
+
"inheritedFrom": {
|
|
37117
|
+
"name": "MixinTokens",
|
|
37118
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
37119
|
+
}
|
|
37120
|
+
},
|
|
37121
|
+
{
|
|
37122
|
+
"kind": "field",
|
|
37123
|
+
"name": "handleTokenKeydown",
|
|
37124
|
+
"privacy": "private",
|
|
37125
|
+
"readonly": true,
|
|
37126
|
+
"description": "The arrow keys between the tokens, and Delete or Backspace on one.\n\nThe arrow toward the end of the line moves to the next token, and past\nthe last into the text with the caret at its start. Delete or Backspace\nasks the focused token to go, as its remove button does, and focus that\nleaves with it comes back to the text.",
|
|
37127
|
+
"inheritedFrom": {
|
|
37128
|
+
"name": "MixinTokens",
|
|
37129
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
37130
|
+
}
|
|
37131
|
+
},
|
|
37059
37132
|
{
|
|
37060
37133
|
"kind": "method",
|
|
37061
37134
|
"name": "renderRest",
|
|
@@ -37920,20 +37993,6 @@
|
|
|
37920
37993
|
"text": "setCustomValidity(message: string) => void"
|
|
37921
37994
|
}
|
|
37922
37995
|
},
|
|
37923
|
-
{
|
|
37924
|
-
"kind": "field",
|
|
37925
|
-
"name": "focusTarget",
|
|
37926
|
-
"type": {
|
|
37927
|
-
"text": "HTMLElement | null"
|
|
37928
|
-
},
|
|
37929
|
-
"privacy": "protected",
|
|
37930
|
-
"description": "The element focus goes to: the control's first tab stop, or `null` where\nthere is none.\n\nRead through shadow roots and slots, so a group lands on the member that\nholds its tab stop, which is the chosen radio in a radio group.",
|
|
37931
|
-
"readonly": true,
|
|
37932
|
-
"inheritedFrom": {
|
|
37933
|
-
"name": "HelixFormElement",
|
|
37934
|
-
"module": "src/helix-form-element/helix-form-element.ts"
|
|
37935
|
-
}
|
|
37936
|
-
},
|
|
37937
37996
|
{
|
|
37938
37997
|
"kind": "method",
|
|
37939
37998
|
"name": "focus",
|
|
@@ -40102,7 +40161,7 @@
|
|
|
40102
40161
|
"declarations": [
|
|
40103
40162
|
{
|
|
40104
40163
|
"kind": "class",
|
|
40105
|
-
"description": "Copies text to the clipboard and confirms the copy. The platform gives no\nfeedback for a clipboard write, so without a confirmation a press that copies\nlooks the same as one that fails.\n\nThe confirmation and the event wait for the write to finish. The browser can\nrefuse a clipboard write, for example on an insecure origin, in a document\nthat is not focused, or after a gesture that does not qualify. A refused\nwrite, or nothing to copy, names the button with `error-label` for the same\nmoment a copy shows `copied-label`, draws a cross, and sends\n`helix-copy-error`.\n\n`from` copies from another element on the page: its text, an attribute\nwritten `id[attribute]`, or a property written `id.property`, read at the\npress. It takes the place of `value`.\n\nIt replaces Button's render and its press, so it never submits a form or\nsends a command: `type`, `command`, `commandfor` and the `form*` overrides\nhave no effect, and the `start` and `end` slots and the `text` part are not\nrendered. An `aria-label` on the element names it before a copy, in place of\n`label`.\n\n**Keyboard.** Enter and Space copy, as they press a native button.\n\nThe button is named `label`, or the host's `aria-label`, and its name\nchanges to `copied-label` or `error-label` for the moment after a press
|
|
40164
|
+
"description": "Copies text to the clipboard and confirms the copy. The platform gives no\nfeedback for a clipboard write, so without a confirmation a press that copies\nlooks the same as one that fails.\n\nThe confirmation and the event wait for the write to finish. The browser can\nrefuse a clipboard write, for example on an insecure origin, in a document\nthat is not focused, or after a gesture that does not qualify. A refused\nwrite, or nothing to copy, names the button with `error-label` for the same\nmoment a copy shows `copied-label`, draws a cross, and sends\n`helix-copy-error`.\n\n`from` copies from another element on the page: its text, an attribute\nwritten `id[attribute]`, or a property written `id.property`, read at the\npress. It takes the place of `value`.\n\nIt replaces Button's render and its press, so it never submits a form or\nsends a command: `type`, `command`, `commandfor` and the `form*` overrides\nhave no effect, and the `start` and `end` slots and the `text` part are not\nrendered. An `aria-label` on the element names it before a copy, in place of\n`label`.\n\n**Keyboard.** Enter and Space copy, as they press a native button.\n\nThe button is named `label`, or the host's `aria-label`, and its name\nchanges to `copied-label` or `error-label` for the moment after a press. The\nsame words are said in a live region, so a screen reader hears the result,\nand the tooltip shows them.",
|
|
40106
40165
|
"name": "HelixHeadlessCopyButton",
|
|
40107
40166
|
"cssParts": [
|
|
40108
40167
|
{
|
|
@@ -40114,7 +40173,7 @@
|
|
|
40114
40173
|
}
|
|
40115
40174
|
},
|
|
40116
40175
|
{
|
|
40117
|
-
"description": "The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time
|
|
40176
|
+
"description": "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.",
|
|
40118
40177
|
"name": "live",
|
|
40119
40178
|
"inheritedFrom": {
|
|
40120
40179
|
"name": "HelixHeadlessButton",
|
|
@@ -46027,6 +46086,10 @@
|
|
|
46027
46086
|
"description": "The help text under the field.",
|
|
46028
46087
|
"name": "hint"
|
|
46029
46088
|
},
|
|
46089
|
+
{
|
|
46090
|
+
"description": "The label, for content richer than the `label` text.",
|
|
46091
|
+
"name": "label"
|
|
46092
|
+
},
|
|
46030
46093
|
{
|
|
46031
46094
|
"description": "The icon on the calendar's next month control.",
|
|
46032
46095
|
"name": "next-icon"
|
|
@@ -47235,6 +47298,17 @@
|
|
|
47235
47298
|
"module": "src/mixins/mixin-picker-editing/mixin-picker-editing.ts"
|
|
47236
47299
|
}
|
|
47237
47300
|
},
|
|
47301
|
+
{
|
|
47302
|
+
"kind": "field",
|
|
47303
|
+
"name": "handleEditKey",
|
|
47304
|
+
"privacy": "private",
|
|
47305
|
+
"readonly": true,
|
|
47306
|
+
"description": "The first key that moves the caret or edits, while the focused field\nshows its rendering, puts the value in the field before the key acts.\n\nPicking hands focus back to a field that shows `August 5, 2026`, which is\nwhat the reader chose. `Intl` formats and does not parse, so a key that\nedited the rendering wrote text no date could be read from. The caret\nkeeps its place at the start, at the end, or around the whole text, and\ngoes to the end otherwise.",
|
|
47307
|
+
"inheritedFrom": {
|
|
47308
|
+
"name": "MixinPickerEditing",
|
|
47309
|
+
"module": "src/mixins/mixin-picker-editing/mixin-picker-editing.ts"
|
|
47310
|
+
}
|
|
47311
|
+
},
|
|
47238
47312
|
{
|
|
47239
47313
|
"kind": "field",
|
|
47240
47314
|
"name": "handleFocus",
|
|
@@ -47698,6 +47772,60 @@
|
|
|
47698
47772
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
47699
47773
|
}
|
|
47700
47774
|
},
|
|
47775
|
+
{
|
|
47776
|
+
"kind": "method",
|
|
47777
|
+
"name": "tokenElements",
|
|
47778
|
+
"privacy": "protected",
|
|
47779
|
+
"return": {
|
|
47780
|
+
"type": {
|
|
47781
|
+
"text": "HTMLElement[]"
|
|
47782
|
+
}
|
|
47783
|
+
},
|
|
47784
|
+
"inheritedFrom": {
|
|
47785
|
+
"name": "MixinTokens",
|
|
47786
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
47787
|
+
}
|
|
47788
|
+
},
|
|
47789
|
+
{
|
|
47790
|
+
"kind": "method",
|
|
47791
|
+
"name": "tokenStops",
|
|
47792
|
+
"privacy": "private",
|
|
47793
|
+
"return": {
|
|
47794
|
+
"type": {
|
|
47795
|
+
"text": "HTMLElement[]"
|
|
47796
|
+
}
|
|
47797
|
+
},
|
|
47798
|
+
"description": "The remove button of each token shown that has one, in order.",
|
|
47799
|
+
"inheritedFrom": {
|
|
47800
|
+
"name": "MixinTokens",
|
|
47801
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
47802
|
+
}
|
|
47803
|
+
},
|
|
47804
|
+
{
|
|
47805
|
+
"kind": "field",
|
|
47806
|
+
"name": "tokenControl",
|
|
47807
|
+
"type": {
|
|
47808
|
+
"text": "HTMLInputElement | null"
|
|
47809
|
+
},
|
|
47810
|
+
"privacy": "private",
|
|
47811
|
+
"description": "The host's text field.",
|
|
47812
|
+
"readonly": true,
|
|
47813
|
+
"inheritedFrom": {
|
|
47814
|
+
"name": "MixinTokens",
|
|
47815
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
47816
|
+
}
|
|
47817
|
+
},
|
|
47818
|
+
{
|
|
47819
|
+
"kind": "field",
|
|
47820
|
+
"name": "handleTokenKeydown",
|
|
47821
|
+
"privacy": "private",
|
|
47822
|
+
"readonly": true,
|
|
47823
|
+
"description": "The arrow keys between the tokens, and Delete or Backspace on one.\n\nThe arrow toward the end of the line moves to the next token, and past\nthe last into the text with the caret at its start. Delete or Backspace\nasks the focused token to go, as its remove button does, and focus that\nleaves with it comes back to the text.",
|
|
47824
|
+
"inheritedFrom": {
|
|
47825
|
+
"name": "MixinTokens",
|
|
47826
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
47827
|
+
}
|
|
47828
|
+
},
|
|
47701
47829
|
{
|
|
47702
47830
|
"kind": "method",
|
|
47703
47831
|
"name": "renderRest",
|
|
@@ -62066,7 +62194,7 @@
|
|
|
62066
62194
|
"declarations": [
|
|
62067
62195
|
{
|
|
62068
62196
|
"kind": "class",
|
|
62069
|
-
"description": "Shows one filter declared by a `FilterField`: the field, the operator, and\nthe values, with a control to remove the filter.\n\nThe operator is shown only when it is not the field's default:\n\n```\nDisposition refunded, chargeback default operator, hidden\nDisposition is not refunded chosen operator, shown\nCreated after 1 Aug a scalar field has no default\n```\n\nOmit `operator-label` for the field's default operator and pass it for every\nother operator. The code that builds the chip has the field, and the field\ndefines its default.\n\nThe chip shows a filter and does not apply it. Dismissing fires\n`helix-dismiss` as a request, as on `Tag` and `Announcement`. The chip is\nyour element in your list, so you remove it, which keeps your model and the\ndocument in step. Call `preventDefault()` on `helix-dismiss` to cancel the\ndismissal, which is also how you take control of the interaction for one\npress. `requestChange` documents the pattern.\n\n**Keyboard.** The remove button is a tab stop of its own, and Enter or Space\non it asks to remove the filter. In a `FilterInput`, Backspace in the empty\nfield asks to remove the last chip.\n\nThe remove button is named `dismiss-label` followed by the chip's words,\nsuch as \"Remove filter Status is not open\", so a row of chips says which\nfilter each button removes. Write `{label}` in `dismiss-label` to put the\nwords elsewhere.\n\nTo let the user change the operator, slot a menu trigger into `operator`.\nWith the text fallback, the operator is a label. The chip does not interpret\noperators: their meaning belongs to your domain, as `FilterOperator`\nexplains.",
|
|
62197
|
+
"description": "Shows one filter declared by a `FilterField`: the field, the operator, and\nthe values, with a control to remove the filter.\n\nThe operator is shown only when it is not the field's default:\n\n```\nDisposition refunded, chargeback default operator, hidden\nDisposition is not refunded chosen operator, shown\nCreated after 1 Aug a scalar field has no default\n```\n\nOmit `operator-label` for the field's default operator and pass it for every\nother operator. The code that builds the chip has the field, and the field\ndefines its default.\n\nThe chip shows a filter and does not apply it. Dismissing fires\n`helix-dismiss` as a request, as on `Tag` and `Announcement`. The chip is\nyour element in your list, so you remove it, which keeps your model and the\ndocument in step. Call `preventDefault()` on `helix-dismiss` to cancel the\ndismissal, which is also how you take control of the interaction for one\npress. `requestChange` documents the pattern.\n\n**Keyboard.** The remove button is a tab stop of its own, and Enter or Space\non it asks to remove the filter. In a `FilterInput`, Backspace in the empty\nfield asks to remove the last chip, the arrow keys move between the field\nand the chips, and Delete or Backspace on a chip asks to remove it.\n\nThe remove button is named `dismiss-label` followed by the chip's words,\nsuch as \"Remove filter Status is not open\", so a row of chips says which\nfilter each button removes. Write `{label}` in `dismiss-label` to put the\nwords elsewhere.\n\nTo let the user change the operator, slot a menu trigger into `operator`.\nWith the text fallback, the operator is a label. The chip does not interpret\noperators: their meaning belongs to your domain, as `FilterOperator`\nexplains.",
|
|
62070
62198
|
"name": "HelixHeadlessFilterChip",
|
|
62071
62199
|
"cssParts": [
|
|
62072
62200
|
{
|
|
@@ -64567,7 +64695,7 @@
|
|
|
64567
64695
|
"declarations": [
|
|
64568
64696
|
{
|
|
64569
64697
|
"kind": "class",
|
|
64570
|
-
"description": "Tokens are your own elements, slotted in. A filter can be a facet with a\nprefix, a saved query, or a range, and these belong to your model, so the\nelement does not render tokens from a list of strings. Removing a token is a\nrequest the element fires, and you apply it. Combobox works the other way:\nits tokens show a selection it owns, drawn from the options it was given.\n\n`value` is the typed text. Every keystroke fires `input` with the text on the\nelement, so a table can narrow as the user types. Backspace in an empty field\nfires `helix-dismiss` on the last token, the same event its remove control\nfires, so one handler covers the pointer and the keyboard.\n\n**What a form receives.** The text under `name`, and then one more entry\nunder `name` for each token, in the order the tokens stand:\n\n| Token | Entry |\n|---|---|\n| Any element with a `value` attribute | The value as written: `saved:mine` |\n| `FilterChip` with `name` and values | `status:open,pending` |\n| The same, with `operator=\"none\"` (what a typed `-status:` makes) | `-status:open,pending` |\n| The same, with any other `operator` except `any` | `created[after]:2024` |\n| A token with neither | Nothing |\n\nThe values are the chip's text outside its `field` and `operator` slots,\nwith the spaces around each comma removed. A server splits an entry at its\nfirst colon, reads a leading `-` as the negation, and reads a word in\nbrackets before the colon as the comparison.\n\n**Keyboard.** Focus stays in the text. The text names the highlighted\nsuggestion as its `aria-activedescendant`.\n\n| Key | What it does |\n|---|---|\n| Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |\n| Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |\n| Home, End | Highlights the first or the last suggestion while the panel is open. |\n| Escape | Closes the panel and stops there, so a dialog around the field stays open. |\n| Backspace | In an empty field, asks the last token to go. |\n\n**Typed filters.** The field parses only the fields you declare. Write\n`FilterField` elements, usually inside the `FilterMenu` slotted into `start`,\nso the picker and the text share one set. On Enter, the field reads the text\nagainst them. `disposition:refunded,settled` and `-disposition:refunded` fire\n`helix-facet` exactly as ticking those values in the picker would, and the\nparsed text is removed. Everything else stays, so `refund tuesday\ndisposition:settled` is a filter and a search at once. Helix defines the\npunctuation and you define every word. `grammar.ts` has the full rule, so\nread it before you rely on it. A field with no `FilterField` in it parses\nnothing.\n\nA field whose values cannot be listed, such as `assignee:ada`, goes directly\ninside this element, outside the menu. It is not assigned to a slot, so\nnothing draws it and the menu has no page for it, and the grammar still reads\nit.\n\n**Suggestions.** Slot options into `suggestions` and the field shows them,\nmoves through them with the arrow keys, and presses one on Enter. The option\nfires its own `helix-select`, and you decide what choosing it means. Keys\nbefore a colon and values after it use the same panel with different\ncontents. `filter-suggestions` narrows the panel to the options whose words\nhold the term at the caret, after its colon, ignoring case and accents, and\nhides the rest. `readFilterText` is exported so you can narrow it yourself\nagainst partly typed text. While the panel is open, a reader hears how many\nsuggestions it offers. The panel opens when it has options and closes when it has\nnone, and a choice does not close it, so after picking a key you see its\nvalues next. Use `selectionStart` and `setSelectionRange` to write a\ncompletion back and put the caret after it, or the next parse reads the wrong\nterm.\n\n**State.** Three things have three different owners:\n\n- `value` is the text. The user types, the element applies it, and `input`\n reports it. Setting `value` seeds or corrects the text, and the next\n keystroke overwrites it, even in React. To control the value, cancel\n `helix-before-change` and write the value you want, as with every field in\n this library. `default-value` seeds the field.\n- `open` is the suggestions panel. Cancel `helix-before-open` or\n `helix-before-close` to control it, and use `default-open` to seed it.\n- Tokens are your elements in a slot and hold no state. A token goes when you\n remove it from your markup after `helix-dismiss`. A `FilterChip` naming a\n declared field works differently, because the picker holds what is ticked\n and removing the chip alone would leave its value ticked in the hidden\n menu. Its dismissal is treated as the field being filtered by nothing, so\n it fires `helix-facet` like every other change, and the chip goes when the\n filter goes.",
|
|
64698
|
+
"description": "Tokens are your own elements, slotted in. A filter can be a facet with a\nprefix, a saved query, or a range, and these belong to your model, so the\nelement does not render tokens from a list of strings. Removing a token is a\nrequest the element fires, and you apply it. Combobox works the other way:\nits tokens show a selection it owns, drawn from the options it was given.\n\n`value` is the typed text. Every keystroke fires `input` with the text on the\nelement, so a table can narrow as the user types. Backspace in an empty field\nfires `helix-dismiss` on the last token, the same event its remove control\nfires, so one handler covers the pointer and the keyboard.\n\n**What a form receives.** The text under `name`, and then one more entry\nunder `name` for each token, in the order the tokens stand:\n\n| Token | Entry |\n|---|---|\n| Any element with a `value` attribute | The value as written: `saved:mine` |\n| `FilterChip` with `name` and values | `status:open,pending` |\n| The same, with `operator=\"none\"` (what a typed `-status:` makes) | `-status:open,pending` |\n| The same, with any other `operator` except `any` | `created[after]:2024` |\n| A token with neither | Nothing |\n\nThe values are the chip's text outside its `field` and `operator` slots,\nwith the spaces around each comma removed. A server splits an entry at its\nfirst colon, reads a leading `-` as the negation, and reads a word in\nbrackets before the colon as the comparison.\n\n**Keyboard.** Focus stays in the text. The text names the highlighted\nsuggestion as its `aria-activedescendant`.\n\n| Key | What it does |\n|---|---|\n| Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |\n| Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |\n| Home, End | Highlights the first or the last suggestion while the panel is open. |\n| Escape | Closes the panel and stops there, so a dialog around the field stays open. |\n| Backspace | In an empty field, asks the last token to go. |\n| Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |\n| Left, Right on a token | Move between the tokens, and past the last back to the text. |\n| Delete, Backspace on a token | Asks the token to go. |\n\n**Typed filters.** The field parses only the fields you declare. Write\n`FilterField` elements, usually inside the `FilterMenu` slotted into `start`,\nso the picker and the text share one set. On Enter, the field reads the text\nagainst them. `disposition:refunded,settled` and `-disposition:refunded` fire\n`helix-facet` exactly as ticking those values in the picker would, and the\nparsed text is removed. Everything else stays, so `refund tuesday\ndisposition:settled` is a filter and a search at once. Helix defines the\npunctuation and you define every word. `grammar.ts` has the full rule, so\nread it before you rely on it. A field with no `FilterField` in it parses\nnothing.\n\nA field whose values cannot be listed, such as `assignee:ada`, goes directly\ninside this element, outside the menu. It is not assigned to a slot, so\nnothing draws it and the menu has no page for it, and the grammar still reads\nit.\n\n**Suggestions.** Slot options into `suggestions` and the field shows them,\nmoves through them with the arrow keys, and presses one on Enter. The option\nfires its own `helix-select`, and you decide what choosing it means. Keys\nbefore a colon and values after it use the same panel with different\ncontents. `filter-suggestions` narrows the panel to the options whose words\nhold the term at the caret, after its colon, ignoring case and accents, and\nhides the rest. `readFilterText` is exported so you can narrow it yourself\nagainst partly typed text. While the panel is open, a reader hears how many\nsuggestions it offers. The panel opens when it has options and closes when it has\nnone, and a choice does not close it, so after picking a key you see its\nvalues next. Use `selectionStart` and `setSelectionRange` to write a\ncompletion back and put the caret after it, or the next parse reads the wrong\nterm.\n\n**State.** Three things have three different owners:\n\n- `value` is the text. The user types, the element applies it, and `input`\n reports it. Setting `value` seeds or corrects the text, and the next\n keystroke overwrites it, even in React. To control the value, cancel\n `helix-before-change` and write the value you want, as with every field in\n this library. `default-value` seeds the field.\n- `open` is the suggestions panel. Cancel `helix-before-open` or\n `helix-before-close` to control it, and use `default-open` to seed it.\n- Tokens are your elements in a slot and hold no state. A token goes when you\n remove it from your markup after `helix-dismiss`. A `FilterChip` naming a\n declared field works differently, because the picker holds what is ticked\n and removing the chip alone would leave its value ticked in the hidden\n menu. Its dismissal is treated as the field being filtered by nothing, so\n it fires `helix-facet` like every other change, and the chip goes when the\n filter goes.",
|
|
64571
64699
|
"name": "HelixHeadlessFilterInput",
|
|
64572
64700
|
"cssParts": [
|
|
64573
64701
|
{
|
|
@@ -65173,6 +65301,21 @@
|
|
|
65173
65301
|
"readonly": true,
|
|
65174
65302
|
"description": "The row again, whenever what is in it changes."
|
|
65175
65303
|
},
|
|
65304
|
+
{
|
|
65305
|
+
"kind": "method",
|
|
65306
|
+
"name": "tokenElements",
|
|
65307
|
+
"privacy": "protected",
|
|
65308
|
+
"return": {
|
|
65309
|
+
"type": {
|
|
65310
|
+
"text": "HTMLElement[]"
|
|
65311
|
+
}
|
|
65312
|
+
},
|
|
65313
|
+
"description": "The tokens slotted in `tags`, which the arrow keys reach from the text.",
|
|
65314
|
+
"inheritedFrom": {
|
|
65315
|
+
"name": "MixinTokens",
|
|
65316
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
65317
|
+
}
|
|
65318
|
+
},
|
|
65176
65319
|
{
|
|
65177
65320
|
"kind": "method",
|
|
65178
65321
|
"name": "removeLastToken",
|
|
@@ -65501,6 +65644,46 @@
|
|
|
65501
65644
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
65502
65645
|
}
|
|
65503
65646
|
},
|
|
65647
|
+
{
|
|
65648
|
+
"kind": "method",
|
|
65649
|
+
"name": "tokenStops",
|
|
65650
|
+
"privacy": "private",
|
|
65651
|
+
"return": {
|
|
65652
|
+
"type": {
|
|
65653
|
+
"text": "HTMLElement[]"
|
|
65654
|
+
}
|
|
65655
|
+
},
|
|
65656
|
+
"description": "The remove button of each token shown that has one, in order.",
|
|
65657
|
+
"inheritedFrom": {
|
|
65658
|
+
"name": "MixinTokens",
|
|
65659
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
65660
|
+
}
|
|
65661
|
+
},
|
|
65662
|
+
{
|
|
65663
|
+
"kind": "field",
|
|
65664
|
+
"name": "tokenControl",
|
|
65665
|
+
"type": {
|
|
65666
|
+
"text": "HTMLInputElement | null"
|
|
65667
|
+
},
|
|
65668
|
+
"privacy": "private",
|
|
65669
|
+
"description": "The host's text field.",
|
|
65670
|
+
"readonly": true,
|
|
65671
|
+
"inheritedFrom": {
|
|
65672
|
+
"name": "MixinTokens",
|
|
65673
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
65674
|
+
}
|
|
65675
|
+
},
|
|
65676
|
+
{
|
|
65677
|
+
"kind": "field",
|
|
65678
|
+
"name": "handleTokenKeydown",
|
|
65679
|
+
"privacy": "private",
|
|
65680
|
+
"readonly": true,
|
|
65681
|
+
"description": "The arrow keys between the tokens, and Delete or Backspace on one.\n\nThe arrow toward the end of the line moves to the next token, and past\nthe last into the text with the caret at its start. Delete or Backspace\nasks the focused token to go, as its remove button does, and focus that\nleaves with it comes back to the text.",
|
|
65682
|
+
"inheritedFrom": {
|
|
65683
|
+
"name": "MixinTokens",
|
|
65684
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
65685
|
+
}
|
|
65686
|
+
},
|
|
65504
65687
|
{
|
|
65505
65688
|
"kind": "method",
|
|
65506
65689
|
"name": "renderRest",
|
|
@@ -109705,6 +109888,15 @@
|
|
|
109705
109888
|
"readonly": true,
|
|
109706
109889
|
"description": "Relayed, because `change` does not cross a shadow boundary on its own.\n\n**Settled first.** The field's `change` arrives before its `blur`, so\nrelaying it as it came announced the number as typed, 150 in a field whose\n`max` is 100, and the clamp that followed sent `input` alone: a consumer\nsaving on `change` kept 150 while the form submitted 100."
|
|
109707
109890
|
},
|
|
109891
|
+
{
|
|
109892
|
+
"kind": "field",
|
|
109893
|
+
"name": "enterCommit",
|
|
109894
|
+
"type": {
|
|
109895
|
+
"text": "string | undefined"
|
|
109896
|
+
},
|
|
109897
|
+
"privacy": "private",
|
|
109898
|
+
"description": "The value Enter settled and announced, until the field's `change` or the next keystroke."
|
|
109899
|
+
},
|
|
109708
109900
|
{
|
|
109709
109901
|
"kind": "field",
|
|
109710
109902
|
"name": "handleKeydown",
|
|
@@ -109776,7 +109968,7 @@
|
|
|
109776
109968
|
"name": "handleKeypress",
|
|
109777
109969
|
"privacy": "private",
|
|
109778
109970
|
"readonly": true,
|
|
109779
|
-
"description": "Enter submits the form, as it does in a native text field.\n\nOn `keypress`, where the platform runs its own implicit submission, so a\nconsumer who prevents the `keydown` for Enter stops this too."
|
|
109971
|
+
"description": "Enter submits the form, as it does in a native text field.\n\nOn `keypress`, where the platform runs its own implicit submission, so a\nconsumer who prevents the `keydown` for Enter stops this too.\n\n**Settled first**, as blur settles it. The typed text is read as a number,\n`change` announces it, and the form value is written before the form is\nsubmitted, so a field showing `$2,500.50` submits 2500.5."
|
|
109780
109972
|
},
|
|
109781
109973
|
{
|
|
109782
109974
|
"kind": "field",
|
|
@@ -113888,10 +114080,18 @@
|
|
|
113888
114080
|
"description": "The option's label.",
|
|
113889
114081
|
"name": ""
|
|
113890
114082
|
},
|
|
114083
|
+
{
|
|
114084
|
+
"description": "A second line under the label, for content richer than the `description` text.",
|
|
114085
|
+
"name": "description"
|
|
114086
|
+
},
|
|
113891
114087
|
{
|
|
113892
114088
|
"description": "Content after the label, such as a shortcut or a count.",
|
|
113893
114089
|
"name": "end"
|
|
113894
114090
|
},
|
|
114091
|
+
{
|
|
114092
|
+
"description": "An icon shown while the option is chosen, in place of the check the styled option draws.",
|
|
114093
|
+
"name": "indicator"
|
|
114094
|
+
},
|
|
113895
114095
|
{
|
|
113896
114096
|
"description": "Content before the label, such as an icon or an avatar.",
|
|
113897
114097
|
"name": "start"
|
|
@@ -113943,7 +114143,7 @@
|
|
|
113943
114143
|
"type": {
|
|
113944
114144
|
"text": "string | undefined"
|
|
113945
114145
|
},
|
|
113946
|
-
"description": "A second line under the label that describes the choice.\n\nA palette row reads better as a name and a caption than as one sentence\ncarrying both: \"Helix\" and \"the design system\" are two facts, and a comma\nbetween them makes a reader parse the punctuation to find where the name\nends. Matching still reads the label, so what somebody types is matched\nagainst the name rather than against prose about it.\n\
|
|
114146
|
+
"description": "A second line under the label that describes the choice.\n\nA palette row reads better as a name and a caption than as one sentence\ncarrying both: \"Helix\" and \"the design system\" are two facts, and a comma\nbetween them makes a reader parse the punctuation to find where the name\nends. Matching still reads the label, so what somebody types is matched\nagainst the name rather than against prose about it.\n\nFor a caption richer than a string, slot it into `description`. The\nproperty is that slot's fallback inside the `description` part. With no\nproperty the slot is drawn bare, which takes no box while it is empty, so\nan option without a caption carries no empty line.\n\nIt does not reflect, per the rule that payload state stays off the host: a\nstring is not a fact a selector needs.",
|
|
113947
114147
|
"attribute": "description"
|
|
113948
114148
|
},
|
|
113949
114149
|
{
|
|
@@ -114007,6 +114207,15 @@
|
|
|
114007
114207
|
"description": "Whether this choice is currently chosen.\n\nWritten by the listbox.",
|
|
114008
114208
|
"attribute": "selected"
|
|
114009
114209
|
},
|
|
114210
|
+
{
|
|
114211
|
+
"kind": "field",
|
|
114212
|
+
"name": "selectionFollowsActive",
|
|
114213
|
+
"type": {
|
|
114214
|
+
"text": "boolean"
|
|
114215
|
+
},
|
|
114216
|
+
"default": "false",
|
|
114217
|
+
"description": "Whether the option says it is selected while the keyboard is on it.\n\nWritten by a control whose list holds suggestions, such as `FilterInput`:\nnothing there stays chosen, so the row the keyboard is on is the\nselection, as the APG combobox's list with selection that follows focus\nsays. No attribute: it is coordination between elements."
|
|
114218
|
+
},
|
|
114010
114219
|
{
|
|
114011
114220
|
"kind": "field",
|
|
114012
114221
|
"name": "target",
|
|
@@ -114451,7 +114660,7 @@
|
|
|
114451
114660
|
"type": {
|
|
114452
114661
|
"text": "string | undefined"
|
|
114453
114662
|
},
|
|
114454
|
-
"description": "A second line under the label that describes the choice.\n\nA palette row reads better as a name and a caption than as one sentence\ncarrying both: \"Helix\" and \"the design system\" are two facts, and a comma\nbetween them makes a reader parse the punctuation to find where the name\nends. Matching still reads the label, so what somebody types is matched\nagainst the name rather than against prose about it.\n\
|
|
114663
|
+
"description": "A second line under the label that describes the choice.\n\nA palette row reads better as a name and a caption than as one sentence\ncarrying both: \"Helix\" and \"the design system\" are two facts, and a comma\nbetween them makes a reader parse the punctuation to find where the name\nends. Matching still reads the label, so what somebody types is matched\nagainst the name rather than against prose about it.\n\nFor a caption richer than a string, slot it into `description`. The\nproperty is that slot's fallback inside the `description` part. With no\nproperty the slot is drawn bare, which takes no box while it is empty, so\nan option without a caption carries no empty line.\n\nIt does not reflect, per the rule that payload state stays off the host: a\nstring is not a fact a selector needs.",
|
|
114455
114664
|
"fieldName": "description"
|
|
114456
114665
|
},
|
|
114457
114666
|
{
|
|
@@ -114541,6 +114750,14 @@
|
|
|
114541
114750
|
"description": "While the keyboard is on the option, which is the option `aria-activedescendant` names.",
|
|
114542
114751
|
"name": "active"
|
|
114543
114752
|
},
|
|
114753
|
+
{
|
|
114754
|
+
"description": "While the option cannot be chosen.",
|
|
114755
|
+
"name": "disabled"
|
|
114756
|
+
},
|
|
114757
|
+
{
|
|
114758
|
+
"description": "An icon is slotted into `indicator`.",
|
|
114759
|
+
"name": "has-indicator"
|
|
114760
|
+
},
|
|
114544
114761
|
{
|
|
114545
114762
|
"description": "While the option is chosen.",
|
|
114546
114763
|
"name": "selected"
|
|
@@ -124690,9 +124907,17 @@
|
|
|
124690
124907
|
"type": {
|
|
124691
124908
|
"text": "HelixHeadlessRadio[]"
|
|
124692
124909
|
},
|
|
124693
|
-
"description": "The radios, in light-DOM order. Client only: the server has no tree.",
|
|
124910
|
+
"description": "The radios, in light-DOM order. Client only: the server has no tree.\n\nDescendants, as `Checkbox.Group` reads its boxes, so a radio inside a\nlayout wrapper of yours is one of the group's. A radio held by a group\nnested inside this one is that group's.",
|
|
124694
124911
|
"readonly": true
|
|
124695
124912
|
},
|
|
124913
|
+
{
|
|
124914
|
+
"kind": "field",
|
|
124915
|
+
"name": "observer",
|
|
124916
|
+
"type": {
|
|
124917
|
+
"text": "MutationObserver | undefined"
|
|
124918
|
+
},
|
|
124919
|
+
"privacy": "private"
|
|
124920
|
+
},
|
|
124696
124921
|
{
|
|
124697
124922
|
"kind": "field",
|
|
124698
124923
|
"name": "handleSelection",
|
|
@@ -135645,6 +135870,16 @@
|
|
|
135645
135870
|
"description": "A single thumb's fill: `--slider-fraction`, and under `origin` the span\nfrom the origin to the thumb as `--slider-from` and `--slider-to`.",
|
|
135646
135871
|
"readonly": true
|
|
135647
135872
|
},
|
|
135873
|
+
{
|
|
135874
|
+
"kind": "field",
|
|
135875
|
+
"name": "axis",
|
|
135876
|
+
"type": {
|
|
135877
|
+
"text": "string"
|
|
135878
|
+
},
|
|
135879
|
+
"privacy": "private",
|
|
135880
|
+
"description": "The range's axis, written on it, so a vertical slider is vertical to the\naccessibility tree with no stylesheet: Chromium reads a range's\norientation off its writing mode and ignores `aria-orientation` there.\n`direction: rtl` puts the maximum at the top, which `vertical-lr` alone\nputs at the foot.",
|
|
135881
|
+
"readonly": true
|
|
135882
|
+
},
|
|
135648
135883
|
{
|
|
135649
135884
|
"kind": "method",
|
|
135650
135885
|
"name": "snapped",
|
|
@@ -152510,7 +152745,7 @@
|
|
|
152510
152745
|
"declarations": [
|
|
152511
152746
|
{
|
|
152512
152747
|
"kind": "class",
|
|
152513
|
-
"description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".",
|
|
152748
|
+
"description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. In `multiple`,\nShift with an arrow, Home or End selects the range from the tag last\npressed to the tag focus moves to, and Control or Command with A selects\nevery tag that is not disabled. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".\nWhere only disabled tags are left, the first of them holds the tab stop and\ntakes focus, so the reader stays in the set.",
|
|
152514
152749
|
"name": "HelixHeadlessTagGroup",
|
|
152515
152750
|
"cssParts": [
|
|
152516
152751
|
{
|
|
@@ -152590,6 +152825,23 @@
|
|
|
152590
152825
|
"privacy": "private",
|
|
152591
152826
|
"description": "The tag the reader was last on, which keeps the tab stop."
|
|
152592
152827
|
},
|
|
152828
|
+
{
|
|
152829
|
+
"kind": "field",
|
|
152830
|
+
"name": "anchor",
|
|
152831
|
+
"type": {
|
|
152832
|
+
"text": "HelixHeadlessTag | undefined"
|
|
152833
|
+
},
|
|
152834
|
+
"privacy": "private",
|
|
152835
|
+
"description": "Where a range chosen with Shift and an arrow starts, and where it reached,\nin `multiple`: the tag last pressed or moved to without Shift."
|
|
152836
|
+
},
|
|
152837
|
+
{
|
|
152838
|
+
"kind": "field",
|
|
152839
|
+
"name": "reached",
|
|
152840
|
+
"type": {
|
|
152841
|
+
"text": "HelixHeadlessTag | undefined"
|
|
152842
|
+
},
|
|
152843
|
+
"privacy": "private"
|
|
152844
|
+
},
|
|
152593
152845
|
{
|
|
152594
152846
|
"kind": "field",
|
|
152595
152847
|
"name": "keys",
|
|
@@ -152714,6 +152966,75 @@
|
|
|
152714
152966
|
],
|
|
152715
152967
|
"description": "Selects the tag, or lets it go, asking first.\n\n`helix-before-change` carries the `value` the press would leave, and a\nlistener that refuses it keeps the selection. `change` follows once it\nhas moved."
|
|
152716
152968
|
},
|
|
152969
|
+
{
|
|
152970
|
+
"kind": "method",
|
|
152971
|
+
"name": "span",
|
|
152972
|
+
"privacy": "private",
|
|
152973
|
+
"return": {
|
|
152974
|
+
"type": {
|
|
152975
|
+
"text": "HelixHeadlessTag[]"
|
|
152976
|
+
}
|
|
152977
|
+
},
|
|
152978
|
+
"parameters": [
|
|
152979
|
+
{
|
|
152980
|
+
"name": "from",
|
|
152981
|
+
"type": {
|
|
152982
|
+
"text": "HelixHeadlessTag"
|
|
152983
|
+
}
|
|
152984
|
+
},
|
|
152985
|
+
{
|
|
152986
|
+
"name": "to",
|
|
152987
|
+
"type": {
|
|
152988
|
+
"text": "HelixHeadlessTag"
|
|
152989
|
+
}
|
|
152990
|
+
}
|
|
152991
|
+
],
|
|
152992
|
+
"description": "The reachable tags from one to the other, either way round."
|
|
152993
|
+
},
|
|
152994
|
+
{
|
|
152995
|
+
"kind": "method",
|
|
152996
|
+
"name": "extend",
|
|
152997
|
+
"privacy": "private",
|
|
152998
|
+
"return": {
|
|
152999
|
+
"type": {
|
|
153000
|
+
"text": "void"
|
|
153001
|
+
}
|
|
153002
|
+
},
|
|
153003
|
+
"parameters": [
|
|
153004
|
+
{
|
|
153005
|
+
"name": "from",
|
|
153006
|
+
"type": {
|
|
153007
|
+
"text": "HelixHeadlessTag"
|
|
153008
|
+
}
|
|
153009
|
+
},
|
|
153010
|
+
{
|
|
153011
|
+
"name": "to",
|
|
153012
|
+
"type": {
|
|
153013
|
+
"text": "HelixHeadlessTag"
|
|
153014
|
+
}
|
|
153015
|
+
}
|
|
153016
|
+
],
|
|
153017
|
+
"description": "Shift and an arrow, Home or End, in `multiple`: the range from the anchor\nto the tag focus moved to is selected, in place of the range the last such\nkey selected, as React Aria's selection extends."
|
|
153018
|
+
},
|
|
153019
|
+
{
|
|
153020
|
+
"kind": "method",
|
|
153021
|
+
"name": "choose",
|
|
153022
|
+
"privacy": "private",
|
|
153023
|
+
"return": {
|
|
153024
|
+
"type": {
|
|
153025
|
+
"text": "void"
|
|
153026
|
+
}
|
|
153027
|
+
},
|
|
153028
|
+
"parameters": [
|
|
153029
|
+
{
|
|
153030
|
+
"name": "tags",
|
|
153031
|
+
"type": {
|
|
153032
|
+
"text": "readonly HelixHeadlessTag[]"
|
|
153033
|
+
}
|
|
153034
|
+
}
|
|
153035
|
+
],
|
|
153036
|
+
"description": "Asks for `value` to hold these tags' values, in their order."
|
|
153037
|
+
},
|
|
152717
153038
|
{
|
|
152718
153039
|
"kind": "field",
|
|
152719
153040
|
"name": "handleKeydown",
|
|
@@ -153325,6 +153646,15 @@
|
|
|
153325
153646
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
153326
153647
|
}
|
|
153327
153648
|
},
|
|
153649
|
+
{
|
|
153650
|
+
"kind": "field",
|
|
153651
|
+
"name": "dismissTabStop",
|
|
153652
|
+
"type": {
|
|
153653
|
+
"text": "boolean"
|
|
153654
|
+
},
|
|
153655
|
+
"default": "true",
|
|
153656
|
+
"description": "Whether the remove button is a tab stop of its own, outside a `Tag.Group`.\n\nA field that holds tags as its tokens, such as a `multiple` Combobox,\nwrites `false`: the field's text is its one tab stop, and the arrow keys\nmove from the text to the tags. No attribute: it is coordination between\nelements, as `focusable` is."
|
|
153657
|
+
},
|
|
153328
153658
|
{
|
|
153329
153659
|
"kind": "field",
|
|
153330
153660
|
"name": "focusable",
|
|
@@ -156439,6 +156769,10 @@
|
|
|
156439
156769
|
"description": "Help under the field.",
|
|
156440
156770
|
"name": "hint"
|
|
156441
156771
|
},
|
|
156772
|
+
{
|
|
156773
|
+
"description": "The label, for content richer than the `label` text.",
|
|
156774
|
+
"name": "label"
|
|
156775
|
+
},
|
|
156442
156776
|
{
|
|
156443
156777
|
"description": "Content in the panel under the times, such as a note or an action.",
|
|
156444
156778
|
"name": "panel-footer"
|
|
@@ -157442,6 +157776,17 @@
|
|
|
157442
157776
|
"module": "src/mixins/mixin-picker-editing/mixin-picker-editing.ts"
|
|
157443
157777
|
}
|
|
157444
157778
|
},
|
|
157779
|
+
{
|
|
157780
|
+
"kind": "field",
|
|
157781
|
+
"name": "handleEditKey",
|
|
157782
|
+
"privacy": "private",
|
|
157783
|
+
"readonly": true,
|
|
157784
|
+
"description": "The first key that moves the caret or edits, while the focused field\nshows its rendering, puts the value in the field before the key acts.\n\nPicking hands focus back to a field that shows `August 5, 2026`, which is\nwhat the reader chose. `Intl` formats and does not parse, so a key that\nedited the rendering wrote text no date could be read from. The caret\nkeeps its place at the start, at the end, or around the whole text, and\ngoes to the end otherwise.",
|
|
157785
|
+
"inheritedFrom": {
|
|
157786
|
+
"name": "MixinPickerEditing",
|
|
157787
|
+
"module": "src/mixins/mixin-picker-editing/mixin-picker-editing.ts"
|
|
157788
|
+
}
|
|
157789
|
+
},
|
|
157445
157790
|
{
|
|
157446
157791
|
"kind": "field",
|
|
157447
157792
|
"name": "handleFocus",
|
|
@@ -157928,6 +158273,60 @@
|
|
|
157928
158273
|
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
157929
158274
|
}
|
|
157930
158275
|
},
|
|
158276
|
+
{
|
|
158277
|
+
"kind": "method",
|
|
158278
|
+
"name": "tokenElements",
|
|
158279
|
+
"privacy": "protected",
|
|
158280
|
+
"return": {
|
|
158281
|
+
"type": {
|
|
158282
|
+
"text": "HTMLElement[]"
|
|
158283
|
+
}
|
|
158284
|
+
},
|
|
158285
|
+
"inheritedFrom": {
|
|
158286
|
+
"name": "MixinTokens",
|
|
158287
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
158288
|
+
}
|
|
158289
|
+
},
|
|
158290
|
+
{
|
|
158291
|
+
"kind": "method",
|
|
158292
|
+
"name": "tokenStops",
|
|
158293
|
+
"privacy": "private",
|
|
158294
|
+
"return": {
|
|
158295
|
+
"type": {
|
|
158296
|
+
"text": "HTMLElement[]"
|
|
158297
|
+
}
|
|
158298
|
+
},
|
|
158299
|
+
"description": "The remove button of each token shown that has one, in order.",
|
|
158300
|
+
"inheritedFrom": {
|
|
158301
|
+
"name": "MixinTokens",
|
|
158302
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
158303
|
+
}
|
|
158304
|
+
},
|
|
158305
|
+
{
|
|
158306
|
+
"kind": "field",
|
|
158307
|
+
"name": "tokenControl",
|
|
158308
|
+
"type": {
|
|
158309
|
+
"text": "HTMLInputElement | null"
|
|
158310
|
+
},
|
|
158311
|
+
"privacy": "private",
|
|
158312
|
+
"description": "The host's text field.",
|
|
158313
|
+
"readonly": true,
|
|
158314
|
+
"inheritedFrom": {
|
|
158315
|
+
"name": "MixinTokens",
|
|
158316
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
158317
|
+
}
|
|
158318
|
+
},
|
|
158319
|
+
{
|
|
158320
|
+
"kind": "field",
|
|
158321
|
+
"name": "handleTokenKeydown",
|
|
158322
|
+
"privacy": "private",
|
|
158323
|
+
"readonly": true,
|
|
158324
|
+
"description": "The arrow keys between the tokens, and Delete or Backspace on one.\n\nThe arrow toward the end of the line moves to the next token, and past\nthe last into the text with the caret at its start. Delete or Backspace\nasks the focused token to go, as its remove button does, and focus that\nleaves with it comes back to the text.",
|
|
158325
|
+
"inheritedFrom": {
|
|
158326
|
+
"name": "MixinTokens",
|
|
158327
|
+
"module": "src/mixins/mixin-tokens/mixin-tokens.ts"
|
|
158328
|
+
}
|
|
158329
|
+
},
|
|
157931
158330
|
{
|
|
157932
158331
|
"kind": "method",
|
|
157933
158332
|
"name": "renderRest",
|
|
@@ -165486,8 +165885,17 @@
|
|
|
165486
165885
|
"text": "HelixHeadlessToggle[]"
|
|
165487
165886
|
},
|
|
165488
165887
|
"privacy": "private",
|
|
165888
|
+
"description": "The toggles, in light-DOM order, at any depth, so a toggle inside a layout\nwrapper of yours is one of the group's. A toggle held by a group nested\ninside this one is that group's.",
|
|
165489
165889
|
"readonly": true
|
|
165490
165890
|
},
|
|
165891
|
+
{
|
|
165892
|
+
"kind": "field",
|
|
165893
|
+
"name": "observer",
|
|
165894
|
+
"type": {
|
|
165895
|
+
"text": "MutationObserver | undefined"
|
|
165896
|
+
},
|
|
165897
|
+
"privacy": "private"
|
|
165898
|
+
},
|
|
165491
165899
|
{
|
|
165492
165900
|
"kind": "field",
|
|
165493
165901
|
"name": "handleSelection",
|
|
@@ -167105,7 +167513,7 @@
|
|
|
167105
167513
|
"declarations": [
|
|
167106
167514
|
{
|
|
167107
167515
|
"kind": "class",
|
|
167108
|
-
"description": "Renders a `<button role=\"radio\">` for use as a form control. In a group with\n`selection-mode=\"multiple\"` it is a `<button>` that says whether it is\npressed with `aria-pressed`.\n\nDo not use it for navigation. For navigation, use links marked with\n`aria-current` and styled by the `data-navigation-item` recipe in the base\nlayer. The recipe has the same look, and links are not announced as choices.",
|
|
167516
|
+
"description": "Renders a `<button role=\"radio\">` for use as a form control. In a group with\n`selection-mode=\"multiple\"` it is a `<button>` that says whether it is\npressed with `aria-pressed`.\n\n**On its own, outside a `Toggle.Group`, it is a toggle button**, as React\nAria's `ToggleButton`: a `<button>` with `aria-pressed`. A press, Enter or\nSpace sends `helix-select`, which you can cancel, then flips `selected` and\nsends `change`. Write `selected` in the markup to start it pressed.\n\nDo not use it for navigation. For navigation, use links marked with\n`aria-current` and styled by the `data-navigation-item` recipe in the base\nlayer. The recipe has the same look, and links are not announced as choices.",
|
|
167109
167517
|
"name": "HelixHeadlessToggle",
|
|
167110
167518
|
"cssParts": [
|
|
167111
167519
|
{
|
|
@@ -167142,7 +167550,7 @@
|
|
|
167142
167550
|
"type": {
|
|
167143
167551
|
"text": "boolean | undefined"
|
|
167144
167552
|
},
|
|
167145
|
-
"description": "Whether the item holds the group's tab stop. Unset, the
|
|
167553
|
+
"description": "Whether the item holds the group's tab stop. Unset, no group holds the\nitem, and it is a toggle button with a tab stop of its own.\n\nWritten by the group on every item: `true` for the chosen item, or for the\nfirst item that can be chosen while there is no selection to carry the\nstop, and `false` for every item, the chosen one too, while a toolbar the\ngroup sits in holds the stop. No attribute: it is coordination between\nelements, and `tabindex` on a host the consumer rendered is the change a\nReact consumer's hydration reports and does not patch up."
|
|
167146
167554
|
},
|
|
167147
167555
|
{
|
|
167148
167556
|
"kind": "field",
|
|
@@ -167152,6 +167560,33 @@
|
|
|
167152
167560
|
},
|
|
167153
167561
|
"description": "Whether the item is pressed, in a group where several can be, and\n`undefined` in a group where one is chosen.\n\nWritten by the group, like `selected`, so no attribute."
|
|
167154
167562
|
},
|
|
167563
|
+
{
|
|
167564
|
+
"kind": "field",
|
|
167565
|
+
"name": "alone",
|
|
167566
|
+
"type": {
|
|
167567
|
+
"text": "boolean"
|
|
167568
|
+
},
|
|
167569
|
+
"privacy": "private",
|
|
167570
|
+
"description": "Whether no `Toggle.Group` holds the item, which makes it a toggle button\nof its own. A group writes `focusable` on every item it holds. A server,\nand the render that hydrates its markup, cannot tell, and draw the item a\ngroup holds.",
|
|
167571
|
+
"readonly": true
|
|
167572
|
+
},
|
|
167573
|
+
{
|
|
167574
|
+
"kind": "method",
|
|
167575
|
+
"name": "select",
|
|
167576
|
+
"return": {
|
|
167577
|
+
"type": {
|
|
167578
|
+
"text": "boolean"
|
|
167579
|
+
}
|
|
167580
|
+
},
|
|
167581
|
+
"description": "Chooses the item in its group, or, on its own, flips `selected` once\n`helix-select` stands and sends `change`.",
|
|
167582
|
+
"inheritedFrom": {
|
|
167583
|
+
"name": "MixinSelectableItem",
|
|
167584
|
+
"module": "src/mixins/mixin-selectable-item/mixin-selectable-item.ts"
|
|
167585
|
+
},
|
|
167586
|
+
"type": {
|
|
167587
|
+
"text": "select() => boolean"
|
|
167588
|
+
}
|
|
167589
|
+
},
|
|
167155
167590
|
{
|
|
167156
167591
|
"kind": "field",
|
|
167157
167592
|
"name": "disabled",
|
|
@@ -167226,23 +167661,6 @@
|
|
|
167226
167661
|
"text": "focusItem() => void"
|
|
167227
167662
|
}
|
|
167228
167663
|
},
|
|
167229
|
-
{
|
|
167230
|
-
"kind": "method",
|
|
167231
|
-
"name": "select",
|
|
167232
|
-
"return": {
|
|
167233
|
-
"type": {
|
|
167234
|
-
"text": "boolean"
|
|
167235
|
-
}
|
|
167236
|
-
},
|
|
167237
|
-
"description": "Selects the item and fires `helix-select`. Returns `false` if the item is\ndisabled or a listener cancels the event.",
|
|
167238
|
-
"inheritedFrom": {
|
|
167239
|
-
"name": "MixinSelectableItem",
|
|
167240
|
-
"module": "src/mixins/mixin-selectable-item/mixin-selectable-item.ts"
|
|
167241
|
-
},
|
|
167242
|
-
"type": {
|
|
167243
|
-
"text": "select() => boolean"
|
|
167244
|
-
}
|
|
167245
|
-
},
|
|
167246
167664
|
{
|
|
167247
167665
|
"kind": "field",
|
|
167248
167666
|
"name": "tier",
|
|
@@ -167584,6 +168002,14 @@
|
|
|
167584
168002
|
}
|
|
167585
168003
|
],
|
|
167586
168004
|
"events": [
|
|
168005
|
+
{
|
|
168006
|
+
"type": {
|
|
168007
|
+
"text": "Event"
|
|
168008
|
+
},
|
|
168009
|
+
"description": "Fired after a toggle button on its own is pressed or released.",
|
|
168010
|
+
"name": "change",
|
|
168011
|
+
"reactProp": "onchange"
|
|
168012
|
+
},
|
|
167587
168013
|
{
|
|
167588
168014
|
"type": {
|
|
167589
168015
|
"text": "HelixSelectEvent"
|
|
@@ -167621,7 +168047,7 @@
|
|
|
167621
168047
|
"name": "HelixElement",
|
|
167622
168048
|
"package": "@fusion.dev/helix-core"
|
|
167623
168049
|
},
|
|
167624
|
-
"summary": "One option in a toggle group.",
|
|
168050
|
+
"summary": "One option in a toggle group, or a toggle button on its own.",
|
|
167625
168051
|
"helix": {
|
|
167626
168052
|
"category": "actions",
|
|
167627
168053
|
"since": "0.1.0",
|
|
@@ -182029,6 +182455,6 @@
|
|
|
182029
182455
|
],
|
|
182030
182456
|
"helix": {
|
|
182031
182457
|
"package": "@fusion.dev/helix-headless",
|
|
182032
|
-
"version": "0.
|
|
182458
|
+
"version": "0.150.0"
|
|
182033
182459
|
}
|
|
182034
182460
|
}
|