@fusion.dev/helix-headless 0.178.0 → 0.180.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 +543 -145
- package/dist/button/root/button-root.d.ts +12 -0
- package/dist/button/root/button-root.js +9 -0
- package/dist/chat/composer/chat-composer.d.ts +2 -1
- package/dist/chat/composer/chat-composer.js +1 -1
- package/dist/combobox/root/combobox-root.d.ts +12 -0
- package/dist/combobox/root/combobox-root.js +3 -2
- package/dist/command/root/command-root.d.ts +12 -0
- package/dist/command/root/command-root.js +3 -2
- package/dist/data-table/root/data-table-root.d.ts +13 -1
- package/dist/data-table/root/data-table-root.js +18 -15
- package/dist/date-input/root/date-input-root.d.ts +7 -0
- package/dist/date-input/root/date-input-root.js +12 -0
- package/dist/date-picker/root/date-picker-root.d.ts +7 -1
- package/dist/date-picker/root/date-picker-root.js +12 -0
- package/dist/drilldown/item/drilldown-item.d.ts +6 -0
- package/dist/drilldown/item/drilldown-item.js +9 -0
- package/dist/drilldown/root/drilldown-root.js +9 -0
- package/dist/element-events.generated.js +7 -1
- package/dist/filter-input/root/filter-input-root.d.ts +13 -0
- package/dist/filter-input/root/filter-input-root.js +2 -1
- package/dist/heatmap/root/heatmap-root.d.ts +54 -42
- package/dist/heatmap/root/heatmap-root.js +72 -54
- package/dist/listbox/root/listbox-root.d.ts +16 -2
- package/dist/listbox/root/listbox-root.js +8 -4
- package/dist/menu/item/menu-item.d.ts +6 -0
- package/dist/menu/item/menu-item.js +9 -0
- package/dist/meter/root/meter-root.js +1 -2
- package/dist/notifications/notification/notification.d.ts +37 -9
- package/dist/notifications/notification/notification.js +35 -5
- package/dist/option/among.d.ts +23 -0
- package/dist/option/among.js +2 -0
- package/dist/option/root/option-root.d.ts +1 -17
- package/dist/option/root/option-root.js +1 -4
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +5 -4
- package/dist/scatter-chart/root/scatter-chart-root.js +1 -0
- package/dist/select/root/select-root.d.ts +13 -2
- package/dist/select/root/select-root.js +3 -3
- package/dist/speed-dial/item/speed-dial-item.d.ts +6 -0
- package/dist/speed-dial/item/speed-dial-item.js +9 -0
- package/dist/table/column/table-column.d.ts +1 -10
- package/dist/table/column/table-column.js +1 -2
- package/dist/table/edge.d.ts +10 -0
- package/dist/table/edge.js +2 -0
- package/dist/tabs/root/tabs-root.d.ts +1 -0
- package/dist/tabs/root/tabs-root.js +13 -0
- package/dist/tabs/tab/tab.d.ts +6 -0
- package/dist/tabs/tab/tab.js +9 -0
- package/dist/tooltip/root/tooltip-root.js +1 -0
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +472 -130
- package/types/vue.d.ts +71 -50
- package/types/words.d.ts +27 -6
package/custom-elements.json
CHANGED
|
@@ -11491,6 +11491,19 @@
|
|
|
11491
11491
|
"privacy": "private",
|
|
11492
11492
|
"readonly": true
|
|
11493
11493
|
},
|
|
11494
|
+
{
|
|
11495
|
+
"kind": "method",
|
|
11496
|
+
"name": "click",
|
|
11497
|
+
"return": {
|
|
11498
|
+
"type": {
|
|
11499
|
+
"text": "void"
|
|
11500
|
+
}
|
|
11501
|
+
},
|
|
11502
|
+
"description": "Presses the button, as `click()` presses a native one: the command is sent,\nthe form submits or resets, and `helix-press` says `virtual`.\n\n**Passed to the inner control, because a click on the host reaches nothing\nthat acts.** The control in the shadow root is what answers a click, so\n`click()` from a script, an automation or a test, dispatched on the host,\nsubmitted nothing and sent no `helix-press`. The control's own click reaches\nthe host's listeners once, retargeted, as one from a native button does. A\ndisabled button does nothing, and a pending one refuses the press.",
|
|
11503
|
+
"type": {
|
|
11504
|
+
"text": "click() => void"
|
|
11505
|
+
}
|
|
11506
|
+
},
|
|
11494
11507
|
{
|
|
11495
11508
|
"kind": "method",
|
|
11496
11509
|
"name": "act",
|
|
@@ -23189,7 +23202,7 @@
|
|
|
23189
23202
|
"declarations": [
|
|
23190
23203
|
{
|
|
23191
23204
|
"kind": "class",
|
|
23192
|
-
"description": "The composer is a separate element so you can replace it. If you need\nattachments, slash commands, or a model picker, replace the composer and keep\nthe transcript.\n\nBy default, Enter sends and Shift+Enter starts a new line, the convention in\nmessaging apps. Document editors mostly use the opposite, so `submit-on`\ntakes `enter` or `button`. Use `button` for a long-form composer.\n\nThe composer clears only when no listener cancels the send, so the text is\nkept when you cancel a send that failed.\n\n**In a form, the draft is the composer's value**, submitted under `name
|
|
23205
|
+
"description": "The composer is a separate element so you can replace it. If you need\nattachments, slash commands, or a model picker, replace the composer and keep\nthe transcript.\n\nBy default, Enter sends and Shift+Enter starts a new line, the convention in\nmessaging apps. Document editors mostly use the opposite, so `submit-on`\ntakes `enter` or `button`. Use `button` for a long-form composer.\n\nThe composer clears only when no listener cancels the send, so the text is\nkept when you cancel a send that failed.\n\n**In a form, the draft is the composer's value**, submitted under `name`,\nand an empty draft submits an empty entry, as a native textarea does. A\nform reset puts back the `value` the markup declared, and a `<fieldset\ndisabled>` turns the composer off. Sending is still `helix-send`, and it\ndoes not submit the form.\n\n**`required`, `minlength` and `maxlength` are checked by the browser**, as\non a `<textarea>`, and the message is the browser's. `maxlength` stops the\nfield taking more. A draft that fails them does not send, and the composer\ntakes `:state(invalid)` and `aria-invalid` once the reader has tried to send\nit, the form was submitted, or the reader edited the field and left it.\nSending an empty required composer counts as trying. Tabbing past an empty\ncomposer marks nothing.\n\n**`feedback` is a message of your own about the draft**, such as one your\nserver sent back. While it is set, the composer is invalid at once, does\nnot send or submit, shows the message under the field, and a screen reader\nhears it as it appears. Clear it to let the draft go.\n\n**`typing` says whether the user is writing**, and `helix-typing` is sent\neach time it changes: when they start, and when they send or stop for\n`typing-timeout` milliseconds. Pass it on to show \"is typing\" to the other\nside.",
|
|
23193
23206
|
"name": "HelixHeadlessChatComposer",
|
|
23194
23207
|
"cssParts": [
|
|
23195
23208
|
{
|
|
@@ -39633,7 +39646,7 @@
|
|
|
39633
39646
|
"declarations": [
|
|
39634
39647
|
{
|
|
39635
39648
|
"kind": "class",
|
|
39636
|
-
"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| Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. |\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.",
|
|
39649
|
+
"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| Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. |\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.\n\n**The options are an import of their own.** An option is the Option family's,\nwhich the combobox does not register, so a page that writes one imports it\nbeside the combobox:\n\n```js\nimport '@fusion.dev/helix/combobox'\nimport '@fusion.dev/helix/option'\n```\n\nIn development, a combobox holding an option nobody registered says so once\nthe page has loaded, with the line to add.",
|
|
39637
39650
|
"name": "HelixHeadlessCombobox",
|
|
39638
39651
|
"cssParts": [
|
|
39639
39652
|
{
|
|
@@ -43098,7 +43111,7 @@
|
|
|
43098
43111
|
"declarations": [
|
|
43099
43112
|
{
|
|
43100
43113
|
"kind": "class",
|
|
43101
|
-
"description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and a screen reader hears those words. Backspace in an empty\nfilter goes back, and a screen reader hears the name of the page it goes\nback to. `page` says which page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens, with no\ncommand highlighted, as in React Aria's Autocomplete, so Enter runs nothing\nuntil you type or press Down. Typing highlights the first command left, and\nthe highlight moves through the commands while you type.\n\n| Key | What it does |\n|---|---|\n| `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |\n| Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |\n| Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |\n| Home, End | Move the caret in the filter field. With `home-end=\"list\"`, move the highlight to the first or the last command. |\n| Left, Right | Move the caret in the filter field. |\n| Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |\n| Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |\n| Backspace | In an empty filter on a page, goes back to the page before. |\n| Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |\n| Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |\n\n**ARIA.** The palette is a modal `dialog` named by `label`, or with\n`inline` no dialog at all. Inside it the filter field is a text field with\n`aria-autocomplete=\"list\"`, `aria-controls` on the list, and\n`aria-activedescendant` on the highlighted command, as the field of React\nAria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and\nthe loading text are said in a polite live region.",
|
|
43114
|
+
"description": "The list is a `Listbox`, which handles filtering, the empty state, the match\nhighlight, `aria-activedescendant`, scrolling an option into view, and moving\nbetween options with the keyboard. The palette adds a dialog and a hotkey\nthat opens it.\n\nThe palette keeps no value. It is not a form control and submits nothing.\nChoosing an option dispatches `helix-select` once. To remember the last\ncommand, store it yourself. An option with `href` is a link to a page, which\nthe browser follows once the palette has closed.\n\nThe hotkey listener is on the document, so the hotkey works from anywhere on\nthe page, including inside another control's text field, whether or not the\npalette is open. `mod` means Command on a Mac and Control elsewhere, so you\nwrite one binding.\n\nWith `inline`, the palette is drawn in the page with no dialog, as a search\nover a list that is always shown.\n\n**Pages.** A command can open a page of commands of its own, as a palette\noffers \"Change theme\" and then the themes. Give the option `opens` with a\nname, and slot the page's commands as `page:` and that name:\n\n```html\n<helix-command>\n <helix-option value=\"theme\" opens=\"theme\">Change theme</helix-option>\n <helix-option value=\"dark\" slot=\"page:theme\">Dark</helix-option>\n <helix-option value=\"light\" slot=\"page:theme\">Light</helix-option>\n</helix-command>\n```\n\nChoosing the opener says `helix-select` with its value, and canceling it\nkeeps the page that is shown. The list then shows the page, named by the\nopener's words, and a screen reader hears those words. Backspace in an empty\nfilter goes back, and a screen reader hears the name of the page it goes\nback to. `page` says which page is shown.\n\nThe filter is cleared when the palette closes, so each opening starts from\nthe full list. Combobox and Select do the same. As typing narrows the list, a\nscreen reader hears how many commands are left, such as \"3 commands\".\n\n**Keyboard.** Focus goes to the filter field as the palette opens, with no\ncommand highlighted, as in React Aria's Autocomplete, so Enter runs nothing\nuntil you type or press Down. Typing highlights the first command left, and\nthe highlight moves through the commands while you type.\n\n| Key | What it does |\n|---|---|\n| `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |\n| Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |\n| Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |\n| Home, End | Move the caret in the filter field. With `home-end=\"list\"`, move the highlight to the first or the last command. |\n| Left, Right | Move the caret in the filter field. |\n| Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |\n| Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |\n| Backspace | In an empty filter on a page, goes back to the page before. |\n| Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |\n| Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |\n\n**ARIA.** The palette is a modal `dialog` named by `label`, or with\n`inline` no dialog at all. Inside it the filter field is a text field with\n`aria-autocomplete=\"list\"`, `aria-controls` on the list, and\n`aria-activedescendant` on the highlighted command, as the field of React\nAria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and\nthe loading text are said in a polite live region.\n\n**The commands are an import of their own.** A command is an option, the\nOption family's, which the palette does not register, so a page that writes\none imports it beside the palette:\n\n```js\nimport '@fusion.dev/helix/command'\nimport '@fusion.dev/helix/option'\n```\n\nIn development, a palette holding an option nobody registered says so once\nthe page has loaded, with the line to add.",
|
|
43102
43115
|
"name": "HelixHeadlessCommand",
|
|
43103
43116
|
"cssParts": [
|
|
43104
43117
|
{
|
|
@@ -44952,6 +44965,23 @@
|
|
|
44952
44965
|
"module": "src/button/root/button-root.ts"
|
|
44953
44966
|
}
|
|
44954
44967
|
},
|
|
44968
|
+
{
|
|
44969
|
+
"kind": "method",
|
|
44970
|
+
"name": "click",
|
|
44971
|
+
"return": {
|
|
44972
|
+
"type": {
|
|
44973
|
+
"text": "void"
|
|
44974
|
+
}
|
|
44975
|
+
},
|
|
44976
|
+
"description": "Presses the button, as `click()` presses a native one: the command is sent,\nthe form submits or resets, and `helix-press` says `virtual`.\n\n**Passed to the inner control, because a click on the host reaches nothing\nthat acts.** The control in the shadow root is what answers a click, so\n`click()` from a script, an automation or a test, dispatched on the host,\nsubmitted nothing and sent no `helix-press`. The control's own click reaches\nthe host's listeners once, retargeted, as one from a native button does. A\ndisabled button does nothing, and a pending one refuses the press.",
|
|
44977
|
+
"type": {
|
|
44978
|
+
"text": "click() => void"
|
|
44979
|
+
},
|
|
44980
|
+
"inheritedFrom": {
|
|
44981
|
+
"name": "HelixHeadlessButton",
|
|
44982
|
+
"module": "src/button/root/button-root.ts"
|
|
44983
|
+
}
|
|
44984
|
+
},
|
|
44955
44985
|
{
|
|
44956
44986
|
"kind": "method",
|
|
44957
44987
|
"name": "act",
|
|
@@ -46401,7 +46431,7 @@
|
|
|
46401
46431
|
"declarations": [
|
|
46402
46432
|
{
|
|
46403
46433
|
"kind": "class",
|
|
46404
|
-
"description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n uses for a multiple choice. As with `sort`, writing it applies the\n selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n alone, as a file list does. Control or Command with a press adds or takes\n out one row, and Shift with a press selects every row from the one last\n chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable
|
|
46434
|
+
"description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n uses for a multiple choice. As with `sort`, writing it applies the\n selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n alone, as a file list does. Control or Command with a press adds or takes\n out one row, and Shift with a press selects every row from the one last\n chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable`.\n\n**The columns are an import of their own.** A column is the Table family's\n`TableColumn`, which the data table does not register, so a page that writes\none imports the Table entry beside the data table:\n\n```js\nimport '@fusion.dev/helix/data-table'\nimport '@fusion.dev/helix/table'\n```\n\nIn development, a data table holding a column nobody registered says so once\nthe page has loaded, with the line to add.",
|
|
46405
46435
|
"name": "HelixHeadlessDataTable",
|
|
46406
46436
|
"cssProperties": [
|
|
46407
46437
|
{
|
|
@@ -50500,7 +50530,7 @@
|
|
|
50500
50530
|
"declarations": [
|
|
50501
50531
|
{
|
|
50502
50532
|
"kind": "class",
|
|
50503
|
-
"description": "The calendar is `DatePicker`, which handles months, ranges, disabled days,\nthe first day of the week, and the grid's keyboard behavior. The date input\nadds the field, the overlay, and the connection between them.\n\nYou can type a date as well as pick one. The native `<input type=\"date\">`\ngives a picker and locale formatting but allows almost no styling, so the\nfield is a text field. Typing sends `input` on each keystroke and `change`\nwhen you leave the field, as a text field does. A date picked from the\ncalendar sends both. The field reads ISO, `2026-08-04`, and a date written\nin the order, the digits, and the month names of `locale`, `8/4/2026` or\n`Aug 4, 2026` in `en-US` and `4.8.2026` in `de-DE`, which becomes the value\nas you leave the field.\n\nThe trigger and ArrowDown open the calendar with focus on the selected day,\nTab moves between the calendar's controls without leaving it, and Escape\ncloses it and returns focus to the field. A press into the field opens the\ncalendar too. Tab into the field opens nothing, and Tab out of the field\ncloses the calendar. The text field is a `combobox` with\n`aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`, as in the\nAPG date picker combobox, since Down opens the calendar from it.\n\nWith `segmented`, the field is a row of segments in place of the text: a\nmonth, a day and a year in the order the locale writes them, each set with\ndigits or the arrow keys. Alt+Down opens the calendar from a segment. A\n`range` is two rows with a dash between them, the start and the end, as\nReact Aria's DateRangePicker draws them, and `multiple` keeps the text.\n\nText that is not a date gives the form an empty value, as a native date\nfield does, and `value` keeps the text so it can be corrected.\n\n**Keyboard.** The field is one tab stop, or each segment is with\n`segmented`, and the trigger is one more.\n\n| Key | What it does |\n|---|---|\n| Down | In the text field, opens the calendar with focus on the chosen day. |\n| Alt with Down | Opens the calendar, from the text field or a segment. |\n| Enter | In the text field, takes the typed date and submits the form, as a native field does. |\n| Escape | Closes the calendar and puts focus back in the field. |\n| Tab | In the open calendar, moves between its controls. Out of the field, closes it. |\n| Up, Down on a segment | Steps the segment by one, round from its last value to its first. |\n| Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |\n| Home, End on a segment | Goes to the segment's first or last value. |\n| Digits on a segment | Fill it, and move to the next once it can take no more. |\n| Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |\n| Left, Right on a segment | Move to the previous or the next segment, along the line of text. |\n\nIn the calendar, the keys are `DatePicker`'s: the arrows move by a day or a\nweek, Page Up and Page Down by a month, with Shift by a year, and Home and\nEnd to the start and the end of the week.",
|
|
50533
|
+
"description": "The calendar is `DatePicker`, which handles months, ranges, disabled days,\nthe first day of the week, and the grid's keyboard behavior. The date input\nadds the field, the overlay, and the connection between them.\n\nYou can type a date as well as pick one. The native `<input type=\"date\">`\ngives a picker and locale formatting but allows almost no styling, so the\nfield is a text field. Typing sends `input` on each keystroke and `change`\nwhen you leave the field, as a text field does. A date picked from the\ncalendar sends both. The field reads ISO, `2026-08-04`, and a date written\nin the order, the digits, and the month names of `locale`, `8/4/2026` or\n`Aug 4, 2026` in `en-US` and `4.8.2026` in `de-DE`, which becomes the value\nas you leave the field.\n\nThe trigger and ArrowDown open the calendar with focus on the selected day,\nTab moves between the calendar's controls without leaving it, and Escape\ncloses it and returns focus to the field. A press into the field opens the\ncalendar too. Tab into the field opens nothing, and Tab out of the field\ncloses the calendar. The text field is a `combobox` with\n`aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`, as in the\nAPG date picker combobox, since Down opens the calendar from it.\n\nWith `segmented`, the field is a row of segments in place of the text: a\nmonth, a day and a year in the order the locale writes them, each set with\ndigits or the arrow keys. Alt+Down opens the calendar from a segment. A\n`range` is two rows with a dash between them, the start and the end, as\nReact Aria's DateRangePicker draws them, and `multiple` keeps the text.\nA range whose end is before its start reports `rangeUnderflow`, as Date\nPicker does, with `range-order-message`.\n\nText that is not a date gives the form an empty value, as a native date\nfield does, and `value` keeps the text so it can be corrected.\n\n**Keyboard.** The field is one tab stop, or each segment is with\n`segmented`, and the trigger is one more.\n\n| Key | What it does |\n|---|---|\n| Down | In the text field, opens the calendar with focus on the chosen day. |\n| Alt with Down | Opens the calendar, from the text field or a segment. |\n| Enter | In the text field, takes the typed date and submits the form, as a native field does. |\n| Escape | Closes the calendar and puts focus back in the field. |\n| Tab | In the open calendar, moves between its controls. Out of the field, closes it. |\n| Up, Down on a segment | Steps the segment by one, round from its last value to its first. |\n| Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |\n| Home, End on a segment | Goes to the segment's first or last value. |\n| Digits on a segment | Fill it, and move to the next once it can take no more. |\n| Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |\n| Left, Right on a segment | Move to the previous or the next segment, along the line of text. |\n\nIn the calendar, the keys are `DatePicker`'s: the arrows move by a day or a\nweek, Page Up and Page Down by a month, with Shift by a year, and Home and\nEnd to the start and the end of the week.",
|
|
50504
50534
|
"name": "HelixHeadlessDateInput",
|
|
50505
50535
|
"cssParts": [
|
|
50506
50536
|
{
|
|
@@ -51142,6 +51172,19 @@
|
|
|
51142
51172
|
"words": true
|
|
51143
51173
|
}
|
|
51144
51174
|
},
|
|
51175
|
+
{
|
|
51176
|
+
"kind": "field",
|
|
51177
|
+
"name": "rangeOrderMessage",
|
|
51178
|
+
"type": {
|
|
51179
|
+
"text": "string"
|
|
51180
|
+
},
|
|
51181
|
+
"default": "'Choose an end on or after {start}.'",
|
|
51182
|
+
"description": "The message shown when a range ends before it starts. `{start}` is\nreplaced with the start, written the way the field writes dates.",
|
|
51183
|
+
"attribute": "range-order-message",
|
|
51184
|
+
"helix": {
|
|
51185
|
+
"words": true
|
|
51186
|
+
}
|
|
51187
|
+
},
|
|
51145
51188
|
{
|
|
51146
51189
|
"kind": "field",
|
|
51147
51190
|
"name": "rangeOverflowMessage",
|
|
@@ -54529,6 +54572,15 @@
|
|
|
54529
54572
|
"description": "The message shown when a range holds more than two dates.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nso a form in another language speaks it. Unset is the sentence registered\nfor the page's language, then the English.",
|
|
54530
54573
|
"fieldName": "rangeLengthMessage"
|
|
54531
54574
|
},
|
|
54575
|
+
{
|
|
54576
|
+
"name": "range-order-message",
|
|
54577
|
+
"type": {
|
|
54578
|
+
"text": "string"
|
|
54579
|
+
},
|
|
54580
|
+
"default": "'Choose an end on or after {start}.'",
|
|
54581
|
+
"description": "The message shown when a range ends before it starts. `{start}` is\nreplaced with the start, written the way the field writes dates.",
|
|
54582
|
+
"fieldName": "rangeOrderMessage"
|
|
54583
|
+
},
|
|
54532
54584
|
{
|
|
54533
54585
|
"name": "range-overflow-message",
|
|
54534
54586
|
"type": {
|
|
@@ -55078,7 +55130,7 @@
|
|
|
55078
55130
|
"declarations": [
|
|
55079
55131
|
{
|
|
55080
55132
|
"kind": "class",
|
|
55081
|
-
"description": "A grid of days that follows the APG date grid pattern:\n\n- The grid is one tab stop. Only the focused cell is in the tab sequence.\n- Arrow keys move by day and by week.\n- `PageUp` and `PageDown` move by month.\n- `Home` and `End` move to the start and end of the week.\n\n**Dates are `YYYY-MM-DD` strings, and every calculation is in UTC**, because\na local-time `Date` shifts across a time zone or daylight-saving boundary.\n\n**The months are the ones `calendar` counts**: the Gregorian months for the\nlocale's own calendar where its months are the Gregorian months, as `th-TH`\nwrites 2569 for 2026, and `gregory` where they are not, as for `fa-IR`\nwith no `calendar`. Name a calendar with months of its own, such as\n`persian`, and every view counts its days, months, and years from `Intl`.\n\n`month` sets which month the grid shows, separately from `value`, so paging\nselects nothing and you can control the view. When unset, it follows the\nfirst selected date, then the current month.\n\n`mode` sets how many dates are held. Unset holds one, `range` holds two and\nmarks the dates between them, and `multiple` toggles each date. All three\nread and write the same comma-separated `value`. With a `mode`, the grid\ncarries `aria-multiselectable`. While a range holds one end, the grid draws\nthe range to the day under the pointer or the focus, marking those cells\n`data-range-preview`.\n\nThe chosen date, range, or count of dates is the grid's description, in a\nregion screen readers announce when it changes, as React Aria's calendars\ndo. `selection-label` words it.\n\n`max-view` makes the heading a button that steps back to the months of the\nyear, and with `year` to a page of years, as Zag's date picker does. The\narrows, Home, End and the page keys move there, Enter or a press chooses, and\nEscape goes back to the days.\n\n`isDateUnavailable` and `dayContent` are properties for a script: a rule\nthat bars dates, and what each day shows in place of its number.\n\nThe month heading is a live region, so a screen reader hears the new month\nwhen Previous or Next is pressed. Neither moves past `min` or `max`, and the\nkeys stop at them too. A value outside the bounds, on a barred day, or off\n`step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or\n`stepMismatch`, so a form does not submit it.",
|
|
55133
|
+
"description": "A grid of days that follows the APG date grid pattern:\n\n- The grid is one tab stop. Only the focused cell is in the tab sequence.\n- Arrow keys move by day and by week.\n- `PageUp` and `PageDown` move by month.\n- `Home` and `End` move to the start and end of the week.\n\n**Dates are `YYYY-MM-DD` strings, and every calculation is in UTC**, because\na local-time `Date` shifts across a time zone or daylight-saving boundary.\n\n**The months are the ones `calendar` counts**: the Gregorian months for the\nlocale's own calendar where its months are the Gregorian months, as `th-TH`\nwrites 2569 for 2026, and `gregory` where they are not, as for `fa-IR`\nwith no `calendar`. Name a calendar with months of its own, such as\n`persian`, and every view counts its days, months, and years from `Intl`.\n\n`month` sets which month the grid shows, separately from `value`, so paging\nselects nothing and you can control the view. When unset, it follows the\nfirst selected date, then the current month.\n\n`mode` sets how many dates are held. Unset holds one, `range` holds two and\nmarks the dates between them, and `multiple` toggles each date. All three\nread and write the same comma-separated `value`. With a `mode`, the grid\ncarries `aria-multiselectable`. While a range holds one end, the grid draws\nthe range to the day under the pointer or the focus, marking those cells\n`data-range-preview`.\n\nThe chosen date, range, or count of dates is the grid's description, in a\nregion screen readers announce when it changes, as React Aria's calendars\ndo. `selection-label` words it.\n\n`max-view` makes the heading a button that steps back to the months of the\nyear, and with `year` to a page of years, as Zag's date picker does. The\narrows, Home, End and the page keys move there, Enter or a press chooses, and\nEscape goes back to the days.\n\n`isDateUnavailable` and `dayContent` are properties for a script: a rule\nthat bars dates, and what each day shows in place of its number.\n\nThe month heading is a live region, so a screen reader hears the new month\nwhen Previous or Next is pressed. Neither moves past `min` or `max`, and the\nkeys stop at them too. A value outside the bounds, on a barred day, or off\n`step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or\n`stepMismatch`, so a form does not submit it. A range set from a script\nwhose end is before its start reports `rangeUnderflow` as well.",
|
|
55082
55134
|
"name": "HelixHeadlessDatePicker",
|
|
55083
55135
|
"cssProperties": [
|
|
55084
55136
|
{
|
|
@@ -55516,6 +55568,19 @@
|
|
|
55516
55568
|
"words": true
|
|
55517
55569
|
}
|
|
55518
55570
|
},
|
|
55571
|
+
{
|
|
55572
|
+
"kind": "field",
|
|
55573
|
+
"name": "rangeOrderMessage",
|
|
55574
|
+
"type": {
|
|
55575
|
+
"text": "string"
|
|
55576
|
+
},
|
|
55577
|
+
"default": "'Choose an end on or after {start}.'",
|
|
55578
|
+
"description": "The validation message for a range that ends before it starts. `{start}`\nis replaced with the start, written as a date in `locale`.",
|
|
55579
|
+
"attribute": "range-order-message",
|
|
55580
|
+
"helix": {
|
|
55581
|
+
"words": true
|
|
55582
|
+
}
|
|
55583
|
+
},
|
|
55519
55584
|
{
|
|
55520
55585
|
"kind": "field",
|
|
55521
55586
|
"name": "rangeOverflowMessage",
|
|
@@ -57687,6 +57752,15 @@
|
|
|
57687
57752
|
"description": "Accessible name for the control that moves back a page, in the years.",
|
|
57688
57753
|
"fieldName": "previousYearsLabel"
|
|
57689
57754
|
},
|
|
57755
|
+
{
|
|
57756
|
+
"name": "range-order-message",
|
|
57757
|
+
"type": {
|
|
57758
|
+
"text": "string"
|
|
57759
|
+
},
|
|
57760
|
+
"default": "'Choose an end on or after {start}.'",
|
|
57761
|
+
"description": "The validation message for a range that ends before it starts. `{start}`\nis replaced with the start, written as a date in `locale`.",
|
|
57762
|
+
"fieldName": "rangeOrderMessage"
|
|
57763
|
+
},
|
|
57690
57764
|
{
|
|
57691
57765
|
"name": "range-overflow-message",
|
|
57692
57766
|
"type": {
|
|
@@ -63668,6 +63742,19 @@
|
|
|
63668
63742
|
},
|
|
63669
63743
|
"description": "The caret of a row that opens a page, as the `chevron` slot's fallback, so\nan icon of your own replaces it by being slotted."
|
|
63670
63744
|
},
|
|
63745
|
+
{
|
|
63746
|
+
"kind": "method",
|
|
63747
|
+
"name": "click",
|
|
63748
|
+
"return": {
|
|
63749
|
+
"type": {
|
|
63750
|
+
"text": "void"
|
|
63751
|
+
}
|
|
63752
|
+
},
|
|
63753
|
+
"description": "Presses the row, as `click()` presses a native button: passed to the\ncontrol inside, which is what answers a click, so a script's `click()`\nchooses the row, or follows its link, once.",
|
|
63754
|
+
"type": {
|
|
63755
|
+
"text": "click() => void"
|
|
63756
|
+
}
|
|
63757
|
+
},
|
|
63671
63758
|
{
|
|
63672
63759
|
"kind": "field",
|
|
63673
63760
|
"name": "tier",
|
|
@@ -70884,7 +70971,7 @@
|
|
|
70884
70971
|
"declarations": [
|
|
70885
70972
|
{
|
|
70886
70973
|
"kind": "class",
|
|
70887
|
-
"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, which is the field's one tab stop. The\ntext names the highlighted suggestion as its `aria-activedescendant`, and the\narrow keys reach the tokens.\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. With the panel closed, empties the text. In an empty field, does nothing, so the page hears it. |\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, and a paste is read the same way as soon as it lands.\n`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**The picker has an entry of its own.** `FilterMenu` draws its pages with\n`Menu`, which a field without a picker does not need, so this family's entry\nleaves it out. A page that writes a `FilterMenu` imports both entries:\n\n```js\nimport '@fusion.dev/helix/filter-input'\nimport '@fusion.dev/helix/filter-input/menu'\n```\n\nA picker written without the second is reported once the page has loaded,\nwith the entry to add.\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**Suggestions from a source.** Set `source` to a function, and the field asks\nit for suggestions as the text changes and draws them as options in the\npanel. It is given the term at the caret, the field the term is a value of,\nthe whole text, and an `AbortSignal`, and returns the suggestions or a\npromise of them. `filter-delay` waits for typing to rest before asking, and\na later keystroke aborts a request still out. While a promise is pending, the\npanel shows `loading-text` and a screen reader hears it, then the count.\nChoosing a suggestion writes its value over the term at the caret, and a\nfinished `field:value` is read into a chip as Enter would. Cancel its\n`helix-select` to write it yourself.\n\n```js\nfilter.source = async ({ field, term, signal }) => {\n const response = await fetch(`/values?field=${field}&q=${term}`, { signal })\n return response.json()\n}\n```\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. Set `chips` and the field adds, updates, and removes those\n chips itself, from every `helix-facet` you do not cancel.",
|
|
70974
|
+
"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, which is the field's one tab stop. The\ntext names the highlighted suggestion as its `aria-activedescendant`, and the\narrow keys reach the tokens.\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. With the panel closed, empties the text. In an empty field, does nothing, so the page hears it. |\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, and a paste is read the same way as soon as it lands.\n`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**The picker has an entry of its own.** `FilterMenu` draws its pages with\n`Menu`, which a field without a picker does not need, so this family's entry\nleaves it out. A page that writes a `FilterMenu` imports both entries:\n\n```js\nimport '@fusion.dev/helix/filter-input'\nimport '@fusion.dev/helix/filter-input/menu'\n```\n\nA picker written without the second is reported once the page has loaded,\nwith the entry to add.\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**Suggestions from a source.** Set `source` to a function, and the field asks\nit for suggestions as the text changes and draws them as options in the\npanel. It is given the term at the caret, the field the term is a value of,\nthe whole text, and an `AbortSignal`, and returns the suggestions or a\npromise of them. `filter-delay` waits for typing to rest before asking, and\na later keystroke aborts a request still out. While a promise is pending, the\npanel shows `loading-text` and a screen reader hears it, then the count.\nChoosing a suggestion writes its value over the term at the caret, and a\nfinished `field:value` is read into a chip as Enter would. Cancel its\n`helix-select` to write it yourself.\n\n```js\nfilter.source = async ({ field, term, signal }) => {\n const response = await fetch(`/values?field=${field}&q=${term}`, { signal })\n return response.json()\n}\n```\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. Set `chips` and the field adds, updates, and removes those\n chips itself, from every `helix-facet` you do not cancel.\n\n**The suggestions you write are an import of their own.** A suggestion is an\noption, the Option family's, which the field does not register, so a page\nthat slots one imports it beside the field:\n\n```js\nimport '@fusion.dev/helix/filter-input'\nimport '@fusion.dev/helix/option'\n```\n\nIn development, a field holding an option nobody registered says so once the\npage has loaded, with the line to add. The options `source` gives are drawn\nas this Option too, and need the same import.",
|
|
70888
70975
|
"name": "HelixHeadlessFilterInput",
|
|
70889
70976
|
"cssParts": [
|
|
70890
70977
|
{
|
|
@@ -79127,7 +79214,7 @@
|
|
|
79127
79214
|
"declarations": [
|
|
79128
79215
|
{
|
|
79129
79216
|
"kind": "class",
|
|
79130
|
-
"description": "A grid of cells, each colored by a tone. `rows=\"1\"` makes a status strip, and\n`rows=\"7\"` makes a contribution graph. GitHub's contribution graph uses five\ndiscrete levels, which a set of tones covers.\n\nColor in a heatmap is per cell. In every other Helix chart, color is per\nseries, so ninety differently colored cells would need ninety series.\n\n**The data is a real `<table>` named by `for`**, as in every Helix chart, and\nthe table is the accessible representation. Hide it with\n`data-hidden-visually`, and screen readers still read it.\n\nA cell takes its tone from its own `data-tone`, or from `thresholds` and\n`tones` applied to its value. `data-tone` wins, so when you already know a\nday was degraded, you can set the tone directly.\n\n**The headless tier does not resolve tone names.** A tone named `success`\nwrites `--heatmap-tone: var(--heatmap-tone-success)`, and the styled tier or\nyour own stylesheet defines that property. The headless tier does not use\n`var(--helix-color-*)`.\n\n**The strip is read by key.** It takes focus once it has cells. The up and\ndown arrows move a cell, the left and right arrows move a column, which is a\nweek with `rows=\"7\"`, and Home and End go to the first and the last. The\ntooltip follows, the `live` part says the cell's row in words, and Escape\nputs the tooltip away. PageUp and PageDown move a month, to the same day,\nwhere each row's header carries its date as a `<time datetime>`, and four\ncolumns otherwise, which is four weeks with `rows=\"7\"`.\n\n**The strip describes itself.** The `overview` part says the busiest\nreading and the total of the readings drawn, \"Busiest: 11 Jun, 12; Total\n84\", and the strip is described by it, as every chart is by its summary.\nHide it visually. The `summary` slot is still yours, for words of your own.\n\n**`selection-mode` lets a reader select cells**: `single` one at a time and\n`multiple` any number. Space, Enter or a press selects the cell the keys or\nthe pointer rest on, or lets it go, and under `multiple` Shift with an arrow,\nHome, End, PageUp or PageDown takes in every cell from the last one pressed\nto where the key went. `value` holds the selected days, separated by\ncommas: each by its row's `<time datetime>`, such as `2026-06-11`, or by\nits row's name where the row carries no date. A change asks with\n`helix-before-change` and tells with `change`, and the `selection` part says\nhow many are selected, in `selection-label`.\n\n**Keyboard.** The strip is one tab stop once it has cells.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space |
|
|
79217
|
+
"description": "A grid of cells, each colored by a tone. `rows=\"1\"` makes a status strip, and\n`rows=\"7\"` makes a contribution graph. GitHub's contribution graph uses five\ndiscrete levels, which a set of tones covers.\n\nColor in a heatmap is per cell. In every other Helix chart, color is per\nseries, so ninety differently colored cells would need ninety series.\n\n**The data is a real `<table>` named by `for`**, as in every Helix chart, and\nthe table is the accessible representation. Hide it with\n`data-hidden-visually`, and screen readers still read it.\n\nA cell takes its tone from its own `data-tone`, or from `thresholds` and\n`tones` applied to its value. `data-tone` wins, so when you already know a\nday was degraded, you can set the tone directly.\n\n**The headless tier does not resolve tone names.** A tone named `success`\nwrites `--heatmap-tone: var(--heatmap-tone-success)`, and the styled tier or\nyour own stylesheet defines that property. The headless tier does not use\n`var(--helix-color-*)`.\n\n**The strip is read by key.** It takes focus once it has cells. The up and\ndown arrows move a cell, the left and right arrows move a column, which is a\nweek with `rows=\"7\"`, and Home and End go to the first and the last. The\ntooltip follows, the `live` part says the cell's row in words, and Escape\nputs the tooltip away. PageUp and PageDown move a month, to the same day,\nwhere each row's header carries its date as a `<time datetime>`, and four\ncolumns otherwise, which is four weeks with `rows=\"7\"`.\n\n**The strip describes itself.** The `overview` part says the busiest\nreading and the total of the readings drawn, \"Busiest: 11 Jun, 12; Total\n84\", and the strip is described by it, as every chart is by its summary.\nHide it visually. The `summary` slot is still yours, for words of your own.\n\n**`selection-mode` lets a reader select cells**: `single` one at a time and\n`multiple` any number. Space, Enter or a press selects the cell the keys or\nthe pointer rest on, or lets it go, and under `multiple` Shift with an arrow,\nHome, End, PageUp or PageDown takes in every cell from the last one pressed\nto where the key went. `value` holds the selected days, separated by\ncommas: each by its row's `<time datetime>`, such as `2026-06-11`, or by\nits row's name where the row carries no date. A change asks with\n`helix-before-change` and tells with `change`, and the `selection` part says\nhow many are selected, in `selection-label`.\n\n**Under `selection-mode` the strip is a grid**, so the selection is state a\nreader is told rather than words alone: each column of the strip is a `row`,\na week with `rows=\"7\"`, and each cell a `gridcell` named by its row in the\ntable and carrying `aria-selected`. The strip says\n`aria-multiselectable` under `multiple` and points at the cell the keys rest\non with `aria-activedescendant`, so a screen reader reads that cell, and the\n`live` part stays quiet. Without `selection-mode` nothing is selectable, and\nthe strip is an application with the readout, as every chart's plot is.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, by pointer, tap or key, and\n`helix-reading-press` a reading clicked, tapped, or pressed with Enter or\nSpace, each with the row of the table in `index`.\n\n**Nothing to draw.** A table with no readings shows `empty-text`, \"No\nreadings\", under the strip, and `loading` shows `loading-text` there until\nreadings arrive. The `empty` and `loading` slots take markup in place of\neither, as on every chart.\n\n**Keyboard.** The strip is one tab stop once it has cells.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode=\"multiple\"`. |\n| Escape | Puts the cell's tooltip away. |",
|
|
79131
79218
|
"name": "HelixHeadlessHeatmap",
|
|
79132
79219
|
"cssProperties": [
|
|
79133
79220
|
{
|
|
@@ -79201,7 +79288,7 @@
|
|
|
79201
79288
|
"name": "cell-selected"
|
|
79202
79289
|
},
|
|
79203
79290
|
{
|
|
79204
|
-
"description": "
|
|
79291
|
+
"description": "The words under the strip when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve `for` in.",
|
|
79205
79292
|
"name": "empty"
|
|
79206
79293
|
},
|
|
79207
79294
|
{
|
|
@@ -79216,6 +79303,10 @@
|
|
|
79216
79303
|
"description": "The readout: a polite live region that says the cell the keys moved to. Hide it visually.",
|
|
79217
79304
|
"name": "live"
|
|
79218
79305
|
},
|
|
79306
|
+
{
|
|
79307
|
+
"description": "The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.",
|
|
79308
|
+
"name": "loading"
|
|
79309
|
+
},
|
|
79219
79310
|
{
|
|
79220
79311
|
"description": "The invisible point the tooltip is anchored to.",
|
|
79221
79312
|
"name": "mark"
|
|
@@ -79224,6 +79315,14 @@
|
|
|
79224
79315
|
"description": "The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.",
|
|
79225
79316
|
"name": "overview"
|
|
79226
79317
|
},
|
|
79318
|
+
{
|
|
79319
|
+
"description": "The same element as `strip`, under the name every chart gives the drawing that takes focus.",
|
|
79320
|
+
"name": "plot"
|
|
79321
|
+
},
|
|
79322
|
+
{
|
|
79323
|
+
"description": "A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.",
|
|
79324
|
+
"name": "row"
|
|
79325
|
+
},
|
|
79227
79326
|
{
|
|
79228
79327
|
"description": "A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.",
|
|
79229
79328
|
"name": "selection"
|
|
@@ -79310,10 +79409,18 @@
|
|
|
79310
79409
|
}
|
|
79311
79410
|
],
|
|
79312
79411
|
"slots": [
|
|
79412
|
+
{
|
|
79413
|
+
"description": "Content shown under the strip when the table has no readings, such as a link to add the first. Falls back to `empty-text`.",
|
|
79414
|
+
"name": "empty"
|
|
79415
|
+
},
|
|
79313
79416
|
{
|
|
79314
79417
|
"description": "Below the strip, at the trailing edge: usually the newest date.",
|
|
79315
79418
|
"name": "end"
|
|
79316
79419
|
},
|
|
79420
|
+
{
|
|
79421
|
+
"description": "Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.",
|
|
79422
|
+
"name": "loading"
|
|
79423
|
+
},
|
|
79317
79424
|
{
|
|
79318
79425
|
"description": "Below the strip, at the leading edge: usually the oldest date.",
|
|
79319
79426
|
"name": "start"
|
|
@@ -79351,19 +79458,6 @@
|
|
|
79351
79458
|
"words": true
|
|
79352
79459
|
}
|
|
79353
79460
|
},
|
|
79354
|
-
{
|
|
79355
|
-
"kind": "field",
|
|
79356
|
-
"name": "emptyText",
|
|
79357
|
-
"type": {
|
|
79358
|
-
"text": "string"
|
|
79359
|
-
},
|
|
79360
|
-
"default": "'No readings'",
|
|
79361
|
-
"description": "Shown when the table has no readings in it.\n\nNever shown while the table cannot be read at all, which is a server render\nand the hydrating one after it: see `sourceKnown`.",
|
|
79362
|
-
"attribute": "empty-text",
|
|
79363
|
-
"helix": {
|
|
79364
|
-
"words": true
|
|
79365
|
-
}
|
|
79366
|
-
},
|
|
79367
79461
|
{
|
|
79368
79462
|
"kind": "field",
|
|
79369
79463
|
"name": "gap",
|
|
@@ -79414,7 +79508,7 @@
|
|
|
79414
79508
|
"text": "string"
|
|
79415
79509
|
},
|
|
79416
79510
|
"default": "'selected'",
|
|
79417
|
-
"description": "What the readout
|
|
79511
|
+
"description": "What the readout added for a selected cell, under `selection-mode`.",
|
|
79418
79512
|
"attribute": "selected-label",
|
|
79419
79513
|
"helix": {
|
|
79420
79514
|
"words": true
|
|
@@ -79652,16 +79746,6 @@
|
|
|
79652
79746
|
"description": "Every row in the table, oldest first, as the table is written, with its\nreading where the row has one.\n\n**Not `readings`, which the mixin already has and which means a count.**\nTwo members of the same name meaning a number and an array is the kind of\ncollision that type-checks in one direction and reads wrong in both.\n\n**One cell per row, and a blank row is a cell with no reading.** Taken from\nthe series alone, a blank dropped its day and every day after it moved one\ncell along, while the tooltip still counted rows and named the day beside\nthe one under the pointer.",
|
|
79653
79747
|
"readonly": true
|
|
79654
79748
|
},
|
|
79655
|
-
{
|
|
79656
|
-
"kind": "field",
|
|
79657
|
-
"name": "sourceKnown",
|
|
79658
|
-
"type": {
|
|
79659
|
-
"text": "boolean"
|
|
79660
|
-
},
|
|
79661
|
-
"privacy": "private",
|
|
79662
|
-
"description": "Whether this render can tell a table with no readings from one it has not\nresolved yet.\n\n**Unknown is not empty, which is what an empty state must never say.**\n`for` names an id and resolving an id wants a document, so a server has\nnone and a hydrating render must not look either. Without this the server\ndrew \"No readings\" over a table holding ninety days of them, a crawler read\nthat sentence, and the strip flipped to a full one on hydration: the fault\n`MixinCollection` names for a slotted collection, arriving through the one\nchannel that mixin cannot see.\n\nThe same shape as `childrenKnown`, asked of a tree that can answer about\nids rather than of one that holds children. An id that resolves to nothing\nin a browser is still known, and still empty: a `for` naming no table\nshould say so rather than sit blank, which is why this asks\n`searchableById` and not `elementById`.\n\n`readingsKnown` asks it for every chart, and for `data` too, which a\nserver does not draw.",
|
|
79663
|
-
"readonly": true
|
|
79664
|
-
},
|
|
79665
79749
|
{
|
|
79666
79750
|
"kind": "field",
|
|
79667
79751
|
"name": "rowCount",
|
|
@@ -79776,52 +79860,95 @@
|
|
|
79776
79860
|
},
|
|
79777
79861
|
{
|
|
79778
79862
|
"kind": "method",
|
|
79779
|
-
"name": "
|
|
79780
|
-
"privacy": "
|
|
79863
|
+
"name": "renderRows",
|
|
79864
|
+
"privacy": "private",
|
|
79781
79865
|
"return": {
|
|
79782
79866
|
"type": {
|
|
79783
|
-
"text": "TemplateResult"
|
|
79867
|
+
"text": "TemplateResult[]"
|
|
79784
79868
|
}
|
|
79785
79869
|
},
|
|
79786
79870
|
"parameters": [
|
|
79787
79871
|
{
|
|
79788
79872
|
"name": "cells",
|
|
79789
79873
|
"type": {
|
|
79790
|
-
"text": "
|
|
79874
|
+
"text": "TemplateResult[]"
|
|
79791
79875
|
}
|
|
79792
79876
|
}
|
|
79793
79877
|
],
|
|
79794
|
-
"description": "
|
|
79878
|
+
"description": "The cells as a grid's rows, one for each column of the strip, so a week\nis a row with `rows=\"7\"` and a status strip is one row.\n\n**A column, because that is the order the cells are in.** The strip fills\ndown the column and then across, so a row wrapping a column keeps every\ncell where it was, and `display: contents` keeps the wrapper out of the\nstrip's grid, drawing no box, which is a mechanism and not a look. A row\nacross the strip would have taken cells out of order and moved them."
|
|
79795
79879
|
},
|
|
79796
79880
|
{
|
|
79797
79881
|
"kind": "method",
|
|
79798
|
-
"name": "
|
|
79799
|
-
"privacy": "
|
|
79882
|
+
"name": "renderGridCell",
|
|
79883
|
+
"privacy": "private",
|
|
79800
79884
|
"return": {
|
|
79801
79885
|
"type": {
|
|
79802
|
-
"text": "TemplateResult
|
|
79886
|
+
"text": "TemplateResult"
|
|
79803
79887
|
}
|
|
79804
79888
|
},
|
|
79805
|
-
"
|
|
79889
|
+
"parameters": [
|
|
79890
|
+
{
|
|
79891
|
+
"name": "index",
|
|
79892
|
+
"type": {
|
|
79893
|
+
"text": "number"
|
|
79894
|
+
}
|
|
79895
|
+
},
|
|
79896
|
+
{
|
|
79897
|
+
"name": "active",
|
|
79898
|
+
"type": {
|
|
79899
|
+
"text": "boolean"
|
|
79900
|
+
}
|
|
79901
|
+
},
|
|
79902
|
+
{
|
|
79903
|
+
"name": "picked",
|
|
79904
|
+
"type": {
|
|
79905
|
+
"text": "boolean"
|
|
79906
|
+
}
|
|
79907
|
+
},
|
|
79908
|
+
{
|
|
79909
|
+
"name": "tone",
|
|
79910
|
+
"type": {
|
|
79911
|
+
"text": "string | undefined"
|
|
79912
|
+
}
|
|
79913
|
+
}
|
|
79914
|
+
],
|
|
79915
|
+
"description": "One cell under `selection-mode`: a `gridcell` named by its row in the\ntable, its reading and its place, and saying whether it is selected, which\na reader hears on reaching it as the strip's active descendant."
|
|
79806
79916
|
},
|
|
79807
79917
|
{
|
|
79808
79918
|
"kind": "method",
|
|
79809
|
-
"name": "
|
|
79810
|
-
"privacy": "
|
|
79919
|
+
"name": "renderOverview",
|
|
79920
|
+
"privacy": "protected",
|
|
79811
79921
|
"return": {
|
|
79812
79922
|
"type": {
|
|
79813
|
-
"text": "
|
|
79923
|
+
"text": "TemplateResult"
|
|
79814
79924
|
}
|
|
79815
79925
|
},
|
|
79816
79926
|
"parameters": [
|
|
79817
79927
|
{
|
|
79818
|
-
"name": "
|
|
79928
|
+
"name": "cells",
|
|
79819
79929
|
"type": {
|
|
79820
|
-
"text": "
|
|
79930
|
+
"text": "Reading[]"
|
|
79821
79931
|
}
|
|
79822
79932
|
}
|
|
79823
79933
|
],
|
|
79824
|
-
"description": "
|
|
79934
|
+
"description": "What the strip shows, in a sentence: the busiest reading drawn, as the\ntable writes it, and the total of them all, in `locale`. The strip is\ndescribed by it, so a reader landing on the strip hears what it holds\nbefore walking it."
|
|
79935
|
+
},
|
|
79936
|
+
{
|
|
79937
|
+
"kind": "method",
|
|
79938
|
+
"name": "renderTooltip",
|
|
79939
|
+
"privacy": "protected",
|
|
79940
|
+
"return": {
|
|
79941
|
+
"type": {
|
|
79942
|
+
"text": "TemplateResult | typeof nothing"
|
|
79943
|
+
}
|
|
79944
|
+
},
|
|
79945
|
+
"parameters": [
|
|
79946
|
+
{
|
|
79947
|
+
"name": "grid",
|
|
79948
|
+
"default": "false"
|
|
79949
|
+
}
|
|
79950
|
+
],
|
|
79951
|
+
"description": "The bubble over the cell a pointer is resting on.\n\n**One tooltip that moves, which is what every other chart here does.** Bar\nChart, Line Chart and Donut Chart each render a single anchor against an\ninvisible mark and move the mark, so the count is one however many readings\nthere are, rather than one element per cell. `drawTooltip` is their shared\nmarkup and this is the fourth caller.\n\nWhat it buys over a native `title` is the row rather than the reading.\n`sourceRows` carries every column of the table including the ones nothing\nwas plotted from, so a cell reads \"11 Jun 2026 / Uptime 81.2% / Note Partial\noutage\" where `title` could only ever say the two values this component\nhappens to hold. It is also styleable, appears at once rather than after the\nplatform's second of delay, and cannot be truncated by the window edge.\n\nThe mark is placed in pixels rather than in percent, which is the one thing\nthis does differently from its siblings: they divide a plot into equal\nslots, and a strip's cells are a fixed size with a fixed gap inside a box\nthat is usually wider, so a percentage of the box lands between cells. The\npitch is `cell + gap` and both are measured."
|
|
79825
79952
|
},
|
|
79826
79953
|
{
|
|
79827
79954
|
"kind": "field",
|
|
@@ -79830,12 +79957,97 @@
|
|
|
79830
79957
|
"readonly": true,
|
|
79831
79958
|
"description": "Which drawn cell the pointer is over, or -1.\n\n`pointerover` on the strip rather than a listener per cell: the event\nbubbles, so one handler covers however many cells there are, and unlike\n`mouseover` it is delivered for a pen."
|
|
79832
79959
|
},
|
|
79960
|
+
{
|
|
79961
|
+
"kind": "field",
|
|
79962
|
+
"name": "onPointerUp",
|
|
79963
|
+
"privacy": "private",
|
|
79964
|
+
"readonly": true
|
|
79965
|
+
},
|
|
79833
79966
|
{
|
|
79834
79967
|
"kind": "field",
|
|
79835
79968
|
"name": "onPointerLeave",
|
|
79836
79969
|
"privacy": "private",
|
|
79837
79970
|
"readonly": true
|
|
79838
79971
|
},
|
|
79972
|
+
{
|
|
79973
|
+
"kind": "field",
|
|
79974
|
+
"name": "emptyText",
|
|
79975
|
+
"type": {
|
|
79976
|
+
"text": "string"
|
|
79977
|
+
},
|
|
79978
|
+
"default": "'No readings'",
|
|
79979
|
+
"description": "The words shown in place of the drawing when the table has no readings,\nand the fallback of the `empty` slot.",
|
|
79980
|
+
"attribute": "empty-text",
|
|
79981
|
+
"helix": {
|
|
79982
|
+
"words": true
|
|
79983
|
+
},
|
|
79984
|
+
"inheritedFrom": {
|
|
79985
|
+
"name": "MixinChartStatus",
|
|
79986
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
79987
|
+
}
|
|
79988
|
+
},
|
|
79989
|
+
{
|
|
79990
|
+
"kind": "field",
|
|
79991
|
+
"name": "loading",
|
|
79992
|
+
"type": {
|
|
79993
|
+
"text": "boolean"
|
|
79994
|
+
},
|
|
79995
|
+
"default": "false",
|
|
79996
|
+
"description": "Whether the readings are still on their way. The chart shows\n`loading-text` in place of an empty drawing until it has readings.\n\nReflected, so a stylesheet can treat the chart while it waits. A chart\nthat already has readings keeps drawing them, so a refresh does not\nblank it.",
|
|
79997
|
+
"attribute": "loading",
|
|
79998
|
+
"reflects": true,
|
|
79999
|
+
"inheritedFrom": {
|
|
80000
|
+
"name": "MixinChartStatus",
|
|
80001
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80002
|
+
}
|
|
80003
|
+
},
|
|
80004
|
+
{
|
|
80005
|
+
"kind": "field",
|
|
80006
|
+
"name": "loadingText",
|
|
80007
|
+
"type": {
|
|
80008
|
+
"text": "string"
|
|
80009
|
+
},
|
|
80010
|
+
"default": "'Loading readings'",
|
|
80011
|
+
"description": "The words shown in place of the drawing while `loading` is set and\nthere are no readings yet, and the fallback of the `loading` slot.",
|
|
80012
|
+
"attribute": "loading-text",
|
|
80013
|
+
"helix": {
|
|
80014
|
+
"words": true
|
|
80015
|
+
},
|
|
80016
|
+
"inheritedFrom": {
|
|
80017
|
+
"name": "MixinChartStatus",
|
|
80018
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80019
|
+
}
|
|
80020
|
+
},
|
|
80021
|
+
{
|
|
80022
|
+
"kind": "method",
|
|
80023
|
+
"name": "renderStatus",
|
|
80024
|
+
"privacy": "protected",
|
|
80025
|
+
"return": {
|
|
80026
|
+
"type": {
|
|
80027
|
+
"text": "TemplateResult | typeof nothing"
|
|
80028
|
+
}
|
|
80029
|
+
},
|
|
80030
|
+
"description": "What stands in the plot while there is nothing to draw: the `loading`\nline, the `empty` line, or nothing while the table cannot be read yet.\n\n`dir=\"auto\"`, so words in a right-to-left script read their own way in\na plot that holds itself left to right, as Scatter Chart's does.",
|
|
80031
|
+
"inheritedFrom": {
|
|
80032
|
+
"name": "MixinChartStatus",
|
|
80033
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80034
|
+
}
|
|
80035
|
+
},
|
|
80036
|
+
{
|
|
80037
|
+
"kind": "method",
|
|
80038
|
+
"name": "renderEmpty",
|
|
80039
|
+
"privacy": "protected",
|
|
80040
|
+
"return": {
|
|
80041
|
+
"type": {
|
|
80042
|
+
"text": "TemplateResult"
|
|
80043
|
+
}
|
|
80044
|
+
},
|
|
80045
|
+
"description": "The plot while there is nothing to draw: a group named as the chart is,\nholding `renderStatus`. Not focusable, there being no reading to walk.",
|
|
80046
|
+
"inheritedFrom": {
|
|
80047
|
+
"name": "MixinChartStatus",
|
|
80048
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80049
|
+
}
|
|
80050
|
+
},
|
|
79839
80051
|
{
|
|
79840
80052
|
"kind": "field",
|
|
79841
80053
|
"name": "source",
|
|
@@ -80431,6 +80643,22 @@
|
|
|
80431
80643
|
"name": "helix-before-change",
|
|
80432
80644
|
"reactProp": "onhelix-before-change"
|
|
80433
80645
|
},
|
|
80646
|
+
{
|
|
80647
|
+
"type": {
|
|
80648
|
+
"text": "HelixReadingChangeEvent"
|
|
80649
|
+
},
|
|
80650
|
+
"description": "The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.",
|
|
80651
|
+
"name": "helix-reading-change",
|
|
80652
|
+
"reactProp": "onhelix-reading-change"
|
|
80653
|
+
},
|
|
80654
|
+
{
|
|
80655
|
+
"type": {
|
|
80656
|
+
"text": "HelixReadingPressEvent"
|
|
80657
|
+
},
|
|
80658
|
+
"description": "A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.",
|
|
80659
|
+
"name": "helix-reading-press",
|
|
80660
|
+
"reactProp": "onhelix-reading-press"
|
|
80661
|
+
},
|
|
80434
80662
|
{
|
|
80435
80663
|
"type": {
|
|
80436
80664
|
"text": "HelixResizeEvent"
|
|
@@ -80450,15 +80678,6 @@
|
|
|
80450
80678
|
"description": "The name the `overview` gives the busiest reading, `{busiestLabel}` in\n`overview-label`.",
|
|
80451
80679
|
"fieldName": "busiestLabel"
|
|
80452
80680
|
},
|
|
80453
|
-
{
|
|
80454
|
-
"name": "empty-text",
|
|
80455
|
-
"type": {
|
|
80456
|
-
"text": "string"
|
|
80457
|
-
},
|
|
80458
|
-
"default": "'No readings'",
|
|
80459
|
-
"description": "Shown when the table has no readings in it.\n\nNever shown while the table cannot be read at all, which is a server render\nand the hydrating one after it: see `sourceKnown`.",
|
|
80460
|
-
"fieldName": "emptyText"
|
|
80461
|
-
},
|
|
80462
80681
|
{
|
|
80463
80682
|
"name": "gap",
|
|
80464
80683
|
"type": {
|
|
@@ -80501,7 +80720,7 @@
|
|
|
80501
80720
|
"text": "string"
|
|
80502
80721
|
},
|
|
80503
80722
|
"default": "'selected'",
|
|
80504
|
-
"description": "What the readout
|
|
80723
|
+
"description": "What the readout added for a selected cell, under `selection-mode`.",
|
|
80505
80724
|
"fieldName": "selectedLabel"
|
|
80506
80725
|
},
|
|
80507
80726
|
{
|
|
@@ -80566,6 +80785,45 @@
|
|
|
80566
80785
|
"description": "The selected cells, separated by commas: each by the date its row's\nheader carries in a `<time datetime>`, such as `2026-06-11`, or by the\nheader's words where it carries none.\n\nSet it to start with cells selected. Written by a press or a key under\n`selection-mode`.",
|
|
80567
80786
|
"fieldName": "value"
|
|
80568
80787
|
},
|
|
80788
|
+
{
|
|
80789
|
+
"name": "empty-text",
|
|
80790
|
+
"type": {
|
|
80791
|
+
"text": "string"
|
|
80792
|
+
},
|
|
80793
|
+
"default": "'No readings'",
|
|
80794
|
+
"description": "The words shown in place of the drawing when the table has no readings,\nand the fallback of the `empty` slot.",
|
|
80795
|
+
"fieldName": "emptyText",
|
|
80796
|
+
"inheritedFrom": {
|
|
80797
|
+
"name": "MixinChartStatus",
|
|
80798
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80799
|
+
}
|
|
80800
|
+
},
|
|
80801
|
+
{
|
|
80802
|
+
"name": "loading",
|
|
80803
|
+
"type": {
|
|
80804
|
+
"text": "boolean"
|
|
80805
|
+
},
|
|
80806
|
+
"default": "false",
|
|
80807
|
+
"description": "Whether the readings are still on their way. The chart shows\n`loading-text` in place of an empty drawing until it has readings.\n\nReflected, so a stylesheet can treat the chart while it waits. A chart\nthat already has readings keeps drawing them, so a refresh does not\nblank it.",
|
|
80808
|
+
"fieldName": "loading",
|
|
80809
|
+
"inheritedFrom": {
|
|
80810
|
+
"name": "MixinChartStatus",
|
|
80811
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80812
|
+
}
|
|
80813
|
+
},
|
|
80814
|
+
{
|
|
80815
|
+
"name": "loading-text",
|
|
80816
|
+
"type": {
|
|
80817
|
+
"text": "string"
|
|
80818
|
+
},
|
|
80819
|
+
"default": "'Loading readings'",
|
|
80820
|
+
"description": "The words shown in place of the drawing while `loading` is set and\nthere are no readings yet, and the fallback of the `loading` slot.",
|
|
80821
|
+
"fieldName": "loadingText",
|
|
80822
|
+
"inheritedFrom": {
|
|
80823
|
+
"name": "MixinChartStatus",
|
|
80824
|
+
"module": "src/mixins/mixin-chart-status/mixin-chart-status.ts"
|
|
80825
|
+
}
|
|
80826
|
+
},
|
|
80569
80827
|
{
|
|
80570
80828
|
"name": "for",
|
|
80571
80829
|
"type": {
|
|
@@ -80628,6 +80886,10 @@
|
|
|
80628
80886
|
"description": "While the `empty` part stands in place of the cells.",
|
|
80629
80887
|
"name": "empty"
|
|
80630
80888
|
},
|
|
80889
|
+
{
|
|
80890
|
+
"description": "While the `loading` part stands in place of the cells.",
|
|
80891
|
+
"name": "loading"
|
|
80892
|
+
},
|
|
80631
80893
|
{
|
|
80632
80894
|
"description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
|
|
80633
80895
|
"name": "settled",
|
|
@@ -80638,6 +80900,10 @@
|
|
|
80638
80900
|
}
|
|
80639
80901
|
],
|
|
80640
80902
|
"mixins": [
|
|
80903
|
+
{
|
|
80904
|
+
"name": "MixinChartStatus",
|
|
80905
|
+
"package": "@fusion.dev/helix-core"
|
|
80906
|
+
},
|
|
80641
80907
|
{
|
|
80642
80908
|
"name": "MixinChartSource",
|
|
80643
80909
|
"package": "@fusion.dev/helix-core"
|
|
@@ -81067,6 +81333,23 @@
|
|
|
81067
81333
|
"module": "src/button/root/button-root.ts"
|
|
81068
81334
|
}
|
|
81069
81335
|
},
|
|
81336
|
+
{
|
|
81337
|
+
"kind": "method",
|
|
81338
|
+
"name": "click",
|
|
81339
|
+
"return": {
|
|
81340
|
+
"type": {
|
|
81341
|
+
"text": "void"
|
|
81342
|
+
}
|
|
81343
|
+
},
|
|
81344
|
+
"description": "Presses the button, as `click()` presses a native one: the command is sent,\nthe form submits or resets, and `helix-press` says `virtual`.\n\n**Passed to the inner control, because a click on the host reaches nothing\nthat acts.** The control in the shadow root is what answers a click, so\n`click()` from a script, an automation or a test, dispatched on the host,\nsubmitted nothing and sent no `helix-press`. The control's own click reaches\nthe host's listeners once, retargeted, as one from a native button does. A\ndisabled button does nothing, and a pending one refuses the press.",
|
|
81345
|
+
"type": {
|
|
81346
|
+
"text": "click() => void"
|
|
81347
|
+
},
|
|
81348
|
+
"inheritedFrom": {
|
|
81349
|
+
"name": "HelixHeadlessButton",
|
|
81350
|
+
"module": "src/button/root/button-root.ts"
|
|
81351
|
+
}
|
|
81352
|
+
},
|
|
81070
81353
|
{
|
|
81071
81354
|
"kind": "method",
|
|
81072
81355
|
"name": "act",
|
|
@@ -96215,7 +96498,7 @@
|
|
|
96215
96498
|
"declarations": [
|
|
96216
96499
|
{
|
|
96217
96500
|
"kind": "class",
|
|
96218
|
-
"description": "The listbox is the control, and options are its items. A Select is a listbox\nwith a trigger in front of it, a Combobox is a listbox with a text input, and\na command palette is a listbox in a dialog. They differ only in what opens\nthe list and what filters it.\n\nWith `multiple` set, `value` is a comma-separated string, like\n`Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form\nreceives one entry per selected option, as a native `<select multiple>` sends\nit, so your server does not split on commas. An option's value may hold a\ncomma: a run of the string that is an option's value is read as that one\nvalue, and the form sends it as one entry.\n\nSelected and active are separate. The selected option is the value. The\nactive option is where the keyboard is: the arrow keys move it, and\n`aria-activedescendant` points to it while focus stays on the list.\n\n**Keyboard.** The list is one tab stop, or its filter field is where there\nis one. In a single-choice list the highlight is the choice unless `manual`\nis set; then Enter, Space or a click chooses.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With `layout=\"grid\"`, to the option below or above, stopping at the edge. |\n| Right, Left | With `layout=\"grid\"`, moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. |\n| Home, End | Moves to the first or the last option. In a filter field, moves the caret. |\n| Page Down, Page Up | Moves by as many options as the list shows at once. |\n| A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. |\n| Enter | Chooses the highlighted option, or follows it where it is a link. |\n| Space | Chooses the highlighted option, or with `multiple` toggles it. In a filter field, types a space. |\n| Shift with Down or Up | With `multiple`, adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. |\n| Shift with Space | With `multiple`, adds every option from the one last chosen to the highlighted one. In a filter field, types a space. |\n| Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |\n| Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |\n| Escape | In a filter field, clears the filter. |\n| Alt with Up or Down | In a `reorderable` list, moves the highlighted option a place. Alt with Home or End moves it to either end. |\n\n**ARIA.** The `items` part is the `listbox`, named by the label and\ndescribed by the hint and the message, with `aria-multiselectable` under\n`multiple`, `aria-required`, `aria-invalid`, and `aria-busy` while loading.\nEach option is an `option` with `aria-selected`. The list, or its filter\nfield, points `aria-activedescendant` at the highlighted option; the field\nis `aria-autocomplete=\"list\"` and controls the list.\n\nAn option with `href` is a link: Enter or a press follows it and selects\nnothing, and moving onto it with the arrows does not follow it.\n\nAs a filter narrows the list, a screen reader hears how many options are\nleft, such as \"3 results\", from `result-label` and `results-label`. A filter\nthat leaves none says `empty-text`.\n\n**Moving options** is a separate import, `@fusion.dev/helix/listbox/reorder`,\nso a list that never moves options carries none of its code. With it\nimported, `reorderable` lets a reader move options:\n\n- Alt with Up or Down moves the highlighted option a place, and Alt with\n Home or End moves it to either end, as the APG's rearrangeable listbox\n does. The highlight stays on it.\n- A pointer drags an option, with a drop indicator, and the list scrolls near\n an edge. A press that does not travel still chooses the option.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n `helix-reorder`, whose `keys` hold every value in the new order. **You\n move the options**, or set `items` in the new order: the list moves no\n element of yours.\n- The list says each move in its `live` region. The words are the\n `moved-label`, `canceled-label`, `dropped-label`, and `picked-up-label`\n attributes, which the import reads.\n- An option in a group moves within its group. Options do not move while a\n filter narrows the list, under `layout=\"grid\"`, or while the list is\n disabled.",
|
|
96501
|
+
"description": "The listbox is the control, and options are its items. A Select is a listbox\nwith a trigger in front of it, a Combobox is a listbox with a text input, and\na command palette is a listbox in a dialog. They differ only in what opens\nthe list and what filters it.\n\nWith `multiple` set, `value` is a comma-separated string, like\n`Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form\nreceives one entry per selected option, as a native `<select multiple>` sends\nit, so your server does not split on commas. An option's value may hold a\ncomma: a run of the string that is an option's value is read as that one\nvalue, and the form sends it as one entry.\n\nSelected and active are separate. The selected option is the value. The\nactive option is where the keyboard is: the arrow keys move it, and\n`aria-activedescendant` points to it while focus stays on the list.\n\n**Keyboard.** The list is one tab stop, or its filter field is where there\nis one. In a single-choice list the highlight is the choice unless `manual`\nis set; then Enter, Space or a click chooses.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With `layout=\"grid\"`, to the option below or above, stopping at the edge. |\n| Right, Left | With `layout=\"grid\"`, moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. |\n| Home, End | Moves to the first or the last option. In a filter field, moves the caret. |\n| Page Down, Page Up | Moves by as many options as the list shows at once. |\n| A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. |\n| Enter | Chooses the highlighted option, or follows it where it is a link. |\n| Space | Chooses the highlighted option, or with `multiple` toggles it. In a filter field, types a space. |\n| Shift with Down or Up | With `multiple`, adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. |\n| Shift with Space | With `multiple`, adds every option from the one last chosen to the highlighted one. In a filter field, types a space. |\n| Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |\n| Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |\n| Escape | In a filter field, clears the filter. |\n| Alt with Up or Down | In a `reorderable` list, moves the highlighted option a place. Alt with Home or End moves it to either end. |\n\n**ARIA.** The `items` part is the `listbox`, named by the label and\ndescribed by the hint and the message, with `aria-multiselectable` under\n`multiple`, `aria-required`, `aria-invalid`, and `aria-busy` while loading.\nEach option is an `option` with `aria-selected`. The list, or its filter\nfield, points `aria-activedescendant` at the highlighted option; the field\nis `aria-autocomplete=\"list\"` and controls the list.\n\nAn option with `href` is a link: Enter or a press follows it and selects\nnothing, and moving onto it with the arrows does not follow it.\n\nAs a filter narrows the list, a screen reader hears how many options are\nleft, such as \"3 results\", from `result-label` and `results-label`. A filter\nthat leaves none says `empty-text`.\n\n**Moving options** is a separate import, `@fusion.dev/helix/listbox/reorder`,\nso a list that never moves options carries none of its code. With it\nimported, `reorderable` lets a reader move options:\n\n- Alt with Up or Down moves the highlighted option a place, and Alt with\n Home or End moves it to either end, as the APG's rearrangeable listbox\n does. The highlight stays on it.\n- A pointer drags an option, with a drop indicator, and the list scrolls near\n an edge. A press that does not travel still chooses the option.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n `helix-reorder`, whose `keys` hold every value in the new order. **You\n move the options**, or set `items` in the new order: the list moves no\n element of yours.\n- The list says each move in its `live` region. The words are the\n `moved-label`, `canceled-label`, `dropped-label`, and `picked-up-label`\n attributes, which the import reads.\n- An option in a group moves within its group. Options do not move while a\n filter narrows the list, under `layout=\"grid\"`, or while the list is\n disabled.\n\n**The options are an import of their own.** An option you write is the Option\nfamily's, which the list does not register, so a page that writes one imports\nit beside the list:\n\n```js\nimport '@fusion.dev/helix/listbox'\nimport '@fusion.dev/helix/option'\n```\n\nIn development, a list holding an option nobody registered says so once the\npage has loaded, with the line to add. The options `items` draws are this\nOption too, and need the same import.",
|
|
96219
96502
|
"name": "HelixHeadlessListbox",
|
|
96220
96503
|
"cssParts": [
|
|
96221
96504
|
{
|
|
@@ -96432,7 +96715,7 @@
|
|
|
96432
96715
|
"text": "readonly DataOptionItem[] | undefined"
|
|
96433
96716
|
},
|
|
96434
96717
|
"default": "undefined",
|
|
96435
|
-
"description": "The options as data, for a list too long to draw whole: each a value,\nwhich is also its words, or a record with a `value`, a `label` and\n`disabled`. Set, the list draws only the options in sight, and the ones\nyou write as children are not read.\n\n**Every option is still reachable.** The keyboard, the typeahead, the\nfilter and the value work over the whole set, and the option the keyboard\nis on is drawn wherever it is, so a screen reader is told about it. Each\ndrawn option says its place in the set (`aria-posinset`, `aria-setsize`).\nReact Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's\n`VirtualizeController`.\n\n**The list needs a height to scroll in**: the styled tier's\n`--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the\nheadless tier.
|
|
96718
|
+
"description": "The options as data, for a list too long to draw whole: each a value,\nwhich is also its words, or a record with a `value`, a `label` and\n`disabled`. Set, the list draws only the options in sight, and the ones\nyou write as children are not read.\n\n**Every option is still reachable.** The keyboard, the typeahead, the\nfilter and the value work over the whole set, and the option the keyboard\nis on is drawn wherever it is, so a screen reader is told about it. Each\ndrawn option says its place in the set (`aria-posinset`, `aria-setsize`).\nReact Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's\n`VirtualizeController`.\n\n**The list needs a height to scroll in**: the styled tier's\n`--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the\nheadless tier. The options drawn are this tier's Option, which the page\nimports, as it imports the options it writes.\nA server sends the list empty, and the options are drawn once it hydrates."
|
|
96436
96719
|
},
|
|
96437
96720
|
{
|
|
96438
96721
|
"kind": "field",
|
|
@@ -110801,6 +111084,19 @@
|
|
|
110801
111084
|
"description": "Whether the row says what it is from its host, for a field's `aria-activedescendant`.",
|
|
110802
111085
|
"readonly": true
|
|
110803
111086
|
},
|
|
111087
|
+
{
|
|
111088
|
+
"kind": "method",
|
|
111089
|
+
"name": "click",
|
|
111090
|
+
"return": {
|
|
111091
|
+
"type": {
|
|
111092
|
+
"text": "void"
|
|
111093
|
+
}
|
|
111094
|
+
},
|
|
111095
|
+
"description": "Presses the row, as `click()` presses a native button: passed to the\ncontrol inside, which is what answers a click, so a script's `click()`\nchooses the row, or follows its link, once.",
|
|
111096
|
+
"type": {
|
|
111097
|
+
"text": "click() => void"
|
|
111098
|
+
}
|
|
111099
|
+
},
|
|
110804
111100
|
{
|
|
110805
111101
|
"kind": "field",
|
|
110806
111102
|
"name": "tier",
|
|
@@ -116474,6 +116770,23 @@
|
|
|
116474
116770
|
"description": "Whether the notification starts as read, used until `read` is set.",
|
|
116475
116771
|
"attribute": "default-read"
|
|
116476
116772
|
},
|
|
116773
|
+
{
|
|
116774
|
+
"kind": "field",
|
|
116775
|
+
"name": "dismissLabel",
|
|
116776
|
+
"type": {
|
|
116777
|
+
"text": "string"
|
|
116778
|
+
},
|
|
116779
|
+
"default": "'Dismiss {label}'",
|
|
116780
|
+
"description": "The dismiss control's name, read by screen readers, with `{label}` for the\nrow's own words.\n\nOne sentence with the words in it, so a translation puts them where its\nlanguage does: `registerWords('de', { 'helix-notification': { dismissLabel:\n'{label} schließen' } })`.",
|
|
116781
|
+
"attribute": "dismiss-label",
|
|
116782
|
+
"helix": {
|
|
116783
|
+
"words": true
|
|
116784
|
+
},
|
|
116785
|
+
"inheritedFrom": {
|
|
116786
|
+
"name": "MixinDismissible",
|
|
116787
|
+
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
116788
|
+
}
|
|
116789
|
+
},
|
|
116477
116790
|
{
|
|
116478
116791
|
"kind": "field",
|
|
116479
116792
|
"name": "locale",
|
|
@@ -116493,19 +116806,6 @@
|
|
|
116493
116806
|
"description": "Whether the notification has been read.\n\nSet it and this element defers: a reader's click fires `helix-read` and\nchanges nothing until a new value arrives. `default-read` seeds a state\nthis element then owns.\n\n**Not reflected.** Unread is a visual state, which is why the four mixins\nmirror theirs, but the mirror may not be the property's own attribute:\n`<helix-headless-notification default-read>` comes back from a server\nwithout `read` and would gain it on the first update, which React reports\nas a hydration mismatch, and which a copy of the serialized element\nre-parses as a declaration. `:state(read)` is what the stylesheet reads.\n`hydration.dom.spec.ts` holds it.",
|
|
116494
116807
|
"attribute": "read"
|
|
116495
116808
|
},
|
|
116496
|
-
{
|
|
116497
|
-
"kind": "field",
|
|
116498
|
-
"name": "unreadLabel",
|
|
116499
|
-
"type": {
|
|
116500
|
-
"text": "string"
|
|
116501
|
-
},
|
|
116502
|
-
"default": "'Unread'",
|
|
116503
|
-
"description": "What a screen reader hears before an unread notification's text.\n\nThe unread mark is drawn, so a reader who cannot see it hears this word in\nits place. Translate it with the rest of your interface.",
|
|
116504
|
-
"attribute": "unread-label",
|
|
116505
|
-
"helix": {
|
|
116506
|
-
"words": true
|
|
116507
|
-
}
|
|
116508
|
-
},
|
|
116509
116809
|
{
|
|
116510
116810
|
"kind": "field",
|
|
116511
116811
|
"name": "readState",
|
|
@@ -116578,6 +116878,29 @@
|
|
|
116578
116878
|
},
|
|
116579
116879
|
"description": "When it happened, delegated whole.\n\nThe tag is interpolated rather than written, so each tier renders its own:\nthe base tier may not name a styled element, and a styled item inherits this\ntemplate without having a tag of its own to remind anybody.\n\n`exportparts` and no `part` of its own, which is the rule about a part\nalready named for its role: the child publishes `time`, the role here is\n`time`, and naming both would leave `::part(time)` matching two elements.\nWhat a consumer wants to reach is the `<time>`, so that is what the name\nreaches. Format Date's field parts go on under `time-`, as every composed\nchild's do, though an elapsed time draws no fields."
|
|
116580
116880
|
},
|
|
116881
|
+
{
|
|
116882
|
+
"kind": "field",
|
|
116883
|
+
"name": "unreadLabel",
|
|
116884
|
+
"type": {
|
|
116885
|
+
"text": "string"
|
|
116886
|
+
},
|
|
116887
|
+
"default": "'Unread'",
|
|
116888
|
+
"description": "What a screen reader hears before an unread notification's text.\n\nThe unread mark is drawn, so a reader who cannot see it hears this word in\nits place. Translate it with the rest of your interface.",
|
|
116889
|
+
"attribute": "unread-label",
|
|
116890
|
+
"helix": {
|
|
116891
|
+
"words": true
|
|
116892
|
+
}
|
|
116893
|
+
},
|
|
116894
|
+
{
|
|
116895
|
+
"kind": "field",
|
|
116896
|
+
"name": "dismissName",
|
|
116897
|
+
"type": {
|
|
116898
|
+
"text": "string"
|
|
116899
|
+
},
|
|
116900
|
+
"privacy": "private",
|
|
116901
|
+
"description": "The dismiss control's name: `dismissLabel` with the row's words.\n\n**Named for its row**, because a feed of rows each with a control named\nDismiss is a list of buttons that says nothing about which notice each one\nends. The words are the default slot's, the ones `helix-dismiss` reports,\nso a row's actions are not read into it. A page's own `dismiss-label` with\nno `{label}` is followed by them, unless it holds them already, as `Tag`\nnames its remove button. Read from the children, so the verb alone on a\nserver, until the update after.",
|
|
116902
|
+
"readonly": true
|
|
116903
|
+
},
|
|
116581
116904
|
{
|
|
116582
116905
|
"kind": "field",
|
|
116583
116906
|
"name": "handleActions",
|
|
@@ -116599,7 +116922,7 @@
|
|
|
116599
116922
|
"text": "HTMLElement | null"
|
|
116600
116923
|
}
|
|
116601
116924
|
},
|
|
116602
|
-
"description": "Where focus goes when this row leaves: the next row
|
|
116925
|
+
"description": "Where focus goes when this row leaves: the next row, the one before, then\nthe first control left in the feed.\n\n**The row itself, and not a control in it**, because the row is what a\nreader moves through the feed by, and every row takes focus. Sent to the\nnext dismiss control, focus passed over each row with no controls between,\nand to Load more where no row after had one. Focused, the row becomes the\nfeed's stop, as one reached with the arrows does."
|
|
116603
116926
|
},
|
|
116604
116927
|
{
|
|
116605
116928
|
"kind": "field",
|
|
@@ -116616,23 +116939,6 @@
|
|
|
116616
116939
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
116617
116940
|
}
|
|
116618
116941
|
},
|
|
116619
|
-
{
|
|
116620
|
-
"kind": "field",
|
|
116621
|
-
"name": "dismissLabel",
|
|
116622
|
-
"type": {
|
|
116623
|
-
"text": "string"
|
|
116624
|
-
},
|
|
116625
|
-
"default": "'Dismiss'",
|
|
116626
|
-
"description": "The dismiss control's label, read by screen readers.\n\n`attribute` is spelled out because Lit lowercases a property name to\nderive one rather than dash-casing it, so this would otherwise be\nreachable only as `dismisslabel`, which nobody would guess and no linter\nwould catch.\n\nA word property: register it for a locale under the host's key. A family\nthat names the control otherwise, such as Tag's `Remove {label}`,\ndeclares its own English with `@words` above the override.",
|
|
116627
|
-
"attribute": "dismiss-label",
|
|
116628
|
-
"helix": {
|
|
116629
|
-
"words": true
|
|
116630
|
-
},
|
|
116631
|
-
"inheritedFrom": {
|
|
116632
|
-
"name": "MixinDismissible",
|
|
116633
|
-
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
116634
|
-
}
|
|
116635
|
-
},
|
|
116636
116942
|
{
|
|
116637
116943
|
"kind": "method",
|
|
116638
116944
|
"name": "dismissEvent",
|
|
@@ -117173,6 +117479,19 @@
|
|
|
117173
117479
|
"description": "Whether the notification starts as read, used until `read` is set.",
|
|
117174
117480
|
"fieldName": "defaultRead"
|
|
117175
117481
|
},
|
|
117482
|
+
{
|
|
117483
|
+
"name": "dismiss-label",
|
|
117484
|
+
"type": {
|
|
117485
|
+
"text": "string"
|
|
117486
|
+
},
|
|
117487
|
+
"default": "'Dismiss {label}'",
|
|
117488
|
+
"description": "The dismiss control's name, read by screen readers, with `{label}` for the\nrow's own words.\n\nOne sentence with the words in it, so a translation puts them where its\nlanguage does: `registerWords('de', { 'helix-notification': { dismissLabel:\n'{label} schließen' } })`.",
|
|
117489
|
+
"fieldName": "dismissLabel",
|
|
117490
|
+
"inheritedFrom": {
|
|
117491
|
+
"name": "MixinDismissible",
|
|
117492
|
+
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
117493
|
+
}
|
|
117494
|
+
},
|
|
117176
117495
|
{
|
|
117177
117496
|
"name": "locale",
|
|
117178
117497
|
"type": {
|
|
@@ -117211,19 +117530,6 @@
|
|
|
117211
117530
|
"name": "MixinDismissible",
|
|
117212
117531
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
117213
117532
|
}
|
|
117214
|
-
},
|
|
117215
|
-
{
|
|
117216
|
-
"name": "dismiss-label",
|
|
117217
|
-
"type": {
|
|
117218
|
-
"text": "string"
|
|
117219
|
-
},
|
|
117220
|
-
"default": "'Dismiss'",
|
|
117221
|
-
"description": "The dismiss control's label, read by screen readers.\n\n`attribute` is spelled out because Lit lowercases a property name to\nderive one rather than dash-casing it, so this would otherwise be\nreachable only as `dismisslabel`, which nobody would guess and no linter\nwould catch.\n\nA word property: register it for a locale under the host's key. A family\nthat names the control otherwise, such as Tag's `Remove {label}`,\ndeclares its own English with `@words` above the override.",
|
|
117222
|
-
"fieldName": "dismissLabel",
|
|
117223
|
-
"inheritedFrom": {
|
|
117224
|
-
"name": "MixinDismissible",
|
|
117225
|
-
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
117226
|
-
}
|
|
117227
117533
|
}
|
|
117228
117534
|
],
|
|
117229
117535
|
"cssStates": [
|
|
@@ -123277,6 +123583,66 @@
|
|
|
123277
123583
|
}
|
|
123278
123584
|
]
|
|
123279
123585
|
},
|
|
123586
|
+
{
|
|
123587
|
+
"kind": "javascript-module",
|
|
123588
|
+
"path": "src/option/among.ts",
|
|
123589
|
+
"declarations": [
|
|
123590
|
+
{
|
|
123591
|
+
"kind": "function",
|
|
123592
|
+
"name": "isOption",
|
|
123593
|
+
"return": {
|
|
123594
|
+
"type": {
|
|
123595
|
+
"text": "element is HelixHeadlessOption"
|
|
123596
|
+
}
|
|
123597
|
+
},
|
|
123598
|
+
"parameters": [
|
|
123599
|
+
{
|
|
123600
|
+
"name": "element",
|
|
123601
|
+
"type": {
|
|
123602
|
+
"text": "Element"
|
|
123603
|
+
}
|
|
123604
|
+
}
|
|
123605
|
+
],
|
|
123606
|
+
"description": "Whether an element is an option, by its shape.\n\n**Not by `instanceof`.** A tag is defined once, by whichever copy of this\nclass registered it first, and a second copy in the same document tests\nagainst a class no element on the page has: every option failed it, and a\nselect said \"Choose\" over its value. Two copies are a consumer with a\nduplicated dependency, or the browser specs, where each family's bundle\ncarries its own and they share one page. An option nobody registered has no\nsuch shape, and is no option until its entry is imported."
|
|
123607
|
+
},
|
|
123608
|
+
{
|
|
123609
|
+
"kind": "function",
|
|
123610
|
+
"name": "optionsAmong",
|
|
123611
|
+
"return": {
|
|
123612
|
+
"type": {
|
|
123613
|
+
"text": "HelixHeadlessOption[]"
|
|
123614
|
+
}
|
|
123615
|
+
},
|
|
123616
|
+
"parameters": [
|
|
123617
|
+
{
|
|
123618
|
+
"name": "elements",
|
|
123619
|
+
"type": {
|
|
123620
|
+
"text": "readonly Element[]"
|
|
123621
|
+
}
|
|
123622
|
+
}
|
|
123623
|
+
],
|
|
123624
|
+
"description": "The options among some elements, reaching one level into a group.\n\nWhat a control holding options reads its words from, off its own children\nrather than off the listbox they are slotted into: the slot exists only once a\nrender has made it, so the listbox has none on a first render, and on a page a\nserver rendered the `slotchange` that would correct it fires before anything\nlistens."
|
|
123625
|
+
}
|
|
123626
|
+
],
|
|
123627
|
+
"exports": [
|
|
123628
|
+
{
|
|
123629
|
+
"kind": "js",
|
|
123630
|
+
"name": "isOption",
|
|
123631
|
+
"declaration": {
|
|
123632
|
+
"name": "isOption",
|
|
123633
|
+
"module": "src/option/among.ts"
|
|
123634
|
+
}
|
|
123635
|
+
},
|
|
123636
|
+
{
|
|
123637
|
+
"kind": "js",
|
|
123638
|
+
"name": "optionsAmong",
|
|
123639
|
+
"declaration": {
|
|
123640
|
+
"name": "optionsAmong",
|
|
123641
|
+
"module": "src/option/among.ts"
|
|
123642
|
+
}
|
|
123643
|
+
}
|
|
123644
|
+
]
|
|
123645
|
+
},
|
|
123280
123646
|
{
|
|
123281
123647
|
"kind": "javascript-module",
|
|
123282
123648
|
"path": "src/option/group/option-group.ts",
|
|
@@ -123780,24 +124146,6 @@
|
|
|
123780
124146
|
"kind": "javascript-module",
|
|
123781
124147
|
"path": "src/option/root/option-root.ts",
|
|
123782
124148
|
"declarations": [
|
|
123783
|
-
{
|
|
123784
|
-
"kind": "function",
|
|
123785
|
-
"name": "optionsAmong",
|
|
123786
|
-
"return": {
|
|
123787
|
-
"type": {
|
|
123788
|
-
"text": "HelixHeadlessOption[]"
|
|
123789
|
-
}
|
|
123790
|
-
},
|
|
123791
|
-
"parameters": [
|
|
123792
|
-
{
|
|
123793
|
-
"name": "elements",
|
|
123794
|
-
"type": {
|
|
123795
|
-
"text": "readonly Element[]"
|
|
123796
|
-
}
|
|
123797
|
-
}
|
|
123798
|
-
],
|
|
123799
|
-
"description": "The options among some elements, reaching one level into a group.\n\nWhat a control holding options reads its words from, off its own children\nrather than off the listbox they are slotted into: the slot exists only once a\nrender has made it, so the listbox has none on a first render, and on a page a\nserver rendered the `slotchange` that would correct it fires before anything\nlistens.\n\n**An option by its shape, not by `instanceof`.** A tag is defined once, by\nwhichever copy of this class registered it first, and a second copy in the\nsame document tests against a class no element on the page has: every option\nfailed it, and a select said \"Choose\" over its value. Two copies are a\nconsumer with a duplicated dependency, or the browser specs, where each\nfamily's bundle carries its own and they share one page."
|
|
123800
|
-
},
|
|
123801
124149
|
{
|
|
123802
124150
|
"kind": "class",
|
|
123803
124151
|
"description": "Options are their own family, separate from Select, because an option belongs\nto a listbox and several controls contain one. `role=\"option\"` requires an\nowning `role=\"listbox\"`. A Select is a listbox with a trigger, a Combobox is\na listbox with a text input, and a command palette is a listbox in a dialog.\n`Radio` is a part of its group, because a radio has only one kind of owner.\n\nSelection works the way it does for a radio. Choosing an option dispatches an\nevent, the listbox decides whether the choice stands, and the listbox sets\n`selected`.\n\nFiltering belongs to the owner, which hides an option with `hidden`. What\ncounts as a match differs between a select and a command palette.\n\nAn option with `href` is a link: choosing it follows the link and selects\nnothing, as an entry in a command palette that goes to a page does.\n\nThe option's name is its label alone, as React Aria's `slot=\"label\"` makes\nit: what is in `start` and `end`, an avatar's initials or a shortcut, is\ndrawn and not read as part of the name. The description is read as the\noption's description. A name you give with `aria-label` or\n`aria-labelledby` wins over both.",
|
|
@@ -124608,12 +124956,20 @@
|
|
|
124608
124956
|
}
|
|
124609
124957
|
],
|
|
124610
124958
|
"exports": [
|
|
124959
|
+
{
|
|
124960
|
+
"kind": "js",
|
|
124961
|
+
"name": "isOption",
|
|
124962
|
+
"declaration": {
|
|
124963
|
+
"name": "isOption",
|
|
124964
|
+
"module": "../among.js"
|
|
124965
|
+
}
|
|
124966
|
+
},
|
|
124611
124967
|
{
|
|
124612
124968
|
"kind": "js",
|
|
124613
124969
|
"name": "optionsAmong",
|
|
124614
124970
|
"declaration": {
|
|
124615
124971
|
"name": "optionsAmong",
|
|
124616
|
-
"module": "
|
|
124972
|
+
"module": "../among.js"
|
|
124617
124973
|
}
|
|
124618
124974
|
},
|
|
124619
124975
|
{
|
|
@@ -139850,7 +140206,7 @@
|
|
|
139850
140206
|
"declarations": [
|
|
139851
140207
|
{
|
|
139852
140208
|
"kind": "class",
|
|
139853
|
-
"description": "A scatter chart shows how two measures relate. The table's first numeric\ncolumn is measured across, every other numeric column is measured up, and\neach row is one point. A table of countries with an income column and a life\nexpectancy column draws one point for each country. Each additional numeric\ncolumn is another series, in its own color.\n\nBoth axes are labeled, because both positions are values. The ticks sit at\nround numbers, and the range extends to them.\n\n`trend` draws each series' line of best fit, by least squares, across the\nplot in the series' color.\n\n**`size-by` names a third measure, drawn as each point's size**, as a bubble\nchart does: `size-by=\"Population\"` takes that column out of the series and\ngives each point an area in proportion to its row's number there. The\ntooltip and the table still say the number.\n\nThe summary gives each series' correlation coefficient and its number of\npoints. The table has every number, and the drawing is hidden from screen\nreaders.\n\n**The plot is read by key.** It takes focus, named by `label` or the caption.\nThe left and right arrows move from point to point, left to right across\nthe plot, Home and End go to the first and the last, and the up and down\narrows move among the series of a row. The tooltip sits on that point, the\n`live` part says the row in words, and Escape puts the tooltip away.\n\nEach point is a `<span>` placed by percentage over the drawing, as\n`LineChart` places its end points, so points stay round when the drawing\nstretches.\n\nThe plot runs left to right in every text direction, as a number line does.\nThe plot, its axes, and the axis names sit in a `plane` part with\n`dir=\"ltr\"
|
|
140209
|
+
"description": "A scatter chart shows how two measures relate. The table's first numeric\ncolumn is measured across, every other numeric column is measured up, and\neach row is one point. A table of countries with an income column and a life\nexpectancy column draws one point for each country. Each additional numeric\ncolumn is another series, in its own color.\n\nBoth axes are labeled, because both positions are values. The ticks sit at\nround numbers, and the range extends to them.\n\n`trend` draws each series' line of best fit, by least squares, across the\nplot in the series' color.\n\n**`size-by` names a third measure, drawn as each point's size**, as a bubble\nchart does: `size-by=\"Population\"` takes that column out of the series and\ngives each point an area in proportion to its row's number there. The\ntooltip and the table still say the number.\n\nThe summary gives each series' correlation coefficient and its number of\npoints. The table has every number, and the drawing is hidden from screen\nreaders.\n\n**The plot is read by key.** It takes focus, named by `label` or the caption.\nThe left and right arrows move from point to point, left to right across\nthe plot, Home and End go to the first and the last, and the up and down\narrows move among the series of a row. The tooltip sits on that point, the\n`live` part says the row in words, and Escape puts the tooltip away.\n\nEach point is a `<span>` placed by percentage over the drawing, as\n`LineChart` places its end points, so points stay round when the drawing\nstretches.\n\nThe plot runs left to right in every text direction, as a number line does.\nThe plot, its axes, and the axis names sit in a `plane` part with\n`dir=\"ltr\"`, and the arrow keys follow the drawing: Right moves to the next\npoint on a right-to-left page too. The axis names carry `dir=\"auto\"`, so a\nname in Arabic or Hebrew reads in its own direction. The summary and the\ntooltip bubble follow the page's direction.\n\n**A tap shows the reading under it**, and keeps it until a tap lands\nelsewhere. `helix-reading-change` says each move of the reading, by pointer,\ntap or key, and `helix-reading-press` says a reading was clicked, tapped, or\npressed with Enter or Space, for a page that opens what a reading stands for.\n\n**`data` takes the readings as data** where the page has no table to point\n`for` at, in a table's shape: the column headings, then one row per reading\nwith its label first. A table is still the better source where the page can\nshow one, since it reads before any script runs.\n\n**A chart with nothing to draw says so.** A table with no readings shows\n`empty-text`, \"No readings\", in the plot, and `loading` shows `loading-text`\nthere until readings arrive. The `empty` and `loading` slots take markup in\ntheir place, such as a link to add the first reading.\n\n**Keyboard.** The plot is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot and shows the first reading. |\n| Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |\n| Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |\n| Home, End | Moves to the first or the last point. |\n| Page Down, Page Up | Moves a tenth of the points on or back. |\n| Enter, Space | Presses the point shown, which sends `helix-reading-press`. |\n| Escape | Puts the point and its tooltip away. |",
|
|
139854
140210
|
"name": "HelixHeadlessScatterChart",
|
|
139855
140211
|
"cssProperties": [
|
|
139856
140212
|
{
|
|
@@ -142615,7 +142971,7 @@
|
|
|
142615
142971
|
"declarations": [
|
|
142616
142972
|
{
|
|
142617
142973
|
"kind": "class",
|
|
142618
|
-
"description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them. Write them as `Option`,\ngroup them in `Option.Group`, and divide them with `Option.Separator`.\nImporting Select registers all three in the same tier. For a list too long to draw\nwhole, set `items` instead: the list draws only the options in sight, as\nListbox's `items` does, and the trigger, its keys and the form read the\nwhole set.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place. With `multiple`, the value is the\nchosen values joined with commas, and the form receives one entry for each.\nAn option's value may hold a comma, and it is read as one value.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. |\n| A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
|
|
142974
|
+
"description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them. Write them as `Option`,\ngroup them in `Option.Group`, and divide them with `Option.Separator`.\nImporting Select registers all three in the same tier. For a list too long to draw\nwhole, set `items` instead: the list draws only the options in sight, as\nListbox's `items` does, and the trigger, its keys and the form read the\nwhole set.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place. With `multiple`, the value is the\nchosen values joined with commas, and the form receives one entry for each.\nAn option's value may hold a comma, and it is read as one value.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does. On a right-to-left page Left chooses the one after. |\n| A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.\n\n**The options are an import of their own.** An option is the Option family's,\nwhich the select does not register, so a page that writes one imports it\nbeside the select:\n\n```js\nimport '@fusion.dev/helix/select'\nimport '@fusion.dev/helix/option'\n```\n\nIn development, a select holding an option nobody registered says so once the\npage has loaded, with the line to add.",
|
|
142619
142975
|
"name": "HelixHeadlessSelect",
|
|
142620
142976
|
"cssProperties": [
|
|
142621
142977
|
{
|
|
@@ -150381,6 +150737,19 @@
|
|
|
150381
150737
|
"text": "focusItem() => void"
|
|
150382
150738
|
}
|
|
150383
150739
|
},
|
|
150740
|
+
{
|
|
150741
|
+
"kind": "method",
|
|
150742
|
+
"name": "click",
|
|
150743
|
+
"return": {
|
|
150744
|
+
"type": {
|
|
150745
|
+
"text": "void"
|
|
150746
|
+
}
|
|
150747
|
+
},
|
|
150748
|
+
"description": "Presses the action, as `click()` presses a native button: passed to the\ncontrol inside, which is what answers a click, so a script's `click()`\nchooses the action and follows its link, once.",
|
|
150749
|
+
"type": {
|
|
150750
|
+
"text": "click() => void"
|
|
150751
|
+
}
|
|
150752
|
+
},
|
|
150384
150753
|
{
|
|
150385
150754
|
"kind": "method",
|
|
150386
150755
|
"name": "select",
|
|
@@ -158778,24 +159147,6 @@
|
|
|
158778
159147
|
"kind": "javascript-module",
|
|
158779
159148
|
"path": "src/table/column/table-column.ts",
|
|
158780
159149
|
"declarations": [
|
|
158781
|
-
{
|
|
158782
|
-
"kind": "function",
|
|
158783
|
-
"name": "edgeOf",
|
|
158784
|
-
"return": {
|
|
158785
|
-
"type": {
|
|
158786
|
-
"text": "string | undefined"
|
|
158787
|
-
}
|
|
158788
|
-
},
|
|
158789
|
-
"parameters": [
|
|
158790
|
-
{
|
|
158791
|
-
"name": "align",
|
|
158792
|
-
"type": {
|
|
158793
|
-
"text": "string | undefined"
|
|
158794
|
-
}
|
|
158795
|
-
}
|
|
158796
|
-
],
|
|
158797
|
-
"description": "The edge a column names, where it names one of the three.\n\n**`text-align` is a string anybody can write**, the union on the property being a\ncompile-time claim and nothing else, and both tables put the value straight\ninto CSS: `Table` into a rule in each row's shadow root, `DataTable` into the\ncell it draws. One guard, here with the property, rather than one in each\ntable and only one of them written."
|
|
158798
|
-
},
|
|
158799
159150
|
{
|
|
158800
159151
|
"kind": "class",
|
|
158801
159152
|
"description": "Each column provides both its heading and its grid track. Adding a column\nadds a track, and removing one removes it. `Table`'s `columns` is applied one\ntrack at a time to the columns declared under it:\n\n- A heading name in the list affects only its own column's width.\n- A list longer or shorter than the columns is trimmed or shared.\n- A column's own `width` overrides the track in its place.\n\nThis protects the table from a track list that contains the headings by\nmistake, which is invalid CSS that the grid ignores silently, drawing the\nwhole table as one column.\n\nEvery per-column setting goes on the column, so `DataTable` needs no column\nconfiguration object:\n\n- `field` names the key the cell reads.\n- `sortable` lets people sort by the column.\n- `text-align` sets which edge the values line up against.\n- `cell` takes a function for anything `field` alone cannot express.\n\nThe same element works in both `Table` and `DataTable`. It is identified by a\nflag, so the two roots share nothing else.\n\nThe column generates no box of its own, the same as a row. The heading is a\ngrid item of the table, so it lines up with the cells below it.\n\n`hidden` takes the column out of the grid, both its heading and its track, so\nthe other columns keep their widths and every row keeps its cells under their\nheadings. `hidden=\"until-found\"` keeps the track and leaves the heading\ndrawn, as it does on every Helix element. `DataTable` leaves out the cells\nunder a hidden column. In a `Table` the cells are markup you wrote, so hide\nthem with the column: a row with more cells than the table has tracks wraps\nonto the next line.\n\nA heading that does something holds a control. In a `Table` a column\nheader is not focusable, so a sortable heading contains a `<button>`, which\nis the pattern for a sortable table and the only way to reach the sort by\nkeyboard. In a `DataTable` the heading is a cell of the grid, reached with\nthe arrow keys, and its controls with Enter or F2. A resizable column has a\n`separator` on its end edge, moved by dragging or with the arrow keys. In a\ntable with reorderable columns, each column has a grip that the table moves.",
|
|
@@ -159648,7 +159999,7 @@
|
|
|
159648
159999
|
"name": "edgeOf",
|
|
159649
160000
|
"declaration": {
|
|
159650
160001
|
"name": "edgeOf",
|
|
159651
|
-
"module": "
|
|
160002
|
+
"module": "../edge.js"
|
|
159652
160003
|
}
|
|
159653
160004
|
},
|
|
159654
160005
|
{
|
|
@@ -159669,6 +160020,40 @@
|
|
|
159669
160020
|
}
|
|
159670
160021
|
]
|
|
159671
160022
|
},
|
|
160023
|
+
{
|
|
160024
|
+
"kind": "javascript-module",
|
|
160025
|
+
"path": "src/table/edge.ts",
|
|
160026
|
+
"declarations": [
|
|
160027
|
+
{
|
|
160028
|
+
"kind": "function",
|
|
160029
|
+
"name": "edgeOf",
|
|
160030
|
+
"return": {
|
|
160031
|
+
"type": {
|
|
160032
|
+
"text": "string | undefined"
|
|
160033
|
+
}
|
|
160034
|
+
},
|
|
160035
|
+
"parameters": [
|
|
160036
|
+
{
|
|
160037
|
+
"name": "align",
|
|
160038
|
+
"type": {
|
|
160039
|
+
"text": "string | undefined"
|
|
160040
|
+
}
|
|
160041
|
+
}
|
|
160042
|
+
],
|
|
160043
|
+
"description": "The edge a column names, where it names one of the three.\n\n**`text-align` is a string anybody can write**, the union on the property being a\ncompile-time claim and nothing else, and both tables put the value straight\ninto CSS: `Table` into a rule in each row's shadow root, `DataTable` into the\ncell it draws. One guard, here with the property, rather than one in each\ntable and only one of them written."
|
|
160044
|
+
}
|
|
160045
|
+
],
|
|
160046
|
+
"exports": [
|
|
160047
|
+
{
|
|
160048
|
+
"kind": "js",
|
|
160049
|
+
"name": "edgeOf",
|
|
160050
|
+
"declaration": {
|
|
160051
|
+
"name": "edgeOf",
|
|
160052
|
+
"module": "src/table/edge.ts"
|
|
160053
|
+
}
|
|
160054
|
+
}
|
|
160055
|
+
]
|
|
160056
|
+
},
|
|
159672
160057
|
{
|
|
159673
160058
|
"kind": "javascript-module",
|
|
159674
160059
|
"path": "src/table/grid-controller.ts",
|
|
@@ -165115,6 +165500,19 @@
|
|
|
165115
165500
|
"readonly": true,
|
|
165116
165501
|
"description": "Chooses the tab before the browser follows its link, and keeps the browser\nfrom following where the choice was refused. A press with a modifier, or\nwith a button other than the main one, opens the link where the browser\nopens it and chooses nothing here."
|
|
165117
165502
|
},
|
|
165503
|
+
{
|
|
165504
|
+
"kind": "method",
|
|
165505
|
+
"name": "click",
|
|
165506
|
+
"return": {
|
|
165507
|
+
"type": {
|
|
165508
|
+
"text": "void"
|
|
165509
|
+
}
|
|
165510
|
+
},
|
|
165511
|
+
"description": "Presses the tab, as `click()` presses a native button: passed to the\ncontrol inside, which is what answers a click, so a script's `click()`\nselects the tab, or follows its link, once.",
|
|
165512
|
+
"type": {
|
|
165513
|
+
"text": "click() => void"
|
|
165514
|
+
}
|
|
165515
|
+
},
|
|
165118
165516
|
{
|
|
165119
165517
|
"kind": "field",
|
|
165120
165518
|
"name": "dismissible",
|
|
@@ -199436,6 +199834,6 @@
|
|
|
199436
199834
|
],
|
|
199437
199835
|
"helix": {
|
|
199438
199836
|
"package": "@fusion.dev/helix-headless",
|
|
199439
|
-
"version": "0.
|
|
199837
|
+
"version": "0.180.0"
|
|
199440
199838
|
}
|
|
199441
199839
|
}
|