@fusion.dev/helix-headless 0.156.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 +1085 -66
- 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/drilldown/item/drilldown-item.d.ts +49 -1
- package/dist/drilldown/item/drilldown-item.js +77 -17
- package/dist/drilldown/root/drilldown-root.d.ts +45 -5
- package/dist/drilldown/root/drilldown-root.js +51 -5
- package/dist/element-events.generated.js +1 -1
- package/dist/filter-input/menu/filter-menu.d.ts +1 -0
- package/dist/filter-input/menu/filter-menu.js +4 -4
- 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/megamenu/root/megamenu-root.d.ts +50 -13
- package/dist/megamenu/root/megamenu-root.js +44 -6
- package/dist/menu/item/menu-item.d.ts +24 -1
- package/dist/menu/item/menu-item.js +42 -2
- package/dist/menu/root/menu-root.d.ts +126 -11
- package/dist/menu/root/menu-root.js +336 -26
- package/dist/notifications/root/notifications-root.d.ts +20 -0
- package/dist/notifications/root/notifications-root.js +32 -1
- 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/dist/toast/item/toast-item.d.ts +26 -0
- package/dist/toast/item/toast-item.js +55 -3
- package/dist/toast/root/toast-root.d.ts +32 -0
- package/dist/toast/root/toast-root.js +47 -2
- package/dist/video/root/video-root.d.ts +1 -0
- package/dist/video/root/video-root.js +9 -9
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +1 -0
- package/dist/video-playlist/menu/video-playlist-menu.js +1 -1
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +653 -74
- package/types/vue.d.ts +133 -16
- package/types/words.d.ts +14 -0
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."
|
|
@@ -59512,11 +59539,11 @@
|
|
|
59512
59539
|
"declarations": [
|
|
59513
59540
|
{
|
|
59514
59541
|
"kind": "class",
|
|
59515
|
-
"description": "A row that opens a page contains that page: the page's rows are this row's\nown children, assigned to the `page` slot. There are no ids to wire, and\nmoving a row moves its page with it.\n\nWhat the item renders depends on the stack:\n\n- On the page that is showing, it renders its row.\n- When its own page is showing, it renders only that page's rows. Its row\n belongs to the page above.\n- When a page further down its own is showing, it renders its page's slot\n alone, so the rows below reach the page.\n- Otherwise it renders nothing. The rows stay in the light DOM untouched, so\n there is no state to keep.\n\nChoosing a row dispatches an event, and the stack decides whether that drills\nin or runs a command.\n\nA row that opens a page shows a caret after its text and sets\n`aria-haspopup`, the same way `Menu` marks a row with a submenu. The server\nrender leaves both out, because the server cannot see the children.\n\nThe row is named by its label alone. Words in `description`, a line under\nthe label, and in `end` describe it instead, through `aria-describedby`, as\n`Menu.Item` does: a reader hears \"Theme\", then \"Dark\".",
|
|
59542
|
+
"description": "A row that opens a page contains that page: the page's rows are this row's\nown children, assigned to the `page` slot. There are no ids to wire, and\nmoving a row moves its page with it.\n\nWhat the item renders depends on the stack:\n\n- On the page that is showing, it renders its row.\n- When its own page is showing, it renders only that page's rows. Its row\n belongs to the page above.\n- When a page further down its own is showing, it renders its page's slot\n alone, so the rows below reach the page.\n- Otherwise it renders nothing. The rows stay in the light DOM untouched, so\n there is no state to keep.\n\nChoosing a row dispatches an event, and the stack decides whether that drills\nin or runs a command.\n\nA row that opens a page shows a caret after its text and sets\n`aria-haspopup`, the same way `Menu` marks a row with a submenu. The server\nrender leaves both out, because the server cannot see the children.\n\n**A row with an `href` is a link.** The row itself renders as an `<a>`\ncarrying `menuitem`, as `Menu.Item` does, so a middle click, a modified\nclick and the status bar keep working. Enter follows it, and Space does too.\nChoosing it fires `helix-select` first: cancel the event and the link is not\nfollowed, so a router can take the navigation. A row that opens a page, or a\ndisabled row, renders no link.\n\nA development build warns when a row has no words to be named by, such as a\nrow holding only an icon with no label.\n\nThe row is named by its label alone. Words in `description`, a line under\nthe label, and in `end` describe it instead, through `aria-describedby`, as\n`Menu.Item` does: a reader hears \"Theme\", then \"Dark\".",
|
|
59516
59543
|
"name": "HelixHeadlessDrilldownItem",
|
|
59517
59544
|
"cssParts": [
|
|
59518
59545
|
{
|
|
59519
|
-
"description": "The row itself.",
|
|
59546
|
+
"description": "The row itself, which is an `<a>` where `href` is set.",
|
|
59520
59547
|
"name": "item"
|
|
59521
59548
|
},
|
|
59522
59549
|
{
|
|
@@ -59566,6 +59593,16 @@
|
|
|
59566
59593
|
"attribute": "disabled",
|
|
59567
59594
|
"reflects": true
|
|
59568
59595
|
},
|
|
59596
|
+
{
|
|
59597
|
+
"kind": "field",
|
|
59598
|
+
"name": "download",
|
|
59599
|
+
"type": {
|
|
59600
|
+
"text": "boolean"
|
|
59601
|
+
},
|
|
59602
|
+
"default": "false",
|
|
59603
|
+
"description": "Whether the link downloads the file when the row is chosen. Only\nmeaningful beside an `href`, and only for a file served from this origin.",
|
|
59604
|
+
"attribute": "download"
|
|
59605
|
+
},
|
|
59569
59606
|
{
|
|
59570
59607
|
"kind": "field",
|
|
59571
59608
|
"name": "focusable",
|
|
@@ -59575,6 +59612,36 @@
|
|
|
59575
59612
|
"default": "false",
|
|
59576
59613
|
"description": "Whether this row holds the region's tab stop. Set by the drill-down.\n\nA drill-down keeps one stop and moves within it on the arrows, so every\nother row is at `-1`. Leave it off every row, including the first, and\nnothing in the region is tab-reachable: the keyboard cannot get in without\nfirst clicking something with a pointer.\n\nNo attribute, the same as `Button`'s: this is coordination between\nelements, and writing `tabindex` onto a host the consumer rendered is a\nchange a React consumer's hydration reports and does not patch up. The stop\nlands inside this shadow root instead."
|
|
59577
59614
|
},
|
|
59615
|
+
{
|
|
59616
|
+
"kind": "field",
|
|
59617
|
+
"name": "href",
|
|
59618
|
+
"type": {
|
|
59619
|
+
"text": "string"
|
|
59620
|
+
},
|
|
59621
|
+
"default": "''",
|
|
59622
|
+
"description": "The URL the row links to. Setting it renders the row as a link, unless the\nrow opens a page or is disabled.",
|
|
59623
|
+
"attribute": "href"
|
|
59624
|
+
},
|
|
59625
|
+
{
|
|
59626
|
+
"kind": "field",
|
|
59627
|
+
"name": "rel",
|
|
59628
|
+
"type": {
|
|
59629
|
+
"text": "string"
|
|
59630
|
+
},
|
|
59631
|
+
"default": "''",
|
|
59632
|
+
"description": "The link's `rel`. Set it whenever you set `target=\"_blank\"`.",
|
|
59633
|
+
"attribute": "rel"
|
|
59634
|
+
},
|
|
59635
|
+
{
|
|
59636
|
+
"kind": "field",
|
|
59637
|
+
"name": "target",
|
|
59638
|
+
"type": {
|
|
59639
|
+
"text": "string"
|
|
59640
|
+
},
|
|
59641
|
+
"default": "''",
|
|
59642
|
+
"description": "Where the link opens, for rows that should open outside the current page.",
|
|
59643
|
+
"attribute": "target"
|
|
59644
|
+
},
|
|
59578
59645
|
{
|
|
59579
59646
|
"kind": "field",
|
|
59580
59647
|
"name": "value",
|
|
@@ -59683,6 +59750,41 @@
|
|
|
59683
59750
|
"text": "select() => void"
|
|
59684
59751
|
}
|
|
59685
59752
|
},
|
|
59753
|
+
{
|
|
59754
|
+
"kind": "method",
|
|
59755
|
+
"name": "choose",
|
|
59756
|
+
"privacy": "private",
|
|
59757
|
+
"return": {
|
|
59758
|
+
"type": {
|
|
59759
|
+
"text": "boolean"
|
|
59760
|
+
}
|
|
59761
|
+
},
|
|
59762
|
+
"description": "Fires `helix-select`, and returns whether the choice stood."
|
|
59763
|
+
},
|
|
59764
|
+
{
|
|
59765
|
+
"kind": "field",
|
|
59766
|
+
"name": "handleClick",
|
|
59767
|
+
"privacy": "private",
|
|
59768
|
+
"readonly": true,
|
|
59769
|
+
"description": "A press on the row. On a link, a refused `helix-select` stops the link\nfrom being followed, so a router can take the navigation."
|
|
59770
|
+
},
|
|
59771
|
+
{
|
|
59772
|
+
"kind": "field",
|
|
59773
|
+
"name": "handleLinkKeydown",
|
|
59774
|
+
"privacy": "private",
|
|
59775
|
+
"readonly": true,
|
|
59776
|
+
"description": "Space on a link presses it, which an anchor does not do on its own. Enter\nis the anchor's, which fires a click and follows the link."
|
|
59777
|
+
},
|
|
59778
|
+
{
|
|
59779
|
+
"kind": "field",
|
|
59780
|
+
"name": "linked",
|
|
59781
|
+
"type": {
|
|
59782
|
+
"text": "boolean"
|
|
59783
|
+
},
|
|
59784
|
+
"privacy": "private",
|
|
59785
|
+
"description": "Whether the row renders as a link.",
|
|
59786
|
+
"readonly": true
|
|
59787
|
+
},
|
|
59686
59788
|
{
|
|
59687
59789
|
"kind": "method",
|
|
59688
59790
|
"name": "renderMark",
|
|
@@ -60054,6 +60156,42 @@
|
|
|
60054
60156
|
"description": "Whether the row can be reached at all.",
|
|
60055
60157
|
"fieldName": "disabled"
|
|
60056
60158
|
},
|
|
60159
|
+
{
|
|
60160
|
+
"name": "download",
|
|
60161
|
+
"type": {
|
|
60162
|
+
"text": "boolean"
|
|
60163
|
+
},
|
|
60164
|
+
"default": "false",
|
|
60165
|
+
"description": "Whether the link downloads the file when the row is chosen. Only\nmeaningful beside an `href`, and only for a file served from this origin.",
|
|
60166
|
+
"fieldName": "download"
|
|
60167
|
+
},
|
|
60168
|
+
{
|
|
60169
|
+
"name": "href",
|
|
60170
|
+
"type": {
|
|
60171
|
+
"text": "string"
|
|
60172
|
+
},
|
|
60173
|
+
"default": "''",
|
|
60174
|
+
"description": "The URL the row links to. Setting it renders the row as a link, unless the\nrow opens a page or is disabled.",
|
|
60175
|
+
"fieldName": "href"
|
|
60176
|
+
},
|
|
60177
|
+
{
|
|
60178
|
+
"name": "rel",
|
|
60179
|
+
"type": {
|
|
60180
|
+
"text": "string"
|
|
60181
|
+
},
|
|
60182
|
+
"default": "''",
|
|
60183
|
+
"description": "The link's `rel`. Set it whenever you set `target=\"_blank\"`.",
|
|
60184
|
+
"fieldName": "rel"
|
|
60185
|
+
},
|
|
60186
|
+
{
|
|
60187
|
+
"name": "target",
|
|
60188
|
+
"type": {
|
|
60189
|
+
"text": "string"
|
|
60190
|
+
},
|
|
60191
|
+
"default": "''",
|
|
60192
|
+
"description": "Where the link opens, for rows that should open outside the current page.",
|
|
60193
|
+
"fieldName": "target"
|
|
60194
|
+
},
|
|
60057
60195
|
{
|
|
60058
60196
|
"name": "value",
|
|
60059
60197
|
"type": {
|
|
@@ -60122,7 +60260,7 @@
|
|
|
60122
60260
|
"declarations": [
|
|
60123
60261
|
{
|
|
60124
60262
|
"kind": "class",
|
|
60125
|
-
"description": "One panel whose content changes as you move between pages. Use it where there\nis no room for a second column, such as on a phone, or on a touch screen with\nno hover to open one.\n\nIt is a region that stays where you put it, such as inside a drawer, a\nsidebar, or a settings panel. A `Menu` opens from a trigger and closes when\nyou are done. `Menu` can drill into pages too, through the same controller.\n\nRows are places to go and commands to run. Nothing here is form-associated\nand nothing is submitted. To choose a value, use a `Listbox`.\n\nA row that opens a page contains that page, so the stack holds one reference\nand reads the rest from the DOM. The behavior lives in `DrilldownController`,\nwhich `Menu` shares.\n\nAfter each move the host carries `data-direction`, `forward` into a page or\n`back` out of one, and records `:state(forward)` or `:state(back)`, so a\nstylesheet can slide the new page in from the side the reader is going. Both\nare written again on every move, so an animation keyed on them runs for each\npage, two moves the same way included. The styled tier slides the page and\nswaps it at once under `prefers-reduced-motion`.\n\
|
|
60263
|
+
"description": "One panel whose content changes as you move between pages. Use it where there\nis no room for a second column, such as on a phone, or on a touch screen with\nno hover to open one.\n\nIt is a region that stays where you put it, such as inside a drawer, a\nsidebar, or a settings panel. A `Menu` opens from a trigger and closes when\nyou are done. `Menu` can drill into pages too, through the same controller.\n\nRows are places to go and commands to run. Nothing here is form-associated\nand nothing is submitted. To choose a value, use a `Listbox`.\n\nA row that opens a page contains that page, so the stack holds one reference\nand reads the rest from the DOM. The behavior lives in `DrilldownController`,\nwhich `Menu` shares.\n\n**`page` is the page showing**, as the `value` of the row that opens it,\nand empty on the top page. Set it to show a page, such as one a link to a\nsettings screen names. A reader's move updates it, and `helix-navigate`\ncomes first, so you can refuse the move or take it yourself.\n\nAfter each move the host carries `data-direction`, `forward` into a page or\n`back` out of one, and records `:state(forward)` or `:state(back)`, so a\nstylesheet can slide the new page in from the side the reader is going. Both\nare written again on every move, so an animation keyed on them runs for each\npage, two moves the same way included. The styled tier slides the page and\nswaps it at once under `prefers-reduced-motion`.\n\n**Keyboard.** The drilldown is one tab stop, on the row last focused.\n\n| Key | What it does |\n|---|---|\n| Down Arrow, Up Arrow | Moves to the next or the previous row. |\n| Home, End | Moves to the first or the last row. |\n| A letter | Moves to the next row whose name starts with it. |\n| Enter, Space | Chooses the row: opens its page, follows its link, or sends `helix-select`. |\n| Right Arrow | Opens the row's page. Left Arrow on a right-to-left page. |\n| Left Arrow, Escape | Goes back one page, with focus on the row that opened it. Right Arrow on a right-to-left page. |\n\nThe rows of the page showing are a `menu`, named by `label` on the top page\nand by the page's title below it.\n\n**`navigation` makes it a site's navigation.** The host is a `navigation`\nlandmark named by `label`, each page is a list, and each row is a list item\nholding a link or a button, as the APG's disclosure navigation is built,\nso a reader meets places to go in place of a menu of commands. The keys stay\nthe same. The back button and the title sit above\nthe menu. Disabled rows stay reachable with the arrow keys, and typing a\nletter moves to the next row whose name starts with it.",
|
|
60126
60264
|
"name": "HelixHeadlessDrilldown",
|
|
60127
60265
|
"cssParts": [
|
|
60128
60266
|
{
|
|
@@ -60209,6 +60347,26 @@
|
|
|
60209
60347
|
"words": true
|
|
60210
60348
|
}
|
|
60211
60349
|
},
|
|
60350
|
+
{
|
|
60351
|
+
"kind": "field",
|
|
60352
|
+
"name": "navigation",
|
|
60353
|
+
"type": {
|
|
60354
|
+
"text": "boolean"
|
|
60355
|
+
},
|
|
60356
|
+
"default": "false",
|
|
60357
|
+
"description": "Whether the drilldown is a site's navigation: a `navigation` landmark\nnamed by `label`, whose pages are lists of links. Without it, each page is\na `menu`.",
|
|
60358
|
+
"attribute": "navigation"
|
|
60359
|
+
},
|
|
60360
|
+
{
|
|
60361
|
+
"kind": "field",
|
|
60362
|
+
"name": "page",
|
|
60363
|
+
"type": {
|
|
60364
|
+
"text": "string"
|
|
60365
|
+
},
|
|
60366
|
+
"default": "''",
|
|
60367
|
+
"description": "The page showing, as the `value` of the row that opens it. Empty is the\ntop page. Setting it shows that page, and a value no row with a page has\nshows the top page.",
|
|
60368
|
+
"attribute": "page"
|
|
60369
|
+
},
|
|
60212
60370
|
{
|
|
60213
60371
|
"kind": "field",
|
|
60214
60372
|
"name": "direction",
|
|
@@ -60272,6 +60430,44 @@
|
|
|
60272
60430
|
},
|
|
60273
60431
|
"description": "Puts the region's one tab stop on the first row of the page showing.\n\nOne row holds the stop and the arrows move within, which is the roving\npattern the toolbar uses and the one a `menu` wants. Every row at `-1` is\na region the keyboard cannot get into at all without a pointer first.\n\nCalled after every update, because the set changes with the page: drilling\nin replaces the rows outright, and the stop has to land on rows that are\nactually showing."
|
|
60274
60432
|
},
|
|
60433
|
+
{
|
|
60434
|
+
"kind": "method",
|
|
60435
|
+
"name": "navigate",
|
|
60436
|
+
"privacy": "private",
|
|
60437
|
+
"return": {
|
|
60438
|
+
"type": {
|
|
60439
|
+
"text": "boolean"
|
|
60440
|
+
}
|
|
60441
|
+
},
|
|
60442
|
+
"parameters": [
|
|
60443
|
+
{
|
|
60444
|
+
"name": "to",
|
|
60445
|
+
"type": {
|
|
60446
|
+
"text": "HelixHeadlessDrilldownItem | null"
|
|
60447
|
+
}
|
|
60448
|
+
}
|
|
60449
|
+
],
|
|
60450
|
+
"description": "Asks before a reader's move to a page, the row's or the top one, and\nreturns whether the move may go ahead."
|
|
60451
|
+
},
|
|
60452
|
+
{
|
|
60453
|
+
"kind": "method",
|
|
60454
|
+
"name": "holderOf",
|
|
60455
|
+
"privacy": "private",
|
|
60456
|
+
"return": {
|
|
60457
|
+
"type": {
|
|
60458
|
+
"text": "HelixHeadlessDrilldownItem | null"
|
|
60459
|
+
}
|
|
60460
|
+
},
|
|
60461
|
+
"parameters": [
|
|
60462
|
+
{
|
|
60463
|
+
"name": "row",
|
|
60464
|
+
"type": {
|
|
60465
|
+
"text": "HelixHeadlessDrilldownItem"
|
|
60466
|
+
}
|
|
60467
|
+
}
|
|
60468
|
+
],
|
|
60469
|
+
"description": "The row whose page holds a row, or null for the top page."
|
|
60470
|
+
},
|
|
60275
60471
|
{
|
|
60276
60472
|
"kind": "method",
|
|
60277
60473
|
"name": "enter",
|
|
@@ -60304,6 +60500,25 @@
|
|
|
60304
60500
|
"text": "back() => boolean"
|
|
60305
60501
|
}
|
|
60306
60502
|
},
|
|
60503
|
+
{
|
|
60504
|
+
"kind": "method",
|
|
60505
|
+
"name": "showPage",
|
|
60506
|
+
"privacy": "private",
|
|
60507
|
+
"return": {
|
|
60508
|
+
"type": {
|
|
60509
|
+
"text": "void"
|
|
60510
|
+
}
|
|
60511
|
+
},
|
|
60512
|
+
"parameters": [
|
|
60513
|
+
{
|
|
60514
|
+
"name": "value",
|
|
60515
|
+
"type": {
|
|
60516
|
+
"text": "string"
|
|
60517
|
+
}
|
|
60518
|
+
}
|
|
60519
|
+
],
|
|
60520
|
+
"description": "Shows the page of the row with a value, or the top page where no row with a page has it."
|
|
60521
|
+
},
|
|
60307
60522
|
{
|
|
60308
60523
|
"kind": "field",
|
|
60309
60524
|
"name": "handleFocusIn",
|
|
@@ -60924,6 +61139,14 @@
|
|
|
60924
61139
|
}
|
|
60925
61140
|
],
|
|
60926
61141
|
"events": [
|
|
61142
|
+
{
|
|
61143
|
+
"type": {
|
|
61144
|
+
"text": "HelixNavigateEvent"
|
|
61145
|
+
},
|
|
61146
|
+
"description": "Fired before a reader moves into a page or back out of one. `detail.value` is the `value` of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing.",
|
|
61147
|
+
"name": "helix-navigate",
|
|
61148
|
+
"reactProp": "onhelix-navigate"
|
|
61149
|
+
},
|
|
60927
61150
|
{
|
|
60928
61151
|
"type": {
|
|
60929
61152
|
"text": "HelixSelectEvent"
|
|
@@ -60952,6 +61175,24 @@
|
|
|
60952
61175
|
"description": "The text of the back button.",
|
|
60953
61176
|
"fieldName": "backLabel"
|
|
60954
61177
|
},
|
|
61178
|
+
{
|
|
61179
|
+
"name": "navigation",
|
|
61180
|
+
"type": {
|
|
61181
|
+
"text": "boolean"
|
|
61182
|
+
},
|
|
61183
|
+
"default": "false",
|
|
61184
|
+
"description": "Whether the drilldown is a site's navigation: a `navigation` landmark\nnamed by `label`, whose pages are lists of links. Without it, each page is\na `menu`.",
|
|
61185
|
+
"fieldName": "navigation"
|
|
61186
|
+
},
|
|
61187
|
+
{
|
|
61188
|
+
"name": "page",
|
|
61189
|
+
"type": {
|
|
61190
|
+
"text": "string"
|
|
61191
|
+
},
|
|
61192
|
+
"default": "''",
|
|
61193
|
+
"description": "The page showing, as the `value` of the row that opens it. Empty is the\ntop page. Setting it shows that page, and a value no row with a page has\nshows the top page.",
|
|
61194
|
+
"fieldName": "page"
|
|
61195
|
+
},
|
|
60955
61196
|
{
|
|
60956
61197
|
"name": "empty-text",
|
|
60957
61198
|
"type": {
|
|
@@ -64309,7 +64550,7 @@
|
|
|
64309
64550
|
"text": "HTMLElement | undefined"
|
|
64310
64551
|
}
|
|
64311
64552
|
},
|
|
64312
|
-
"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.",
|
|
64313
64554
|
"inheritedFrom": {
|
|
64314
64555
|
"name": "MixinDismissible",
|
|
64315
64556
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -65511,6 +65752,10 @@
|
|
|
65511
65752
|
"description": "The leading column.",
|
|
65512
65753
|
"name": "entry-start"
|
|
65513
65754
|
},
|
|
65755
|
+
{
|
|
65756
|
+
"description": "The panel a row's submenu opens in beside it. The filter menu's rows have none.",
|
|
65757
|
+
"name": "entry-surface"
|
|
65758
|
+
},
|
|
65514
65759
|
{
|
|
65515
65760
|
"description": "The menu the fields are offered in.",
|
|
65516
65761
|
"name": "menu"
|
|
@@ -88415,7 +88660,7 @@
|
|
|
88415
88660
|
"text": "boolean"
|
|
88416
88661
|
},
|
|
88417
88662
|
"default": "false",
|
|
88418
|
-
"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.",
|
|
88419
88664
|
"attribute": "disabled",
|
|
88420
88665
|
"reflects": true
|
|
88421
88666
|
},
|
|
@@ -88471,6 +88716,15 @@
|
|
|
88471
88716
|
},
|
|
88472
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."
|
|
88473
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
|
+
},
|
|
88474
88728
|
{
|
|
88475
88729
|
"kind": "field",
|
|
88476
88730
|
"name": "target",
|
|
@@ -88520,6 +88774,13 @@
|
|
|
88520
88774
|
"description": "Whether a list with `selection-mode` holds this row, which makes it a row of a grid.",
|
|
88521
88775
|
"readonly": true
|
|
88522
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
|
+
},
|
|
88523
88784
|
{
|
|
88524
88785
|
"kind": "method",
|
|
88525
88786
|
"name": "focusItem",
|
|
@@ -88920,7 +89181,7 @@
|
|
|
88920
89181
|
"text": "boolean"
|
|
88921
89182
|
},
|
|
88922
89183
|
"default": "false",
|
|
88923
|
-
"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.",
|
|
88924
89185
|
"fieldName": "disabled"
|
|
88925
89186
|
},
|
|
88926
89187
|
{
|
|
@@ -88973,6 +89234,10 @@
|
|
|
88973
89234
|
"description": "The row being moved goes before this one when it is dropped.",
|
|
88974
89235
|
"name": "drop-before"
|
|
88975
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
|
+
},
|
|
88976
89241
|
{
|
|
88977
89242
|
"description": "The row is selected, in a list that selects.",
|
|
88978
89243
|
"name": "selected"
|
|
@@ -89080,7 +89345,7 @@
|
|
|
89080
89345
|
"declarations": [
|
|
89081
89346
|
{
|
|
89082
89347
|
"kind": "class",
|
|
89083
|
-
"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`.",
|
|
89084
89349
|
"name": "HelixHeadlessList",
|
|
89085
89350
|
"cssProperties": [
|
|
89086
89351
|
{
|
|
@@ -89148,6 +89413,15 @@
|
|
|
89148
89413
|
"words": true
|
|
89149
89414
|
}
|
|
89150
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
|
+
},
|
|
89151
89425
|
{
|
|
89152
89426
|
"kind": "field",
|
|
89153
89427
|
"name": "droppedLabel",
|
|
@@ -89293,6 +89567,35 @@
|
|
|
89293
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.",
|
|
89294
89568
|
"attribute": "selection-behavior"
|
|
89295
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
|
+
},
|
|
89296
89599
|
{
|
|
89297
89600
|
"kind": "field",
|
|
89298
89601
|
"name": "selectionMode",
|
|
@@ -89340,6 +89643,16 @@
|
|
|
89340
89643
|
"privacy": "private",
|
|
89341
89644
|
"description": "The row the reader was last on, which keeps the tab stop."
|
|
89342
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
|
+
},
|
|
89343
89656
|
{
|
|
89344
89657
|
"kind": "field",
|
|
89345
89658
|
"name": "anchor",
|
|
@@ -89539,6 +89852,25 @@
|
|
|
89539
89852
|
},
|
|
89540
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."
|
|
89541
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
|
+
},
|
|
89542
89874
|
{
|
|
89543
89875
|
"kind": "method",
|
|
89544
89876
|
"name": "rowOf",
|
|
@@ -90263,6 +90595,14 @@
|
|
|
90263
90595
|
"description": "What screen readers hear when a held row is put back, or a move is\nrefused, in a `reorderable` list.",
|
|
90264
90596
|
"fieldName": "canceledLabel"
|
|
90265
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
|
+
},
|
|
90266
90606
|
{
|
|
90267
90607
|
"name": "dropped-label",
|
|
90268
90608
|
"type": {
|
|
@@ -90858,7 +91198,7 @@
|
|
|
90858
91198
|
"declarations": [
|
|
90859
91199
|
{
|
|
90860
91200
|
"kind": "class",
|
|
90861
|
-
"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.",
|
|
90862
91202
|
"name": "HelixHeadlessListbox",
|
|
90863
91203
|
"cssParts": [
|
|
90864
91204
|
{
|
|
@@ -91060,6 +91400,14 @@
|
|
|
91060
91400
|
"words": true
|
|
91061
91401
|
}
|
|
91062
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
|
+
},
|
|
91063
91411
|
{
|
|
91064
91412
|
"kind": "field",
|
|
91065
91413
|
"name": "items",
|
|
@@ -91416,7 +91764,7 @@
|
|
|
91416
91764
|
"type": {
|
|
91417
91765
|
"text": "string[]"
|
|
91418
91766
|
},
|
|
91419
|
-
"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`.",
|
|
91420
91768
|
"readonly": true
|
|
91421
91769
|
},
|
|
91422
91770
|
{
|
|
@@ -100272,7 +100620,7 @@
|
|
|
100272
100620
|
"name": "handlePartChange",
|
|
100273
100621
|
"privacy": "private",
|
|
100274
100622
|
"readonly": true,
|
|
100275
|
-
"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."
|
|
100276
100624
|
},
|
|
100277
100625
|
{
|
|
100278
100626
|
"kind": "field",
|
|
@@ -103676,7 +104024,7 @@
|
|
|
103676
104024
|
"declarations": [
|
|
103677
104025
|
{
|
|
103678
104026
|
"kind": "class",
|
|
103679
|
-
"description": "A disclosure: a button that shows and hides a region of your own links. It\ndoes not use `role=\"menu\"` or `menuitem`, which are for application commands.\nThose roles take over the arrow keys, announce \"menu\" to someone looking for\nnavigation, and put every link inside a role that is not a link. As a\ndisclosure, middle clicks, modified clicks, and the status bar keep working.\nUse `Menu` for a row of commands.\n\nIt renders no links. A router renders its own anchors and cannot render them\ninside this shadow root, so the panel is a slot for the lists and headings\nyou write.\n\nIt opens on hover by default, and a press always opens it too. `open-on` sets\nwhich. Hover is the default because in a navigation bar people expect to move\nalong the row and see each section.\n\nWhen one panel opens in place of another, each says which way the reader\nmoved, as Radix's `data-motion` does. Moving toward the end of the bar, the\none opening is `:state(from-end)` and the one closing is `:state(to-start)`;\nmoving back, they are `:state(from-start)` and `:state(to-end)`. A\nstylesheet slides them on that. Start and end follow the reading direction,\nso on a right-to-left page the end is on the left. A panel that opens or\ncloses on its own carries none of the four. A press on another megamenu's\ntrigger hands over the same way as hovering it.\n\nWhile a panel is open its surface carries its own size, as\n`--megamenu-surface-inline-size` and `--megamenu-surface-block-size`, and a\npanel that took over from another also carries that one's size, as\n`--megamenu-from-inline-size` and `--megamenu-from-block-size`. Radix's\nnavigation menu publishes the same pair from its shared viewport, so a\nstylesheet can grow or shrink one panel into the next.\n\nThe panel's default slot is the `columns` part and draws no box, so a sheet\ncan give the columns one of their own. While a panel is open, an\n`indicator` slot is rendered beside its trigger, as Radix's indicator\nmarks the open one: slot a mark of your own, such as a bar or an arrow\npointing at the panel, and it shows only while the panel is open. The styled\ntier rests it on the trigger's bottom edge.\n\nLeft and Right Arrow move between the triggers of the megamenus beside this\none, and Home and End go to the first and the last, as Radix's navigation\nmenu does. In a `Navigation`, which holds them in a slot, the arrows are the\nnavigation's, and move between its destinations under its `arrows`. Down Arrow on the trigger of an open panel moves\nfocus to the panel's first link, Escape closes the panel and returns focus\nto its trigger, and Tab moves through the panel's links and closes it on the\nway out. The trigger says `aria-expanded`, and the panel is a group named by\n`label
|
|
104027
|
+
"description": "A disclosure: a button that shows and hides a region of your own links. It\ndoes not use `role=\"menu\"` or `menuitem`, which are for application commands.\nThose roles take over the arrow keys, announce \"menu\" to someone looking for\nnavigation, and put every link inside a role that is not a link. As a\ndisclosure, middle clicks, modified clicks, and the status bar keep working.\nUse `Menu` for a row of commands.\n\nIt renders no links. A router renders its own anchors and cannot render them\ninside this shadow root, so the panel is a slot for the lists and headings\nyou write.\n\nIt opens on hover by default, and a press always opens it too. `open-on` sets\nwhich. Hover is the default because in a navigation bar people expect to move\nalong the row and see each section. A pointer resting on the trigger opens\nthe panel after `open-delay`, and leaving closes it after `close-delay`. Moving\nfrom one open panel's trigger to another's opens the next at once, as Radix's\n`skipDelayDuration` does.\n\nWhen one panel opens in place of another, each says which way the reader\nmoved, as Radix's `data-motion` does. Moving toward the end of the bar, the\none opening is `:state(from-end)` and the one closing is `:state(to-start)`;\nmoving back, they are `:state(from-start)` and `:state(to-end)`. A\nstylesheet slides them on that. Start and end follow the reading direction,\nso on a right-to-left page the end is on the left. A panel that opens or\ncloses on its own carries none of the four. A press on another megamenu's\ntrigger hands over the same way as hovering it.\n\nWhile a panel is open its surface carries its own size, as\n`--megamenu-surface-inline-size` and `--megamenu-surface-block-size`, and a\npanel that took over from another also carries that one's size, as\n`--megamenu-from-inline-size` and `--megamenu-from-block-size`. Radix's\nnavigation menu publishes the same pair from its shared viewport, so a\nstylesheet can grow or shrink one panel into the next.\n\nWhile a link in the panel carries `aria-current=\"page\"`, the host has\n`:state(current)`, so the trigger of the section holding the page you are\non can say so, as Radix's navigation menu marks its active link.\n\nThe panel's default slot is the `columns` part and draws no box, so a sheet\ncan give the columns one of their own. While a panel is open, an\n`indicator` slot is rendered beside its trigger, as Radix's indicator\nmarks the open one: slot a mark of your own, such as a bar or an arrow\npointing at the panel, and it shows only while the panel is open. The styled\ntier rests it on the trigger's bottom edge.\n\nLeft and Right Arrow move between the triggers of the megamenus beside this\none, and Home and End go to the first and the last, as Radix's navigation\nmenu does. In a `Navigation`, which holds them in a slot, the arrows are the\nnavigation's, and move between its destinations under its `arrows`. Down Arrow on the trigger of an open panel moves\nfocus to the panel's first link, Escape closes the panel and returns focus\nto its trigger, and Tab moves through the panel's links and closes it on the\nway out. The trigger says `aria-expanded`, and the panel is a group named by\n`label`.\n\nA Helix trigger, such as `helix-button`, is told whether the panel is open\ninside its own shadow root. On a plain element, such as a `<button>`, the\nmegamenu writes `aria-expanded`, from a frame after its own first render, so\na server's markup is never changed while a framework hydrates it. It never\nwrites it where you wrote `aria-expanded` yourself.",
|
|
103680
104028
|
"name": "HelixHeadlessMegamenu",
|
|
103681
104029
|
"cssProperties": [
|
|
103682
104030
|
{
|
|
@@ -103752,6 +104100,16 @@
|
|
|
103752
104100
|
"description": "The page width, in pixels, below which a card panel is shown as a band. At\nzero, it never is.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
|
|
103753
104101
|
"attribute": "band-below"
|
|
103754
104102
|
},
|
|
104103
|
+
{
|
|
104104
|
+
"kind": "field",
|
|
104105
|
+
"name": "closeDelay",
|
|
104106
|
+
"type": {
|
|
104107
|
+
"text": "number"
|
|
104108
|
+
},
|
|
104109
|
+
"default": "220",
|
|
104110
|
+
"description": "How long a pointer leaving the trigger and the panel waits before the panel\ncloses, in milliseconds. The pointer needs the time to cross from the\ntrigger to the panel.",
|
|
104111
|
+
"attribute": "close-delay"
|
|
104112
|
+
},
|
|
103755
104113
|
{
|
|
103756
104114
|
"kind": "field",
|
|
103757
104115
|
"name": "label",
|
|
@@ -103762,6 +104120,16 @@
|
|
|
103762
104120
|
"description": "The section's name, used for the default trigger and the panel.",
|
|
103763
104121
|
"attribute": "label"
|
|
103764
104122
|
},
|
|
104123
|
+
{
|
|
104124
|
+
"kind": "field",
|
|
104125
|
+
"name": "openDelay",
|
|
104126
|
+
"type": {
|
|
104127
|
+
"text": "number"
|
|
104128
|
+
},
|
|
104129
|
+
"default": "120",
|
|
104130
|
+
"description": "How long a pointer rests on the trigger before the panel opens, in\nmilliseconds, under `open-on=\"hover\"`. A pointer crossing the bar on its\nway somewhere else opens nothing.",
|
|
104131
|
+
"attribute": "open-delay"
|
|
104132
|
+
},
|
|
103765
104133
|
{
|
|
103766
104134
|
"kind": "field",
|
|
103767
104135
|
"name": "openOn",
|
|
@@ -103772,6 +104140,16 @@
|
|
|
103772
104140
|
"description": "Whether hovering over the trigger opens the panel (`hover`), or only a press\ndoes (`click`).\n\nA press always works. This says whether a mouse also opens it by resting on\nthe trigger, and it is the default because that is what a navigation bar\ndoes. `click` is for a trigger that does something else as well, or a panel\nheavy enough that opening it on the way past is rude.",
|
|
103773
104141
|
"attribute": "open-on"
|
|
103774
104142
|
},
|
|
104143
|
+
{
|
|
104144
|
+
"kind": "field",
|
|
104145
|
+
"name": "placement",
|
|
104146
|
+
"type": {
|
|
104147
|
+
"text": "'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'"
|
|
104148
|
+
},
|
|
104149
|
+
"default": "'bottom-start'",
|
|
104150
|
+
"description": "The side of the trigger a card panel opens on, when there is room. It\nmoves if that side does not fit. A band ignores it, since a band spans the\npage under its bar.",
|
|
104151
|
+
"attribute": "placement"
|
|
104152
|
+
},
|
|
103775
104153
|
{
|
|
103776
104154
|
"kind": "field",
|
|
103777
104155
|
"name": "variant",
|
|
@@ -103830,7 +104208,7 @@
|
|
|
103830
104208
|
"name": "panel",
|
|
103831
104209
|
"privacy": "protected",
|
|
103832
104210
|
"readonly": true,
|
|
103833
|
-
"default": "new PopoverController(this, { anchor: () => this.trigger, /* The host, not the panel. A press on the trigger is a press on this element, and counting it as outside would close the panel on the way to the click that toggles it. `Menu` says the same about its own. Every other megamenu too: a press on one of them opens it, and opening it closes this one with a direction. */ boundary: () => [...HelixHeadlessMegamenu.bar.connected], onDismiss: () => this.close(), open: () => this.open, place: () => !this.banded, placement: () =>
|
|
104211
|
+
"default": "new PopoverController(this, { anchor: () => this.trigger, /* The host, not the panel. A press on the trigger is a press on this element, and counting it as outside would close the panel on the way to the click that toggles it. `Menu` says the same about its own. Every other megamenu too: a press on one of them opens it, and opening it closes this one with a direction. */ boundary: () => [...HelixHeadlessMegamenu.bar.connected], onDismiss: () => this.close(), open: () => this.open, place: () => !this.banded, placement: () => this.placement, surface: () => this.partNamed('surface'), })"
|
|
103834
104212
|
},
|
|
103835
104213
|
{
|
|
103836
104214
|
"kind": "method",
|
|
@@ -103841,7 +104219,26 @@
|
|
|
103841
104219
|
"text": "void"
|
|
103842
104220
|
}
|
|
103843
104221
|
},
|
|
103844
|
-
"description": "Tells a slotted trigger the disclosure state
|
|
104222
|
+
"description": "Tells a slotted trigger the disclosure state.\n\nA Helix trigger by property, through `tellDisclosure`. A plain element,\nwhich has no shadow root to keep the state out of the markup, by\n`aria-expanded`, from a frame after the first render, as `Popover` writes\nit. One that already carries `aria-expanded` is the consumer's to keep."
|
|
104223
|
+
},
|
|
104224
|
+
{
|
|
104225
|
+
"kind": "field",
|
|
104226
|
+
"name": "settledOnce",
|
|
104227
|
+
"type": {
|
|
104228
|
+
"text": "boolean"
|
|
104229
|
+
},
|
|
104230
|
+
"privacy": "private",
|
|
104231
|
+
"default": "false",
|
|
104232
|
+
"description": "Whether a frame has passed since the first render, after which a plain trigger may be told."
|
|
104233
|
+
},
|
|
104234
|
+
{
|
|
104235
|
+
"kind": "field",
|
|
104236
|
+
"name": "told",
|
|
104237
|
+
"type": {
|
|
104238
|
+
"text": "Element | undefined"
|
|
104239
|
+
},
|
|
104240
|
+
"privacy": "private",
|
|
104241
|
+
"description": "The plain trigger this megamenu writes `aria-expanded` on."
|
|
103845
104242
|
},
|
|
103846
104243
|
{
|
|
103847
104244
|
"kind": "field",
|
|
@@ -103878,6 +104275,26 @@
|
|
|
103878
104275
|
"readonly": true,
|
|
103879
104276
|
"description": "Down Arrow on the trigger of an open panel moves focus to the panel's first\nlink or control, as Radix's navigation menu does."
|
|
103880
104277
|
},
|
|
104278
|
+
{
|
|
104279
|
+
"kind": "field",
|
|
104280
|
+
"name": "currentWatch",
|
|
104281
|
+
"type": {
|
|
104282
|
+
"text": "MutationObserver | undefined"
|
|
104283
|
+
},
|
|
104284
|
+
"privacy": "private",
|
|
104285
|
+
"description": "Watches the panel's links for the one that is the page you are on."
|
|
104286
|
+
},
|
|
104287
|
+
{
|
|
104288
|
+
"kind": "method",
|
|
104289
|
+
"name": "markCurrent",
|
|
104290
|
+
"privacy": "private",
|
|
104291
|
+
"return": {
|
|
104292
|
+
"type": {
|
|
104293
|
+
"text": "void"
|
|
104294
|
+
}
|
|
104295
|
+
},
|
|
104296
|
+
"description": "Records whether a link in the panel is the page you are on."
|
|
104297
|
+
},
|
|
103881
104298
|
{
|
|
103882
104299
|
"kind": "method",
|
|
103883
104300
|
"name": "close",
|
|
@@ -103911,29 +104328,6 @@
|
|
|
103911
104328
|
},
|
|
103912
104329
|
"description": "The bottom edge of the bar this hangs from.\n\nThe trigger's own bottom is the obvious answer and is the wrong one: a\nheader is taller than the word inside it, so a band starting at the word\nstarts partway up the header, over its lower padding and its border.\nMeasured: trigger bottom 44, header bottom 57, thirteen pixels of header\nwith a band drawn across it.\n\n**The first ancestor as wide as the window, which is a fact and not a tag\nname.** A band spans the viewport, so what it should hang from is whatever\nelse does: that is what makes something a bar. Asking for `AppHeader` by\nname would make this element know about that one, which is the coupling\n`Menu` is careful not to have with `Drilldown`, and would leave a consumer\nwho wrote their own header with a band across it.\n\n`body` ends the walk. It is as wide as the window and is not a bar, and its\nbottom is the foot of the page: without the guard a megamenu on a plain page\nwould put its band down there. Nothing found means nothing to hang from, and\nthe trigger is the honest answer again."
|
|
103913
104330
|
},
|
|
103914
|
-
{
|
|
103915
|
-
"kind": "field",
|
|
103916
|
-
"name": "OPEN_DELAY",
|
|
103917
|
-
"type": {
|
|
103918
|
-
"text": "number"
|
|
103919
|
-
},
|
|
103920
|
-
"privacy": "private",
|
|
103921
|
-
"static": true,
|
|
103922
|
-
"readonly": true,
|
|
103923
|
-
"default": "120",
|
|
103924
|
-
"description": "How long a pointer has to mean it, in milliseconds.\n\nOpening is the shorter wait: too long and the panel feels stuck, too short\nand crossing the bar opens things. Closing is longer because the pointer\nhas to get from the trigger to the panel, and the straight line between\nthem is not the line anybody moves along."
|
|
103925
|
-
},
|
|
103926
|
-
{
|
|
103927
|
-
"kind": "field",
|
|
103928
|
-
"name": "CLOSE_DELAY",
|
|
103929
|
-
"type": {
|
|
103930
|
-
"text": "number"
|
|
103931
|
-
},
|
|
103932
|
-
"privacy": "private",
|
|
103933
|
-
"static": true,
|
|
103934
|
-
"readonly": true,
|
|
103935
|
-
"default": "220"
|
|
103936
|
-
},
|
|
103937
104331
|
{
|
|
103938
104332
|
"kind": "field",
|
|
103939
104333
|
"name": "timer",
|
|
@@ -104599,6 +104993,15 @@
|
|
|
104599
104993
|
"description": "The page width, in pixels, below which a card panel is shown as a band. At\nzero, it never is.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
|
|
104600
104994
|
"fieldName": "bandBelow"
|
|
104601
104995
|
},
|
|
104996
|
+
{
|
|
104997
|
+
"name": "close-delay",
|
|
104998
|
+
"type": {
|
|
104999
|
+
"text": "number"
|
|
105000
|
+
},
|
|
105001
|
+
"default": "220",
|
|
105002
|
+
"description": "How long a pointer leaving the trigger and the panel waits before the panel\ncloses, in milliseconds. The pointer needs the time to cross from the\ntrigger to the panel.",
|
|
105003
|
+
"fieldName": "closeDelay"
|
|
105004
|
+
},
|
|
104602
105005
|
{
|
|
104603
105006
|
"name": "label",
|
|
104604
105007
|
"type": {
|
|
@@ -104608,6 +105011,15 @@
|
|
|
104608
105011
|
"description": "The section's name, used for the default trigger and the panel.",
|
|
104609
105012
|
"fieldName": "label"
|
|
104610
105013
|
},
|
|
105014
|
+
{
|
|
105015
|
+
"name": "open-delay",
|
|
105016
|
+
"type": {
|
|
105017
|
+
"text": "number"
|
|
105018
|
+
},
|
|
105019
|
+
"default": "120",
|
|
105020
|
+
"description": "How long a pointer rests on the trigger before the panel opens, in\nmilliseconds, under `open-on=\"hover\"`. A pointer crossing the bar on its\nway somewhere else opens nothing.",
|
|
105021
|
+
"fieldName": "openDelay"
|
|
105022
|
+
},
|
|
104611
105023
|
{
|
|
104612
105024
|
"name": "open-on",
|
|
104613
105025
|
"type": {
|
|
@@ -104617,6 +105029,15 @@
|
|
|
104617
105029
|
"description": "Whether hovering over the trigger opens the panel (`hover`), or only a press\ndoes (`click`).\n\nA press always works. This says whether a mouse also opens it by resting on\nthe trigger, and it is the default because that is what a navigation bar\ndoes. `click` is for a trigger that does something else as well, or a panel\nheavy enough that opening it on the way past is rude.",
|
|
104618
105030
|
"fieldName": "openOn"
|
|
104619
105031
|
},
|
|
105032
|
+
{
|
|
105033
|
+
"name": "placement",
|
|
105034
|
+
"type": {
|
|
105035
|
+
"text": "'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'"
|
|
105036
|
+
},
|
|
105037
|
+
"default": "'bottom-start'",
|
|
105038
|
+
"description": "The side of the trigger a card panel opens on, when there is room. It\nmoves if that side does not fit. A band ignores it, since a band spans the\npage under its bar.",
|
|
105039
|
+
"fieldName": "placement"
|
|
105040
|
+
},
|
|
104620
105041
|
{
|
|
104621
105042
|
"name": "variant",
|
|
104622
105043
|
"type": {
|
|
@@ -104652,6 +105073,10 @@
|
|
|
104652
105073
|
}
|
|
104653
105074
|
],
|
|
104654
105075
|
"cssStates": [
|
|
105076
|
+
{
|
|
105077
|
+
"description": "A link in the panel carries `aria-current=\"page\"`, so the trigger can show the section you are in.",
|
|
105078
|
+
"name": "current"
|
|
105079
|
+
},
|
|
104655
105080
|
{
|
|
104656
105081
|
"description": "The panel opened in place of one earlier in the bar, so it can enter from the end side.",
|
|
104657
105082
|
"name": "from-end"
|
|
@@ -104781,7 +105206,7 @@
|
|
|
104781
105206
|
"declarations": [
|
|
104782
105207
|
{
|
|
104783
105208
|
"kind": "class",
|
|
104784
|
-
"description": "One element covers three kinds of row, and what you give it decides which:\n- Content in the `submenu` slot makes the row open a submenu page.\n- `checked` makes the row a choice.\n- With neither, the row is a command.\n\nThe role follows the kind. A row with `checked` is `menuitemcheckbox` with\n`aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where\nonly one can be on. A row that opens a page keeps `menuitem` and sets\n`aria-haspopup`.\n\nChoosing a choice row checks or unchecks it before `helix-select` is sent,\nso a listener reads the new `checked`. An `exclusive` row turns on and turns\noff the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a\nrow as it is and set `checked` yourself.\n\nThe menu sets whether the row's page is showing as a property, never as an\nattribute. An attribute written onto your element after it upgrades causes a\nhydration mismatch.\n\n`shortcut` shows a row's keyboard shortcut after its label, drawn by `Kbd`\nin the platform's glyphs, and gives the row `aria-keyshortcuts`. It binds\nnothing: the shortcut is the page's to bind. Other trailing words, such as a\ncount, go in the `end` slot.\n\nThe row is named by its label alone. Words in `description`, a line under the\nlabel, and in `end` describe it instead, through `aria-describedby`, as\nReact Aria's menu item does with its description: a reader hears \"Copy\",\nthen \"Copies the selection\".\n\nThe check mark and the caret are the fallbacks of the `check` and `chevron`\nslots, so a mark of your own replaces either by being slotted. Neither is\nread as part of the row's name.",
|
|
105209
|
+
"description": "One element covers three kinds of row, and what you give it decides which:\n- Content in the `submenu` slot makes the row open a submenu page.\n- `checked` makes the row a choice.\n- With neither, the row is a command.\n\nThe role follows the kind. A row with `checked` is `menuitemcheckbox` with\n`aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where\nonly one can be on. A row that opens a page keeps `menuitem` and sets\n`aria-haspopup`.\n\nChoosing a choice row checks or unchecks it before `helix-select` is sent,\nso a listener reads the new `checked`. An `exclusive` row turns on and turns\noff the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a\nrow as it is and set `checked` yourself.\n\nThe menu sets whether the row's page is showing as a property, never as an\nattribute. An attribute written onto your element after it upgrades causes a\nhydration mismatch.\n\n`shortcut` shows a row's keyboard shortcut after its label, drawn by `Kbd`\nin the platform's glyphs, and gives the row `aria-keyshortcuts`. It binds\nnothing: the shortcut is the page's to bind. Other trailing words, such as a\ncount, go in the `end` slot.\n\nThe row is named by its label alone. Words in `description`, a line under the\nlabel, and in `end` describe it instead, through `aria-describedby`, as\nReact Aria's menu item does with its description: a reader hears \"Copy\",\nthen \"Copies the selection\".\n\nA development build warns when a row has no words to be named by, such as a\nrow holding only an icon with no label.\n\nThe check mark and the caret are the fallbacks of the `check` and `chevron`\nslots, so a mark of your own replaces either by being slotted. Neither is\nread as part of the row's name.",
|
|
104785
105210
|
"name": "HelixHeadlessMenuItem",
|
|
104786
105211
|
"cssParts": [
|
|
104787
105212
|
{
|
|
@@ -104815,6 +105240,10 @@
|
|
|
104815
105240
|
{
|
|
104816
105241
|
"description": "The leading column that holds the `start` slot. It is always rendered.",
|
|
104817
105242
|
"name": "start"
|
|
105243
|
+
},
|
|
105244
|
+
{
|
|
105245
|
+
"description": "The panel a submenu opens in beside the row, under the menu's `submenus=\"flyout\"`.",
|
|
105246
|
+
"name": "surface"
|
|
104818
105247
|
}
|
|
104819
105248
|
],
|
|
104820
105249
|
"slots": [
|
|
@@ -105086,6 +105515,14 @@
|
|
|
105086
105515
|
"text": "focusItem() => void"
|
|
105087
105516
|
}
|
|
105088
105517
|
},
|
|
105518
|
+
{
|
|
105519
|
+
"kind": "field",
|
|
105520
|
+
"name": "flyoutPanel",
|
|
105521
|
+
"privacy": "protected",
|
|
105522
|
+
"readonly": true,
|
|
105523
|
+
"default": "new PopoverController(this, { anchor: () => this.partNamed('item'), boundary: () => this, onDismiss: () => {}, open: () => this.flyout && this.expanded && this.onPage && this.submenu, placement: () => (isRtl(this) ? 'left-start' : 'right-start'), surface: () => (this.flyout ? this.partNamed('surface') : null), })",
|
|
105524
|
+
"description": "The panel a flyout submenu opens in, beside the row and in the top layer.\nThe menu around it says when, and answers a press outside and Escape, so\nits own dismissal does nothing."
|
|
105525
|
+
},
|
|
105089
105526
|
{
|
|
105090
105527
|
"kind": "method",
|
|
105091
105528
|
"name": "select",
|
|
@@ -105636,6 +106073,14 @@
|
|
|
105636
106073
|
"description": "The row is checked.",
|
|
105637
106074
|
"name": "checked"
|
|
105638
106075
|
},
|
|
106076
|
+
{
|
|
106077
|
+
"description": "Under `submenus=\"flyout\"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.",
|
|
106078
|
+
"name": "submenu-mark"
|
|
106079
|
+
},
|
|
106080
|
+
{
|
|
106081
|
+
"description": "Under `submenus=\"flyout\"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.",
|
|
106082
|
+
"name": "submenu-start"
|
|
106083
|
+
},
|
|
105639
106084
|
{
|
|
105640
106085
|
"description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
|
|
105641
106086
|
"name": "settled",
|
|
@@ -105696,7 +106141,7 @@
|
|
|
105696
106141
|
"declarations": [
|
|
105697
106142
|
{
|
|
105698
106143
|
"kind": "class",
|
|
105699
|
-
"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
|
|
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.",
|
|
105700
106145
|
"name": "HelixHeadlessMenu",
|
|
105701
106146
|
"cssProperties": [
|
|
105702
106147
|
{
|
|
@@ -105801,6 +106246,116 @@
|
|
|
105801
106246
|
"description": "Accessible name for the surface.\n\nEmpty by default, which names the surface by its trigger, so a menu opened\nfrom \"Actions\" is announced as \"Actions\". An `aria-label` or\n`aria-labelledby` on the host names it too, and wins over both.",
|
|
105802
106247
|
"attribute": "label"
|
|
105803
106248
|
},
|
|
106249
|
+
{
|
|
106250
|
+
"kind": "field",
|
|
106251
|
+
"name": "flies",
|
|
106252
|
+
"type": {
|
|
106253
|
+
"text": "boolean"
|
|
106254
|
+
},
|
|
106255
|
+
"privacy": "private",
|
|
106256
|
+
"description": "Whether submenus open beside their rows.",
|
|
106257
|
+
"readonly": true
|
|
106258
|
+
},
|
|
106259
|
+
{
|
|
106260
|
+
"kind": "field",
|
|
106261
|
+
"name": "topRows",
|
|
106262
|
+
"type": {
|
|
106263
|
+
"text": "HelixHeadlessMenuItem[]"
|
|
106264
|
+
},
|
|
106265
|
+
"privacy": "private",
|
|
106266
|
+
"description": "The rows of the top page, read through each section.",
|
|
106267
|
+
"readonly": true
|
|
106268
|
+
},
|
|
106269
|
+
{
|
|
106270
|
+
"kind": "method",
|
|
106271
|
+
"name": "rowsOf",
|
|
106272
|
+
"privacy": "private",
|
|
106273
|
+
"return": {
|
|
106274
|
+
"type": {
|
|
106275
|
+
"text": "HelixHeadlessMenuItem[]"
|
|
106276
|
+
}
|
|
106277
|
+
},
|
|
106278
|
+
"parameters": [
|
|
106279
|
+
{
|
|
106280
|
+
"name": "holder",
|
|
106281
|
+
"type": {
|
|
106282
|
+
"text": "HelixHeadlessMenuItem | null"
|
|
106283
|
+
}
|
|
106284
|
+
}
|
|
106285
|
+
],
|
|
106286
|
+
"description": "The rows of a submenu, or of the top page for null."
|
|
106287
|
+
},
|
|
106288
|
+
{
|
|
106289
|
+
"kind": "method",
|
|
106290
|
+
"name": "holderOf",
|
|
106291
|
+
"privacy": "private",
|
|
106292
|
+
"return": {
|
|
106293
|
+
"type": {
|
|
106294
|
+
"text": "HelixHeadlessMenuItem | null"
|
|
106295
|
+
}
|
|
106296
|
+
},
|
|
106297
|
+
"parameters": [
|
|
106298
|
+
{
|
|
106299
|
+
"name": "row",
|
|
106300
|
+
"type": {
|
|
106301
|
+
"text": "HelixHeadlessMenuItem"
|
|
106302
|
+
}
|
|
106303
|
+
}
|
|
106304
|
+
],
|
|
106305
|
+
"description": "The row whose submenu holds a row, or null for a row of the top page."
|
|
106306
|
+
},
|
|
106307
|
+
{
|
|
106308
|
+
"kind": "field",
|
|
106309
|
+
"name": "openPages",
|
|
106310
|
+
"type": {
|
|
106311
|
+
"text": "(HelixHeadlessMenuItem | null)[]"
|
|
106312
|
+
},
|
|
106313
|
+
"privacy": "private",
|
|
106314
|
+
"description": "The submenus open, from the top page down to the deepest.",
|
|
106315
|
+
"readonly": true
|
|
106316
|
+
},
|
|
106317
|
+
{
|
|
106318
|
+
"kind": "field",
|
|
106319
|
+
"name": "keyPage",
|
|
106320
|
+
"type": {
|
|
106321
|
+
"text": "HelixHeadlessMenuItem | null"
|
|
106322
|
+
},
|
|
106323
|
+
"privacy": "private",
|
|
106324
|
+
"description": "The submenu the keys move in under `flyout`: the one holding the row with\nfocus, or the deepest open one.",
|
|
106325
|
+
"readonly": true
|
|
106326
|
+
},
|
|
106327
|
+
{
|
|
106328
|
+
"kind": "method",
|
|
106329
|
+
"name": "openPage",
|
|
106330
|
+
"privacy": "private",
|
|
106331
|
+
"return": {
|
|
106332
|
+
"type": {
|
|
106333
|
+
"text": "void"
|
|
106334
|
+
}
|
|
106335
|
+
},
|
|
106336
|
+
"parameters": [
|
|
106337
|
+
{
|
|
106338
|
+
"name": "holder",
|
|
106339
|
+
"type": {
|
|
106340
|
+
"text": "HelixHeadlessMenuItem | null"
|
|
106341
|
+
}
|
|
106342
|
+
}
|
|
106343
|
+
],
|
|
106344
|
+
"description": "Opens a submenu and closes the ones below it, or closes them all for null."
|
|
106345
|
+
},
|
|
106346
|
+
{
|
|
106347
|
+
"kind": "field",
|
|
106348
|
+
"name": "longPressLabel",
|
|
106349
|
+
"type": {
|
|
106350
|
+
"text": "string"
|
|
106351
|
+
},
|
|
106352
|
+
"default": "'Long press or press Alt+Down to show the menu'",
|
|
106353
|
+
"description": "The description a trigger gives under `open-on=\"long-press\"`, saying how\nto open the menu. Translate it with the rest of your interface.",
|
|
106354
|
+
"attribute": "long-press-label",
|
|
106355
|
+
"helix": {
|
|
106356
|
+
"words": true
|
|
106357
|
+
}
|
|
106358
|
+
},
|
|
105804
106359
|
{
|
|
105805
106360
|
"kind": "field",
|
|
105806
106361
|
"name": "offset",
|
|
@@ -105811,6 +106366,43 @@
|
|
|
105811
106366
|
"description": "Space between the trigger and the surface, in pixels.",
|
|
105812
106367
|
"attribute": "offset"
|
|
105813
106368
|
},
|
|
106369
|
+
{
|
|
106370
|
+
"kind": "field",
|
|
106371
|
+
"name": "pressHeld",
|
|
106372
|
+
"type": {
|
|
106373
|
+
"text": "boolean"
|
|
106374
|
+
},
|
|
106375
|
+
"privacy": "private",
|
|
106376
|
+
"description": "Whether the trigger opens the menu only on a held press.",
|
|
106377
|
+
"readonly": true
|
|
106378
|
+
},
|
|
106379
|
+
{
|
|
106380
|
+
"kind": "field",
|
|
106381
|
+
"name": "longPress",
|
|
106382
|
+
"privacy": "private",
|
|
106383
|
+
"readonly": true,
|
|
106384
|
+
"default": "new LongPress(this, { onLongPress: () => { if (this.context) { const at = this.heldAt if (at) { this.openContextAt(at) } return } if (!this.open) { this.show() } }, })",
|
|
106385
|
+
"description": "Watches the trigger for a held press: under `open-on=\"long-press\"`, and\nfor a touch or a pen on a context menu's area."
|
|
106386
|
+
},
|
|
106387
|
+
{
|
|
106388
|
+
"kind": "field",
|
|
106389
|
+
"name": "heldAt",
|
|
106390
|
+
"type": {
|
|
106391
|
+
"text": "{ x: number; y: number } | undefined"
|
|
106392
|
+
},
|
|
106393
|
+
"privacy": "private",
|
|
106394
|
+
"description": "Where a held press on a context menu's area is, to open the menu there."
|
|
106395
|
+
},
|
|
106396
|
+
{
|
|
106397
|
+
"kind": "field",
|
|
106398
|
+
"name": "openOn",
|
|
106399
|
+
"type": {
|
|
106400
|
+
"text": "'click' | 'long-press'"
|
|
106401
|
+
},
|
|
106402
|
+
"default": "'click'",
|
|
106403
|
+
"description": "What opens the menu from its trigger. `long-press` leaves a press to the\ntrigger's own action and opens the menu on a press held for half a second,\nor on Alt+Down or Alt+Up.",
|
|
106404
|
+
"attribute": "open-on"
|
|
106405
|
+
},
|
|
105814
106406
|
{
|
|
105815
106407
|
"kind": "field",
|
|
105816
106408
|
"name": "placement",
|
|
@@ -105821,6 +106413,16 @@
|
|
|
105821
106413
|
"description": "The side the menu opens on, when there is room.\n\nIt moves if that side does not fit.",
|
|
105822
106414
|
"attribute": "placement"
|
|
105823
106415
|
},
|
|
106416
|
+
{
|
|
106417
|
+
"kind": "field",
|
|
106418
|
+
"name": "submenus",
|
|
106419
|
+
"type": {
|
|
106420
|
+
"text": "'drill' | 'flyout'"
|
|
106421
|
+
},
|
|
106422
|
+
"default": "'drill'",
|
|
106423
|
+
"description": "How a submenu opens. `drill` shows it in place of the page showing, with\na way back. `flyout` opens it in a panel of its own beside its row.",
|
|
106424
|
+
"attribute": "submenus"
|
|
106425
|
+
},
|
|
105824
106426
|
{
|
|
105825
106427
|
"kind": "field",
|
|
105826
106428
|
"name": "drilldown",
|
|
@@ -105868,7 +106470,7 @@
|
|
|
105868
106470
|
"name": "panel",
|
|
105869
106471
|
"privacy": "private",
|
|
105870
106472
|
"readonly": true,
|
|
105871
|
-
"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'), })"
|
|
105872
106474
|
},
|
|
105873
106475
|
{
|
|
105874
106476
|
"kind": "method",
|
|
@@ -105881,6 +106483,25 @@
|
|
|
105881
106483
|
},
|
|
105882
106484
|
"description": "Tells a slotted trigger the disclosure state, by property.\n\nA control that opens a menu has to say so. By property rather than by\nattribute, which is the class note's rule about items applied one level up:\nan attribute written onto a consumer's element after it upgrades is a\nhydration mismatch waiting to happen."
|
|
105883
106485
|
},
|
|
106486
|
+
{
|
|
106487
|
+
"kind": "field",
|
|
106488
|
+
"name": "settledOnce",
|
|
106489
|
+
"type": {
|
|
106490
|
+
"text": "boolean"
|
|
106491
|
+
},
|
|
106492
|
+
"privacy": "private",
|
|
106493
|
+
"default": "false",
|
|
106494
|
+
"description": "Whether a frame has passed since the first render, after which a plain trigger may be told."
|
|
106495
|
+
},
|
|
106496
|
+
{
|
|
106497
|
+
"kind": "field",
|
|
106498
|
+
"name": "told",
|
|
106499
|
+
"type": {
|
|
106500
|
+
"text": "Element | undefined"
|
|
106501
|
+
},
|
|
106502
|
+
"privacy": "private",
|
|
106503
|
+
"description": "The plain trigger this menu writes `aria-expanded` on."
|
|
106504
|
+
},
|
|
105884
106505
|
{
|
|
105885
106506
|
"kind": "field",
|
|
105886
106507
|
"name": "trigger",
|
|
@@ -105953,6 +106574,25 @@
|
|
|
105953
106574
|
"readonly": true,
|
|
105954
106575
|
"description": "Opens a context menu where the reader asked for it: at the pointer, or at\nthe area's corner where the keyboard asked and the event has no position."
|
|
105955
106576
|
},
|
|
106577
|
+
{
|
|
106578
|
+
"kind": "method",
|
|
106579
|
+
"name": "openContextAt",
|
|
106580
|
+
"privacy": "private",
|
|
106581
|
+
"return": {
|
|
106582
|
+
"type": {
|
|
106583
|
+
"text": "void"
|
|
106584
|
+
}
|
|
106585
|
+
},
|
|
106586
|
+
"parameters": [
|
|
106587
|
+
{
|
|
106588
|
+
"name": "point",
|
|
106589
|
+
"type": {
|
|
106590
|
+
"text": "{ x: number; y: number }"
|
|
106591
|
+
}
|
|
106592
|
+
}
|
|
106593
|
+
],
|
|
106594
|
+
"description": "Opens a context menu at a point in the viewport, or moves an open one there."
|
|
106595
|
+
},
|
|
105956
106596
|
{
|
|
105957
106597
|
"kind": "method",
|
|
105958
106598
|
"name": "enter",
|
|
@@ -106027,6 +106667,160 @@
|
|
|
106027
106667
|
"privacy": "private",
|
|
106028
106668
|
"readonly": true
|
|
106029
106669
|
},
|
|
106670
|
+
{
|
|
106671
|
+
"kind": "method",
|
|
106672
|
+
"name": "fromTrigger",
|
|
106673
|
+
"privacy": "private",
|
|
106674
|
+
"return": {
|
|
106675
|
+
"type": {
|
|
106676
|
+
"text": "boolean"
|
|
106677
|
+
}
|
|
106678
|
+
},
|
|
106679
|
+
"parameters": [
|
|
106680
|
+
{
|
|
106681
|
+
"name": "event",
|
|
106682
|
+
"type": {
|
|
106683
|
+
"text": "Event"
|
|
106684
|
+
}
|
|
106685
|
+
}
|
|
106686
|
+
],
|
|
106687
|
+
"description": "Whether an event came from the slotted trigger, or the area of a context menu."
|
|
106688
|
+
},
|
|
106689
|
+
{
|
|
106690
|
+
"kind": "field",
|
|
106691
|
+
"name": "handlePointerDown",
|
|
106692
|
+
"privacy": "private",
|
|
106693
|
+
"readonly": true,
|
|
106694
|
+
"description": "A press on the trigger starting: the start of a held one under\n`open-on=\"long-press\"`, or a touch or a pen held on a context menu's area."
|
|
106695
|
+
},
|
|
106696
|
+
{
|
|
106697
|
+
"kind": "field",
|
|
106698
|
+
"name": "handlePointerMove",
|
|
106699
|
+
"privacy": "private",
|
|
106700
|
+
"readonly": true
|
|
106701
|
+
},
|
|
106702
|
+
{
|
|
106703
|
+
"kind": "field",
|
|
106704
|
+
"name": "handlePointerUp",
|
|
106705
|
+
"privacy": "private",
|
|
106706
|
+
"readonly": true
|
|
106707
|
+
},
|
|
106708
|
+
{
|
|
106709
|
+
"kind": "field",
|
|
106710
|
+
"name": "handlePointerCancel",
|
|
106711
|
+
"privacy": "private",
|
|
106712
|
+
"readonly": true
|
|
106713
|
+
},
|
|
106714
|
+
{
|
|
106715
|
+
"kind": "field",
|
|
106716
|
+
"name": "handleHeldClick",
|
|
106717
|
+
"privacy": "private",
|
|
106718
|
+
"readonly": true,
|
|
106719
|
+
"description": "Takes the click a held press ends in, ahead of the trigger's own\nlisteners, so a press that opened the menu does not also do the trigger's\naction. In capture, on the host, which is above a slotted trigger."
|
|
106720
|
+
},
|
|
106721
|
+
{
|
|
106722
|
+
"kind": "field",
|
|
106723
|
+
"name": "described",
|
|
106724
|
+
"type": {
|
|
106725
|
+
"text": "Element | undefined"
|
|
106726
|
+
},
|
|
106727
|
+
"privacy": "private",
|
|
106728
|
+
"description": "The control the menu has described, so the description can be taken back."
|
|
106729
|
+
},
|
|
106730
|
+
{
|
|
106731
|
+
"kind": "method",
|
|
106732
|
+
"name": "describeTrigger",
|
|
106733
|
+
"privacy": "private",
|
|
106734
|
+
"return": {
|
|
106735
|
+
"type": {
|
|
106736
|
+
"text": "void"
|
|
106737
|
+
}
|
|
106738
|
+
},
|
|
106739
|
+
"parameters": [
|
|
106740
|
+
{
|
|
106741
|
+
"name": "light",
|
|
106742
|
+
"default": "false"
|
|
106743
|
+
}
|
|
106744
|
+
],
|
|
106745
|
+
"description": "Describes the trigger by `long-press-label` under `open-on=\"long-press\"`,\nor takes it back, by the host, which carries the words as its label, as\n`SpeedDial` does. On the consumer's own element only once a reader has\nreached it, which is after hydration."
|
|
106746
|
+
},
|
|
106747
|
+
{
|
|
106748
|
+
"kind": "field",
|
|
106749
|
+
"name": "handleTriggerFocusIn",
|
|
106750
|
+
"privacy": "private",
|
|
106751
|
+
"readonly": true,
|
|
106752
|
+
"description": "A reader reaching the trigger, which is late enough to describe a plain one."
|
|
106753
|
+
},
|
|
106754
|
+
{
|
|
106755
|
+
"kind": "field",
|
|
106756
|
+
"name": "hovered",
|
|
106757
|
+
"type": {
|
|
106758
|
+
"text": "HelixHeadlessMenuItem | undefined"
|
|
106759
|
+
},
|
|
106760
|
+
"privacy": "private",
|
|
106761
|
+
"description": "The row the pointer last rested on, under `flyout`."
|
|
106762
|
+
},
|
|
106763
|
+
{
|
|
106764
|
+
"kind": "field",
|
|
106765
|
+
"name": "hoverTimer",
|
|
106766
|
+
"type": {
|
|
106767
|
+
"text": "ReturnType<typeof setTimeout> | undefined"
|
|
106768
|
+
},
|
|
106769
|
+
"privacy": "private",
|
|
106770
|
+
"description": "The wait before a rested-on row opens or closes a submenu."
|
|
106771
|
+
},
|
|
106772
|
+
{
|
|
106773
|
+
"kind": "field",
|
|
106774
|
+
"name": "grace",
|
|
106775
|
+
"type": {
|
|
106776
|
+
"text": "{ points: [number, number][]; until: number } | undefined"
|
|
106777
|
+
},
|
|
106778
|
+
"privacy": "private",
|
|
106779
|
+
"description": "The triangle from where the pointer left a row with an open submenu to the\nnear edge of that submenu, and until when it holds."
|
|
106780
|
+
},
|
|
106781
|
+
{
|
|
106782
|
+
"kind": "method",
|
|
106783
|
+
"name": "stopHover",
|
|
106784
|
+
"privacy": "private",
|
|
106785
|
+
"return": {
|
|
106786
|
+
"type": {
|
|
106787
|
+
"text": "void"
|
|
106788
|
+
}
|
|
106789
|
+
}
|
|
106790
|
+
},
|
|
106791
|
+
{
|
|
106792
|
+
"kind": "field",
|
|
106793
|
+
"name": "handleHover",
|
|
106794
|
+
"privacy": "private",
|
|
106795
|
+
"readonly": true,
|
|
106796
|
+
"description": "A mouse resting on a row, under `flyout`: focus follows it, and after a\nmoment the row's submenu opens, or the submenus below the row's own page\nclose. Not while the pointer is crossing toward an open submenu."
|
|
106797
|
+
},
|
|
106798
|
+
{
|
|
106799
|
+
"kind": "field",
|
|
106800
|
+
"name": "handleRowOut",
|
|
106801
|
+
"privacy": "private",
|
|
106802
|
+
"readonly": true,
|
|
106803
|
+
"description": "The pointer leaving a row whose submenu is open, which starts the grace area."
|
|
106804
|
+
},
|
|
106805
|
+
{
|
|
106806
|
+
"kind": "method",
|
|
106807
|
+
"name": "inGrace",
|
|
106808
|
+
"privacy": "private",
|
|
106809
|
+
"return": {
|
|
106810
|
+
"type": {
|
|
106811
|
+
"text": "boolean"
|
|
106812
|
+
}
|
|
106813
|
+
},
|
|
106814
|
+
"parameters": [
|
|
106815
|
+
{
|
|
106816
|
+
"name": "event",
|
|
106817
|
+
"type": {
|
|
106818
|
+
"text": "PointerEvent"
|
|
106819
|
+
}
|
|
106820
|
+
}
|
|
106821
|
+
],
|
|
106822
|
+
"description": "Whether the pointer is inside the grace area, while it holds."
|
|
106823
|
+
},
|
|
106030
106824
|
{
|
|
106031
106825
|
"kind": "method",
|
|
106032
106826
|
"name": "nameSurface",
|
|
@@ -106808,6 +107602,15 @@
|
|
|
106808
107602
|
"description": "Accessible name for the surface.\n\nEmpty by default, which names the surface by its trigger, so a menu opened\nfrom \"Actions\" is announced as \"Actions\". An `aria-label` or\n`aria-labelledby` on the host names it too, and wins over both.",
|
|
106809
107603
|
"fieldName": "label"
|
|
106810
107604
|
},
|
|
107605
|
+
{
|
|
107606
|
+
"name": "long-press-label",
|
|
107607
|
+
"type": {
|
|
107608
|
+
"text": "string"
|
|
107609
|
+
},
|
|
107610
|
+
"default": "'Long press or press Alt+Down to show the menu'",
|
|
107611
|
+
"description": "The description a trigger gives under `open-on=\"long-press\"`, saying how\nto open the menu. Translate it with the rest of your interface.",
|
|
107612
|
+
"fieldName": "longPressLabel"
|
|
107613
|
+
},
|
|
106811
107614
|
{
|
|
106812
107615
|
"name": "offset",
|
|
106813
107616
|
"type": {
|
|
@@ -106817,6 +107620,15 @@
|
|
|
106817
107620
|
"description": "Space between the trigger and the surface, in pixels.",
|
|
106818
107621
|
"fieldName": "offset"
|
|
106819
107622
|
},
|
|
107623
|
+
{
|
|
107624
|
+
"name": "open-on",
|
|
107625
|
+
"type": {
|
|
107626
|
+
"text": "'click' | 'long-press'"
|
|
107627
|
+
},
|
|
107628
|
+
"default": "'click'",
|
|
107629
|
+
"description": "What opens the menu from its trigger. `long-press` leaves a press to the\ntrigger's own action and opens the menu on a press held for half a second,\nor on Alt+Down or Alt+Up.",
|
|
107630
|
+
"fieldName": "openOn"
|
|
107631
|
+
},
|
|
106820
107632
|
{
|
|
106821
107633
|
"name": "placement",
|
|
106822
107634
|
"type": {
|
|
@@ -106826,6 +107638,15 @@
|
|
|
106826
107638
|
"description": "The side the menu opens on, when there is room.\n\nIt moves if that side does not fit.",
|
|
106827
107639
|
"fieldName": "placement"
|
|
106828
107640
|
},
|
|
107641
|
+
{
|
|
107642
|
+
"name": "submenus",
|
|
107643
|
+
"type": {
|
|
107644
|
+
"text": "'drill' | 'flyout'"
|
|
107645
|
+
},
|
|
107646
|
+
"default": "'drill'",
|
|
107647
|
+
"description": "How a submenu opens. `drill` shows it in place of the page showing, with\na way back. `flyout` opens it in a panel of its own beside its row.",
|
|
107648
|
+
"fieldName": "submenus"
|
|
107649
|
+
},
|
|
106829
107650
|
{
|
|
106830
107651
|
"name": "empty-text",
|
|
106831
107652
|
"type": {
|
|
@@ -106904,6 +107725,22 @@
|
|
|
106904
107725
|
"description": "While the menu is open.",
|
|
106905
107726
|
"name": "open"
|
|
106906
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
|
+
},
|
|
106907
107744
|
{
|
|
106908
107745
|
"description": "A row on the current page has content in its leading column, so every row keeps that column.",
|
|
106909
107746
|
"name": "start"
|
|
@@ -110204,7 +111041,7 @@
|
|
|
110204
111041
|
"text": "HTMLElement | undefined"
|
|
110205
111042
|
}
|
|
110206
111043
|
},
|
|
110207
|
-
"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.",
|
|
110208
111045
|
"inheritedFrom": {
|
|
110209
111046
|
"name": "MixinDismissible",
|
|
110210
111047
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -110793,7 +111630,7 @@
|
|
|
110793
111630
|
"declarations": [
|
|
110794
111631
|
{
|
|
110795
111632
|
"kind": "class",
|
|
110796
|
-
"description": "Notifications are slotted children. Each one is your own markup, with an\navatar, a link, or a button in it. Feeds usually hold tens of items, so\nwriting them out lets an item hold anything.\n\nThe list does not virtualize. Windowing needs the list to own the data, and\nhere you own it, so N notifications are N elements. For a feed of thousands,\nuse a data table with a custom cell.\n\nRead state is reported to you. Marking read goes from the root to the item\nand from the item to you, so a canceled `helix-read` changes nothing, and if\nyou own `read`, nothing changes until you set it. `unread` is derived from\nthe items and written to an attribute, so a stylesheet and a badge can both\nuse it without counting.\n\n**The feed is one `Tab` stop for its rows.** Each row takes focus itself and\nis read by its label. `ArrowDown` and `ArrowUp` move to the next and the\nprevious row, `Home` and `End` to the first and the last, and `PageDown` and\n`PageUp` move a row on or back from anywhere inside one, as in the APG feed\npattern. The controls inside a row stay in the `Tab` order. Set `total` when\nthe feed holds one page of a longer list, and each row says its place in the\nwhole of it.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Down, Up | On a row, moves to the next or the previous row. |\n| Home, End | On a row, moves to the first or the last row. |\n| Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |\n| Control+End | From anywhere in the feed, moves to the first control after it on the page. |\n| Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |\n| Tab | Moves through the controls in a row, and on out of the feed. |\n\n**`load-more` adds a button after the list** that sends `helix-load-more`,\nfor a feed that holds one page of a longer list. Append the next page, set\n`loading` while it is on its way, and take `load-more` off once there is\nnothing more. While the feed is loading the button stays, so focus stays on\nit, and it is `aria-disabled` and sends nothing.\n\n**`load-error` says a page could not be fetched**, such as \"Could not load\nnotifications\": it shows under the rows there are, in the `error` part, in\nplace of the empty and loading lines, and a screen reader hears it. Clear it\nwhen you ask again.",
|
|
111633
|
+
"description": "Notifications are slotted children. Each one is your own markup, with an\navatar, a link, or a button in it. Feeds usually hold tens of items, so\nwriting them out lets an item hold anything.\n\nThe list does not virtualize. Windowing needs the list to own the data, and\nhere you own it, so N notifications are N elements. For a feed of thousands,\nuse a data table with a custom cell.\n\nRead state is reported to you. Marking read goes from the root to the item\nand from the item to you, so a canceled `helix-read` changes nothing, and if\nyou own `read`, nothing changes until you set it. `unread` is derived from\nthe items and written to an attribute, so a stylesheet and a badge can both\nuse it without counting.\n\n**The feed is one `Tab` stop for its rows.** Each row takes focus itself and\nis read by its label. `ArrowDown` and `ArrowUp` move to the next and the\nprevious row, `Home` and `End` to the first and the last, and `PageDown` and\n`PageUp` move a row on or back from anywhere inside one, as in the APG feed\npattern. The controls inside a row stay in the `Tab` order. Set `total` when\nthe feed holds one page of a longer list, and each row says its place in the\nwhole of it.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Down, Up | On a row, moves to the next or the previous row. |\n| Home, End | On a row, moves to the first or the last row. |\n| Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |\n| Control+End | From anywhere in the feed, moves to the first control after it on the page. |\n| Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |\n| Tab | Moves through the controls in a row, and on out of the feed. |\n\n**A notification that arrives says so.** Unread rows added above the rows\nthere were are counted in the live region,\n\"1 new notification\", in `arrived-label`. Rows that arrive while `loading`\nis set say nothing, so set it while a page is on its way.\n\n**`load-more` adds a button after the list** that sends `helix-load-more`,\nfor a feed that holds one page of a longer list. Append the next page, set\n`loading` while it is on its way, and take `load-more` off once there is\nnothing more. While the feed is loading the button stays, so focus stays on\nit, and it is `aria-disabled` and sends nothing.\n\n**`load-error` says a page could not be fetched**, such as \"Could not load\nnotifications\": it shows under the rows there are, in the `error` part, in\nplace of the empty and loading lines, and a screen reader hears it. Clear it\nwhen you ask again.",
|
|
110797
111634
|
"name": "HelixHeadlessNotifications",
|
|
110798
111635
|
"cssParts": [
|
|
110799
111636
|
{
|
|
@@ -110884,6 +111721,19 @@
|
|
|
110884
111721
|
"module": "src/mixins/mixin-collection/mixin-collection.ts"
|
|
110885
111722
|
}
|
|
110886
111723
|
},
|
|
111724
|
+
{
|
|
111725
|
+
"kind": "field",
|
|
111726
|
+
"name": "arrivedLabel",
|
|
111727
|
+
"type": {
|
|
111728
|
+
"text": "string"
|
|
111729
|
+
},
|
|
111730
|
+
"default": "'{count, plural, one {# new notification} other {# new notifications}}'",
|
|
111731
|
+
"description": "What the feed says when unread notifications arrive, with `{count}` the\nnumber of them. Empty it to say nothing.",
|
|
111732
|
+
"attribute": "arrived-label",
|
|
111733
|
+
"helix": {
|
|
111734
|
+
"words": true
|
|
111735
|
+
}
|
|
111736
|
+
},
|
|
110887
111737
|
{
|
|
110888
111738
|
"kind": "field",
|
|
110889
111739
|
"name": "fallbackLabel",
|
|
@@ -111154,6 +112004,34 @@
|
|
|
111154
112004
|
},
|
|
111155
112005
|
"description": "Tells each row whether it is the stop, and where it sits in the feed.\n\nThrough each row's own properties, written once it has hydrated, so a\nserver's markup stays the server's: every row is a stop until this runs."
|
|
111156
112006
|
},
|
|
112007
|
+
{
|
|
112008
|
+
"kind": "field",
|
|
112009
|
+
"name": "seen",
|
|
112010
|
+
"type": {
|
|
112011
|
+
"text": "WeakSet<Element> | undefined"
|
|
112012
|
+
},
|
|
112013
|
+
"privacy": "private",
|
|
112014
|
+
"description": "The rows the feed has met, so a row that arrives later is told apart."
|
|
112015
|
+
},
|
|
112016
|
+
{
|
|
112017
|
+
"kind": "field",
|
|
112018
|
+
"name": "hush",
|
|
112019
|
+
"privacy": "private",
|
|
112020
|
+
"readonly": true,
|
|
112021
|
+
"default": "new DelayController(this, { renders: false })",
|
|
112022
|
+
"description": "Empties the arrival a moment after it is said, so the next one is news."
|
|
112023
|
+
},
|
|
112024
|
+
{
|
|
112025
|
+
"kind": "method",
|
|
112026
|
+
"name": "noteArrivals",
|
|
112027
|
+
"privacy": "private",
|
|
112028
|
+
"return": {
|
|
112029
|
+
"type": {
|
|
112030
|
+
"text": "void"
|
|
112031
|
+
}
|
|
112032
|
+
},
|
|
112033
|
+
"description": "Counts the unread rows that arrived above the rows there were, and says\nhow many. Rows that fill an empty feed are a page, which says nothing. The rows there are at the first update are\nthe feed's to begin with, and say nothing."
|
|
112034
|
+
},
|
|
111157
112035
|
{
|
|
111158
112036
|
"kind": "method",
|
|
111159
112037
|
"name": "renderStatus",
|
|
@@ -111768,6 +112646,15 @@
|
|
|
111768
112646
|
}
|
|
111769
112647
|
],
|
|
111770
112648
|
"attributes": [
|
|
112649
|
+
{
|
|
112650
|
+
"name": "arrived-label",
|
|
112651
|
+
"type": {
|
|
112652
|
+
"text": "string"
|
|
112653
|
+
},
|
|
112654
|
+
"default": "'{count, plural, one {# new notification} other {# new notifications}}'",
|
|
112655
|
+
"description": "What the feed says when unread notifications arrive, with `{count}` the\nnumber of them. Empty it to say nothing.",
|
|
112656
|
+
"fieldName": "arrivedLabel"
|
|
112657
|
+
},
|
|
111771
112658
|
{
|
|
111772
112659
|
"name": "fallback-label",
|
|
111773
112660
|
"type": {
|
|
@@ -112075,7 +112962,7 @@
|
|
|
112075
112962
|
"declarations": [
|
|
112076
112963
|
{
|
|
112077
112964
|
"kind": "class",
|
|
112078
|
-
"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`.",
|
|
112079
112966
|
"name": "HelixHeadlessNumberInput",
|
|
112080
112967
|
"cssParts": [
|
|
112081
112968
|
{
|
|
@@ -112872,7 +113759,7 @@
|
|
|
112872
113759
|
"type": {
|
|
112873
113760
|
"text": "number"
|
|
112874
113761
|
},
|
|
112875
|
-
"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."
|
|
112876
113763
|
},
|
|
112877
113764
|
{
|
|
112878
113765
|
"kind": "field",
|
|
@@ -135330,7 +136217,7 @@
|
|
|
135330
136217
|
"declarations": [
|
|
135331
136218
|
{
|
|
135332
136219
|
"kind": "class",
|
|
135333
|
-
"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.",
|
|
135334
136221
|
"name": "HelixHeadlessSelect",
|
|
135335
136222
|
"cssProperties": [
|
|
135336
136223
|
{
|
|
@@ -135686,6 +136573,16 @@
|
|
|
135686
136573
|
"description": "The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`.",
|
|
135687
136574
|
"readonly": true
|
|
135688
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
|
+
},
|
|
135689
136586
|
{
|
|
135690
136587
|
"kind": "field",
|
|
135691
136588
|
"name": "data",
|
|
@@ -137770,7 +138667,7 @@
|
|
|
137770
138667
|
"text": "string"
|
|
137771
138668
|
},
|
|
137772
138669
|
"default": "''",
|
|
137773
|
-
"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.",
|
|
137774
138671
|
"attribute": "label"
|
|
137775
138672
|
},
|
|
137776
138673
|
{
|
|
@@ -138152,7 +139049,7 @@
|
|
|
138152
139049
|
"text": "string"
|
|
138153
139050
|
},
|
|
138154
139051
|
"default": "''",
|
|
138155
|
-
"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.",
|
|
138156
139053
|
"fieldName": "label"
|
|
138157
139054
|
},
|
|
138158
139055
|
{
|
|
@@ -156546,7 +157443,7 @@
|
|
|
156546
157443
|
"text": "HTMLElement | undefined"
|
|
156547
157444
|
}
|
|
156548
157445
|
},
|
|
156549
|
-
"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.",
|
|
156550
157447
|
"inheritedFrom": {
|
|
156551
157448
|
"name": "MixinDismissible",
|
|
156552
157449
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -158367,7 +159264,7 @@
|
|
|
158367
159264
|
"text": "HTMLElement | undefined"
|
|
158368
159265
|
}
|
|
158369
159266
|
},
|
|
158370
|
-
"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.",
|
|
158371
159268
|
"inheritedFrom": {
|
|
158372
159269
|
"name": "MixinDismissible",
|
|
158373
159270
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -168761,7 +169658,7 @@
|
|
|
168761
169658
|
"declarations": [
|
|
168762
169659
|
{
|
|
168763
169660
|
"kind": "class",
|
|
168764
|
-
"description": "Each message is an element because it has a timeout, a tone, a dismiss\ncontrol, and a lifetime that pauses.\n\n**Each item runs its own timer.** A timer held by the region would restart\nwith each new message, and the last of three messages would stay for nine\nseconds. It pauses while the pointer or focus is on the message, and while\nthe page is hidden, so a message is not spent in a background tab.\n\n**Each message is an `alertdialog` named by its words**, which is how a reader\nwho moves into the stack hears which message they are on. Give it a\n`heading` and a `description`, and the heading names it and the description\ndescribes it, for a message with a title and a line of detail. The region\nsays each message once as it arrives, a `danger` one assertively, so a\nmessage is never a live region of its own.\n\nA touch or a pen swipes a message toward the end of the line, and past\nhalfway, or quickly, dismisses it through the same `helix-dismiss` as its\ncontrol. While it moves, the distance is on the `item` part as\n`--toast-swipe-x`.\n\n**Messages are inverted by default.** The item flips `color-scheme`, so a new\nmessage stands out from the page without using a color that carries meaning.",
|
|
169661
|
+
"description": "Each message is an element because it has a timeout, a tone, a dismiss\ncontrol, and a lifetime that pauses.\n\n**Each item runs its own timer.** A timer held by the region would restart\nwith each new message, and the last of three messages would stay for nine\nseconds. It pauses while the pointer or focus is on the message, and while\nthe page is hidden, so a message is not spent in a background tab.\n\n**Each message is an `alertdialog` named by its words**, which is how a reader\nwho moves into the stack hears which message they are on. Give it a\n`heading` and a `description`, and the heading names it and the description\ndescribes it, for a message with a title and a line of detail. The region\nsays each message once as it arrives, a `danger` one assertively, so a\nmessage is never a live region of its own.\n\nA touch or a pen swipes a message toward the end of the line, and past\nhalfway, or quickly, dismisses it through the same `helix-dismiss` as its\ncontrol. While it moves, the distance is on the `item` part as\n`--toast-swipe-x`.\n\n**Escape dismisses the message holding focus**, through the same\n`helix-dismiss`, and focus moves to the next message.\n\n**Messages are inverted by default.** The item flips `color-scheme`, so a new\nmessage stands out from the page without using a color that carries meaning.",
|
|
168765
169662
|
"name": "HelixHeadlessToastItem",
|
|
168766
169663
|
"cssProperties": [
|
|
168767
169664
|
{
|
|
@@ -168905,7 +169802,7 @@
|
|
|
168905
169802
|
"name": "countdown",
|
|
168906
169803
|
"privacy": "private",
|
|
168907
169804
|
"readonly": true,
|
|
168908
|
-
"default": "new CountdownController(this, { done: () => { this.dismiss() }, holdWhileHidden: true, paused: (paused) => { this.toggleAttribute('data-paused', paused) }, })",
|
|
169805
|
+
"default": "new CountdownController(this, { done: () => { this.dismiss() }, holdWhileHidden: true, paused: (paused) => { this.toggleAttribute('data-paused', paused) this.toggleState('paused', paused) }, })",
|
|
168909
169806
|
"description": "The dismiss timer, which pauses while a reader is on the message, and\nwhile the page is hidden, and continues from what was left. A message that\narrives in a background tab waits for the reader to come back, as React\nAria's toast queue does.\n\nPaused is said on the host so the indicator can freeze with the clock. A\n`data-` attribute rather than a property, because it is written after\nupgrade from a pointer moving: nothing declares it and no server rendered\nit, which is the same reason `Carousel` names its slides from here."
|
|
168910
169807
|
},
|
|
168911
169808
|
{
|
|
@@ -168918,6 +169815,54 @@
|
|
|
168918
169815
|
"attribute": "tone",
|
|
168919
169816
|
"reflects": true
|
|
168920
169817
|
},
|
|
169818
|
+
{
|
|
169819
|
+
"kind": "field",
|
|
169820
|
+
"name": "waiting",
|
|
169821
|
+
"type": {
|
|
169822
|
+
"text": "boolean"
|
|
169823
|
+
},
|
|
169824
|
+
"default": "false",
|
|
169825
|
+
"description": "Whether the region holds the message back, because more messages are\nshowing than its `max-visible`. The region sets it. A waiting message is\nhidden, its timer has not started, and it is said once it shows."
|
|
169826
|
+
},
|
|
169827
|
+
{
|
|
169828
|
+
"kind": "field",
|
|
169829
|
+
"name": "started",
|
|
169830
|
+
"type": {
|
|
169831
|
+
"text": "boolean"
|
|
169832
|
+
},
|
|
169833
|
+
"privacy": "private",
|
|
169834
|
+
"default": "false",
|
|
169835
|
+
"description": "Whether the dismiss timer has started, which it does once the message first shows."
|
|
169836
|
+
},
|
|
169837
|
+
{
|
|
169838
|
+
"kind": "field",
|
|
169839
|
+
"name": "holding",
|
|
169840
|
+
"type": {
|
|
169841
|
+
"text": "boolean"
|
|
169842
|
+
},
|
|
169843
|
+
"privacy": "private",
|
|
169844
|
+
"default": "false",
|
|
169845
|
+
"description": "Whether the timer is held for `waiting`, so the hold is let go once."
|
|
169846
|
+
},
|
|
169847
|
+
{
|
|
169848
|
+
"kind": "method",
|
|
169849
|
+
"name": "wait",
|
|
169850
|
+
"privacy": "private",
|
|
169851
|
+
"return": {
|
|
169852
|
+
"type": {
|
|
169853
|
+
"text": "void"
|
|
169854
|
+
}
|
|
169855
|
+
},
|
|
169856
|
+
"parameters": [
|
|
169857
|
+
{
|
|
169858
|
+
"name": "waiting",
|
|
169859
|
+
"type": {
|
|
169860
|
+
"text": "boolean"
|
|
169861
|
+
}
|
|
169862
|
+
}
|
|
169863
|
+
],
|
|
169864
|
+
"description": "Starts the timer when the message first shows, and holds it while it waits again."
|
|
169865
|
+
},
|
|
168921
169866
|
{
|
|
168922
169867
|
"kind": "field",
|
|
168923
169868
|
"name": "openState",
|
|
@@ -168983,6 +169928,13 @@
|
|
|
168983
169928
|
"privacy": "private",
|
|
168984
169929
|
"readonly": true
|
|
168985
169930
|
},
|
|
169931
|
+
{
|
|
169932
|
+
"kind": "field",
|
|
169933
|
+
"name": "handleKeydown",
|
|
169934
|
+
"privacy": "private",
|
|
169935
|
+
"readonly": true,
|
|
169936
|
+
"description": "Escape dismisses the message holding focus, as Radix's toast does. Taken\nonly when the dismissal goes ahead, so a refused one leaves the key to\nthe page."
|
|
169937
|
+
},
|
|
168986
169938
|
{
|
|
168987
169939
|
"kind": "method",
|
|
168988
169940
|
"name": "assigned",
|
|
@@ -169109,7 +170061,7 @@
|
|
|
169109
170061
|
"text": "HTMLElement | undefined"
|
|
169110
170062
|
}
|
|
169111
170063
|
},
|
|
169112
|
-
"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.",
|
|
169113
170065
|
"inheritedFrom": {
|
|
169114
170066
|
"name": "MixinDismissible",
|
|
169115
170067
|
"module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
|
|
@@ -169590,6 +170542,28 @@
|
|
|
169590
170542
|
}
|
|
169591
170543
|
}
|
|
169592
170544
|
],
|
|
170545
|
+
"cssStates": [
|
|
170546
|
+
{
|
|
170547
|
+
"description": "The message has been dismissed and is hidden, or leaving.",
|
|
170548
|
+
"name": "closed"
|
|
170549
|
+
},
|
|
170550
|
+
{
|
|
170551
|
+
"description": "The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.",
|
|
170552
|
+
"name": "paused"
|
|
170553
|
+
},
|
|
170554
|
+
{
|
|
170555
|
+
"description": "The region holds the message back, past its `max-visible`, until a message before it goes.",
|
|
170556
|
+
"name": "waiting"
|
|
170557
|
+
},
|
|
170558
|
+
{
|
|
170559
|
+
"description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
|
|
170560
|
+
"name": "settled",
|
|
170561
|
+
"inheritedFrom": {
|
|
170562
|
+
"name": "HelixElement",
|
|
170563
|
+
"module": "src/helix-element/helix-element.ts"
|
|
170564
|
+
}
|
|
170565
|
+
}
|
|
170566
|
+
],
|
|
169593
170567
|
"mixins": [
|
|
169594
170568
|
{
|
|
169595
170569
|
"name": "MixinDismissible",
|
|
@@ -169611,16 +170585,6 @@
|
|
|
169611
170585
|
},
|
|
169612
170586
|
"tagName": "helix-headless-toast-item",
|
|
169613
170587
|
"customElement": true,
|
|
169614
|
-
"cssStates": [
|
|
169615
|
-
{
|
|
169616
|
-
"description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
|
|
169617
|
-
"name": "settled",
|
|
169618
|
-
"inheritedFrom": {
|
|
169619
|
-
"name": "HelixElement",
|
|
169620
|
-
"module": "src/helix-element/helix-element.ts"
|
|
169621
|
-
}
|
|
169622
|
-
}
|
|
169623
|
-
],
|
|
169624
170588
|
"modulePath": "src/toast/item/toast-item.ts",
|
|
169625
170589
|
"definitionPath": "src/toast/item/toast-item.ts"
|
|
169626
170590
|
}
|
|
@@ -169650,7 +170614,7 @@
|
|
|
169650
170614
|
"declarations": [
|
|
169651
170615
|
{
|
|
169652
170616
|
"kind": "class",
|
|
169653
|
-
"description": "The region and its items are one family because a live region must be in the\ndocument before a message is added to it. Assistive technology often does not\nannounce a region that arrives already holding its message. `Radio.Group` is\npart of its family for the same reason.\n\n**The region is a landmark named by `label`, and it says each message once\nas it arrives**: a `danger` message assertively, and every other one\npolitely. It says the word for the tone, the heading, the description and\nthe text, and not the actions, through two live regions of its own, the\n`live` parts, which it empties again a moment later. The stack itself is not\na live region, so a message is never said twice, and changing the words of a\nmessage already showing says nothing. Each message is an `alertdialog` named\nby its words, so a reader who moves into the stack hears which message they\nare on.\n\n**`hotkey` takes focus to the stack and back**, F8 unless you set it, and\n`label` says which key: `{hotkey}` in it is filled in, so the default name\nis \"Notifications (F8)\". Pressed while focus is in the stack, it gives focus\nback to where it was.\n\n**The region never creates or removes items.** You render items and remove\nthem. An item requests closing with a cancelable `helix-dismiss` event. A\ndismissed item hides itself and stays in the DOM, so your framework's state\nand the DOM stay in sync. It hides on its own unless you set `open`, which\nmakes the state yours.\n\n**`add()` shows a message from script**, for a page with no framework state\nto render them from: it appends a message of the region's own tier and\nremoves it once it has been dismissed and has finished leaving. Messages\nyou render yourself stay yours, and the region never removes them. A touch\nor a pen swipes a message away toward the end of the line.\n\n**The stack is in the top layer.** The `region` part is a `popover=\"manual\"`\nshown while a message is showing, and shown again above a modal dialog that\nopened after it. Position the `region` part, which is the box in the top\nlayer. While a modal `Dialog`, `Drawer` or `Lightbox` is open, the browser\nmakes everything outside it inert, the stack included, so a message stays\nvisible and its actions cannot be pressed. Where the browser has\n`ariaNotify`, a message that arrives then is announced through it. For a\nmessage with an action, render a second region inside the dialog.\n\nWhen a message with focus inside it is dismissed, focus moves to the next\nmessage, then the one before it, then back to where it was before it entered\nthe stack.",
|
|
170617
|
+
"description": "The region and its items are one family because a live region must be in the\ndocument before a message is added to it. Assistive technology often does not\nannounce a region that arrives already holding its message. `Radio.Group` is\npart of its family for the same reason.\n\n**The region is a landmark named by `label`, and it says each message once\nas it arrives**: a `danger` message assertively, and every other one\npolitely. It says the word for the tone, the heading, the description and\nthe text, and not the actions, through two live regions of its own, the\n`live` parts, which it empties again a moment later. The stack itself is not\na live region, so a message is never said twice, and changing the words of a\nmessage already showing says nothing. Each message is an `alertdialog` named\nby its words, so a reader who moves into the stack hears which message they\nare on.\n\n**`hotkey` takes focus to the stack and back**, F8 unless you set it, and\n`label` says which key: `{hotkey}` in it is filled in, so the default name\nis \"Notifications (F8)\". Pressed while focus is in the stack, it gives focus\nback to where it was.\n\n**The region never creates or removes items.** You render items and remove\nthem. An item requests closing with a cancelable `helix-dismiss` event. A\ndismissed item hides itself and stays in the DOM, so your framework's state\nand the DOM stay in sync. It hides on its own unless you set `open`, which\nmakes the state yours.\n\n**`add()` shows a message from script**, for a page with no framework state\nto render them from: it appends a message of the region's own tier and\nremoves it once it has been dismissed and has finished leaving. Messages\nyou render yourself stay yours, and the region never removes them. A touch\nor a pen swipes a message away toward the end of the line.\n\n**The stack is in the top layer.** The `region` part is a `popover=\"manual\"`\nshown while a message is showing, and shown again above a modal dialog that\nopened after it. Position the `region` part, which is the box in the top\nlayer. While a modal `Dialog`, `Drawer` or `Lightbox` is open, the browser\nmakes everything outside it inert, the stack included, so a message stays\nvisible and its actions cannot be pressed. Where the browser has\n`ariaNotify`, a message that arrives then is announced through it. For a\nmessage with an action, render a second region inside the dialog.\n\nWhen a message with focus inside it is dismissed, focus moves to the next\nmessage, then the one before it, then back to where it was before it entered\nthe stack.\n\n**`max-visible` limits how many messages show at once**, as Zag's `max`\ndoes. The messages after that many, in document order, wait: each is hidden,\nits timer has not started, and the region says it once it shows, when a\nmessage before it goes. A waiting message has `:state(waiting)`.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| F8, or your `hotkey` | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. |\n| Tab, Shift+Tab | Moves between the controls of the messages. |\n| Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. |",
|
|
169654
170618
|
"name": "HelixHeadlessToast",
|
|
169655
170619
|
"cssParts": [
|
|
169656
170620
|
{
|
|
@@ -169702,6 +170666,15 @@
|
|
|
169702
170666
|
"words": true
|
|
169703
170667
|
}
|
|
169704
170668
|
},
|
|
170669
|
+
{
|
|
170670
|
+
"kind": "field",
|
|
170671
|
+
"name": "maxVisible",
|
|
170672
|
+
"type": {
|
|
170673
|
+
"text": "number | undefined"
|
|
170674
|
+
},
|
|
170675
|
+
"description": "How many messages show at once. The messages after that many wait, hidden\nand with their timers stopped, until a message before them goes. Unset,\nevery message shows.",
|
|
170676
|
+
"attribute": "max-visible"
|
|
170677
|
+
},
|
|
169705
170678
|
{
|
|
169706
170679
|
"kind": "field",
|
|
169707
170680
|
"name": "placement",
|
|
@@ -169887,6 +170860,36 @@
|
|
|
169887
170860
|
"description": "The messages that are showing, in order.",
|
|
169888
170861
|
"readonly": true
|
|
169889
170862
|
},
|
|
170863
|
+
{
|
|
170864
|
+
"kind": "field",
|
|
170865
|
+
"name": "held",
|
|
170866
|
+
"privacy": "private",
|
|
170867
|
+
"readonly": true,
|
|
170868
|
+
"default": "new WeakSet<Element>()",
|
|
170869
|
+
"description": "The messages `max-visible` holds back."
|
|
170870
|
+
},
|
|
170871
|
+
{
|
|
170872
|
+
"kind": "method",
|
|
170873
|
+
"name": "queue",
|
|
170874
|
+
"privacy": "private",
|
|
170875
|
+
"return": {
|
|
170876
|
+
"type": {
|
|
170877
|
+
"text": "HTMLElement[]"
|
|
170878
|
+
}
|
|
170879
|
+
},
|
|
170880
|
+
"description": "Holds back the messages past `max-visible`, and returns the ones it has\njust let go. A message that has been dismissed takes no place in the line."
|
|
170881
|
+
},
|
|
170882
|
+
{
|
|
170883
|
+
"kind": "method",
|
|
170884
|
+
"name": "restack",
|
|
170885
|
+
"privacy": "private",
|
|
170886
|
+
"return": {
|
|
170887
|
+
"type": {
|
|
170888
|
+
"text": "void"
|
|
170889
|
+
}
|
|
170890
|
+
},
|
|
170891
|
+
"description": "Lets go of the messages past `max-visible` that now have room, raises the\nstack and says them, once each has shown."
|
|
170892
|
+
},
|
|
169890
170893
|
{
|
|
169891
170894
|
"kind": "field",
|
|
169892
170895
|
"name": "region",
|
|
@@ -170348,6 +171351,14 @@
|
|
|
170348
171351
|
"description": "Accessible name for the region, with `{hotkey}` filled in. Translate it with\nthe rest of your interface.",
|
|
170349
171352
|
"fieldName": "label"
|
|
170350
171353
|
},
|
|
171354
|
+
{
|
|
171355
|
+
"name": "max-visible",
|
|
171356
|
+
"type": {
|
|
171357
|
+
"text": "number | undefined"
|
|
171358
|
+
},
|
|
171359
|
+
"description": "How many messages show at once. The messages after that many wait, hidden\nand with their timers stopped, until a message before them goes. Unset,\nevery message shows.",
|
|
171360
|
+
"fieldName": "maxVisible"
|
|
171361
|
+
},
|
|
170351
171362
|
{
|
|
170352
171363
|
"name": "placement",
|
|
170353
171364
|
"type": {
|
|
@@ -181373,6 +182384,10 @@
|
|
|
181373
182384
|
"description": "The column at the start of an entry. It is a slot and is always present.",
|
|
181374
182385
|
"name": "entry-start"
|
|
181375
182386
|
},
|
|
182387
|
+
{
|
|
182388
|
+
"description": "The panel an entry's submenu opens in beside it. The playlist's entries have none.",
|
|
182389
|
+
"name": "entry-surface"
|
|
182390
|
+
},
|
|
181376
182391
|
{
|
|
181377
182392
|
"description": "The menu that holds the entries.",
|
|
181378
182393
|
"name": "menu"
|
|
@@ -183442,6 +184457,10 @@
|
|
|
183442
184457
|
"description": "The leading column that holds the `start` slot. It is always rendered.",
|
|
183443
184458
|
"name": "entry-start"
|
|
183444
184459
|
},
|
|
184460
|
+
{
|
|
184461
|
+
"description": "The panel a row's submenu opens in beside it. The player's rows have none.",
|
|
184462
|
+
"name": "entry-surface"
|
|
184463
|
+
},
|
|
183445
184464
|
{
|
|
183446
184465
|
"description": "The message shown when the source cannot be played.",
|
|
183447
184466
|
"name": "failure"
|
|
@@ -187865,6 +188884,6 @@
|
|
|
187865
188884
|
],
|
|
187866
188885
|
"helix": {
|
|
187867
188886
|
"package": "@fusion.dev/helix-headless",
|
|
187868
|
-
"version": "0.
|
|
188887
|
+
"version": "0.158.0"
|
|
187869
188888
|
}
|
|
187870
188889
|
}
|