@fusion.dev/helix-headless 0.171.0 → 0.172.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 +439 -65
- package/dist/chat/composer/chat-composer.d.ts +28 -1
- package/dist/chat/composer/chat-composer.js +22 -3
- package/dist/chat/root/chat-root.d.ts +38 -2
- package/dist/chat/root/chat-root.js +38 -1
- package/dist/color-input/root/color-input-root.d.ts +15 -1
- package/dist/color-input/root/color-input-root.js +19 -1
- package/dist/color-picker/root/color-picker-root.d.ts +5 -1
- package/dist/color-picker/root/color-picker-root.js +1 -1
- package/dist/data-table/root/data-table-root.d.ts +5 -1
- package/dist/data-table/root/data-table-root.js +1 -0
- package/dist/dialog/root/dialog-root.js +1 -0
- package/dist/drawer/root/drawer-root.d.ts +4 -0
- package/dist/drawer/root/drawer-root.js +1 -0
- package/dist/element-events.generated.js +1 -0
- package/dist/lightbox/root/lightbox-root.js +1 -0
- package/dist/listbox/root/listbox-root.d.ts +2 -1
- package/dist/listbox/root/listbox-root.js +3 -2
- package/dist/menu/item/menu-item.d.ts +2 -0
- package/dist/menu/item/menu-item.js +2 -0
- package/dist/menu/root/menu-root.d.ts +73 -12
- package/dist/menu/root/menu-root.js +103 -7
- package/dist/popover/root/popover-root.d.ts +59 -6
- package/dist/popover/root/popover-root.js +51 -3
- package/dist/select/root/select-root.d.ts +2 -2
- package/dist/select/root/select-root.js +2 -2
- package/dist/textarea/root/textarea-root.d.ts +8 -0
- package/dist/textarea/root/textarea-root.js +16 -0
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +312 -30
- package/types/vue.d.ts +59 -8
- package/types/words.d.ts +8 -0
package/custom-elements.json
CHANGED
|
@@ -23184,7 +23184,7 @@
|
|
|
23184
23184
|
"declarations": [
|
|
23185
23185
|
{
|
|
23186
23186
|
"kind": "class",
|
|
23187
|
-
"description": "The composer is a separate element so you can replace it. If you need\nattachments, slash commands, or a model picker, replace the composer and keep\nthe transcript.\n\nBy default, Enter sends and Shift+Enter starts a new line, the convention in\nmessaging apps. Document editors mostly use the opposite, so `submit-on`\ntakes `enter` or `button`. Use `button` for a long-form composer.\n\nThe composer clears only when no listener cancels the send, so the text is\nkept when you cancel a send that failed.\n\n**In a form, the draft is the composer's value**, submitted under `name`. A\nform reset puts back the `value` the markup declared, and a `<fieldset\ndisabled>` turns the composer off. Sending is still `helix-send`, and it\ndoes not submit the form.\n\n**`required`, `minlength` and `maxlength` are checked by the browser**, as\non a `<textarea>`, and the message is the browser's. `maxlength` stops the\nfield taking more. A draft that fails them does not send, and the composer\ntakes `:state(invalid)` and `aria-invalid` once the reader has tried to send\nit, the form was submitted, or the reader edited the field and left it.\nSending an empty required composer counts as trying. Tabbing past an empty\ncomposer marks nothing.\n\n**`typing` says whether the user is writing**, and `helix-typing` is sent\neach time it changes: when they start, and when they send or stop for\n`typing-timeout` milliseconds. Pass it on to show \"is typing\" to the other\nside.",
|
|
23187
|
+
"description": "The composer is a separate element so you can replace it. If you need\nattachments, slash commands, or a model picker, replace the composer and keep\nthe transcript.\n\nBy default, Enter sends and Shift+Enter starts a new line, the convention in\nmessaging apps. Document editors mostly use the opposite, so `submit-on`\ntakes `enter` or `button`. Use `button` for a long-form composer.\n\nThe composer clears only when no listener cancels the send, so the text is\nkept when you cancel a send that failed.\n\n**In a form, the draft is the composer's value**, submitted under `name`. A\nform reset puts back the `value` the markup declared, and a `<fieldset\ndisabled>` turns the composer off. Sending is still `helix-send`, and it\ndoes not submit the form.\n\n**`required`, `minlength` and `maxlength` are checked by the browser**, as\non a `<textarea>`, and the message is the browser's. `maxlength` stops the\nfield taking more. A draft that fails them does not send, and the composer\ntakes `:state(invalid)` and `aria-invalid` once the reader has tried to send\nit, the form was submitted, or the reader edited the field and left it.\nSending an empty required composer counts as trying. Tabbing past an empty\ncomposer marks nothing.\n\n**`feedback` is a message of your own about the draft**, such as one your\nserver sent back. While it is set, the composer is invalid at once, does\nnot send or submit, shows the message under the field, and a screen reader\nhears it as it appears. Clear it to let the draft go.\n\n**`typing` says whether the user is writing**, and `helix-typing` is sent\neach time it changes: when they start, and when they send or stop for\n`typing-timeout` milliseconds. Pass it on to show \"is typing\" to the other\nside.",
|
|
23188
23188
|
"name": "HelixHeadlessChatComposer",
|
|
23189
23189
|
"cssParts": [
|
|
23190
23190
|
{
|
|
@@ -23195,6 +23195,10 @@
|
|
|
23195
23195
|
"description": "The box around the `end` slot.",
|
|
23196
23196
|
"name": "end"
|
|
23197
23197
|
},
|
|
23198
|
+
{
|
|
23199
|
+
"description": "The `feedback` message, under the field while it is set.",
|
|
23200
|
+
"name": "feedback"
|
|
23201
|
+
},
|
|
23198
23202
|
{
|
|
23199
23203
|
"description": "The text field.",
|
|
23200
23204
|
"name": "field"
|
|
@@ -23237,6 +23241,16 @@
|
|
|
23237
23241
|
"default": "'helix-chat-composer'",
|
|
23238
23242
|
"description": "The key this part's words are registered under, its styled tag:\n`registerWords('de', { 'helix-chat-composer': { sendLabel: 'Senden' } })`."
|
|
23239
23243
|
},
|
|
23244
|
+
{
|
|
23245
|
+
"kind": "field",
|
|
23246
|
+
"name": "feedback",
|
|
23247
|
+
"type": {
|
|
23248
|
+
"text": "string"
|
|
23249
|
+
},
|
|
23250
|
+
"default": "''",
|
|
23251
|
+
"description": "A message about the draft, shown under the field. While set, the composer\nis invalid, does not send, and does not submit, as a field's `feedback`\ndoes, and the message is announced as it appears.",
|
|
23252
|
+
"attribute": "feedback"
|
|
23253
|
+
},
|
|
23240
23254
|
{
|
|
23241
23255
|
"kind": "field",
|
|
23242
23256
|
"name": "label",
|
|
@@ -23361,6 +23375,16 @@
|
|
|
23361
23375
|
"default": "false",
|
|
23362
23376
|
"description": "Whether the reader has tried to send or submit the draft, or edited it and left."
|
|
23363
23377
|
},
|
|
23378
|
+
{
|
|
23379
|
+
"kind": "field",
|
|
23380
|
+
"name": "edited",
|
|
23381
|
+
"type": {
|
|
23382
|
+
"text": "boolean"
|
|
23383
|
+
},
|
|
23384
|
+
"privacy": "private",
|
|
23385
|
+
"default": "false",
|
|
23386
|
+
"description": "Whether the reader has typed in the field since it last held a fresh\ndraft: since it rendered, since a send cleared it, or since a reset.\n\n**A send clears the field, and the field still sends `change` as it is\nleft**, because the platform compares the text with what it held when it\nwas focused. Measured in Chromium before this: a required composer sent\n\"hi\", cleared, and on Tab showed itself invalid over an empty draft\nnobody had written."
|
|
23387
|
+
},
|
|
23364
23388
|
{
|
|
23365
23389
|
"kind": "field",
|
|
23366
23390
|
"name": "shownInvalid",
|
|
@@ -23454,6 +23478,13 @@
|
|
|
23454
23478
|
"readonly": true,
|
|
23455
23479
|
"description": "The reader has had a go at the draft, so whether it is wrong can be shown."
|
|
23456
23480
|
},
|
|
23481
|
+
{
|
|
23482
|
+
"kind": "field",
|
|
23483
|
+
"name": "handleChange",
|
|
23484
|
+
"privacy": "private",
|
|
23485
|
+
"readonly": true,
|
|
23486
|
+
"description": "The field's `change`, which counts only after the reader typed in it."
|
|
23487
|
+
},
|
|
23457
23488
|
{
|
|
23458
23489
|
"kind": "method",
|
|
23459
23490
|
"name": "formStateRestoreCallback",
|
|
@@ -24374,6 +24405,15 @@
|
|
|
24374
24405
|
}
|
|
24375
24406
|
],
|
|
24376
24407
|
"attributes": [
|
|
24408
|
+
{
|
|
24409
|
+
"name": "feedback",
|
|
24410
|
+
"type": {
|
|
24411
|
+
"text": "string"
|
|
24412
|
+
},
|
|
24413
|
+
"default": "''",
|
|
24414
|
+
"description": "A message about the draft, shown under the field. While set, the composer\nis invalid, does not send, and does not submit, as a field's `feedback`\ndoes, and the message is announced as it appears.",
|
|
24415
|
+
"fieldName": "feedback"
|
|
24416
|
+
},
|
|
24377
24417
|
{
|
|
24378
24418
|
"name": "label",
|
|
24379
24419
|
"type": {
|
|
@@ -24491,7 +24531,7 @@
|
|
|
24491
24531
|
],
|
|
24492
24532
|
"cssStates": [
|
|
24493
24533
|
{
|
|
24494
|
-
"description": "The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.",
|
|
24534
|
+
"description": "The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.",
|
|
24495
24535
|
"name": "invalid"
|
|
24496
24536
|
},
|
|
24497
24537
|
{
|
|
@@ -25471,7 +25511,7 @@
|
|
|
25471
25511
|
"declarations": [
|
|
25472
25512
|
{
|
|
25473
25513
|
"kind": "class",
|
|
25474
|
-
"description": "Chat has no positioning, no backdrop, and no trigger, so you can put it in\nany container, such as a page, a sidebar, a modal, or a floating panel.\n\nThe transcript stays pinned to the bottom, including while a streamed answer\ngrows, until the user scrolls more than `threshold` away from it.\n\nWith `history` set to `more`, reaching the top fires `helix-history`. Set\n`loading` while you fetch, then prepend the older turns. The turn the user\nwas reading stays in place on screen.\n\nThe log is `aria-live=\"off\"`. A separate status region announces each new\nturn once, when it has finished arriving. It skips the user's own turns\nunless they failed to send, turns loaded as history, and the turns already\nthere when the transcript opened. A turn is said with its author first, such\nas \"Ada: It ships today\" (`arrival-label`), where its author can be named.\n\nPass the turns as children or as `turns` data. Do not use both: a chat given\nboth draws every turn from `turns` and then the children, and says so once\nin the console. Children render from the server and suit most\nconversations. `turns` draws a long\ntranscript one window at a time, so the log needs a block size of its own.\n\n**A conversation is built from three elements.** The chat holds the\ntranscript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits\nin the `composer` slot. When the user sends, `helix-send` reaches the chat:\nadd their turn with `author=\"me\"` and `state=\"sending\"`, then set `state` to\n`sent` or `failed` when your server answers. Add the reply as a turn with\n`state=\"streaming\"`, write its text as it arrives, and set `state` to `sent`\nwhen it is complete. While the user types, the composer sends\n`helix-typing`, which you can pass on to the other side. When the other side\ntypes, set `typing` to their name: the status band draws three dots and\n\"Ada is typing\" (`typing-label`), which a screen reader hears, and clearing\nit takes them away. Anything slotted into `status` is drawn first.\n\n**Keyboard.** The transcript moves between turns the way a feed does. Each\nturn says its place, such as \"3 of 40\", windowed or not. The transcript is\na tab stop while it holds a turn, and the turn a reader moved to is one\ntoo. Moving to an older turn unpins a transcript that scrolls and scrolls\nthe turn into view, and moving to the newest pins it again.\n\n| Key | What it does |\n|---|---|\n| Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. |\n| Control with End | Moves focus to the composer. |\n| Control with Home | Moves focus to the first control above the transcript, or to the transcript. |\n\nWhile you are scrolled away from the newest turn, the `resume` region shows\na button that takes you back, named by `resume-label`, \"Jump to latest\".\nSlot your own control into `resume` to replace it.\n\nA screen reader names each turn by its author and its time, such as \"You, 2\nminutes ago\". Set `me-label` and `message-label` to say it in your language,\nand give each turn by `them` an `author-label`. A turn with neither an author\nlabel nor a time is named by `turn-label`, \"Message\".\n\nA turn from `turns` is drawn in the chat's shadow root, so style it through\nthe forwarded `message-*` parts. A turn by `me` also gets each part with\n`-mine` added, and the turn's state adds `message-meta-failed`,\n`message-content-sending`, and `message-content-streaming`. To style each\nparticipant differently, give `author-styles` the declarations for each\nauthor, such as `{\"ada\": \"--chat-message-background-color: …\"}`: the message\ndrawn for each of their turns takes them as its `style`, so the message's\ncustom properties change for that author alone. Turns passed as children are\nstyled by their `author`, such as `helix-chat-message[author=\"ada\"]`.",
|
|
25514
|
+
"description": "Chat has no positioning, no backdrop, and no trigger, so you can put it in\nany container, such as a page, a sidebar, a modal, or a floating panel.\n\nThe transcript stays pinned to the bottom, including while a streamed answer\ngrows, until the user scrolls more than `threshold` away from it.\n\nWith `history` set to `more`, reaching the top fires `helix-history`. Set\n`loading` while you fetch, then prepend the older turns. The turn the user\nwas reading stays in place on screen.\n\nThe transcript is a `log`, the role for content added in order where the\nnewest matters most, and it answers the APG feed's keys. The `feed` role\nreads its articles as a list from the top, with no newest end to stay\npinned to, so the log keeps the role a conversation has. While `loading` is\nset or older turns load, the log carries `aria-busy`, as the APG asks of a\nfeed.\n\nThe log is `aria-live=\"off\"`. A separate status region announces each new\nturn once, when it has finished arriving. It skips the user's own turns\nunless they failed to send, turns loaded as history, and the turns already\nthere when the transcript opened. A turn is said with its author first, such\nas \"Ada: It ships today\" (`arrival-label`), where its author can be named.\n\nPass the turns as children or as `turns` data. Do not use both: a chat given\nboth draws every turn from `turns` and then the children, and says so once\nin the console. Children render from the server and suit most\nconversations. `turns` draws a long\ntranscript one window at a time, so the log needs a block size of its own.\n\nThe log scrolls on this tier. It carries `data-scroller`, and `core` ships\n`[data-scroller] { overflow: auto }` into every shadow root, so pinning,\nhistory and the window work with no stylesheet. You still need to give the\nlog a block size, such as `helix-headless-chat::part(log) { block-size:\n20rem }`.\n\n**A conversation is built from three elements.** The chat holds the\ntranscript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits\nin the `composer` slot. When the user sends, `helix-send` reaches the chat:\nadd their turn with `author=\"me\"` and `state=\"sending\"`, then set `state` to\n`sent` or `failed` when your server answers. Add the reply as a turn with\n`state=\"streaming\"`, write its text as it arrives, and set `state` to `sent`\nwhen it is complete. While the user types, the composer sends\n`helix-typing`, which you can pass on to the other side. When the other side\ntypes, set `typing` to their name: the status band draws three dots and\n\"Ada is typing\" (`typing-label`), which a screen reader hears, and clearing\nit takes them away. Anything slotted into `status` is drawn first.\n\n**Keyboard.** The transcript moves between turns the way a feed does. Each\nturn says its place, such as \"3 of 40\", windowed or not. The transcript is\na tab stop while it holds a turn, and the turn a reader moved to is one\ntoo. Moving to an older turn unpins a transcript that scrolls and scrolls\nthe turn into view, and moving to the newest pins it again. When the turn\nholding focus is removed, focus moves to the turn that took its place, or to\nthe one before it where it was the last.\n\n| Key | What it does |\n|---|---|\n| Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. |\n| Control with End | Moves focus to the composer. |\n| Control with Home | Moves focus to the first control above the transcript, or to the transcript. |\n\nWhile you are scrolled away from the newest turn, the `resume` region shows\na button that takes you back, named by `resume-label`, \"Jump to latest\".\nSlot your own control into `resume` to replace it.\n\nA screen reader names each turn by its author and its time, such as \"You, 2\nminutes ago\". Set `me-label` and `message-label` to say it in your language,\nand give each turn by `them` an `author-label`. A turn with neither an author\nlabel nor a time is named by `turn-label`, \"Message\".\n\nA turn from `turns` is drawn in the chat's shadow root, so style it through\nthe forwarded `message-*` parts. A turn by `me` also gets each part with\n`-mine` added, and the turn's state adds `message-meta-failed`,\n`message-content-sending`, and `message-content-streaming`. To style each\nparticipant differently, give `author-styles` the declarations for each\nauthor, such as `{\"ada\": \"--chat-message-background-color: …\"}`: the message\ndrawn for each of their turns takes them as its `style`, so the message's\ncustom properties change for that author alone. Turns passed as children are\nstyled by their `author`, such as `helix-chat-message[author=\"ada\"]`.",
|
|
25475
25515
|
"name": "HelixHeadlessChat",
|
|
25476
25516
|
"cssParts": [
|
|
25477
25517
|
{
|
|
@@ -25515,7 +25555,7 @@
|
|
|
25515
25555
|
"name": "loading"
|
|
25516
25556
|
},
|
|
25517
25557
|
{
|
|
25518
|
-
"description": "The transcript, which scrolls.",
|
|
25558
|
+
"description": "The transcript, which scrolls. On this tier, it needs only a block size.",
|
|
25519
25559
|
"name": "log"
|
|
25520
25560
|
},
|
|
25521
25561
|
{
|
|
@@ -26406,6 +26446,40 @@
|
|
|
26406
26446
|
],
|
|
26407
26447
|
"description": "Keeps the window on the same turns when the set changes around them.\n\nTurns added before the first one are history, and the controller is told\nhow many so every measurement moves with its turn. A first turn that is gone\nmeans the set was trimmed or replaced, and a measurement that now names a\ndifferent turn is worse than the estimate."
|
|
26408
26448
|
},
|
|
26449
|
+
{
|
|
26450
|
+
"kind": "field",
|
|
26451
|
+
"name": "held",
|
|
26452
|
+
"type": {
|
|
26453
|
+
"text": "{ at: number; id: unknown } | undefined"
|
|
26454
|
+
},
|
|
26455
|
+
"privacy": "private",
|
|
26456
|
+
"description": "The turn focus is in, by its place and its identity, once a reader is in one."
|
|
26457
|
+
},
|
|
26458
|
+
{
|
|
26459
|
+
"kind": "field",
|
|
26460
|
+
"name": "handleFocusIn",
|
|
26461
|
+
"privacy": "private",
|
|
26462
|
+
"readonly": true,
|
|
26463
|
+
"description": "Notes the turn focus went into, or that it went somewhere else."
|
|
26464
|
+
},
|
|
26465
|
+
{
|
|
26466
|
+
"kind": "field",
|
|
26467
|
+
"name": "handleFocusOut",
|
|
26468
|
+
"privacy": "private",
|
|
26469
|
+
"readonly": true,
|
|
26470
|
+
"description": "Forgets the turn once focus moves to something outside the transcript.\nA move to nothing is kept, since removing the turn that held focus is\none."
|
|
26471
|
+
},
|
|
26472
|
+
{
|
|
26473
|
+
"kind": "method",
|
|
26474
|
+
"name": "followRemoved",
|
|
26475
|
+
"privacy": "private",
|
|
26476
|
+
"return": {
|
|
26477
|
+
"type": {
|
|
26478
|
+
"text": "void"
|
|
26479
|
+
}
|
|
26480
|
+
},
|
|
26481
|
+
"description": "Moves focus to a neighbor where removing the turn that held it dropped\nfocus to the body: the turn that took its place, or the one before it\nwhere it was the last.\n\n**Focus went to the body**, and Page Down did nothing until the reader\ntabbed back into the transcript. List and Virtual List move focus to a\nneighbor the same way, as React Aria's GridList does. Focus anywhere but\nthe body is where you put it, and is left there."
|
|
26482
|
+
},
|
|
26409
26483
|
{
|
|
26410
26484
|
"kind": "method",
|
|
26411
26485
|
"name": "tellTurns",
|
|
@@ -33745,7 +33819,7 @@
|
|
|
33745
33819
|
"declarations": [
|
|
33746
33820
|
{
|
|
33747
33821
|
"kind": "class",
|
|
33748
|
-
"description": "A text field with a button that opens `ColorPicker` in an overlay.\n`ColorPicker` provides the square, the ramps, the eyedropper, and the syntax\ntoggle, and you can also use it on its own, flat on the page. Color Input\nadds the field, the overlay, and the form value, the same arrangement Date\nInput has with `DatePicker`.\n\nYou can type or paste a color into the field without opening the picker.\nColor Input is a custom control, unlike `<input type=\"color\">`, so you can\nstyle the panel to match your interface.\n\nThe field reads every color syntax, including `#f00`, `#ff0000`,\n`rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`,\n`hsl(0 100% 50%)`, `oklch(62.8% 0.258 29.2)`, and `hsb(0, 100%, 100%)`. It\nwrites colors in the syntax that `format` names. The\nfield shows the value without reformatting it, because half-typed input does\nnot survive a round trip through a formatter. Date Input does the same with\ndates.\n\nTyping sends `input` on each keystroke and `change` when you leave the\nfield, as a text field does, so the message about a color it cannot read\nwaits until you are done. Dragging in the panel sends `input` as the color\nmoves and `change` when it settles.\n\nThe trigger and ArrowDown open the panel with focus in the square. Tab moves\nbetween the panel's controls without leaving it, and Escape closes it and\nreturns focus to the field.\n\nThe component sets `--color-input-swatch`, so do not set it yourself. It\nholds the resolved color, so the styled tier can paint the swatch without\nparsing the value.",
|
|
33822
|
+
"description": "A text field with a button that opens `ColorPicker` in an overlay.\n`ColorPicker` provides the square, the ramps, the eyedropper, and the syntax\ntoggle, and you can also use it on its own, flat on the page. Color Input\nadds the field, the overlay, and the form value, the same arrangement Date\nInput has with `DatePicker`.\n\nYou can type or paste a color into the field without opening the picker.\nColor Input is a custom control, unlike `<input type=\"color\">`, so you can\nstyle the panel to match your interface.\n\nThe field reads every color syntax, including `#f00`, `#ff0000`,\n`rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`,\n`hsl(0 100% 50%)`, `oklch(62.8% 0.258 29.2)`, and `hsb(0, 100%, 100%)`. It\nwrites colors in the syntax that `format` names. The\nfield shows the value without reformatting it, because half-typed input does\nnot survive a round trip through a formatter. Date Input does the same with\ndates.\n\nTyping sends `input` on each keystroke and `change` when you leave the\nfield, as a text field does, so the message about a color it cannot read\nwaits until you are done. Dragging in the panel sends `input` as the color\nmoves and `change` when it settles.\n\nThe trigger and ArrowDown open the panel with focus in the square. Tab moves\nbetween the panel's controls without leaving it, and Escape closes it and\nreturns focus to the control that opened it: the trigger after a press, and\nthe field after ArrowDown.\n\nThe component sets `--color-input-swatch`, so do not set it yourself. It\nholds the resolved color, so the styled tier can paint the swatch without\nparsing the value.",
|
|
33749
33823
|
"name": "HelixHeadlessColorInput",
|
|
33750
33824
|
"cssProperties": [
|
|
33751
33825
|
{
|
|
@@ -34345,6 +34419,38 @@
|
|
|
34345
34419
|
"module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
|
|
34346
34420
|
}
|
|
34347
34421
|
},
|
|
34422
|
+
{
|
|
34423
|
+
"kind": "field",
|
|
34424
|
+
"name": "pressedOpen",
|
|
34425
|
+
"type": {
|
|
34426
|
+
"text": "boolean"
|
|
34427
|
+
},
|
|
34428
|
+
"privacy": "private",
|
|
34429
|
+
"default": "false",
|
|
34430
|
+
"description": "Whether the trigger's press opened the panel that is open now."
|
|
34431
|
+
},
|
|
34432
|
+
{
|
|
34433
|
+
"kind": "field",
|
|
34434
|
+
"name": "handlePress",
|
|
34435
|
+
"privacy": "private",
|
|
34436
|
+
"readonly": true,
|
|
34437
|
+
"description": "The trigger's press, which notes that it opened the panel, so Escape hands\nfocus back to the trigger."
|
|
34438
|
+
},
|
|
34439
|
+
{
|
|
34440
|
+
"kind": "method",
|
|
34441
|
+
"name": "returnFocus",
|
|
34442
|
+
"privacy": "protected",
|
|
34443
|
+
"return": {
|
|
34444
|
+
"type": {
|
|
34445
|
+
"text": "void"
|
|
34446
|
+
}
|
|
34447
|
+
},
|
|
34448
|
+
"description": "Hands focus back to the control that opened the panel: the trigger after\nits press, which is the APG date picker dialog's rule, and the text after\nArrowDown from it.",
|
|
34449
|
+
"inheritedFrom": {
|
|
34450
|
+
"name": "MixinPickerField",
|
|
34451
|
+
"module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
|
|
34452
|
+
}
|
|
34453
|
+
},
|
|
34348
34454
|
{
|
|
34349
34455
|
"kind": "method",
|
|
34350
34456
|
"name": "renderPicker",
|
|
@@ -34593,21 +34699,6 @@
|
|
|
34593
34699
|
"module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
|
|
34594
34700
|
}
|
|
34595
34701
|
},
|
|
34596
|
-
{
|
|
34597
|
-
"kind": "method",
|
|
34598
|
-
"name": "returnFocus",
|
|
34599
|
-
"privacy": "protected",
|
|
34600
|
-
"return": {
|
|
34601
|
-
"type": {
|
|
34602
|
-
"text": "void"
|
|
34603
|
-
}
|
|
34604
|
-
},
|
|
34605
|
-
"description": "Puts the caret back in the field without the field reopening the panel.\n\nThe anchor rather than the text, which is the trigger where there is no\ntext: Color Input's swatch dropped focus to the body on Escape.",
|
|
34606
|
-
"inheritedFrom": {
|
|
34607
|
-
"name": "MixinPickerField",
|
|
34608
|
-
"module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
|
|
34609
|
-
}
|
|
34610
|
-
},
|
|
34611
34702
|
{
|
|
34612
34703
|
"kind": "method",
|
|
34613
34704
|
"name": "focus",
|
|
@@ -37323,7 +37414,7 @@
|
|
|
37323
37414
|
"text": "TemplateResult | typeof nothing"
|
|
37324
37415
|
}
|
|
37325
37416
|
},
|
|
37326
|
-
"description": "The line `said` holds, or nothing while it is empty.",
|
|
37417
|
+
"description": "The line `said` holds, or nothing while it is empty. `role=\"alert\"`, as\nevery field's feedback line has, so the message is announced when it\nappears.",
|
|
37327
37418
|
"inheritedFrom": {
|
|
37328
37419
|
"name": "MixinPickerFeedback",
|
|
37329
37420
|
"module": "src/mixins/mixin-picker-feedback/mixin-picker-feedback.ts"
|
|
@@ -46213,7 +46304,7 @@
|
|
|
46213
46304
|
"name": "select-selected"
|
|
46214
46305
|
},
|
|
46215
46306
|
{
|
|
46216
|
-
"description": "The grid.",
|
|
46307
|
+
"description": "The grid. While `windowed`, the box that scrolls, which needs only a block size on this tier.",
|
|
46217
46308
|
"name": "table"
|
|
46218
46309
|
},
|
|
46219
46310
|
{
|
|
@@ -46855,7 +46946,7 @@
|
|
|
46855
46946
|
"text": "boolean"
|
|
46856
46947
|
},
|
|
46857
46948
|
"default": "false",
|
|
46858
|
-
"description": "Draws only the rows in view, with empty space in place of the rest.\n\n**Not a `mode`.** `mode` says where the rows come from and who filtered\nthem; this says how many of the ones we hold get drawn. They are\nindependent: a consumer fetching five thousand rows a chunk at a time wants\n`mode=\"server\"` and this at once, and folding this into `mode` would be an\nAPI that forbids that combination for no reason.\n\n**Composes with `paginated` rather than excluding it.** A window over a\npage is coherent -- the page is the slice of the result, the window is the\npart of that slice on screen -- and the arithmetic is the same either way,\nso there is nothing to forbid. Together they suit a table paging at a\nthousand rows, where the page is a reasonable fetch and a poor render.\n\nOff by default. Windowing costs a scroll listener, a measurement per row\ndrawn, and a `block-size` on the scrolling box, and a table of twenty rows\nshould pay none of them.",
|
|
46949
|
+
"description": "Draws only the rows in view, with empty space in place of the rest.\n\n**Not a `mode`.** `mode` says where the rows come from and who filtered\nthem; this says how many of the ones we hold get drawn. They are\nindependent: a consumer fetching five thousand rows a chunk at a time wants\n`mode=\"server\"` and this at once, and folding this into `mode` would be an\nAPI that forbids that combination for no reason.\n\n**Composes with `paginated` rather than excluding it.** A window over a\npage is coherent -- the page is the slice of the result, the window is the\npart of that slice on screen -- and the arithmetic is the same either way,\nso there is nothing to forbid. Together they suit a table paging at a\nthousand rows, where the page is a reasonable fetch and a poor render.\n\nOff by default. Windowing costs a scroll listener, a measurement per row\ndrawn, and a `block-size` on the scrolling box, and a table of twenty rows\nshould pay none of them.\n\nWhile windowed, the `table` part scrolls on this tier: it carries\n`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into\nevery shadow root. You still need to give it a block size.",
|
|
46859
46950
|
"attribute": "windowed",
|
|
46860
46951
|
"reflects": true
|
|
46861
46952
|
},
|
|
@@ -49868,7 +49959,7 @@
|
|
|
49868
49959
|
"text": "boolean"
|
|
49869
49960
|
},
|
|
49870
49961
|
"default": "false",
|
|
49871
|
-
"description": "Draws only the rows in view, with empty space in place of the rest.\n\n**Not a `mode`.** `mode` says where the rows come from and who filtered\nthem; this says how many of the ones we hold get drawn. They are\nindependent: a consumer fetching five thousand rows a chunk at a time wants\n`mode=\"server\"` and this at once, and folding this into `mode` would be an\nAPI that forbids that combination for no reason.\n\n**Composes with `paginated` rather than excluding it.** A window over a\npage is coherent -- the page is the slice of the result, the window is the\npart of that slice on screen -- and the arithmetic is the same either way,\nso there is nothing to forbid. Together they suit a table paging at a\nthousand rows, where the page is a reasonable fetch and a poor render.\n\nOff by default. Windowing costs a scroll listener, a measurement per row\ndrawn, and a `block-size` on the scrolling box, and a table of twenty rows\nshould pay none of them.",
|
|
49962
|
+
"description": "Draws only the rows in view, with empty space in place of the rest.\n\n**Not a `mode`.** `mode` says where the rows come from and who filtered\nthem; this says how many of the ones we hold get drawn. They are\nindependent: a consumer fetching five thousand rows a chunk at a time wants\n`mode=\"server\"` and this at once, and folding this into `mode` would be an\nAPI that forbids that combination for no reason.\n\n**Composes with `paginated` rather than excluding it.** A window over a\npage is coherent -- the page is the slice of the result, the window is the\npart of that slice on screen -- and the arithmetic is the same either way,\nso there is nothing to forbid. Together they suit a table paging at a\nthousand rows, where the page is a reasonable fetch and a poor render.\n\nOff by default. Windowing costs a scroll listener, a measurement per row\ndrawn, and a `block-size` on the scrolling box, and a table of twenty rows\nshould pay none of them.\n\nWhile windowed, the `table` part scrolls on this tier: it carries\n`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into\nevery shadow root. You still need to give it a block size.",
|
|
49872
49963
|
"fieldName": "windowed"
|
|
49873
49964
|
},
|
|
49874
49965
|
{
|
|
@@ -56048,7 +56139,7 @@
|
|
|
56048
56139
|
"text": "TemplateResult | typeof nothing"
|
|
56049
56140
|
}
|
|
56050
56141
|
},
|
|
56051
|
-
"description": "The `feedback` line, or nothing while there is none.",
|
|
56142
|
+
"description": "The `feedback` line, or nothing while there is none.\n\n`role=\"alert\"`, as a field's feedback line has, so the message is\nannounced when it appears and the label and hint are not read with it.",
|
|
56052
56143
|
"inheritedFrom": {
|
|
56053
56144
|
"name": "MixinPickerFeedback",
|
|
56054
56145
|
"module": "src/mixins/mixin-picker-feedback/mixin-picker-feedback.ts"
|
|
@@ -58723,7 +58814,7 @@
|
|
|
58723
58814
|
"name": "commands",
|
|
58724
58815
|
"privacy": "protected",
|
|
58725
58816
|
"readonly": true,
|
|
58726
|
-
"default": "new CommandController(this, { commands: { '--close': () => this.close(), '--show': () => this.show(), '--toggle': () => this.toggleOpen(), }, })"
|
|
58817
|
+
"default": "new CommandController(this, { commands: { '--close': () => this.close(), '--show': () => this.show(), '--toggle': () => this.toggleOpen(), }, expanded: () => this.open, })"
|
|
58727
58818
|
},
|
|
58728
58819
|
{
|
|
58729
58820
|
"kind": "field",
|
|
@@ -61459,7 +61550,7 @@
|
|
|
61459
61550
|
"declarations": [
|
|
61460
61551
|
{
|
|
61461
61552
|
"kind": "class",
|
|
61462
|
-
"description": "Uses `MixinControllerOpen`, so `open`, `defaultOpen`, and the\n`helix-before-open` and `helix-before-close` events work the same way as on\nan accordion item.\n\nThe drawer is modal by default, which means four things:\n\n- focus is trapped inside: `Tab` from the last control goes to the first,\n and `Shift+Tab` from the first to the last, as in `Dialog`\n- Escape and a press outside close it\n- the page behind is covered\n- the page behind does not scroll\n\nA drawer with `modal=\"false\"` leaves the page usable and still closes on\nEscape, in a browser without `closedby` as well.\n\nSet `persistent` for a drawer that has to be answered: Escape, a press\noutside, and a swipe leave it open, and the close control and `close()`\nstill close it. `closedby=\"none\"` keeps it open on all three as well, and\n`closedby=\"closerequest\"` keeps it open on a press outside.\n\n**A touch or a pen swipes it away**, toward the edge it came from, resolved\nagainst the writing direction. A swipe past halfway, or a quick one, closes\nit through the same request as every other way out. `snap-points` lists the\nfractions of the panel a reader can leave on screen, such as `0.5 1` for a\nsheet that rests half open: it opens at the smallest, and a swipe settles at\nthe nearest. While a swipe moves the panel, the distance is written on it as\n`--drawer-swipe-x` and `--drawer-swipe-y`. `swipe=\"false\"` turns swiping off.\n\n`snap` is the snap point the panel rests at, and `:state(snapped)` is on the\nhost while that is less than the whole panel. `snapTo()` moves it to\nanother. **Focus moving to a control past the\nwindow's edge opens the panel to its largest snap point**, so a reader\nmoving through a half open sheet with `Tab` never lands on a control they\ncannot see.\n\nSet `dismissible` to draw a close control in the corner, labeled by\n`dismiss-label`, as `Dialog` draws one.\n\nThe panel's name is `label` when you set it. Otherwise it is the heading in\nthe `header` slot, or the elements an `aria-labelledby` on the host names,\nand `fallback-label` where nothing names it. A development build warns\nwhen a drawer opens with nothing but `fallback-label` to name it.\n\nThe panel is described by the words at the start of its body, as `Dialog`\nis: the elements in the default slot before the first one that is or holds\na control. An `aria-describedby` on the host replaces it.\n\n**Keyboard.** Opening moves focus to the first control in the panel.\n\n| Key | What it does |\n|---|---|\n| Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. |\n| Escape | Asks to close the drawer. A `helix-before-close` listener can refuse, and `persistent` or `closedby=\"none\"` keeps it open. |\n| Enter, Space | On the close control, closes the drawer. |\n\nContent stays mounted when the drawer is closed, so it is in the server\nmarkup and can animate. A closed `<dialog>` is already out of the tab order\nand the accessibility tree, so the drawer does not write `inert`. The `role`,\n`aria-modal`, and the scrim also come from the `<dialog>` element.\n`drawer-root.ssr.spec.ts` checks that the panel has no hand-written `inert`\nor `role`.\n\nOpen the drawer declaratively with the platform's invoker attributes:\n\n```html\n<helix-headless-button commandfor=\"nav\" command=\"--toggle\">Menu</helix-headless-button>\n<helix-headless-drawer id=\"nav\">…</helix-headless-drawer>\n
|
|
61553
|
+
"description": "Uses `MixinControllerOpen`, so `open`, `defaultOpen`, and the\n`helix-before-open` and `helix-before-close` events work the same way as on\nan accordion item.\n\nThe drawer is modal by default, which means four things:\n\n- focus is trapped inside: `Tab` from the last control goes to the first,\n and `Shift+Tab` from the first to the last, as in `Dialog`\n- Escape and a press outside close it\n- the page behind is covered\n- the page behind does not scroll\n\nA drawer with `modal=\"false\"` leaves the page usable and still closes on\nEscape, in a browser without `closedby` as well.\n\nSet `persistent` for a drawer that has to be answered: Escape, a press\noutside, and a swipe leave it open, and the close control and `close()`\nstill close it. `closedby=\"none\"` keeps it open on all three as well, and\n`closedby=\"closerequest\"` keeps it open on a press outside.\n\n**A touch or a pen swipes it away**, toward the edge it came from, resolved\nagainst the writing direction. A swipe past halfway, or a quick one, closes\nit through the same request as every other way out. `snap-points` lists the\nfractions of the panel a reader can leave on screen, such as `0.5 1` for a\nsheet that rests half open: it opens at the smallest, and a swipe settles at\nthe nearest. While a swipe moves the panel, the distance is written on it as\n`--drawer-swipe-x` and `--drawer-swipe-y`. `swipe=\"false\"` turns swiping off.\n\n`snap` is the snap point the panel rests at, and `:state(snapped)` is on the\nhost while that is less than the whole panel. `snapTo()` moves it to\nanother. **Focus moving to a control past the\nwindow's edge opens the panel to its largest snap point**, so a reader\nmoving through a half open sheet with `Tab` never lands on a control they\ncannot see.\n\nSet `dismissible` to draw a close control in the corner, labeled by\n`dismiss-label`, as `Dialog` draws one.\n\nThe panel's name is `label` when you set it. Otherwise it is the heading in\nthe `header` slot, or the elements an `aria-labelledby` on the host names,\nand `fallback-label` where nothing names it. A development build warns\nwhen a drawer opens with nothing but `fallback-label` to name it.\n\nThe panel is described by the words at the start of its body, as `Dialog`\nis: the elements in the default slot before the first one that is or holds\na control. An `aria-describedby` on the host replaces it.\n\n**Keyboard.** Opening moves focus to the first control in the panel.\n\n| Key | What it does |\n|---|---|\n| Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. |\n| Escape | Asks to close the drawer. A `helix-before-close` listener can refuse, and `persistent` or `closedby=\"none\"` keeps it open. |\n| Enter, Space | On the close control, closes the drawer. |\n\nContent stays mounted when the drawer is closed, so it is in the server\nmarkup and can animate. A closed `<dialog>` is already out of the tab order\nand the accessibility tree, so the drawer does not write `inert`. The `role`,\n`aria-modal`, and the scrim also come from the `<dialog>` element.\n`drawer-root.ssr.spec.ts` checks that the panel has no hand-written `inert`\nor `role`.\n\nOpen the drawer declaratively with the platform's invoker attributes:\n\n```html\n<helix-headless-button commandfor=\"nav\" command=\"--toggle\">Menu</helix-headless-button>\n<helix-headless-drawer id=\"nav\">…</helix-headless-drawer>\n```\n\nFrom its first press, a button that opens the drawer this way says whether\nthe drawer is open: a Helix button through `expanded`, and any other\nelement with `aria-expanded`.",
|
|
61463
61554
|
"name": "HelixHeadlessDrawer",
|
|
61464
61555
|
"cssProperties": [
|
|
61465
61556
|
{
|
|
@@ -61531,7 +61622,7 @@
|
|
|
61531
61622
|
"name": "commands",
|
|
61532
61623
|
"privacy": "protected",
|
|
61533
61624
|
"readonly": true,
|
|
61534
|
-
"default": "new CommandController(this, { commands: { '--close': () => this.requestOpen(false), '--show': () => this.requestOpen(true), '--toggle': () => this.toggleOpen(), }, })"
|
|
61625
|
+
"default": "new CommandController(this, { commands: { '--close': () => this.requestOpen(false), '--show': () => this.requestOpen(true), '--toggle': () => this.toggleOpen(), }, expanded: () => this.open, })"
|
|
61535
61626
|
},
|
|
61536
61627
|
{
|
|
61537
61628
|
"kind": "field",
|
|
@@ -88862,7 +88953,7 @@
|
|
|
88862
88953
|
"name": "commands",
|
|
88863
88954
|
"privacy": "protected",
|
|
88864
88955
|
"readonly": true,
|
|
88865
|
-
"default": "new CommandController(this, { commands: { '--close': () => this.close(), '--fullscreen': () => this.toggleFullscreen(), '--next': () => this.next(), '--previous': () => this.previous(), '--show': () => this.show(), '--toggle': () => this.toggleOpen(), }, })"
|
|
88956
|
+
"default": "new CommandController(this, { commands: { '--close': () => this.close(), '--fullscreen': () => this.toggleFullscreen(), '--next': () => this.next(), '--previous': () => this.previous(), '--show': () => this.show(), '--toggle': () => this.toggleOpen(), }, expanded: () => this.open, })"
|
|
88866
88957
|
},
|
|
88867
88958
|
{
|
|
88868
88959
|
"kind": "field",
|
|
@@ -95410,7 +95501,7 @@
|
|
|
95410
95501
|
}
|
|
95411
95502
|
}
|
|
95412
95503
|
],
|
|
95413
|
-
"description": "Says how many options a filter left, in the live region.\n\n**A reader typing into a filter cannot see the list narrow**, and React\nAria and Web Awesome both say the count as it changes. Only \"No matches\"\nwas said here, so a query that left forty options and one that left one\nsounded the same. Said when the filter changes and the count with it, so\na keystroke that leaves the same options says nothing new. An empty filter\nsays nothing, being the list as it was given; no matches is `empty-text`,\nwhich the region says in place of this."
|
|
95504
|
+
"description": "Says how many options a filter left, in the live region.\n\n**A reader typing into a filter cannot see the list narrow**, and React\nAria and Web Awesome both say the count as it changes. Only \"No matches\"\nwas said here, so a query that left forty options and one that left one\nsounded the same. Said when the filter changes and the count with it, so\na keystroke that leaves the same options says nothing new. An empty filter\nsays nothing, being the list as it was given; no matches is `empty-text`,\nwhich the region says in place of this. A load that ends says the count\ntoo, whatever the filter."
|
|
95414
95505
|
},
|
|
95415
95506
|
{
|
|
95416
95507
|
"kind": "method",
|
|
@@ -109951,6 +110042,14 @@
|
|
|
109951
110042
|
"description": "The row is checked.",
|
|
109952
110043
|
"name": "checked"
|
|
109953
110044
|
},
|
|
110045
|
+
{
|
|
110046
|
+
"description": "The row is disabled.",
|
|
110047
|
+
"name": "disabled"
|
|
110048
|
+
},
|
|
110049
|
+
{
|
|
110050
|
+
"description": "Under `submenus=\"flyout\"`, the row's submenu is open beside it.",
|
|
110051
|
+
"name": "expanded"
|
|
110052
|
+
},
|
|
109954
110053
|
{
|
|
109955
110054
|
"description": "In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.",
|
|
109956
110055
|
"name": "highlighted"
|
|
@@ -110023,7 +110122,7 @@
|
|
|
110023
110122
|
"declarations": [
|
|
110024
110123
|
{
|
|
110025
110124
|
"kind": "class",
|
|
110026
|
-
"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 (Space on a\nchoice row changes it and leaves the menu open), 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.\n\n**A filter field.** With `filterable`, the menu opens with focus in a field\nabove its rows, and typing narrows the rows of the page the keys move in,\nas React Aria's `Autocomplete` around a `Menu` does. A row is kept where its\nwords hold the filter, in any case, or where `filterMatch` says so. Each\npage starts unfiltered, and the filter is cleared as the menu closes. Where\ntyping keeps no row, the menu shows `no-results-text`. Focus stays in the\nfield: Up and Down Arrow move the highlight through the rows that are left,\nEnter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow\non a submenu goes back, and Escape clears the filter and then closes the\nmenu. Home, End and the other keys move the caret and type. The field names\nthe highlighted row with `aria-activedescendant`, and the rows are a `menu`\nafter the field. Cancel `helix-filter` to keep every row\nshowing and narrow the rows yourself, such as by replacing them with rows\nfrom a server.",
|
|
110125
|
+
"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. Focus follows a\nmouse resting on a row in either mode, and a drilled page is a `menu` named\nby the row that opened it.\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 (Space on a\nchoice row changes it and leaves the menu open), 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\n**The choices in one place.** `checkedValues` holds the values of the rows\nthat are checked, anywhere in the menu, and setting it checks exactly\nthose rows, as React Aria's `selectedKeys` does. `change` is sent on the\nmenu when a reader's choice changes it.\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.\n\n**A filter field.** With `filterable`, the menu opens with focus in a field\nabove its rows, and typing narrows the rows of the page the keys move in,\nas React Aria's `Autocomplete` around a `Menu` does. A row is kept where its\nwords hold the filter, in any case, or where `filterMatch` says so. Each\npage starts unfiltered, and the filter is cleared as the menu closes. Where\ntyping keeps no row, the menu shows `no-results-text`. Focus stays in the\nfield: Up and Down Arrow move the highlight through the rows that are left,\nEnter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow\non a submenu goes back, and Escape clears the filter and then closes the\nmenu. A screen reader hears how many rows the filter keeps\n(`results-label`). Home, End and the other keys move the caret and type. The field names\nthe highlighted row with `aria-activedescendant`, and the rows are a `menu`\nafter the field. Cancel `helix-filter` to keep every row\nshowing and narrow the rows yourself, such as by replacing them with rows\nfrom a server.",
|
|
110027
110126
|
"name": "HelixHeadlessMenu",
|
|
110028
110127
|
"cssProperties": [
|
|
110029
110128
|
{
|
|
@@ -110078,6 +110177,14 @@
|
|
|
110078
110177
|
"description": "The items.",
|
|
110079
110178
|
"name": ""
|
|
110080
110179
|
},
|
|
110180
|
+
{
|
|
110181
|
+
"description": "What the menu shows when it has no items, for content richer than `empty-text`.",
|
|
110182
|
+
"name": "empty"
|
|
110183
|
+
},
|
|
110184
|
+
{
|
|
110185
|
+
"description": "What the menu shows while its items load, for content richer than `loading-text`.",
|
|
110186
|
+
"name": "loading"
|
|
110187
|
+
},
|
|
110081
110188
|
{
|
|
110082
110189
|
"description": "What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.",
|
|
110083
110190
|
"name": "no-results"
|
|
@@ -110102,6 +110209,20 @@
|
|
|
110102
110209
|
"module": "src/mixins/mixin-collection/mixin-collection.ts"
|
|
110103
110210
|
}
|
|
110104
110211
|
},
|
|
110212
|
+
{
|
|
110213
|
+
"kind": "field",
|
|
110214
|
+
"name": "statusSlots",
|
|
110215
|
+
"type": {
|
|
110216
|
+
"text": "boolean"
|
|
110217
|
+
},
|
|
110218
|
+
"privacy": "protected",
|
|
110219
|
+
"default": "true",
|
|
110220
|
+
"description": "Whether the status line is an `empty` or `loading` slot, with\n`empty-text` or `loading-text` as its fallback.\n\n**Off unless a family turns it on**, because a slot is published API:\neach family that renders one documents it in its own manifest. The live\nregion keeps saying the text either way, because a slotted picture has no\nwords to say.",
|
|
110221
|
+
"inheritedFrom": {
|
|
110222
|
+
"name": "MixinCollection",
|
|
110223
|
+
"module": "src/mixins/mixin-collection/mixin-collection.ts"
|
|
110224
|
+
}
|
|
110225
|
+
},
|
|
110105
110226
|
{
|
|
110106
110227
|
"kind": "field",
|
|
110107
110228
|
"name": "backLabel",
|
|
@@ -110320,6 +110441,16 @@
|
|
|
110320
110441
|
"description": "Space between the trigger and the surface, in pixels.",
|
|
110321
110442
|
"attribute": "offset"
|
|
110322
110443
|
},
|
|
110444
|
+
{
|
|
110445
|
+
"kind": "field",
|
|
110446
|
+
"name": "openOn",
|
|
110447
|
+
"type": {
|
|
110448
|
+
"text": "'click' | 'long-press'"
|
|
110449
|
+
},
|
|
110450
|
+
"default": "'click'",
|
|
110451
|
+
"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.",
|
|
110452
|
+
"attribute": "open-on"
|
|
110453
|
+
},
|
|
110323
110454
|
{
|
|
110324
110455
|
"kind": "field",
|
|
110325
110456
|
"name": "pressHeld",
|
|
@@ -110347,16 +110478,6 @@
|
|
|
110347
110478
|
"privacy": "private",
|
|
110348
110479
|
"description": "Where a held press on a context menu's area is, to open the menu there."
|
|
110349
110480
|
},
|
|
110350
|
-
{
|
|
110351
|
-
"kind": "field",
|
|
110352
|
-
"name": "openOn",
|
|
110353
|
-
"type": {
|
|
110354
|
-
"text": "'click' | 'long-press'"
|
|
110355
|
-
},
|
|
110356
|
-
"default": "'click'",
|
|
110357
|
-
"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.",
|
|
110358
|
-
"attribute": "open-on"
|
|
110359
|
-
},
|
|
110360
110481
|
{
|
|
110361
110482
|
"kind": "field",
|
|
110362
110483
|
"name": "placement",
|
|
@@ -110367,6 +110488,19 @@
|
|
|
110367
110488
|
"description": "The side the menu opens on, when there is room.\n\nIt moves if that side does not fit.",
|
|
110368
110489
|
"attribute": "placement"
|
|
110369
110490
|
},
|
|
110491
|
+
{
|
|
110492
|
+
"kind": "field",
|
|
110493
|
+
"name": "resultsLabel",
|
|
110494
|
+
"type": {
|
|
110495
|
+
"text": "string"
|
|
110496
|
+
},
|
|
110497
|
+
"default": "'{count, plural, one {# result} other {# results}}'",
|
|
110498
|
+
"description": "What a screen reader hears when the filter narrows the rows. `{count}` is\nhow many rows are left, written in the locale, and each language writes\nthe forms it has, as Listbox's `results-label` does.",
|
|
110499
|
+
"attribute": "results-label",
|
|
110500
|
+
"helix": {
|
|
110501
|
+
"words": true
|
|
110502
|
+
}
|
|
110503
|
+
},
|
|
110370
110504
|
{
|
|
110371
110505
|
"kind": "field",
|
|
110372
110506
|
"name": "submenus",
|
|
@@ -110393,6 +110527,13 @@
|
|
|
110393
110527
|
"default": "new KeyboardNavigationController(this, { /* None while closed: the rows are hidden, and a key on the trigger is this element's to answer. Down and Up there open the menu. */ items: () => (this.open ? this.items : []), reserved: () => ['ArrowLeft', 'ArrowRight'], selects: () => false, typeahead: typeaheadBy((item) => slottedWords(item as HelixHeadlessMenuItem, [''])), })",
|
|
110394
110528
|
"description": "Moving between rows, which is not this element's own business any more.\n\n`selects` false, because arriving at Delete must not delete: moving and\nchoosing are one act in a radio group and two acts here, which is the\ndistinction the controller was already drawing for `Tabs`.\n\nThe origin is the selection, and `focus` is the wrong reading however right\nit looks: that origin also carries a rule a menu must not follow, that a\npress which did not come from the set moves nothing. That rule is there for\na tab panel, which is a tab stop beside the tabs; a menu's panel holds the\nrows and nothing else, and Down on a menu that has just opened is how a\nreader gets to the first row at all.\n\nThe horizontal pair is reserved rather than released. Right opens a\nsubmenu and left comes back, which are the platform's own bindings for a\nmenu that drills, so those keys are spoken for here rather than unhandled."
|
|
110395
110529
|
},
|
|
110530
|
+
{
|
|
110531
|
+
"kind": "field",
|
|
110532
|
+
"name": "phases",
|
|
110533
|
+
"privacy": "protected",
|
|
110534
|
+
"readonly": true,
|
|
110535
|
+
"default": "new OpenPhaseController(this, { mark: { entering: (on) => this.toggleState('entering', on), exiting: (on) => this.toggleState('exiting', on), }, open: () => this.open, surface: () => this.partNamed('surface'), })"
|
|
110536
|
+
},
|
|
110396
110537
|
{
|
|
110397
110538
|
"kind": "field",
|
|
110398
110539
|
"name": "aria",
|
|
@@ -110616,6 +110757,22 @@
|
|
|
110616
110757
|
],
|
|
110617
110758
|
"description": "Moves the reader to a row: focus, or with `filterable` the highlight,\nwhich the field names with `aria-activedescendant`. An element reference,\nbecause the field is in this shadow root and the row in the tree around\nit, the one direction a reference crosses."
|
|
110618
110759
|
},
|
|
110760
|
+
{
|
|
110761
|
+
"kind": "field",
|
|
110762
|
+
"name": "rowWatch",
|
|
110763
|
+
"type": {
|
|
110764
|
+
"text": "MutationObserver | undefined"
|
|
110765
|
+
},
|
|
110766
|
+
"privacy": "private",
|
|
110767
|
+
"description": "Watches for rows taken away while the menu is open."
|
|
110768
|
+
},
|
|
110769
|
+
{
|
|
110770
|
+
"kind": "field",
|
|
110771
|
+
"name": "followRemoved",
|
|
110772
|
+
"privacy": "private",
|
|
110773
|
+
"readonly": true,
|
|
110774
|
+
"description": "Moves the reader to a neighbor when the page takes away the row they were\non: the row that took its place, or the one before it where it was the\nlast. A menu with no rows left closes and gives focus to its trigger.\n\n**Focus went to the body**, and the menu then ignored every key, its\nlistener being on the host: measured in Chromium, removing the focused\nrow and pressing ArrowUp did nothing. List and Virtual List move focus to\na neighbor the same way, as React Aria's collections do. With `filterable`,\nfocus stays in the field and the highlight moves. Focus a reader put\nanywhere but the body is left there."
|
|
110775
|
+
},
|
|
110619
110776
|
{
|
|
110620
110777
|
"kind": "method",
|
|
110621
110778
|
"name": "show",
|
|
@@ -110717,6 +110874,44 @@
|
|
|
110717
110874
|
},
|
|
110718
110875
|
"description": "Returns to the page above, or closes when there is none."
|
|
110719
110876
|
},
|
|
110877
|
+
{
|
|
110878
|
+
"kind": "field",
|
|
110879
|
+
"name": "choiceRows",
|
|
110880
|
+
"type": {
|
|
110881
|
+
"text": "HelixHeadlessMenuItem[]"
|
|
110882
|
+
},
|
|
110883
|
+
"privacy": "private",
|
|
110884
|
+
"description": "The choice rows anywhere in the menu, in document order.",
|
|
110885
|
+
"readonly": true
|
|
110886
|
+
},
|
|
110887
|
+
{
|
|
110888
|
+
"kind": "field",
|
|
110889
|
+
"name": "checkedValues",
|
|
110890
|
+
"type": {
|
|
110891
|
+
"text": "string[]"
|
|
110892
|
+
},
|
|
110893
|
+
"description": "The values of the choice rows that are checked, anywhere in the menu, in\ndocument order.\n\nSet it to check exactly those rows and uncheck every other choice row, as\nReact Aria's `selectedKeys` controls a menu's selection from one place.\nEach row keeps its own `checked` too, which this reads and writes. `change`\nis sent on the menu when a reader's choice changes it."
|
|
110894
|
+
},
|
|
110895
|
+
{
|
|
110896
|
+
"kind": "field",
|
|
110897
|
+
"name": "toldChecked",
|
|
110898
|
+
"type": {
|
|
110899
|
+
"text": "string | undefined"
|
|
110900
|
+
},
|
|
110901
|
+
"privacy": "private",
|
|
110902
|
+
"description": "The checked values `change` last said, joined, so a choice that moved nothing says nothing."
|
|
110903
|
+
},
|
|
110904
|
+
{
|
|
110905
|
+
"kind": "method",
|
|
110906
|
+
"name": "tellChecked",
|
|
110907
|
+
"privacy": "private",
|
|
110908
|
+
"return": {
|
|
110909
|
+
"type": {
|
|
110910
|
+
"text": "void"
|
|
110911
|
+
}
|
|
110912
|
+
},
|
|
110913
|
+
"description": "Sends `change` when a reader's choice has changed which rows are checked."
|
|
110914
|
+
},
|
|
110720
110915
|
{
|
|
110721
110916
|
"kind": "field",
|
|
110722
110917
|
"name": "handleSelect",
|
|
@@ -110913,7 +111108,7 @@
|
|
|
110913
111108
|
"name": "handleHover",
|
|
110914
111109
|
"privacy": "private",
|
|
110915
111110
|
"readonly": true,
|
|
110916
|
-
"description": "A mouse resting on a row
|
|
111111
|
+
"description": "A mouse resting on a row: focus follows it, and under `flyout`, 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.\n\n**In every mode**, as the APG's menus, React Aria's and Radix's have it.\nUnder `drill` the pointer did not move focus, so the row under the\npointer and the row the keys moved from were two rows, measured in\nChromium: hovering Delete left focus on Cut."
|
|
110917
111112
|
},
|
|
110918
111113
|
{
|
|
110919
111114
|
"kind": "field",
|
|
@@ -110941,6 +111136,16 @@
|
|
|
110941
111136
|
],
|
|
110942
111137
|
"description": "Whether the pointer is inside the grace area, while it holds."
|
|
110943
111138
|
},
|
|
111139
|
+
{
|
|
111140
|
+
"kind": "field",
|
|
111141
|
+
"name": "namedByPage",
|
|
111142
|
+
"type": {
|
|
111143
|
+
"text": "boolean"
|
|
111144
|
+
},
|
|
111145
|
+
"privacy": "private",
|
|
111146
|
+
"default": "false",
|
|
111147
|
+
"description": "Whether the surface is named by a submenu's page, which `nameSurface` undoes at the top."
|
|
111148
|
+
},
|
|
110944
111149
|
{
|
|
110945
111150
|
"kind": "method",
|
|
110946
111151
|
"name": "nameSurface",
|
|
@@ -110950,7 +111155,7 @@
|
|
|
110950
111155
|
"text": "void"
|
|
110951
111156
|
}
|
|
110952
111157
|
},
|
|
110953
|
-
"description": "Names the surface by its trigger, where nothing else names it.\n\nBy element reference, which is the one direction that crosses: the surface\nis in this shadow root and the trigger is in the tree around it. A host\n`aria-labelledby` is carried down by `aria`, and a host `aria-label` or\n`label` is a name of its own, so each of them clears this reference."
|
|
111158
|
+
"description": "Names the surface by its trigger, where nothing else names it, and a\nsubmenu's page by its title.\n\nBy element reference, which is the one direction that crosses: the surface\nis in this shadow root and the trigger is in the tree around it. A host\n`aria-labelledby` is carried down by `aria`, and a host `aria-label` or\n`label` is a name of its own, so each of them clears this reference."
|
|
110954
111159
|
},
|
|
110955
111160
|
{
|
|
110956
111161
|
"kind": "method",
|
|
@@ -111182,20 +111387,6 @@
|
|
|
111182
111387
|
"module": "src/mixins/mixin-collection/mixin-collection.ts"
|
|
111183
111388
|
}
|
|
111184
111389
|
},
|
|
111185
|
-
{
|
|
111186
|
-
"kind": "field",
|
|
111187
|
-
"name": "statusSlots",
|
|
111188
|
-
"type": {
|
|
111189
|
-
"text": "boolean"
|
|
111190
|
-
},
|
|
111191
|
-
"privacy": "protected",
|
|
111192
|
-
"default": "false",
|
|
111193
|
-
"description": "Whether the status line is an `empty` or `loading` slot, with\n`empty-text` or `loading-text` as its fallback.\n\n**Off unless a family turns it on**, because a slot is published API:\neach family that renders one documents it in its own manifest. The live\nregion keeps saying the text either way, because a slotted picture has no\nwords to say.",
|
|
111194
|
-
"inheritedFrom": {
|
|
111195
|
-
"name": "MixinCollection",
|
|
111196
|
-
"module": "src/mixins/mixin-collection/mixin-collection.ts"
|
|
111197
|
-
}
|
|
111198
|
-
},
|
|
111199
111390
|
{
|
|
111200
111391
|
"kind": "field",
|
|
111201
111392
|
"name": "defaultOpen",
|
|
@@ -111657,6 +111848,14 @@
|
|
|
111657
111848
|
}
|
|
111658
111849
|
],
|
|
111659
111850
|
"events": [
|
|
111851
|
+
{
|
|
111852
|
+
"type": {
|
|
111853
|
+
"text": "Event"
|
|
111854
|
+
},
|
|
111855
|
+
"description": "A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now.",
|
|
111856
|
+
"name": "change",
|
|
111857
|
+
"reactProp": "onchange"
|
|
111858
|
+
},
|
|
111660
111859
|
{
|
|
111661
111860
|
"type": {
|
|
111662
111861
|
"text": "HelixBeforeCloseEvent"
|
|
@@ -111811,6 +112010,15 @@
|
|
|
111811
112010
|
"description": "The side the menu opens on, when there is room.\n\nIt moves if that side does not fit.",
|
|
111812
112011
|
"fieldName": "placement"
|
|
111813
112012
|
},
|
|
112013
|
+
{
|
|
112014
|
+
"name": "results-label",
|
|
112015
|
+
"type": {
|
|
112016
|
+
"text": "string"
|
|
112017
|
+
},
|
|
112018
|
+
"default": "'{count, plural, one {# result} other {# results}}'",
|
|
112019
|
+
"description": "What a screen reader hears when the filter narrows the rows. `{count}` is\nhow many rows are left, written in the locale, and each language writes\nthe forms it has, as Listbox's `results-label` does.",
|
|
112020
|
+
"fieldName": "resultsLabel"
|
|
112021
|
+
},
|
|
111814
112022
|
{
|
|
111815
112023
|
"name": "submenus",
|
|
111816
112024
|
"type": {
|
|
@@ -111890,6 +112098,14 @@
|
|
|
111890
112098
|
"description": "A submenu's page is showing, so content that is not a row can hide with the top page.",
|
|
111891
112099
|
"name": "drilled"
|
|
111892
112100
|
},
|
|
112101
|
+
{
|
|
112102
|
+
"description": "From the moment the panel shows until its entrance has finished.",
|
|
112103
|
+
"name": "entering"
|
|
112104
|
+
},
|
|
112105
|
+
{
|
|
112106
|
+
"description": "From the moment the panel hides until its exit has finished.",
|
|
112107
|
+
"name": "exiting"
|
|
112108
|
+
},
|
|
111893
112109
|
{
|
|
111894
112110
|
"description": "A row on the current page has a checkbox or a link, so every row keeps the trailing column.",
|
|
111895
112111
|
"name": "mark"
|
|
@@ -129958,7 +130174,7 @@
|
|
|
129958
130174
|
"declarations": [
|
|
129959
130175
|
{
|
|
129960
130176
|
"kind": "class",
|
|
129961
|
-
"description": "Popover is the general overlay that the specific ones build on. `Menu` holds\ncommands, `Select` holds options, and `Tooltip` holds a description. Popover\nholds any content you put in it, so it has no keyboard handling of its own.\n\nThe trigger is slotted and stays your own element. A Helix trigger is told\nwhether the popover is open inside its own shadow root. On a plain element,\nsuch as a `<button>`, the popover writes `aria-expanded`, from a frame after\nits own first render, or from the first press where that comes sooner. It\nnever writes it where you wrote `aria-expanded` yourself, and writes nothing\nelse onto your markup.\n\nThe panel is in the top layer through the popover API, so it needs no\n`z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or\n`contain` does not clip or move it.\n\nIt opens on click and from a command. `command=\"--show\"` and the related\ncommands work as they do on `Dialog` and `Drawer`, so a button anywhere on\nthe page can open the popover with no script
|
|
130177
|
+
"description": "Popover is the general overlay that the specific ones build on. `Menu` holds\ncommands, `Select` holds options, and `Tooltip` holds a description. Popover\nholds any content you put in it, so it has no keyboard handling of its own.\n\nThe trigger is slotted and stays your own element. A Helix trigger is told\nwhether the popover is open inside its own shadow root. On a plain element,\nsuch as a `<button>`, the popover writes `aria-expanded`, from a frame after\nits own first render, or from the first press where that comes sooner. It\nnever writes it where you wrote `aria-expanded` yourself, and writes nothing\nelse onto your markup.\n\nThe panel is in the top layer through the popover API, so it needs no\n`z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or\n`contain` does not clip or move it.\n\nIt opens on click and from a command. `command=\"--show\"` and the related\ncommands work as they do on `Dialog` and `Drawer`, so a button anywhere on\nthe page can open the popover with no script. From its first press, a\nbutton that opens it this way says whether the popover is open: a Helix\nbutton through `expanded`, and any other element with `aria-expanded`.\n\n**Opening moves focus into the panel**, to the first control in it, or to the\npanel itself where it holds none, and closing from inside gives it back to\nthe trigger. It closes on Escape, on a press outside it, and when focus moves\nout of the trigger and the panel to somewhere else on the page.\n\n`modal` keeps `Tab` inside the panel while it is open and says so with\n`aria-modal`, for a panel that has to be answered before the page goes on.\nThe rest of the page is hidden from screen readers with `aria-hidden` while\nit is open, so the virtual cursor stays in the panel too, and the page does\nnot scroll behind it. Without it the popover does not trap focus.\n\nA press outside closes the panel and leaves focus where the press put it.\nWhere it put focus nowhere, as a press on text or on the page's background\ndoes, focus goes back to the trigger.\n\nThe panel's name is `label` when you set it. Otherwise it is the first\nheading in the panel, or the elements an `aria-labelledby` on the host names.\nA development build warns when a popover opens with nothing but\n`fallback-label` to name it.\n\n**Keyboard.** Opening moves focus to the first control in the panel, or to\nthe panel where it holds none.\n\n| Key | What it does |\n|---|---|\n| Enter, Space | On the trigger, opens the panel, or closes it while it is open. |\n| Escape | Closes the panel and puts focus back on the trigger. |\n| Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |\n\nThe panel opens against the trigger, or against the element `anchor` names,\nsuch as a field beside the button that opens it. `offset` moves it away from\nthat element, `cross-offset` slides it along the side it is on,\n`container-padding` keeps it that far from the window's edges, and\n`flip=\"false\"` keeps it on its side where the other side has more room.\n\n`arrow` draws a point on the panel's edge facing the trigger. The side the\npanel landed on is on the host as `:state(placed-top)` and its kin, its\nalignment along that side as `:state(aligned-start)` or\n`:state(aligned-end)`, and the trigger's width is on the panel as\n`--floating-anchor-inline-size`, for a panel as wide as its trigger:\n\n```css\nhelix-popover::part(popover) {\n min-inline-size: var(--floating-anchor-inline-size);\n}\n```",
|
|
129962
130178
|
"name": "HelixHeadlessPopover",
|
|
129963
130179
|
"cssProperties": [
|
|
129964
130180
|
{
|
|
@@ -130021,6 +130237,16 @@
|
|
|
130021
130237
|
"default": "'helix-popover'",
|
|
130022
130238
|
"description": "The key this family's words are registered under, its styled tag:\n`registerWords('de', { 'helix-popover': { fallbackLabel: 'Popup' } })`."
|
|
130023
130239
|
},
|
|
130240
|
+
{
|
|
130241
|
+
"kind": "field",
|
|
130242
|
+
"name": "anchor",
|
|
130243
|
+
"type": {
|
|
130244
|
+
"text": "Element | string"
|
|
130245
|
+
},
|
|
130246
|
+
"default": "''",
|
|
130247
|
+
"description": "The element the panel opens against, where that is not the trigger: its\n`id` in the same document or shadow root, or the element itself. Left\nempty, the panel opens against the trigger, or against the button whose\ncommand opened it.",
|
|
130248
|
+
"attribute": "anchor"
|
|
130249
|
+
},
|
|
130024
130250
|
{
|
|
130025
130251
|
"kind": "field",
|
|
130026
130252
|
"name": "arrow",
|
|
@@ -130031,6 +130257,25 @@
|
|
|
130031
130257
|
"description": "Draws a point on the panel's edge facing the trigger.\n\nOff by default, which is the house style: a panel that opens from its\ntrigger already reads as belonging to it.",
|
|
130032
130258
|
"attribute": "arrow"
|
|
130033
130259
|
},
|
|
130260
|
+
{
|
|
130261
|
+
"kind": "field",
|
|
130262
|
+
"name": "containerPadding",
|
|
130263
|
+
"type": {
|
|
130264
|
+
"text": "number | undefined"
|
|
130265
|
+
},
|
|
130266
|
+
"description": "How close to the window's edges the panel may come, in pixels, when it\nslides, shrinks or moves to the other side to fit. Left unset, it slides\nand shrinks to 8 pixels from an edge and moves to the other side only\nonce it would cross one.",
|
|
130267
|
+
"attribute": "container-padding"
|
|
130268
|
+
},
|
|
130269
|
+
{
|
|
130270
|
+
"kind": "field",
|
|
130271
|
+
"name": "crossOffset",
|
|
130272
|
+
"type": {
|
|
130273
|
+
"text": "number"
|
|
130274
|
+
},
|
|
130275
|
+
"default": "0",
|
|
130276
|
+
"description": "How far to slide the panel along the side it is on, in pixels: to the\nright on the top or the bottom, and down on the left or the right.",
|
|
130277
|
+
"attribute": "cross-offset"
|
|
130278
|
+
},
|
|
130034
130279
|
{
|
|
130035
130280
|
"kind": "field",
|
|
130036
130281
|
"name": "fallbackLabel",
|
|
@@ -130044,6 +130289,16 @@
|
|
|
130044
130289
|
"words": true
|
|
130045
130290
|
}
|
|
130046
130291
|
},
|
|
130292
|
+
{
|
|
130293
|
+
"kind": "field",
|
|
130294
|
+
"name": "flip",
|
|
130295
|
+
"type": {
|
|
130296
|
+
"text": "boolean"
|
|
130297
|
+
},
|
|
130298
|
+
"default": "true",
|
|
130299
|
+
"description": "Whether the panel moves to the other side of the trigger when its own\nside has no room. On by default. Write `flip=\"false\"` to keep it on its\nside, where it shrinks to fit, as React Aria's `shouldFlip` turns off.",
|
|
130300
|
+
"attribute": "flip"
|
|
130301
|
+
},
|
|
130047
130302
|
{
|
|
130048
130303
|
"kind": "field",
|
|
130049
130304
|
"name": "label",
|
|
@@ -130103,7 +130358,7 @@
|
|
|
130103
130358
|
"name": "panel",
|
|
130104
130359
|
"privacy": "private",
|
|
130105
130360
|
"readonly": true,
|
|
130106
|
-
"default": "new PopoverController(this, { anchor: () => this.
|
|
130361
|
+
"default": "new PopoverController(this, { anchor: () => this.placedAgainst, arrow: () => this.partNamed('arrow'), /* The host *and* whatever invoked it, never the panel alone. An outside press is measured against this, and the host is not a box to rely on, a sheet being free to give it none, so a boundary of the panel alone would close on the very press that opened it. A `--toggle` button outside the host is part of the control by any reading a reader would give it: pressing it while the panel is open should close it once, not close it on `pointerdown` and reopen it on the `click` that follows. */ boundary: (): (HTMLElement | undefined)[] => [this, this.invoker], crossOffset: () => this.crossOffset, flip: () => this.flip, /* Measured to the point where there is one, as `Tooltip` measures it: the arrow is a square turned on its center, which reaches `n / sqrt(2)` past the edge it sits on. */ offset: () => this.offset + arrowReach(this.partNamed('arrow')), onDismiss: () => this.dismiss(), /* The side the panel landed on, for a sheet outside that draws by side, where no attribute can follow `::part()`. As `Tooltip` records it. */ onPlace: (placement) => { const side = sideOf(placement) this.toggleState('aligned-end', placement.endsWith('-end')) this.toggleState('aligned-start', placement.endsWith('-start')) this.toggleState('placed-bottom', side === 'bottom') this.toggleState('placed-left', side === 'left') this.toggleState('placed-right', side === 'right') this.toggleState('placed-top', side === 'top') this.side = side }, open: () => this.open, padding: () => this.containerPadding, placement: () => this.placement, surface: () => this.partNamed('popover'), })"
|
|
130107
130362
|
},
|
|
130108
130363
|
{
|
|
130109
130364
|
"kind": "field",
|
|
@@ -130166,11 +130421,11 @@
|
|
|
130166
130421
|
"name": "commands",
|
|
130167
130422
|
"privacy": "protected",
|
|
130168
130423
|
"readonly": true,
|
|
130169
|
-
"default": "new CommandController(this, { commands: { '--close': () => this.hide(), '--show': (source: Element | null) => { this.invoker = source instanceof HTMLElement ? source : undefined this.show() }, '--toggle': (source: Element | null) => { this.invoker = source instanceof HTMLElement ? source : undefined if (this.open) { this.hide() } else { this.show() } }, }, })"
|
|
130424
|
+
"default": "new CommandController(this, { commands: { '--close': () => this.hide(), '--show': (source: Element | null) => { this.invoker = source instanceof HTMLElement ? source : undefined this.show() }, '--toggle': (source: Element | null) => { this.invoker = source instanceof HTMLElement ? source : undefined if (this.open) { this.hide() } else { this.show() } }, }, expanded: () => this.open, })"
|
|
130170
130425
|
},
|
|
130171
130426
|
{
|
|
130172
130427
|
"kind": "field",
|
|
130173
|
-
"name": "
|
|
130428
|
+
"name": "placedAgainst",
|
|
130174
130429
|
"type": {
|
|
130175
130430
|
"text": "HTMLElement"
|
|
130176
130431
|
},
|
|
@@ -130178,6 +130433,27 @@
|
|
|
130178
130433
|
"description": "The element the panel opens against.",
|
|
130179
130434
|
"readonly": true
|
|
130180
130435
|
},
|
|
130436
|
+
{
|
|
130437
|
+
"kind": "field",
|
|
130438
|
+
"name": "trigger",
|
|
130439
|
+
"type": {
|
|
130440
|
+
"text": "HTMLElement"
|
|
130441
|
+
},
|
|
130442
|
+
"privacy": "private",
|
|
130443
|
+
"description": "The element that opened the panel, which focus goes back to.",
|
|
130444
|
+
"readonly": true
|
|
130445
|
+
},
|
|
130446
|
+
{
|
|
130447
|
+
"kind": "method",
|
|
130448
|
+
"name": "dismiss",
|
|
130449
|
+
"privacy": "private",
|
|
130450
|
+
"return": {
|
|
130451
|
+
"type": {
|
|
130452
|
+
"text": "void"
|
|
130453
|
+
}
|
|
130454
|
+
},
|
|
130455
|
+
"description": "A press outside, or Escape, closing the panel.\n\n**Focus goes back to the trigger where the press put it nowhere.** The\npress is heard on `pointerdown`, and the browser moves focus a moment\nlater: onto what was pressed where that takes focus, and to the body where\nit does not. A popover dismissed by a press on text was left with focus on\nthe body, measured in Chromium, where React Aria's returns it to the\ntrigger. Read after the press, once the browser has moved it."
|
|
130456
|
+
},
|
|
130181
130457
|
{
|
|
130182
130458
|
"kind": "method",
|
|
130183
130459
|
"name": "show",
|
|
@@ -130814,6 +131090,15 @@
|
|
|
130814
131090
|
}
|
|
130815
131091
|
],
|
|
130816
131092
|
"attributes": [
|
|
131093
|
+
{
|
|
131094
|
+
"name": "anchor",
|
|
131095
|
+
"type": {
|
|
131096
|
+
"text": "Element | string"
|
|
131097
|
+
},
|
|
131098
|
+
"default": "''",
|
|
131099
|
+
"description": "The element the panel opens against, where that is not the trigger: its\n`id` in the same document or shadow root, or the element itself. Left\nempty, the panel opens against the trigger, or against the button whose\ncommand opened it.",
|
|
131100
|
+
"fieldName": "anchor"
|
|
131101
|
+
},
|
|
130817
131102
|
{
|
|
130818
131103
|
"name": "arrow",
|
|
130819
131104
|
"type": {
|
|
@@ -130823,6 +131108,23 @@
|
|
|
130823
131108
|
"description": "Draws a point on the panel's edge facing the trigger.\n\nOff by default, which is the house style: a panel that opens from its\ntrigger already reads as belonging to it.",
|
|
130824
131109
|
"fieldName": "arrow"
|
|
130825
131110
|
},
|
|
131111
|
+
{
|
|
131112
|
+
"name": "container-padding",
|
|
131113
|
+
"type": {
|
|
131114
|
+
"text": "number | undefined"
|
|
131115
|
+
},
|
|
131116
|
+
"description": "How close to the window's edges the panel may come, in pixels, when it\nslides, shrinks or moves to the other side to fit. Left unset, it slides\nand shrinks to 8 pixels from an edge and moves to the other side only\nonce it would cross one.",
|
|
131117
|
+
"fieldName": "containerPadding"
|
|
131118
|
+
},
|
|
131119
|
+
{
|
|
131120
|
+
"name": "cross-offset",
|
|
131121
|
+
"type": {
|
|
131122
|
+
"text": "number"
|
|
131123
|
+
},
|
|
131124
|
+
"default": "0",
|
|
131125
|
+
"description": "How far to slide the panel along the side it is on, in pixels: to the\nright on the top or the bottom, and down on the left or the right.",
|
|
131126
|
+
"fieldName": "crossOffset"
|
|
131127
|
+
},
|
|
130826
131128
|
{
|
|
130827
131129
|
"name": "fallback-label",
|
|
130828
131130
|
"type": {
|
|
@@ -130832,6 +131134,15 @@
|
|
|
130832
131134
|
"description": "The panel's name where nothing else names it: no `label`, no heading in\nthe panel, and no `aria-labelledby` on the host.",
|
|
130833
131135
|
"fieldName": "fallbackLabel"
|
|
130834
131136
|
},
|
|
131137
|
+
{
|
|
131138
|
+
"name": "flip",
|
|
131139
|
+
"type": {
|
|
131140
|
+
"text": "boolean"
|
|
131141
|
+
},
|
|
131142
|
+
"default": "true",
|
|
131143
|
+
"description": "Whether the panel moves to the other side of the trigger when its own\nside has no room. On by default. Write `flip=\"false\"` to keep it on its\nside, where it shrinks to fit, as React Aria's `shouldFlip` turns off.",
|
|
131144
|
+
"fieldName": "flip"
|
|
131145
|
+
},
|
|
130835
131146
|
{
|
|
130836
131147
|
"name": "label",
|
|
130837
131148
|
"type": {
|
|
@@ -130895,6 +131206,14 @@
|
|
|
130895
131206
|
}
|
|
130896
131207
|
],
|
|
130897
131208
|
"cssStates": [
|
|
131209
|
+
{
|
|
131210
|
+
"description": "While the panel is aligned to the end of the side it sits on.",
|
|
131211
|
+
"name": "aligned-end"
|
|
131212
|
+
},
|
|
131213
|
+
{
|
|
131214
|
+
"description": "While the panel is aligned to the start of the side it sits on.",
|
|
131215
|
+
"name": "aligned-start"
|
|
131216
|
+
},
|
|
130898
131217
|
{
|
|
130899
131218
|
"description": "From the moment the panel shows until its entrance has finished.",
|
|
130900
131219
|
"name": "entering"
|
|
@@ -140865,7 +141184,7 @@
|
|
|
140865
141184
|
"declarations": [
|
|
140866
141185
|
{
|
|
140867
141186
|
"kind": "class",
|
|
140868
|
-
"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
|
|
141187
|
+
"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. On a right-to-left page Left chooses the one after. |\n| A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
|
|
140869
141188
|
"name": "HelixHeadlessSelect",
|
|
140870
141189
|
"cssProperties": [
|
|
140871
141190
|
{
|
|
@@ -141398,7 +141717,7 @@
|
|
|
141398
141717
|
"name": "handleTriggerKeydown",
|
|
141399
141718
|
"privacy": "private",
|
|
141400
141719
|
"readonly": true,
|
|
141401
|
-
"description": "The keys of the closed trigger.\n\nLetters choose without opening, the way a native `<select>` and React\nAria's Select do, so a reader who knows the answer types it. A Space in the\nmiddle of those letters is one of them. With `multiple`, a letter opens the\nlist on the match instead, because adding to a set is a choice the reader\nmakes in the list. ArrowLeft and ArrowRight choose the option before and\nafter the chosen one."
|
|
141720
|
+
"description": "The keys of the closed trigger.\n\nLetters choose without opening, the way a native `<select>` and React\nAria's Select do, so a reader who knows the answer types it. A Space in the\nmiddle of those letters is one of them. With `multiple`, a letter opens the\nlist on the match instead, because adding to a set is a choice the reader\nmakes in the list. ArrowLeft and ArrowRight choose the option before and\nafter the chosen one, the other way round on a right-to-left page."
|
|
141402
141721
|
},
|
|
141403
141722
|
{
|
|
141404
141723
|
"kind": "method",
|
|
@@ -166139,6 +166458,61 @@
|
|
|
166139
166458
|
"text": "setSelectionRange(start: number, end: number, direction?: SelectionDirection) => void"
|
|
166140
166459
|
}
|
|
166141
166460
|
},
|
|
166461
|
+
{
|
|
166462
|
+
"kind": "method",
|
|
166463
|
+
"name": "setRangeText",
|
|
166464
|
+
"return": {
|
|
166465
|
+
"type": {
|
|
166466
|
+
"text": "void"
|
|
166467
|
+
}
|
|
166468
|
+
},
|
|
166469
|
+
"parameters": [
|
|
166470
|
+
{
|
|
166471
|
+
"name": "replacement",
|
|
166472
|
+
"type": {
|
|
166473
|
+
"text": "string"
|
|
166474
|
+
}
|
|
166475
|
+
},
|
|
166476
|
+
{
|
|
166477
|
+
"name": "start",
|
|
166478
|
+
"optional": true,
|
|
166479
|
+
"type": {
|
|
166480
|
+
"text": "number"
|
|
166481
|
+
}
|
|
166482
|
+
},
|
|
166483
|
+
{
|
|
166484
|
+
"name": "end",
|
|
166485
|
+
"optional": true,
|
|
166486
|
+
"type": {
|
|
166487
|
+
"text": "number"
|
|
166488
|
+
}
|
|
166489
|
+
},
|
|
166490
|
+
{
|
|
166491
|
+
"name": "selectMode",
|
|
166492
|
+
"optional": true,
|
|
166493
|
+
"type": {
|
|
166494
|
+
"text": "SelectionMode"
|
|
166495
|
+
}
|
|
166496
|
+
}
|
|
166497
|
+
],
|
|
166498
|
+
"description": "Replaces a range of the text, as the native method does: the selection\nwhere `start` and `end` are left out, and `selectMode` says what is\nselected after. It sends no event, as the native method sends none.",
|
|
166499
|
+
"type": {
|
|
166500
|
+
"text": "setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode) => void"
|
|
166501
|
+
}
|
|
166502
|
+
},
|
|
166503
|
+
{
|
|
166504
|
+
"kind": "method",
|
|
166505
|
+
"name": "select",
|
|
166506
|
+
"return": {
|
|
166507
|
+
"type": {
|
|
166508
|
+
"text": "void"
|
|
166509
|
+
}
|
|
166510
|
+
},
|
|
166511
|
+
"description": "Selects everything in the field.",
|
|
166512
|
+
"type": {
|
|
166513
|
+
"text": "select() => void"
|
|
166514
|
+
}
|
|
166515
|
+
},
|
|
166142
166516
|
{
|
|
166143
166517
|
"kind": "field",
|
|
166144
166518
|
"name": "textLength",
|
|
@@ -173360,7 +173734,7 @@
|
|
|
173360
173734
|
"text": "TemplateResult | typeof nothing"
|
|
173361
173735
|
}
|
|
173362
173736
|
},
|
|
173363
|
-
"description": "The `feedback` line, or nothing while there is none.",
|
|
173737
|
+
"description": "The `feedback` line, or nothing while there is none.\n\n`role=\"alert\"`, as a field's feedback line has, so the message is\nannounced when it appears and the label and hint are not read with it.",
|
|
173364
173738
|
"inheritedFrom": {
|
|
173365
173739
|
"name": "MixinPickerFeedback",
|
|
173366
173740
|
"module": "src/mixins/mixin-picker-feedback/mixin-picker-feedback.ts"
|
|
@@ -196950,6 +197324,6 @@
|
|
|
196950
197324
|
],
|
|
196951
197325
|
"helix": {
|
|
196952
197326
|
"package": "@fusion.dev/helix-headless",
|
|
196953
|
-
"version": "0.
|
|
197327
|
+
"version": "0.172.0"
|
|
196954
197328
|
}
|
|
196955
197329
|
}
|