@fusion.dev/helix-headless 0.157.0 → 0.158.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 +178 -22
- package/dist/command/root/command-root.d.ts +19 -5
- package/dist/command/root/command-root.js +14 -4
- package/dist/data-table/root/data-table-root.js +5 -2
- package/dist/list/item/list-item.d.ts +15 -1
- package/dist/list/item/list-item.js +20 -1
- package/dist/list/root/list-root.d.ts +29 -1
- package/dist/list/root/list-root.js +44 -10
- package/dist/listbox/root/listbox-root.d.ts +19 -2
- package/dist/listbox/root/listbox-root.js +16 -8
- package/dist/map/root/map-root.d.ts +4 -0
- package/dist/map/root/map-root.js +1 -1
- package/dist/menu/item/menu-item.js +1 -1
- package/dist/menu/root/menu-root.d.ts +6 -2
- package/dist/menu/root/menu-root.js +9 -2
- package/dist/number-input/root/number-input-root.d.ts +7 -4
- package/dist/number-input/root/number-input-root.js +3 -3
- package/dist/progress/root/progress-root.js +1 -1
- package/dist/select/root/select-root.d.ts +8 -1
- package/dist/select/root/select-root.js +8 -5
- package/dist/skeleton/root/skeleton-root.d.ts +2 -1
- package/dist/skeleton/root/skeleton-root.js +1 -1
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +208 -40
- package/types/vue.d.ts +48 -9
package/custom-elements.json
CHANGED
|
@@ -1707,7 +1707,7 @@
|
|
|
1707
1707
|
"text": "HTMLElement | undefined"
|
|
1708
1708
|
}
|
|
1709
1709
|
},
|
|
1710
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
1710
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
1711
1711
|
"inheritedFrom": {
|
|
1712
1712
|
"name": "MixinDismissible",
|
|
1713
1713
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -12691,7 +12691,7 @@
|
|
|
12691
12691
|
"text": "HTMLElement | undefined"
|
|
12692
12692
|
}
|
|
12693
12693
|
},
|
|
12694
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
12694
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
12695
12695
|
"inheritedFrom": {
|
|
12696
12696
|
"name": "MixinDismissible",
|
|
12697
12697
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -40391,7 +40391,7 @@
|
|
|
40391
40391
|
"declarations": [
|
|
40392
40392
|
{
|
|
40393
40393
|
"kind": "class",
|
|
40394
|
-
"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 Backspace in an empty
|
|
40394
|
+
"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, and the\nhighlight 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, 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.",
|
|
40395
40395
|
"name": "HelixHeadlessCommand",
|
|
40396
40396
|
"cssParts": [
|
|
40397
40397
|
{
|
|
@@ -40473,6 +40473,10 @@
|
|
|
40473
40473
|
{
|
|
40474
40474
|
"description": "The filter field.",
|
|
40475
40475
|
"name": "listbox-search-field"
|
|
40476
|
+
},
|
|
40477
|
+
{
|
|
40478
|
+
"description": "The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.",
|
|
40479
|
+
"name": "live"
|
|
40476
40480
|
}
|
|
40477
40481
|
],
|
|
40478
40482
|
"slots": [
|
|
@@ -40543,6 +40547,14 @@
|
|
|
40543
40547
|
"description": "How long typing rests before the commands are filtered, in milliseconds,\nso a palette filtered on a server sends one `helix-filter` for a word.\n`0` filters on every keystroke. See Listbox's `filter-delay`.",
|
|
40544
40548
|
"attribute": "filter-delay"
|
|
40545
40549
|
},
|
|
40550
|
+
{
|
|
40551
|
+
"kind": "field",
|
|
40552
|
+
"name": "filterMatch",
|
|
40553
|
+
"type": {
|
|
40554
|
+
"text": "((text: string, filter: string) => boolean) | undefined | undefined"
|
|
40555
|
+
},
|
|
40556
|
+
"description": "Whether a command is kept by the filter: a function given the command's\nwords and the filter, trimmed, that returns `true` to keep it showing, as\nReact Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.\n\nAbsent, a command is kept where its words hold the filter, in any case. A\nproperty only, there being no way to write a function in markup."
|
|
40557
|
+
},
|
|
40546
40558
|
{
|
|
40547
40559
|
"kind": "field",
|
|
40548
40560
|
"name": "hotkey",
|
|
@@ -40752,6 +40764,14 @@
|
|
|
40752
40764
|
],
|
|
40753
40765
|
"description": "Shows a page of commands, with the trail that leads back from it. The\nfilter starts empty, as it does on opening, and the field keeps focus."
|
|
40754
40766
|
},
|
|
40767
|
+
{
|
|
40768
|
+
"kind": "field",
|
|
40769
|
+
"name": "status",
|
|
40770
|
+
"privacy": "private",
|
|
40771
|
+
"readonly": true,
|
|
40772
|
+
"default": "new StatusController(this)",
|
|
40773
|
+
"description": "The region the page shown is said from as it changes."
|
|
40774
|
+
},
|
|
40755
40775
|
{
|
|
40756
40776
|
"kind": "field",
|
|
40757
40777
|
"name": "handleBack",
|
|
@@ -45597,6 +45617,13 @@
|
|
|
45597
45617
|
"type": {
|
|
45598
45618
|
"text": "boolean"
|
|
45599
45619
|
}
|
|
45620
|
+
},
|
|
45621
|
+
{
|
|
45622
|
+
"name": "id",
|
|
45623
|
+
"optional": true,
|
|
45624
|
+
"type": {
|
|
45625
|
+
"text": "string"
|
|
45626
|
+
}
|
|
45600
45627
|
}
|
|
45601
45628
|
],
|
|
45602
45629
|
"description": "One cell, carrying its column's edge as a fact rather than as a decision.\n\n**A fact published rather than a property chosen**, which is what `Table`\ndoes with the same attribute: what lining up *means*, a `justify-content`\nfor a value that fits or a `text-align` for one that wraps, belongs to\nwhoever draws the cell. Written here as an inline `text-align` it was this\ntier choosing, in the tier that ships no CSS, and a consumer could not\noverrule it either, an inline declaration beating any `::part(cell)` rule\nthey wrote.\n\nOnly the three edges reach it, `text-align` being a string anybody can write and\nthis being a style attribute: `edgeOf` is that guard, and `Table` holds the\nsame value to the same three."
|
|
@@ -64523,7 +64550,7 @@
|
|
|
64523
64550
|
"text": "HTMLElement | undefined"
|
|
64524
64551
|
}
|
|
64525
64552
|
},
|
|
64526
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
64553
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
64527
64554
|
"inheritedFrom": {
|
|
64528
64555
|
"name": "MixinDismissible",
|
|
64529
64556
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -88633,7 +88660,7 @@
|
|
|
88633
88660
|
"text": "boolean"
|
|
88634
88661
|
},
|
|
88635
88662
|
"default": "false",
|
|
88636
|
-
"description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on.",
|
|
88663
|
+
"description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on. In a list with\n`disabled-behavior=\"selection\"`, it cannot be selected and is reached and\nacted on as any row is.",
|
|
88637
88664
|
"attribute": "disabled",
|
|
88638
88665
|
"reflects": true
|
|
88639
88666
|
},
|
|
@@ -88689,6 +88716,15 @@
|
|
|
88689
88716
|
},
|
|
88690
88717
|
"description": "Whether the row is selected, in a list that selects.\n\nWritten by the list from its own `value`, and unset where nothing can be\nselected, which keeps `aria-selected` off a list that does not select."
|
|
88691
88718
|
},
|
|
88719
|
+
{
|
|
88720
|
+
"kind": "field",
|
|
88721
|
+
"name": "selectionOnly",
|
|
88722
|
+
"type": {
|
|
88723
|
+
"text": "boolean"
|
|
88724
|
+
},
|
|
88725
|
+
"default": "false",
|
|
88726
|
+
"description": "Whether `disabled` takes the row out of selection alone, written by a list\nwith `disabled-behavior=\"selection\"`. No attribute: it is coordination\nbetween elements, as `focusable` is."
|
|
88727
|
+
},
|
|
88692
88728
|
{
|
|
88693
88729
|
"kind": "field",
|
|
88694
88730
|
"name": "target",
|
|
@@ -88738,6 +88774,13 @@
|
|
|
88738
88774
|
"description": "Whether a list with `selection-mode` holds this row, which makes it a row of a grid.",
|
|
88739
88775
|
"readonly": true
|
|
88740
88776
|
},
|
|
88777
|
+
{
|
|
88778
|
+
"kind": "field",
|
|
88779
|
+
"name": "handleCellFocus",
|
|
88780
|
+
"privacy": "private",
|
|
88781
|
+
"readonly": true,
|
|
88782
|
+
"description": "Says whether the cell shows keyboard focus, as `:focus-visible` does, so a\nsheet outside can draw the ring on the row by the host."
|
|
88783
|
+
},
|
|
88741
88784
|
{
|
|
88742
88785
|
"kind": "method",
|
|
88743
88786
|
"name": "focusItem",
|
|
@@ -89138,7 +89181,7 @@
|
|
|
89138
89181
|
"text": "boolean"
|
|
89139
89182
|
},
|
|
89140
89183
|
"default": "false",
|
|
89141
|
-
"description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on.",
|
|
89184
|
+
"description": "Takes the row out of reach in a list with `selection-mode`: the arrow keys\npass over it and it cannot be selected or acted on. In a list with\n`disabled-behavior=\"selection\"`, it cannot be selected and is reached and\nacted on as any row is.",
|
|
89142
89185
|
"fieldName": "disabled"
|
|
89143
89186
|
},
|
|
89144
89187
|
{
|
|
@@ -89191,6 +89234,10 @@
|
|
|
89191
89234
|
"description": "The row being moved goes before this one when it is dropped.",
|
|
89192
89235
|
"name": "drop-before"
|
|
89193
89236
|
},
|
|
89237
|
+
{
|
|
89238
|
+
"description": "The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.",
|
|
89239
|
+
"name": "focus-visible"
|
|
89240
|
+
},
|
|
89194
89241
|
{
|
|
89195
89242
|
"description": "The row is selected, in a list that selects.",
|
|
89196
89243
|
"name": "selected"
|
|
@@ -89298,7 +89345,7 @@
|
|
|
89298
89345
|
"declarations": [
|
|
89299
89346
|
{
|
|
89300
89347
|
"kind": "class",
|
|
89301
|
-
"description": "Sets `role=\"list\"` on the host, so a screen reader counts the rows and\nannounces each one's position, such as \"1 of 7\".\n\n**`selection-mode` makes the list interactive**, in the way of a grid list:\na grid of rows that is one tab stop. `single` selects one row at a time and\n`multiple` any number, and `value` holds the selected rows' values,\nseparated by commas. A change asks with `helix-before-change` and tells\nwith `change`. `none` selects nothing, so a press acts on the row. A\n`disabled` row is passed over. Each row is named by its label and described\nby its description, so the words of the controls in `end` are not read as\npart of its name.\n\n`selection-behavior` says what a press does to the rows already selected.\n`toggle`, the default, adds or takes out the row. `replace` selects the row\nalone, as a file list does, and the arrow keys carry the selection with\nthem. Control or Command with a press then adds or takes out one row.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |\n| Home, End | Moves to the first or the last row. Under `replace`, selects it. |\n| Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |\n| A letter or a word | Moves to the next row whose words start with what you typed. |\n| Left, Right | Moves between the row and the controls in its `end` slot. |\n| Space | Selects the row, or lets it go. |\n| Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |\n| Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |\n| Control or Command with A | Selects every row, in `multiple`. |\n| Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |\n| Enter | Acts on the row: follows its link, or sends `helix-action` from it. |\n\nA press with Shift selects every row from the last one pressed, and a press\nwith Control or Command adds or takes out one row under `replace`.\n\n**Leave `selection-mode` unset for a list a reader reads**, and set it for\none a reader chooses from or acts on. The rows of an interactive list are\ngrid rows, which hold controls as a list box option cannot. Give a control\nin `end` `tabindex=\"-1\"` to leave it to the arrow keys and out of the tab\norder.\n\n**`reorderable` lets you move rows.** Each row gets a grip after its `end`\nslot, named by `move-label`. Drag a grip to move its row, and the list\nscrolls near an edge. Or press a grip with Space, Enter, or a click to pick\nup its row, move it with the arrow keys, and press the grip again to drop\nit. A click on another row drops it there, and Escape puts it back. The list\nsays each step in its `live` region. A drop sends `helix-before-reorder`,\nwhich you can refuse, and then `helix-reorder`, whose `keys` hold every\nrow's value in the new order. **You move the rows**: the list moves no\nelement of yours, so your framework keeps the order it rendered.\n\n| Key, on a held row's grip | What it does |\n|---|---|\n| Down, Up | Moves the row one place. |\n| Home, End | Moves the row to the top or the bottom. |\n| Space, Enter | Drops the row. |\n| Escape | Puts the row back where it was. |\n\n`start` and `reversed` number an ordered list as `<ol>` does. The list\nwrites where the numbers start and which way they run as `--list-first` and\n`--list-step` on its slot, which the styled tier counts from. Reversed with\nno `start` counts down from the number of rows, which a server cannot know,\nso served markup counts from one until the list runs.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown while the list has no rows and none are loading, such\nas \"No files yet\" and a link to add one. Without either, an empty list shows\nnothing. The list takes the `empty` state while it has no rows, whatever it\nshows.\n\n**Loading more.** `load-more` sends `helix-load-more` once the end of the\nlist comes within a screen of view, in the box that scrolls it or the page,\nonce for each number of rows: add rows and it can send it again. While you\nfetch, set `loading`: the list is busy, and a row after the last says\n\"Loading more\" (`loading-label`, or your own content in the `loading`\nslot). The list asks for nothing while `loading` is set.\n\nAn interactive list with no name is reported once in a development build,\nsince a screen reader announces it as a grid and nothing more. Name it with\n`label` or `aria-label`.",
|
|
89348
|
+
"description": "Sets `role=\"list\"` on the host, so a screen reader counts the rows and\nannounces each one's position, such as \"1 of 7\".\n\n**`selection-mode` makes the list interactive**, in the way of a grid list:\na grid of rows that is one tab stop. `single` selects one row at a time and\n`multiple` any number, and `value` holds the selected rows' values,\nseparated by commas. A change asks with `helix-before-change` and tells\nwith `change`. `none` selects nothing, so a press acts on the row. A\n`disabled` row is passed over. With `disabled-behavior=\"selection\"`, a\n`disabled` row cannot be selected, and is reached and acted on as any row\nis, as React Aria's GridList has it. Each row is named by its label and described\nby its description, so the words of the controls in `end` are not read as\npart of its name.\n\n`selection-behavior` says what a press does to the rows already selected.\n`toggle`, the default, adds or takes out the row. `replace` selects the row\nalone, as a file list does, and the arrow keys carry the selection with\nthem. Control or Command with a press then adds or takes out one row.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |\n| Home, End | Moves to the first or the last row. Under `replace`, selects it. |\n| Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |\n| A letter or a word | Moves to the next row whose words start with what you typed. |\n| Left, Right | Moves between the row and the controls in its `end` slot. |\n| Space | Selects the row, or lets it go. |\n| Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |\n| Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |\n| Control or Command with A | Selects every row, in `multiple`. |\n| Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |\n| Enter | Acts on the row: follows its link, or sends `helix-action` from it. |\n\nA press with Shift selects every row from the last one pressed, and a press\nwith Control or Command adds or takes out one row under `replace`.\n\n**Leave `selection-mode` unset for a list a reader reads**, and set it for\none a reader chooses from or acts on. The rows of an interactive list are\ngrid rows, which hold controls as a list box option cannot. Give a control\nin `end` `tabindex=\"-1\"` to leave it to the arrow keys and out of the tab\norder.\n\n**`reorderable` lets you move rows.** Each row gets a grip after its `end`\nslot, named by `move-label`. Drag a grip to move its row, and the list\nscrolls near an edge. Or press a grip with Space, Enter, or a click to pick\nup its row, move it with the arrow keys, and press the grip again to drop\nit. A click on another row drops it there, and Escape puts it back. The list\nsays each step in its `live` region. A drop sends `helix-before-reorder`,\nwhich you can refuse, and then `helix-reorder`, whose `keys` hold every\nrow's value in the new order. **You move the rows**: the list moves no\nelement of yours, so your framework keeps the order it rendered.\n\n| Key, on a held row's grip | What it does |\n|---|---|\n| Down, Up | Moves the row one place. |\n| Home, End | Moves the row to the top or the bottom. |\n| Space, Enter | Drops the row. |\n| Escape | Puts the row back where it was. |\n\n`start` and `reversed` number an ordered list as `<ol>` does. The list\nwrites where the numbers start and which way they run as `--list-first` and\n`--list-step` on its slot, which the styled tier counts from. Reversed with\nno `start` counts down from the number of rows, which a server cannot know,\nso served markup counts from one until the list runs.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown while the list has no rows and none are loading, such\nas \"No files yet\" and a link to add one. Without either, an empty list shows\nnothing. The list takes the `empty` state while it has no rows, whatever it\nshows.\n\n**Loading more.** `load-more` sends `helix-load-more` once the end of the\nlist comes within a screen of view, in the box that scrolls it or the page,\nonce for each number of rows: add rows and it can send it again. While you\nfetch, set `loading`: the list is busy, and a row after the last says\n\"Loading more\" (`loading-label`, or your own content in the `loading`\nslot). The list asks for nothing while `loading` is set.\n\nAn interactive list with no name is reported once in a development build,\nsince a screen reader announces it as a grid and nothing more. Name it with\n`label` or `aria-label`.",
|
|
89302
89349
|
"name": "HelixHeadlessList",
|
|
89303
89350
|
"cssProperties": [
|
|
89304
89351
|
{
|
|
@@ -89366,6 +89413,15 @@
|
|
|
89366
89413
|
"words": true
|
|
89367
89414
|
}
|
|
89368
89415
|
},
|
|
89416
|
+
{
|
|
89417
|
+
"kind": "field",
|
|
89418
|
+
"name": "disabledBehavior",
|
|
89419
|
+
"type": {
|
|
89420
|
+
"text": "'all' | 'selection' | undefined | undefined"
|
|
89421
|
+
},
|
|
89422
|
+
"description": "What `disabled` takes from a row, in a list that selects: `all`, which\npasses over the row, or `selection`, which keeps the row out of the\nselection and lets the keys reach it and Enter or a press act on it, as\nReact Aria's GridList takes `disabledBehavior`.\n\nAbsent is `all`.",
|
|
89423
|
+
"attribute": "disabled-behavior"
|
|
89424
|
+
},
|
|
89369
89425
|
{
|
|
89370
89426
|
"kind": "field",
|
|
89371
89427
|
"name": "droppedLabel",
|
|
@@ -89511,6 +89567,35 @@
|
|
|
89511
89567
|
"description": "What a press does to the rows already selected, in a list that selects:\n`toggle` adds or takes out the row, and `replace` selects it alone and\nlets the arrow keys carry the selection.",
|
|
89512
89568
|
"attribute": "selection-behavior"
|
|
89513
89569
|
},
|
|
89570
|
+
{
|
|
89571
|
+
"kind": "method",
|
|
89572
|
+
"name": "blocked",
|
|
89573
|
+
"privacy": "private",
|
|
89574
|
+
"return": {
|
|
89575
|
+
"type": {
|
|
89576
|
+
"text": "boolean"
|
|
89577
|
+
}
|
|
89578
|
+
},
|
|
89579
|
+
"parameters": [
|
|
89580
|
+
{
|
|
89581
|
+
"name": "row",
|
|
89582
|
+
"type": {
|
|
89583
|
+
"text": "HelixHeadlessListItem"
|
|
89584
|
+
}
|
|
89585
|
+
}
|
|
89586
|
+
],
|
|
89587
|
+
"description": "Whether the row is out of reach of the keys and of actions, past selection."
|
|
89588
|
+
},
|
|
89589
|
+
{
|
|
89590
|
+
"kind": "field",
|
|
89591
|
+
"name": "selectable",
|
|
89592
|
+
"type": {
|
|
89593
|
+
"text": "HelixHeadlessListItem[]"
|
|
89594
|
+
},
|
|
89595
|
+
"privacy": "private",
|
|
89596
|
+
"description": "The rows a key can land on that can also be selected.",
|
|
89597
|
+
"readonly": true
|
|
89598
|
+
},
|
|
89514
89599
|
{
|
|
89515
89600
|
"kind": "field",
|
|
89516
89601
|
"name": "selectionMode",
|
|
@@ -89558,6 +89643,16 @@
|
|
|
89558
89643
|
"privacy": "private",
|
|
89559
89644
|
"description": "The row the reader was last on, which keeps the tab stop."
|
|
89560
89645
|
},
|
|
89646
|
+
{
|
|
89647
|
+
"kind": "field",
|
|
89648
|
+
"name": "placed",
|
|
89649
|
+
"type": {
|
|
89650
|
+
"text": "HelixHeadlessListItem[]"
|
|
89651
|
+
},
|
|
89652
|
+
"privacy": "private",
|
|
89653
|
+
"default": "[]",
|
|
89654
|
+
"description": "The rows in order on the last `sync`, so a removed row's place is known."
|
|
89655
|
+
},
|
|
89561
89656
|
{
|
|
89562
89657
|
"kind": "field",
|
|
89563
89658
|
"name": "anchor",
|
|
@@ -89757,6 +89852,25 @@
|
|
|
89757
89852
|
},
|
|
89758
89853
|
"description": "Tells every row its place: whether it holds the one tab stop and whether\nit is selected, or that it is a plain row. Through `whenHydrated`, so a\nrow a server rendered draws its served markup first."
|
|
89759
89854
|
},
|
|
89855
|
+
{
|
|
89856
|
+
"kind": "method",
|
|
89857
|
+
"name": "followRemoved",
|
|
89858
|
+
"privacy": "private",
|
|
89859
|
+
"return": {
|
|
89860
|
+
"type": {
|
|
89861
|
+
"text": "void"
|
|
89862
|
+
}
|
|
89863
|
+
},
|
|
89864
|
+
"parameters": [
|
|
89865
|
+
{
|
|
89866
|
+
"name": "rows",
|
|
89867
|
+
"type": {
|
|
89868
|
+
"text": "HelixHeadlessListItem[]"
|
|
89869
|
+
}
|
|
89870
|
+
}
|
|
89871
|
+
],
|
|
89872
|
+
"description": "Moves the tab stop off a row the page removed, to the next row a key can\nreach or, at the end, the one before it, and moves focus there where\nremoving the row dropped it to the body.\n\n**Focus went to the body**, and the arrow keys did nothing until the\nreader tabbed back into the list. React Aria's GridList moves focus to a\nneighbor the same way. Focus anywhere but the body is where you put it,\nand is left there."
|
|
89873
|
+
},
|
|
89760
89874
|
{
|
|
89761
89875
|
"kind": "method",
|
|
89762
89876
|
"name": "rowOf",
|
|
@@ -90481,6 +90595,14 @@
|
|
|
90481
90595
|
"description": "What screen readers hear when a held row is put back, or a move is\nrefused, in a `reorderable` list.",
|
|
90482
90596
|
"fieldName": "canceledLabel"
|
|
90483
90597
|
},
|
|
90598
|
+
{
|
|
90599
|
+
"name": "disabled-behavior",
|
|
90600
|
+
"type": {
|
|
90601
|
+
"text": "'all' | 'selection' | undefined | undefined"
|
|
90602
|
+
},
|
|
90603
|
+
"description": "What `disabled` takes from a row, in a list that selects: `all`, which\npasses over the row, or `selection`, which keeps the row out of the\nselection and lets the keys reach it and Enter or a press act on it, as\nReact Aria's GridList takes `disabledBehavior`.\n\nAbsent is `all`.",
|
|
90604
|
+
"fieldName": "disabledBehavior"
|
|
90605
|
+
},
|
|
90484
90606
|
{
|
|
90485
90607
|
"name": "dropped-label",
|
|
90486
90608
|
"type": {
|
|
@@ -91076,7 +91198,7 @@
|
|
|
91076
91198
|
"declarations": [
|
|
91077
91199
|
{
|
|
91078
91200
|
"kind": "class",
|
|
91079
|
-
"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.\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.",
|
|
91201
|
+
"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.",
|
|
91080
91202
|
"name": "HelixHeadlessListbox",
|
|
91081
91203
|
"cssParts": [
|
|
91082
91204
|
{
|
|
@@ -91278,6 +91400,14 @@
|
|
|
91278
91400
|
"words": true
|
|
91279
91401
|
}
|
|
91280
91402
|
},
|
|
91403
|
+
{
|
|
91404
|
+
"kind": "field",
|
|
91405
|
+
"name": "filterMatch",
|
|
91406
|
+
"type": {
|
|
91407
|
+
"text": "((text: string, filter: string) => boolean) | undefined | undefined"
|
|
91408
|
+
},
|
|
91409
|
+
"description": "Whether an option is kept by the filter: a function given the option's\nwords and the filter, trimmed, that returns `true` to keep it showing, as\nReact Aria's `Autocomplete` takes `filter`. For matching that ignores\naccents, matches the start of each word, or matches out of order.\n\nAbsent, an option is kept where its words hold the filter, in any case. A\nproperty only, there being no way to write a function in markup."
|
|
91410
|
+
},
|
|
91281
91411
|
{
|
|
91282
91412
|
"kind": "field",
|
|
91283
91413
|
"name": "items",
|
|
@@ -91634,7 +91764,7 @@
|
|
|
91634
91764
|
"type": {
|
|
91635
91765
|
"text": "string[]"
|
|
91636
91766
|
},
|
|
91637
|
-
"description": "The chosen values, as an array whether or not `multiple` is set.",
|
|
91767
|
+
"description": "The chosen values, as an array whether or not `multiple` is set.\n\nRead against the options' values, so an option whose value holds a comma\nis one value. See `chosenValues`.",
|
|
91638
91768
|
"readonly": true
|
|
91639
91769
|
},
|
|
91640
91770
|
{
|
|
@@ -100490,7 +100620,7 @@
|
|
|
100490
100620
|
"name": "handlePartChange",
|
|
100491
100621
|
"privacy": "private",
|
|
100492
100622
|
"readonly": true,
|
|
100493
|
-
"description": "A route or area renamed, or its description changed, which the list says\nand a slot change does not report."
|
|
100623
|
+
"description": "A route or area renamed, or its description changed, which the list says\nand a slot change does not report.\n\nNot the map's own `gestures` news, which it sends from `updated` and which\nchanges nothing it draws: an update asked for there ran every map's\nupdate twice, and Lit's development build warned about it."
|
|
100494
100624
|
},
|
|
100495
100625
|
{
|
|
100496
100626
|
"kind": "field",
|
|
@@ -106011,7 +106141,7 @@
|
|
|
106011
106141
|
"declarations": [
|
|
106012
106142
|
{
|
|
106013
106143
|
"kind": "class",
|
|
106014
|
-
"description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose, Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page
|
|
106144
|
+
"description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose, Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page. Left Arrow on the top page does nothing. Escape closes\nthe menu and returns focus to the trigger. Tab closes it and moves on.\n\nWhile it is open, the surface carries the trigger's width as\n`--floating-anchor-inline-size` and the room left below it as\n`--floating-available-block-size`, as Radix's dropdown menu publishes its\ntrigger's width, for a menu as wide as its trigger:\n`helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.\n\nWith `context`, the trigger is an area and the menu is its context menu: a\nright-click, a long press, Shift+F10 or the menu key over the area opens it\nat the pointer, or at the area's corner from the keyboard, as Radix's context\nmenu does. A press on the area does not open it, and closing it returns focus\nto where it was. A touch or a pen held still on the area opens it too, on\nevery browser, since iOS sends no `contextmenu` for one.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, and a press held for half a second opens\nthe menu, as React Aria's `trigger=\"longPress\"` does. Alt+Down or Alt+Up\nopens it from the keyboard, and the trigger is described by\n`long-press-label`, which says so.",
|
|
106015
106145
|
"name": "HelixHeadlessMenu",
|
|
106016
106146
|
"cssProperties": [
|
|
106017
106147
|
{
|
|
@@ -106340,7 +106470,7 @@
|
|
|
106340
106470
|
"name": "panel",
|
|
106341
106471
|
"privacy": "private",
|
|
106342
106472
|
"readonly": true,
|
|
106343
|
-
"default": "new PopoverController(this, { anchor: () => this.context && this.point ? this.renderRoot?.querySelector<HTMLElement>('#point') : this.trigger, // The host is `display: contents`, so it has no box a press can land in. // What counts as inside is the surface, plus the trigger, whose own click // handler decides what a press there means. boundary: () => this, offset: () => this.offset, onDismiss: () => this.hide(), open: () => this.open, placement: () => this.placement, surface: () => this.partNamed('surface'), })"
|
|
106473
|
+
"default": "new PopoverController(this, { anchor: () => this.context && this.point ? this.renderRoot?.querySelector<HTMLElement>('#point') : this.trigger, // The host is `display: contents`, so it has no box a press can land in. // What counts as inside is the surface, plus the trigger, whose own click // handler decides what a press there means. boundary: () => this, offset: () => this.offset, onDismiss: () => this.hide(), /* The side the panel landed on, for a sheet outside that draws by side, as Popover says it. */ onPlace: (placement) => { const side = sideOf(placement) this.toggleState('placed-bottom', side === 'bottom') this.toggleState('placed-left', side === 'left') this.toggleState('placed-right', side === 'right') this.toggleState('placed-top', side === 'top') }, open: () => this.open, placement: () => this.placement, surface: () => this.partNamed('surface'), })"
|
|
106344
106474
|
},
|
|
106345
106475
|
{
|
|
106346
106476
|
"kind": "method",
|
|
@@ -107595,6 +107725,22 @@
|
|
|
107595
107725
|
"description": "While the menu is open.",
|
|
107596
107726
|
"name": "open"
|
|
107597
107727
|
},
|
|
107728
|
+
{
|
|
107729
|
+
"description": "While the open panel sits below its trigger.",
|
|
107730
|
+
"name": "placed-bottom"
|
|
107731
|
+
},
|
|
107732
|
+
{
|
|
107733
|
+
"description": "While the open panel sits to the left of its trigger.",
|
|
107734
|
+
"name": "placed-left"
|
|
107735
|
+
},
|
|
107736
|
+
{
|
|
107737
|
+
"description": "While the open panel sits to the right of its trigger.",
|
|
107738
|
+
"name": "placed-right"
|
|
107739
|
+
},
|
|
107740
|
+
{
|
|
107741
|
+
"description": "While the open panel sits above its trigger.",
|
|
107742
|
+
"name": "placed-top"
|
|
107743
|
+
},
|
|
107598
107744
|
{
|
|
107599
107745
|
"description": "A row on the current page has content in its leading column, so every row keeps that column.",
|
|
107600
107746
|
"name": "start"
|
|
@@ -110895,7 +111041,7 @@
|
|
|
110895
111041
|
"text": "HTMLElement | undefined"
|
|
110896
111042
|
}
|
|
110897
111043
|
},
|
|
110898
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
111044
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
110899
111045
|
"inheritedFrom": {
|
|
110900
111046
|
"name": "MixinDismissible",
|
|
110901
111047
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -112816,7 +112962,7 @@
|
|
|
112816
112962
|
"declarations": [
|
|
112817
112963
|
{
|
|
112818
112964
|
"kind": "class",
|
|
112819
|
-
"description": "A separate family from `Input`'s `type=\"number\"`. It renders two buttons,\nbinds four keys `Input` does not, and handles clamping and stepping.\n\nThe field is `type=\"text\"` with `inputmode=\"decimal\"`. Tested in a real\nbrowser, `type=\"number\"` fails in three ways:\n- Typing `12e` gives a `.value` of `\"\"`, so the element cannot see what you\n typed. A `type=\"text\"` field keeps `\"12e\"`.\n- The mouse wheel over a focused field changes the value, for example from 5\n to 4, when you only meant to scroll the page.\n- `selectionStart` is `null`, so the caret cannot be managed.\n\n`inputmode=\"decimal\"` keeps the numeric keypad on phones.\n\n`format-options` shows the number with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, while the field is not being edited. Focus\nshows the number itself, and a typed `$1,200` or `25%` is read back with the\nsame options. The value stays the plain number: `1200`, or `0.25` for 25%.\nThe locale's group separators are read in every field, so `1,234` is a\nnumber in `en-US`.\n\nThe field and its two buttons sit in a `role=\"group\"
|
|
112965
|
+
"description": "A separate family from `Input`'s `type=\"number\"`. It renders two buttons,\nbinds four keys `Input` does not, and handles clamping and stepping.\n\nThe field is `type=\"text\"` with `inputmode=\"decimal\"`. Tested in a real\nbrowser, `type=\"number\"` fails in three ways:\n- Typing `12e` gives a `.value` of `\"\"`, so the element cannot see what you\n typed. A `type=\"text\"` field keeps `\"12e\"`.\n- The mouse wheel over a focused field changes the value, for example from 5\n to 4, when you only meant to scroll the page.\n- `selectionStart` is `null`, so the caret cannot be managed.\n\n`inputmode=\"decimal\"` keeps the numeric keypad on phones.\n\n`format-options` shows the number with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, while the field is not being edited. Focus\nshows the number itself, and a typed `$1,200` or `25%` is read back with the\nsame options. The value stays the plain number: `1200`, or `0.25` for 25%.\nThe locale's group separators are read in every field, so `1,234` is a\nnumber in `en-US`.\n\nThe field and its two buttons sit in a `role=\"group\"` named by the label,\nand the field carries `role-label`, \"number field\" in English, as its\n`aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text\nfield, with no `role=\"spinbutton\"`, which VoiceOver reads as a slider you\ncannot type in, and no role description, so VoiceOver says the field is\nrequired. React Aria's NumberField does the same.\n\nValidity follows the platform's rules: `min`, `max`, and `step` are checked\nand reported through the host's own `setValidity`, under the platform's flag\nnames.\n\nStepping is separate from typing, so a number is not corrected while you type\nit. While you type, the form holds the number the text reads as, so a field\nshowing `$2,500.50` gives the form 2500.5, and text that is not a number\ngives it nothing, as a native number field does.\n\nHolding a stepper button down steps once, then again after 400 milliseconds,\nthen every 60 milliseconds until you let go, as React Aria's NumberField does.\n\n**Keyboard.** The field is one tab stop, and the stepper buttons are not in\nthe tab order.\n\n| Key | What it does |\n|---|---|\n| Up, Down | Steps the value up or down by `step`. |\n| Page Up, Page Down | Steps by `large-step` steps, ten by default. |\n| Home, End | Goes to `min` or `max`, where there is one. Without one, moves the caret. |\n| Enter | Commits the typed number and submits the form, as a native field does. |\n\nThe field has `role=\"spinbutton\"` with `aria-valuenow`, `aria-valuemin`,\n`aria-valuemax`, and the formatted text in `aria-valuetext`.",
|
|
112820
112966
|
"name": "HelixHeadlessNumberInput",
|
|
112821
112967
|
"cssParts": [
|
|
112822
112968
|
{
|
|
@@ -113613,7 +113759,7 @@
|
|
|
113613
113759
|
"type": {
|
|
113614
113760
|
"text": "number"
|
|
113615
113761
|
},
|
|
113616
|
-
"description": "The value as a number, or `NaN` while the control is empty.\n\n`NaN` and not zero, which is the trap the platform already avoids: `Number('')`\nis zero, so an empty control would report a number it does not hold and a\nform would submit it."
|
|
113762
|
+
"description": "The value as a number, or `NaN` while the control is empty or does not\nhold a number.\n\nRead in the locale and the format, as the form reads it, so `1,5` typed\nin a locale with a decimal comma is 1.5 here while the form holds 1.5.\n`NaN` and not zero, which is the trap the platform already avoids: `Number('')`\nis zero, so an empty control would report a number it does not hold and a\nform would submit it."
|
|
113617
113763
|
},
|
|
113618
113764
|
{
|
|
113619
113765
|
"kind": "field",
|
|
@@ -136071,7 +136217,7 @@
|
|
|
136071
136217
|
"declarations": [
|
|
136072
136218
|
{
|
|
136073
136219
|
"kind": "class",
|
|
136074
|
-
"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. 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.\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, in either direction of text. |\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.",
|
|
136220
|
+
"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. 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, in either direction of text. |\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.",
|
|
136075
136221
|
"name": "HelixHeadlessSelect",
|
|
136076
136222
|
"cssProperties": [
|
|
136077
136223
|
{
|
|
@@ -136427,6 +136573,16 @@
|
|
|
136427
136573
|
"description": "The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`.",
|
|
136428
136574
|
"readonly": true
|
|
136429
136575
|
},
|
|
136576
|
+
{
|
|
136577
|
+
"kind": "field",
|
|
136578
|
+
"name": "chosen",
|
|
136579
|
+
"type": {
|
|
136580
|
+
"text": "string[]"
|
|
136581
|
+
},
|
|
136582
|
+
"privacy": "private",
|
|
136583
|
+
"description": "The chosen values, read against the options' values, so an option whose\nvalue holds a comma is one value. See `chosenValues`.",
|
|
136584
|
+
"readonly": true
|
|
136585
|
+
},
|
|
136430
136586
|
{
|
|
136431
136587
|
"kind": "field",
|
|
136432
136588
|
"name": "data",
|
|
@@ -138511,7 +138667,7 @@
|
|
|
138511
138667
|
"text": "string"
|
|
138512
138668
|
},
|
|
138513
138669
|
"default": "''",
|
|
138514
|
-
"description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers.",
|
|
138670
|
+
"description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers. Around content, the name\nis read while `loading` is set, and the loaded content is read as it is.",
|
|
138515
138671
|
"attribute": "label"
|
|
138516
138672
|
},
|
|
138517
138673
|
{
|
|
@@ -138893,7 +139049,7 @@
|
|
|
138893
139049
|
"text": "string"
|
|
138894
139050
|
},
|
|
138895
139051
|
"default": "''",
|
|
138896
|
-
"description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers.",
|
|
139052
|
+
"description": "What is loading, read out as the placeholder's name, such as \"Loading\nprofile\".\n\nAbsent hides the placeholder from screen readers. Around content, the name\nis read while `loading` is set, and the loaded content is read as it is.",
|
|
138897
139053
|
"fieldName": "label"
|
|
138898
139054
|
},
|
|
138899
139055
|
{
|
|
@@ -157287,7 +157443,7 @@
|
|
|
157287
157443
|
"text": "HTMLElement | undefined"
|
|
157288
157444
|
}
|
|
157289
157445
|
},
|
|
157290
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
157446
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
157291
157447
|
"inheritedFrom": {
|
|
157292
157448
|
"name": "MixinDismissible",
|
|
157293
157449
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -159108,7 +159264,7 @@
|
|
|
159108
159264
|
"text": "HTMLElement | undefined"
|
|
159109
159265
|
}
|
|
159110
159266
|
},
|
|
159111
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
159267
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
159112
159268
|
"inheritedFrom": {
|
|
159113
159269
|
"name": "MixinDismissible",
|
|
159114
159270
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -169905,7 +170061,7 @@
|
|
|
169905
170061
|
"text": "HTMLElement | undefined"
|
|
169906
170062
|
}
|
|
169907
170063
|
},
|
|
169908
|
-
"description": "The tab stop after this element on the page, or the one before it at the\nend, for
|
|
170064
|
+
"description": "The tab stop after this element on the page, or the one before it at the\nend, for an element whose removal would drop focus to the body because\nno neighbor of its kind has a control to take it.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
|
|
169909
170065
|
"inheritedFrom": {
|
|
169910
170066
|
"name": "MixinDismissible",
|
|
169911
170067
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -188728,6 +188884,6 @@
|
|
|
188728
188884
|
],
|
|
188729
188885
|
"helix": {
|
|
188730
188886
|
"package": "@fusion.dev/helix-headless",
|
|
188731
|
-
"version": "0.
|
|
188887
|
+
"version": "0.158.0"
|
|
188732
188888
|
}
|
|
188733
188889
|
}
|
|
@@ -39,8 +39,9 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
|
|
|
39
39
|
*
|
|
40
40
|
* Choosing the opener says `helix-select` with its value, and canceling it
|
|
41
41
|
* keeps the page that is shown. The list then shows the page, named by the
|
|
42
|
-
* opener's words, and
|
|
43
|
-
*
|
|
42
|
+
* opener's words, and a screen reader hears those words. Backspace in an empty
|
|
43
|
+
* filter goes back, and a screen reader hears the name of the page it goes
|
|
44
|
+
* back to. `page` says which page is shown.
|
|
44
45
|
*
|
|
45
46
|
* The filter is cleared when the palette closes, so each opening starts from
|
|
46
47
|
* the full list. Combobox and Select do the same. As typing narrows the list, a
|
|
@@ -62,9 +63,10 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
|
|
|
62
63
|
* | Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |
|
|
63
64
|
*
|
|
64
65
|
* **ARIA.** The palette is a modal `dialog` named by `label`, or with
|
|
65
|
-
* `inline` no dialog at all. Inside it the filter field is a
|
|
66
|
-
* `aria-
|
|
67
|
-
* `
|
|
66
|
+
* `inline` no dialog at all. Inside it the filter field is a text field with
|
|
67
|
+
* `aria-autocomplete="list"`, `aria-controls` on the list, and
|
|
68
|
+
* `aria-activedescendant` on the highlighted command, as the field of React
|
|
69
|
+
* Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
|
|
68
70
|
* the loading text are said in a polite live region.
|
|
69
71
|
*
|
|
70
72
|
* @since 0.1.0
|
|
@@ -109,6 +111,7 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
|
|
|
109
111
|
* @csspart listbox-loading - The text shown while the commands are loading.
|
|
110
112
|
* @csspart listbox-search - The region that holds the filter field.
|
|
111
113
|
* @csspart listbox-search-field - The filter field.
|
|
114
|
+
* @csspart live - The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.
|
|
112
115
|
*
|
|
113
116
|
* @cssstate empty - The list shows no commands: there are none, or typing hid every one.
|
|
114
117
|
* @cssstate error - While `load-error` is set.
|
|
@@ -132,6 +135,15 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
|
|
|
132
135
|
* `0` filters on every keystroke. See Listbox's `filter-delay`.
|
|
133
136
|
*/
|
|
134
137
|
filterDelay: number;
|
|
138
|
+
/**
|
|
139
|
+
* Whether a command is kept by the filter: a function given the command's
|
|
140
|
+
* words and the filter, trimmed, that returns `true` to keep it showing, as
|
|
141
|
+
* React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
|
|
142
|
+
*
|
|
143
|
+
* Absent, a command is kept where its words hold the filter, in any case. A
|
|
144
|
+
* property only, there being no way to write a function in markup.
|
|
145
|
+
*/
|
|
146
|
+
filterMatch?: ((text: string, filter: string) => boolean) | undefined;
|
|
135
147
|
/**
|
|
136
148
|
* The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
|
|
137
149
|
* in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
|
|
@@ -270,6 +282,8 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
|
|
|
270
282
|
* filter starts empty, as it does on opening, and the field keeps focus.
|
|
271
283
|
*/
|
|
272
284
|
private goTo;
|
|
285
|
+
/** The region the page shown is said from as it changes. */
|
|
286
|
+
private readonly status;
|
|
273
287
|
/** Backspace in an empty filter, on a page, goes back to the page before. */
|
|
274
288
|
private readonly handleBack;
|
|
275
289
|
/**
|