@fusion.dev/helix-headless 0.172.0 → 0.174.0

package/custom-elements.json

@@ -10544,7 +10544,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Sets `role=\"group\"` on the host through internals, and `label` names the\ngroup. Without a name, a screen reader announces the buttons as separate\ncontrols, and a development build warns once with the kind `missing-name`.\n\nThe group does not manage focus, so each button keeps its own tab stop. For\none tab stop with arrow keys between a mix of controls, the APG toolbar\npattern, use Toolbar.\n\nButtons are slotted, so they stay your own elements and keep their own\nappearance and size.\n\n**Buttons that stay pressed.** With `selection-mode`, each button with a\n`value` is a toggle button: a press presses or releases it. `multiple` lets\nany number be pressed, and each button says so with `aria-pressed`. `single`\nkeeps one pressed at a time: the group is a `radiogroup` and each button a\n`radio` that says so with `aria-checked`, as React Aria's toggle button\ngroup is. A press on the pressed one releases it, unless\n`disallow-empty-selection` keeps one pressed. `value` is the pressed values,\ncomma separated. A press sends a cancelable `helix-before-change` with the\nvalue it would leave, then `change`. A pressed Helix button has\n`:state(pressed)` on its own element.\n\nThe pressed state is written on the control inside each button's shadow\nroot, so the markup you rendered is never changed and a framework hydrating\nit sees what its server sent. That is also why only Helix buttons are\ntoggles: a native `<button>` or a button without a `value` stays a plain\naction button in the group, and a native one without its own\n`aria-pressed` warns once, with the runtime kind `untold-toggle`. The inner\ncontrol also carries\n`--button-group-pressed`, `1` or `0`, for a `::part(button)` rule of yours.\n\nUse Toggle Group instead for a choice that belongs in a form, or one where\nthe arrow keys choose as they move: it is a `radiogroup` of options with a\nform value, `required` and validation. A Button Group in a selection mode is\na set of actions that stay on, such as bold and italic, or a view that a\npress switches, and it submits nothing.\n\n**Keyboard.** In a selection mode the group is one tab stop: the button\nfocus was last on, then the first pressed one, then the first one.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next button, from the last back to the first. |\n| Left, Up | Moves to the button before, from the first round to the last. |\n| Home, End | Moves to the first or the last button. |\n| Space, Enter | Presses or releases the focused button. |\n\nLeft and Right swap on a right-to-left page, and a disabled button is\npassed over. Under `multiple` the group is a `toolbar`, with\n`aria-orientation` under `orientation=\"vertical\"`. Inside a toolbar it stays\na named `group`, and the toolbar's own arrow keys walk its buttons, so a\nreader meets one toolbar. Under `single` it is a `radiogroup` either way.",
+          "description": "Sets `role=\"group\"` on the host through internals, and `label` names the\ngroup. Without a name, a screen reader announces the buttons as separate\ncontrols, and a development build warns once with the kind `missing-name`.\n\nThe group does not manage focus, so each button keeps its own tab stop. For\none tab stop with arrow keys between a mix of controls, the APG toolbar\npattern, use Toolbar.\n\nButtons are slotted, so they stay your own elements and keep their own\nappearance and size.\n\n**Buttons that stay pressed.** With `selection-mode`, each button with a\n`value` is a toggle button: a press presses or releases it. `multiple` lets\nany number be pressed, and each button says so with `aria-pressed`. `single`\nkeeps one pressed at a time: the group is a `radiogroup` and each button a\n`radio` that says so with `aria-checked`, as React Aria's toggle button\ngroup is. A press on the pressed one releases it, unless\n`disallow-empty-selection` keeps one pressed. `value` is the pressed values,\ncomma separated. A press sends a cancelable `helix-before-change` with the\nvalue it would leave, then `change`. A pressed Helix button has\n`:state(pressed)` on its own element.\n\nThe pressed state is written on the control inside each button's shadow\nroot, so the markup you rendered is never changed and a framework hydrating\nit sees what its server sent. That is also why only Helix buttons are\ntoggles: a native `<button>` or a button without a `value` stays a plain\naction button in the group, and a native one without its own\n`aria-pressed` warns once, with the runtime kind `untold-toggle`. The inner\ncontrol also carries\n`--button-group-pressed`, `1` or `0`, for a `::part(button)` rule of yours.\n\nUse Toggle Group instead for a choice that belongs in a form, or one where\nthe arrow keys choose as they move: it is a `radiogroup` of options with a\nform value, `required` and validation. A Button Group in a selection mode is\na set of actions that stay on, such as bold and italic, or a view that a\npress switches, and it submits nothing.\n\n**Keyboard.** In a selection mode the group is one tab stop: the button\nfocus was last on, then the first pressed one, then the first one.\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next button, from the last back to the first. |\n| Left, Up | Moves to the button before, from the first round to the last. |\n| Home, End | Moves to the first or the last button. |\n| Space, Enter | Presses or releases the focused button. |\n\nLeft and Right swap on a right-to-left page, and a disabled button is\npassed over. Under `multiple` the group is a `toolbar`, with\n`aria-orientation` under `orientation=\"vertical\"`. Inside a toolbar it stays\na named `group`, and the toolbar's own arrow keys walk its buttons, so a\nreader meets one toolbar. Under `single` it is a `radiogroup` either way.\n\n**Disabled.** `disabled` on the group disables every button in it, Helix\nand native alike, and says so on the group with `aria-disabled`, as React\nAria's `isDisabled` does. A button disabled on its own stays disabled when\nthe group is enabled again, and a button that leaves the group gets back\nwhat it said for itself.",
           "name": "HelixHeadlessButtonGroup",
           "cssProperties": [
             {
@@ -10559,6 +10559,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every button in the group, and says so on the group with\n`aria-disabled`. Reflected, so a stylesheet can select on it.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disallowEmptySelection",
@@ -10609,6 +10620,14 @@
               "description": "The values of the pressed buttons, comma separated, in a selection mode.\nA button's own `value` names it, so a value holds no comma.\n\nThe attribute is the seed, and a press changes the property, which does\nnot reflect, as a native control's `value` does not.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "The pressed values as a list, in a selection mode, and an empty list\notherwise. Written, it presses exactly those buttons."
+            },
             {
               "kind": "field",
               "name": "buttons",
@@ -10674,6 +10693,35 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "members",
+              "type": {
+                "text": "DisableableItem[]"
+              },
+              "privacy": "private",
+              "description": "The children that can be disabled: Helix buttons and native ones alike. Empty on a server.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "held",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<DisableableItem>()",
+              "description": "The members this group has disabled, so one that leaves is given back its own answer."
+            },
+            {
+              "kind": "method",
+              "name": "cascade",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Passes `disabled` down to the members, and gives a member that left\nwhat it said for itself.\n\nA member already disabled is not written to again: the watcher hears\nevery write to a native button's `disabled`, changed or not, and would\nanswer it with this."
+            },
             {
               "kind": "method",
               "name": "sync",
@@ -11140,6 +11188,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every button in the group, and says so on the group with\n`aria-disabled`. Reflected, so a stylesheet can select on it.",
+              "fieldName": "disabled"
+            },
             {
               "name": "disallow-empty-selection",
               "type": {
@@ -16090,6 +16147,10 @@
               "description": "Content above the board.",
               "name": "header"
             },
+            {
+              "description": "Content shown while `loading` is set, such as a progress bar while the document arrives.",
+              "name": "loading"
+            },
             {
               "description": "Replaces the glyph inside the pan down button.",
               "name": "pan-down-icon"
@@ -16331,6 +16392,17 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the board as busy while its document arrives: the board is\n`aria-busy`, and the `loading` slot is shown.",
+              "attribute": "loading",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "movedLabel",
@@ -20184,6 +20256,15 @@
               "description": "The text read with a card that has connections both ways. `{leadsTo}` is\n`leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in.",
               "fieldName": "linkedLabel"
             },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the board as busy while its document arrives: the board is\n`aria-busy`, and the `loading` slot is shown.",
+              "fieldName": "loading"
+            },
             {
               "name": "moved-label",
               "type": {
@@ -20549,6 +20630,10 @@
               "description": "The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.",
               "name": "idle"
             },
+            {
+              "description": "While `loading` is set.",
+              "name": "loading"
+            },
             {
               "description": "While a press on the board, its cards or its connections is under way.",
               "name": "pressing"
@@ -44237,7 +44322,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Copies text to the clipboard and confirms the copy. The platform gives no\nfeedback for a clipboard write, so without a confirmation a press that copies\nlooks the same as one that fails.\n\nThe confirmation and the event wait for the write to finish. The browser can\nrefuse a clipboard write, for example on an insecure origin, in a document\nthat is not focused, or after a gesture that does not qualify. A refused\nwrite, or nothing to copy, names the button with `error-label` for the same\nmoment a copy shows `copied-label`, draws a cross, and sends\n`helix-copy-error`.\n\n`from` copies from another element on the page: its text, an attribute\nwritten `id[attribute]`, or a property written `id.property`, read at the\npress. It takes the place of `value`.\n\nIt replaces Button's render and its press, so it never submits a form or\nsends a command: `type`, `command`, `commandfor` and the `form*` overrides\nhave no effect, and the `start` and `end` slots and the `text` part are not\nrendered. An `aria-label` on the element names it before a copy, in place of\n`label`.\n\n**Keyboard.** Enter and Space copy, as they press a native button.\n\nThe button is named `label`, or the host's `aria-label`, and its name\nchanges to `copied-label` or `error-label` for the moment after a press. The\nsame words are said in a live region, so a screen reader hears the result,\nand the tooltip shows them.",
+          "description": "Copies text to the clipboard and confirms the copy. The platform gives no\nfeedback for a clipboard write, so without a confirmation a press that copies\nlooks the same as one that fails.\n\nThe confirmation and the event wait for the write to finish. The browser can\nrefuse a clipboard write, for example on an insecure origin, in a document\nthat is not focused, or after a gesture that does not qualify. A refused\nwrite, or nothing to copy, names the button with `error-label` for the same\nmoment a copy shows `copied-label`, draws a cross, and sends\n`helix-copy-error`.\n\n`from` copies from another element on the page: its text, an attribute\nwritten `id[attribute]`, or a property written `id.property`, read at the\npress. It takes the place of `value`.\n\nIt replaces Button's render and its press, so it never submits a form or\nsends a command: `type`, `command`, `commandfor` and the `form*` overrides\nhave no effect, and the `start` and `end` slots and the `text` part are not\nrendered. An `aria-label` on the element names it before a copy, in place of\n`label`.\n\n**Keyboard.** Enter and Space copy, as they press a native button.\n\nThe button is named `label`, or the host's `aria-label`, and its name\nchanges to `copied-label` or `error-label` for the moment after a press. The\nsame words are said in a live region, so a screen reader hears the result,\nand the tooltip shows them. The tooltip does not also describe the button,\nsince its words are the button's name.\n\n**The tooltip.** It shows the name on hover and focus and the result after a\npress. `tooltip=\"copy\"` shows it only for the result, and `tooltip=\"none\"`\ndraws none, as Web Awesome's copy button offers. `tooltip-placement` is the\nside it prefers, and it moves to another side where that one does not fit.\n\n**Words on the button.** `show-label` draws the name beside the icon, and\nthe result in its place after a press. The button is as wide as the longest\nof the three, so a press does not resize it.",
           "name": "HelixHeadlessCopyButton",
           "cssParts": [
             {
@@ -44268,6 +44353,14 @@
                 "module": "src/button/root/button-root.ts"
               }
             },
+            {
+              "description": "The words beside the icon, under `show-label`. It holds all three, `label`, `copied-label` and `error-label`, with all but the current one hidden.",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessButton",
+                "module": "src/button/root/button-root.ts"
+              }
+            },
             {
               "description": "The tooltip bubble, forwarded from the tooltip inside the button.",
               "name": "tooltip"
@@ -44405,6 +44498,36 @@
                 "module": "src/button/root/button-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the name as words beside the icon, and the result in their place\nafter a press. The button stays as wide as the longest of them.",
+              "attribute": "show-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "'copy' | 'full' | 'none' | undefined"
+              },
+              "description": "When the tooltip shows: `full` on hover and focus and after a press,\n`copy` only after a press, to show the result, and `none` never, for a\nbutton whose result shows another way, such as under `show-label`.\n\nUnset is `full`, and the attribute stays absent until you write it.",
+              "attribute": "tooltip"
+            },
+            {
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'"
+              },
+              "default": "'top'",
+              "description": "The side the tooltip prefers. It moves to another side where this one\ndoes not fit.",
+              "attribute": "tooltip-placement"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -44429,6 +44552,16 @@
               "description": "The words for the state it is in, used twice on purpose.\n\nThe tooltip is the visible confirmation and the accessible name is the\nspoken one, and they have to be the same words. A tooltip that changes to\nCopied while the accessible name stays Copy tells a sighted reader it\nworked and leaves a screen reader user pressing a button that never\nacknowledges anything. Changing the name of the focused element is what\nmakes the announcement happen at all.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "showedResult",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the last render showed a result, so `tooltip=\"copy\"` opens and closes on the change."
+            },
             {
               "kind": "field",
               "name": "clipboard",
@@ -44524,6 +44657,17 @@
               },
               "description": "The mark for a press that put nothing on the clipboard, behind a seam of its own."
             },
+            {
+              "kind": "method",
+              "name": "renderText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "The words beside the icon, under `show-label`, behind a seam of its own.\n\nAll three are drawn and only the current one shows, so the button is as\nwide as the longest of them and a press does not resize it. Hidden from a\nscreen reader, which hears the same words as the button's name."
+            },
             {
               "kind": "method",
               "name": "renderTooltip",
@@ -45773,6 +45917,32 @@
                 "module": "src/button/root/button-root.ts"
               }
             },
+            {
+              "name": "show-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the name as words beside the icon, and the result in their place\nafter a press. The button stays as wide as the longest of them.",
+              "fieldName": "showLabel"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "'copy' | 'full' | 'none' | undefined"
+              },
+              "description": "When the tooltip shows: `full` on hover and focus and after a press,\n`copy` only after a press, to show the result, and `none` never, for a\nbutton whose result shows another way, such as under `show-label`.\n\nUnset is `full`, and the attribute stays absent until you write it.",
+              "fieldName": "tooltip"
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'"
+              },
+              "default": "'top'",
+              "description": "The side the tooltip prefers. It moves to another side where this one\ndoes not fit.",
+              "fieldName": "tooltipPlacement"
+            },
             {
               "name": "value",
               "type": {
@@ -74927,6 +75097,10 @@
               "description": "What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.",
               "name": "live"
             },
+            {
+              "description": "The box in place of the list while `loading` is set and it holds no notes, holding the `loading` slot.",
+              "name": "loading"
+            },
             {
               "description": "One note in the list.",
               "name": "note"
@@ -75029,6 +75203,10 @@
               "description": "Content above the graph.",
               "name": "header"
             },
+            {
+              "description": "What the panel shows while `loading` is set and the list holds no notes. Defaults to `loading-label`.",
+              "name": "loading"
+            },
             {
               "description": "Replaces the glyph inside the pan down button.",
               "name": "pan-down-icon"
@@ -75241,6 +75419,30 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the graph as busy while its notes arrive: the list is `aria-busy`,\nand the panel says so where it holds no notes yet.",
+              "attribute": "loading",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loadingLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading notes'",
+              "description": "What the panel says while `loading` is set and the list holds no notes.",
+              "attribute": "loading-label",
+              "helix": {
+                "words": true
+              }
+            },
             {
               "kind": "field",
               "name": "movedDownLabel",
@@ -75313,6 +75515,14 @@
               "attribute": "no-panel",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noteContent",
+              "type": {
+                "text": "((node: GraphNode) => unknown) | undefined | undefined"
+              },
+              "description": "What each note's row in the list shows in place of its name: a function\ngiven the note that returns text, an element or a Lit template.\n\nFor an icon by its kind, or a date under its name, as React Aria's\n`ListBoxItem` takes children. The row is still named by the note's name,\nwhich typeahead and the search find it by, and described by how it stands\nto the selected note. Return the name with your content where it should\nstill show. A property only, there being no way to write a function in\nmarkup."
+            },
             {
               "kind": "field",
               "name": "notesLabel",
@@ -77333,6 +77543,24 @@
               "description": "How a note that links to the selected one is described, with `{note}`.",
               "fieldName": "linksToLabel"
             },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the graph as busy while its notes arrive: the list is `aria-busy`,\nand the panel says so where it holds no notes yet.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "loading-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading notes'",
+              "description": "What the panel says while `loading` is set and the list holds no notes.",
+              "fieldName": "loadingLabel"
+            },
             {
               "name": "moved-down-label",
               "type": {
@@ -77651,6 +77879,10 @@
               "description": "The user has been still long enough for the header and footer to fade.",
               "name": "idle"
             },
+            {
+              "description": "While `loading` is set.",
+              "name": "loading"
+            },
             {
               "description": "The drawing shows the selected note's local graph, with `depth`.",
               "name": "local"
@@ -93470,7 +93702,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.\n\nSet it to start with rows selected. A row's value is its `value`, or its\nwords where it has none.",
+              "description": "The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.\n\nA press or a key writes it in row order, as Data Table does, whatever\norder the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its\nwords where it has none.",
               "attribute": "value"
             },
             {
@@ -93746,7 +93978,7 @@
                   }
                 }
               ],
-              "description": "Selects what a press or a key leaves, asking first. `helix-before-change`\ncarries the `value` it would leave, and `change` follows once it has moved."
+              "description": "Selects what a press or a key leaves, asking first. `helix-before-change`\ncarries the `value` it would leave, and `change` follows once it has moved.\n\nIn row order, as Data Table and Table write theirs, whatever order the\nrows were chosen in: a press on the fourth row and then the first is\n`a,d`."
             },
             {
               "kind": "method",
@@ -94596,7 +94828,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.\n\nSet it to start with rows selected. A row's value is its `value`, or its\nwords where it has none.",
+              "description": "The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.\n\nA press or a key writes it in row order, as Data Table does, whatever\norder the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its\nwords where it has none.",
               "fieldName": "value"
             }
           ],
@@ -123869,7 +124101,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Outline is a table of contents for a document. `Navigation` does the same job\nfor a site.\n\nThe links are your own anchors. A router renders its own `<a>` and cannot\nrender one inside the outline's shadow root, and the hrefs are fragments on\nthe same page.\n\nWrite the anchors flat, with `data-level` for their depth, or nested in\nlists, `<ul><li><a>`. A screen reader hears the levels either way: the\noutline puts a flat run into lists inside list items of its own, nested by\n`data-level`, and leaves the links where they are. A link without\n`data-level` is at the top level.\n\nA heading slotted into `heading` names the navigation, in place of `label`.\n\nIn a contents rail with a scrollbar of its own, `follow` keeps the link of\nthe section in view showing as the reader scrolls the page.\n\n**Keyboard.** The links are your anchors, in the tab order as you wrote\nthem, so the outline adds no keys of its own: Tab moves through the links\nand Enter follows one. Following a link moves focus to its section, so the\nnext Tab goes on from the heading, also with `behavior` set.\n\n**What a screen reader hears.** A navigation landmark named by `label`, \"On\nthis page\", or by the slotted heading. The links are lists, nested by level,\nso a reader hears how many links a level holds and where each one is. The\nlink to the section in view carries `aria-current=\"location\"`, read as\n\"current location\", and it moves as the page scrolls without announcing,\nwhich would interrupt the reading it follows.\n\nThe current section is decided by the headings' positions. An\n`IntersectionObserver` with a band near the top fails both ways: when\nheadings are far apart, none is in the band and no section is marked, and\nwhen they are close together, several are in the band at once.",
+          "description": "Outline is a table of contents for a document. `Navigation` does the same job\nfor a site.\n\nThe links are your own anchors. A router renders its own `<a>` and cannot\nrender one inside the outline's shadow root, and the hrefs are fragments on\nthe same page.\n\nWrite the anchors flat, with `data-level` for their depth, or nested in\nlists, `<ul><li><a>`. A screen reader hears the levels either way: the\noutline puts a flat run into lists inside list items of its own, nested by\n`data-level`, and leaves the links where they are. A link without\n`data-level` is at the top level.\n\nA heading slotted into `heading` names the navigation, in place of `label`.\n\nIn a contents rail with a scrollbar of its own, `follow` keeps the link of\nthe section in view showing as the reader scrolls the page.\n\n**Keyboard.** The links are your anchors, in the tab order as you wrote\nthem, so the outline adds no keys of its own: Tab moves through the links\nand Enter follows one. Following a link moves focus to its section, so the\nnext Tab goes on from the heading, also with `behavior` set.\n\n**What a screen reader hears.** A navigation landmark named by `label`, \"On\nthis page\", or by the slotted heading. The links are lists, nested by level,\nso a reader hears how many links a level holds and where each one is. The\nlink to the section in view carries `aria-current=\"location\"`, read as\n\"current location\", and it moves as the page scrolls without announcing,\nwhich would interrupt the reading it follows.\n\nThe current section is decided by the headings' positions. An\n`IntersectionObserver` with a band near the top fails both ways: when\nheadings are far apart, none is in the band and no section is marked, and\nwhen they are close together, several are in the band at once.\n\n**Several sections at once.** `marks=\"visible\"` marks the link of every\nsection with part of it on screen, from the reading line to the bottom of\nwhat the sections scroll in, as Zag's table of contents marks its active\nids. The mark then runs from the first of those links to the last, and\n`marked` lists their ids in page order.\n\n**Going to a section from code.** `scrollToSection(id)` scrolls to the\nsection as a press on its link does, with `behavior`, and marks its link at\nonce.\n\n**Styling a link by its state.** Each link the outline finds carries\n`data-depth`, its depth in the outline from `1`, nested lists and\n`data-level` alike, and `aria-current=\"location\"` while its section is\nmarked, so `a[aria-current]` and `a[data-depth=\"2\"]` are the hooks for a\nrule of yours.",
           "name": "HelixHeadlessOutline",
           "cssParts": [
             {
@@ -123925,7 +124157,7 @@
               "name": "indicator",
               "privacy": "private",
               "readonly": true,
-              "default": "new IndicatorController(this, { active: () => this.links.find((link) => link.hasAttribute('aria-current')), indicator: () => this.partNamed('indicator'), surface: () => this.partNamed('nav'), })"
+              "default": "new IndicatorController(this, { active: () => this.links.find((link) => link.hasAttribute('aria-current')), indicator: () => this.partNamed('indicator'), surface: () => this.partNamed('nav'), through: () => this.links.findLast((link) => link.hasAttribute('aria-current')), })"
             },
             {
               "kind": "field",
@@ -123960,6 +124192,16 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "marks",
+              "type": {
+                "text": "'reading' | 'visible'"
+              },
+              "default": "'reading'",
+              "description": "Which links are marked. `reading` marks the one section being read, the\nlast whose heading has passed the reading line. `visible` marks every\nsection with part of it on screen, and the mark runs across their links.",
+              "attribute": "marks"
+            },
             {
               "kind": "field",
               "name": "offset",
@@ -123979,6 +124221,25 @@
               "description": "The id of the section in view, or empty before anything is measured.\n\nRead-only, and a getter rather than a property for that reason: it is\nderived from where the page is scrolled to, so a consumer setting it would\nbe overwritten by the next thing that crossed the reading line. Every other\nwritable property in this library that a component also writes is state a\nconsumer can own; this one cannot be, and saying so with the type is better\nthan saying it in a sentence nobody reads.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "marked",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "The ids of the sections whose links are marked, in page order: the one\n`current` names, or under `marks=\"visible\"` every section on screen.\nRead-only, for the reason `current` gives.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "markedIds",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "What `marked` reports, which only `markTo` writes."
+            },
             {
               "kind": "field",
               "name": "reading",
@@ -124057,6 +124318,37 @@
               },
               "description": "Works out which section is being read, and marks its link.\n\nPositional rather than a reading of what intersects, for the reason above.\nThe comparison is against `offset` and not zero, so the reading line is\nwherever the page says the top of the readable area is."
             },
+            {
+              "kind": "method",
+              "name": "onScreen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ link: HTMLAnchorElement; target: Element }[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "sections",
+                  "type": {
+                    "text": "{ link: HTMLAnchorElement; target: Element }[]"
+                  }
+                },
+                {
+                  "name": "origin",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "scroller",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "The sections with part of them on screen, under `marks=\"visible\"`: each\nruns from its own target to the next one's, and the last to the end of the\npage."
+            },
             {
               "kind": "method",
               "name": "markTo",
@@ -124068,9 +124360,9 @@
               },
               "parameters": [
                 {
-                  "name": "active",
+                  "name": "marked",
                   "type": {
-                    "text": "{ link: HTMLAnchorElement; target: Element } | undefined"
+                    "text": "{ link: HTMLAnchorElement; target: Element }[]"
                   }
                 }
               ],
@@ -124187,6 +124479,52 @@
               "readonly": true,
               "description": "Takes a link's click, but only where `auto` would not have done the job.\n\nLeft the platform's wherever it can be: a modified click is a new tab or a\ndownload and none of this applies, a click something else has already\nhandled is not ours, and `auto` is the whole point of `auto`."
             },
+            {
+              "kind": "method",
+              "name": "scrollToSection",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Scrolls to the section with this id, as a press on its link does, with\n`behavior`, and marks its link at once. The address and focus stay where\nthey are. Returns whether the outline has a link to that section.",
+              "type": {
+                "text": "scrollToSection(id: string) => boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "travel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "{ link: HTMLAnchorElement; target: Element }"
+                  }
+                },
+                {
+                  "name": "scroll",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Marks the section a reader asked for, and holds the mark there until the\npage stops moving. Scrolls to it where `scroll` says this element does\nthe scrolling, and returns whether it did."
+            },
             {
               "kind": "method",
               "name": "watch",
@@ -124205,6 +124543,17 @@
               "readonly": true,
               "description": "The set changed: watch it, and measure it.\n\nBoth, for the reason the tab strip records: the host renders before its\nlinks have anything to point at, so the first measurement finds nothing,\nand without a second one at `slotchange` the mark stays unplaced for the\nlife of the page."
             },
+            {
+              "kind": "method",
+              "name": "writeDepths",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Writes each link's depth in the outline, from 1, as `data-depth`: the\nlist items around it inside the outline, or for a flat run, its place in\nthe lists `data-level` makes of it.\n\nOn the consumer's links, as `aria-current` is, and only after the first\nrender, where a framework has hydrated them."
+            },
             {
               "kind": "method",
               "name": "unland",
@@ -124641,6 +124990,15 @@
               "description": "The navigation's name, read by screen readers. A heading in the `heading`\nslot names it in place of this.",
               "fieldName": "label"
             },
+            {
+              "name": "marks",
+              "type": {
+                "text": "'reading' | 'visible'"
+              },
+              "default": "'reading'",
+              "description": "Which links are marked. `reading` marks the one section being read, the\nlast whose heading has passed the reading line. `visible` marks every\nsection with part of it on screen, and the mark runs across their links.",
+              "fieldName": "marks"
+            },
             {
               "name": "offset",
               "type": {
@@ -149943,7 +150301,44 @@
                   "text": "void"
                 }
               },
-              "description": "Tells a slotted trigger what it is doing, since it cannot know.\n\nThe fallback button is rendered by this element and says so in its own\ntemplate. A trigger the consumer slotted is their markup, and the state it\nneeds to announce is state only this element holds: without this, the\narrangement this component recommends, an icon button slotted as the\ntrigger, is a control that opens a menu and never says it has one. A\nconsumer who has to mirror `open` back onto their own trigger is a consumer\nwho will forget, and the failure is silent to everyone who can see the\nscreen.\n\n**Never `setAttribute`.** Writing `aria-expanded` onto the consumer's\nelement is a hydration mismatch React reports and does not patch up,\nmeasured against React 19.2.8. `tellDisclosure` carries the argument and the\nmeasurement: the state travels as a property, into the trigger's own shadow\nroot, where React neither looks nor compares.\n\n`aria-haspopup` goes with it rather than being written separately. An\nattribute the consumer's server never sent is a mismatch whether or not it\nmoves afterwards, measured in both load orders, and a trigger that says it\nis expanded is already saying it has something to expand."
+              "description": "Tells a slotted trigger what it is doing, since it cannot know.\n\nThe fallback button is rendered by this element and says so in its own\ntemplate. A trigger the consumer slotted is their markup, and the state it\nneeds to announce is state only this element holds: without this, the\narrangement this component recommends, an icon button slotted as the\ntrigger, is a control that opens a menu and never says it has one. A\nconsumer who has to mirror `open` back onto their own trigger is a consumer\nwho will forget, and the failure is silent to everyone who can see the\nscreen.\n\n**Never `setAttribute`.** Writing `aria-expanded` onto the consumer's\nelement is a hydration mismatch React reports and does not patch up,\nmeasured against React 19.2.8. `tellDisclosure` carries the argument and the\nmeasurement: the state travels as a property, into the trigger's own shadow\nroot, where React neither looks nor compares.\n\n`aria-haspopup` goes with it rather than being written separately. An\nattribute the consumer's server never sent is a mismatch whether or not it\nmoves afterwards, measured in both load orders, and a trigger that says it\nis expanded is already saying it has something to expand.\n\n**A plain trigger once a reader has reached it.** A `<button>` of yours has\nno shadow root, so it takes `aria-haspopup=\"menu\"` and `aria-expanded` as\nattributes, written only once focus or a pointer has reached it. That is\nafter hydration, which is the only time React compares them. A trigger\nthat carries either attribute itself is yours to keep up to date."
+            },
+            {
+              "kind": "field",
+              "name": "toldPlain",
+              "type": {
+                "text": "Element | undefined"
+              },
+              "privacy": "private",
+              "description": "The plain trigger this dial has written its state on, so it can be taken back."
+            },
+            {
+              "kind": "field",
+              "name": "reached",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether a reader has reached the trigger, by focus or a pointer, which is after hydration."
+            },
+            {
+              "kind": "method",
+              "name": "untellPlain",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Takes the state off a plain trigger that is no longer this dial's."
+            },
+            {
+              "kind": "field",
+              "name": "handleReach",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A reader reaching the trigger, which lets a plain one be told its state."
             },
             {
               "kind": "field",
@@ -150653,7 +151048,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A splitter has one axis. Nest splitters to get two axes and three-pane or\nfour-pane layouts.\n\nWhen a splitter is slotted into a pane of another at a right angle, a corner\nhandle appears where the dividers cross. It shows the `move` cursor, responds\nto both arrow axes, and a drag moves both dividers at once. The corner is\nadded at `firstUpdated` and is not in the server markup. Before it appears,\nboth dividers work on their own.\n\nThe divider has `role=\"separator\"` and `aria-valuenow`, with\n`aria-valuetext` saying the start pane's share as a percentage in the\nnearest `lang`, or in the reader's locale where no `lang` is set, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,\npress `Home` or `End` to move it to its bounds, and press `Enter` to collapse\nthe start pane and open it again. A drag in progress is tracked as a state, so both dividers a\ncorner moves stay lit for as long as they move.\n\nBy default, `min` and `max` let the divider reach either edge, so you can\ndrag a pane fully closed. Set them to limit the range.\n\nA pane can be collapsed, which is a separate state from a divider at the\nedge. `collapsed` names the shut pane, `start` or `end`, and the pane opens\nback to the position where the collapsing gesture began. A drag records that position\non press, and every other way of collapsing records it in `settle`.\n`collapsed-size` keeps a sliver of the pane visible, such as a tab strip.\nCollapsing overrides `min` and `max`.\n\nSet `primary` to the pane that keeps its size when the splitter's own size\nchanges, such as a sidebar beside a window being resized. The other pane\ntakes all of the change, as Web Awesome's split panel does. Without it,\nboth panes keep their share.\n\n**Three or more panes along one axis are splitters nested on that axis**, a\nsplitter in the `end` pane of another for three columns. The nested one\nkeeps the pane on its far side the size it was while the outer divider\nmoves, so a divider resizes only the two panes beside it, as Zag's splitter\ndoes with any number of panels. Where the whole row is resized, every pane\nkeeps its share, unless `primary` says otherwise.\n\n**Keyboard.** The divider is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |\n| Up, Down | Moves a stacked divider by `step`. |\n| Home, End | Moves the divider to its bounds. |\n| Enter | Collapses the start pane, and opens it again. |\n| F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |",
+          "description": "A splitter has one axis. Nest splitters to get two axes and three-pane or\nfour-pane layouts.\n\nWhen a splitter is slotted into a pane of another at a right angle, a corner\nhandle appears where the dividers cross. It shows the `move` cursor, responds\nto both arrow axes, and a drag moves both dividers at once. The corner is\nadded at `firstUpdated` and is not in the server markup. Before it appears,\nboth dividers work on their own.\n\nThe divider has `role=\"separator\"` and `aria-valuenow`, with\n`aria-valuetext` saying the start pane's share as a percentage in the\nnearest `lang`, or in the reader's locale where no `lang` is set, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,\npress `Home` or `End` to move it to its bounds, and press `Enter` to collapse\nthe start pane and open it again. A drag in progress is tracked as a state, so both dividers a\ncorner moves stay lit for as long as they move.\n\nBy default, `min` and `max` let the divider reach either edge, so you can\ndrag a pane fully closed. Set them to limit the range.\n\nA pane can be collapsed, which is a separate state from a divider at the\nedge. `collapsed` names the shut pane, `start` or `end`, and the pane opens\nback to the position where the collapsing gesture began. A drag records that position\non press, and every other way of collapsing records it in `settle`.\n`collapsed-size` keeps a sliver of the pane visible, such as a tab strip.\nCollapsing overrides `min` and `max`. `collapsible` says which panes can be\ncollapsed at all, as Zag's panels each say.\n\n`min` is the least the start pane keeps and `end-min` the least the end pane\nkeeps, each a percentage or a CSS length such as `16rem`.\n\nSet `primary` to the pane that keeps its size when the splitter's own size\nchanges, such as a sidebar beside a window being resized. The other pane\ntakes all of the change, as Web Awesome's split panel does. Without it,\nboth panes keep their share.\n\n**Three or more panes along one axis are splitters nested on that axis**, a\nsplitter in the `end` pane of another for three columns. The nested one\nkeeps the pane on its far side the size it was while the outer divider\nmoves, so a divider resizes only the two panes beside it, as Zag's splitter\ndoes with any number of panels. Where the whole row is resized, every pane\nkeeps its share, unless `primary` says otherwise.\n\n**Keyboard.** The divider is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |\n| Up, Down | Moves a stacked divider by `step`. |\n| Home, End | Moves the divider to its bounds. |\n| Enter | Collapses the start pane, or the end pane where `collapsible=\"end\"`, and opens it again. |\n| F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |",
           "name": "HelixHeadlessSplitter",
           "cssProperties": [
             {
@@ -150740,6 +151135,15 @@
               "description": "How much of a shut pane is still shown, as a percentage.\n\nZero by default, which is a pane fully gone. A tab strip or a title bar\nthat should survive its own collapse says how much of itself to keep, and\nonly whoever put it there knows that, which is the same reason `min` is a\nconsumer's to set.",
               "attribute": "collapsed-size"
             },
+            {
+              "kind": "field",
+              "name": "collapsible",
+              "type": {
+                "text": "'both' | 'end' | 'none' | 'start' | undefined"
+              },
+              "description": "Which panes can be collapsed, as Zag's panels each take `collapsible`:\n`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops\nat the edge without shutting. `Enter` collapses the end pane where only\nthe end pane can be collapsed, and the start pane otherwise.\n\nUnset is `both`, and the attribute stays absent until you write it.",
+              "attribute": "collapsible"
+            },
             {
               "kind": "field",
               "name": "cornerLabel",
@@ -150785,6 +151189,16 @@
               "description": "Where the divider starts, when `position` is not set.",
               "attribute": "default-position"
             },
+            {
+              "kind": "field",
+              "name": "endMin",
+              "type": {
+                "text": "number | string"
+              },
+              "default": "0",
+              "description": "The least the end pane keeps, in the units `min` takes: a percentage, or\na CSS length such as `16rem` resolved against the splitter's box. The\ndivider stops that far from the end, whatever `max` allows, so `min` and\n`end-min` hold a minimum for each pane, as Zag's panels each take\n`minSize`.",
+              "attribute": "end-min"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -151210,6 +151624,25 @@
               ],
               "description": "The collapse a settled position amounts to, if any, so a pane dragged shut\nand a pane shut by a consumer's button are the same state.\n\nNo separate threshold. Landing on the collapsed size *is* the gesture, and\n`clamp` puts every overshoot exactly on the bound, so the default of zero\nlatches on any drag that runs off the end."
             },
+            {
+              "kind": "method",
+              "name": "canCollapse",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "pane",
+                  "type": {
+                    "text": "'end' | 'start'"
+                  }
+                }
+              ],
+              "description": "Whether `collapsible` lets this pane be collapsed."
+            },
             {
               "kind": "method",
               "name": "clamp",
@@ -151900,6 +152333,14 @@
               "description": "How much of a shut pane is still shown, as a percentage.\n\nZero by default, which is a pane fully gone. A tab strip or a title bar\nthat should survive its own collapse says how much of itself to keep, and\nonly whoever put it there knows that, which is the same reason `min` is a\nconsumer's to set.",
               "fieldName": "collapsedSize"
             },
+            {
+              "name": "collapsible",
+              "type": {
+                "text": "'both' | 'end' | 'none' | 'start' | undefined"
+              },
+              "description": "Which panes can be collapsed, as Zag's panels each take `collapsible`:\n`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops\nat the edge without shutting. `Enter` collapses the end pane where only\nthe end pane can be collapsed, and the start pane otherwise.\n\nUnset is `both`, and the attribute stays absent until you write it.",
+              "fieldName": "collapsible"
+            },
             {
               "name": "corner-label",
               "type": {
@@ -151935,6 +152376,15 @@
               "description": "Where the divider starts, when `position` is not set.",
               "fieldName": "defaultPosition"
             },
+            {
+              "name": "end-min",
+              "type": {
+                "text": "number | string"
+              },
+              "default": "0",
+              "description": "The least the end pane keeps, in the units `min` takes: a percentage, or\na CSS length such as `16rem` resolved against the splitter's box. The\ndivider stops that far from the end, whatever `max` allows, so `min` and\n`end-min` hold a minimum for each pane, as Zag's panels each take\n`minSize`.",
+              "fieldName": "endMin"
+            },
             {
               "name": "label",
               "type": {
@@ -164293,7 +164743,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. In `multiple`,\nShift with an arrow, Home or End selects the range from the tag last\npressed to the tag focus moves to, Shift with a press or Space selects the\nrange to that tag, and Control or Command with A selects every tag that is\nnot disabled. `selection-behavior=\"replace\"` selects the tag a reader\npresses or moves to alone, as a file list does, and Control or Command\nwith a press or Space adds or takes out one tag. `disallow-empty-selection`\nkeeps one tag selected once one is. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".\nWhere only disabled tags are left, the first of them holds the tab stop and\ntakes focus, so the reader stays in the set.",
+          "description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. In `multiple`,\nShift with an arrow, Home or End selects the range from the tag last\npressed to the tag focus moves to, Shift with a press or Space selects the\nrange to that tag, and Control or Command with A selects every tag that is\nnot disabled. `selection-behavior=\"replace\"` selects the tag a reader\npresses or moves to alone, as a file list does, and Control or Command\nwith a press or Space adds or takes out one tag. `disallow-empty-selection`\nkeeps one tag selected once one is, and Escape lets go of the selection\notherwise. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".\nWhere only disabled tags are left, the first of them holds the tab stop and\ntakes focus, so the reader stays in the set.\n\n**Typing new tags.** A field where people type tags and press Enter to add\neach one is Combobox with `multiple` and `allows-custom-value`, or\n`creatable` to ask first with `helix-create`. It draws each value as a tag,\nBackspace on the empty field removes the last one, and the arrow keys move\nbetween them.",
           "name": "HelixHeadlessTagGroup",
           "cssParts": [
             {
@@ -165206,7 +165656,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A label that people can optionally remove. `dismissible` is the difference\nfrom a badge: a badge shows a state that people cannot change, and a tag\nnames something they can remove.\n\nThe remove button sends `helix-dismiss`. The tag does not remove itself,\nbecause your code owns the list it is in, so remove it in your handler. A\nlistener can cancel `helix-dismiss`, and `dismiss()` then returns `false`.\nWhen the handler removes a tag whose remove button has focus, focus moves to\nthe next tag's remove button, or to the previous one's after the last tag.\n\nThe remove button is named for its tag, such as \"Remove Apple\", so a list of\nbuttons says which tag each one removes. Write `{label}` in `dismiss-label`\nto put the tag's words somewhere else, such as `dismiss-label=\"{label}\nentfernen\"`.\n\n`href` makes the label a link, and `disabled` takes the tag out of reach: its\nlink and its remove button stop answering.\n\n**In a `Tag.Group` a tag is a row of a grid.** The group gives it its role,\nits place in the one tab stop and, where the group selects, whether it is\nselected. Its remove button leaves the tab order there, Delete and Backspace\ndoing its job from the row.",
+          "description": "A label that people can optionally remove. `dismissible` is the difference\nfrom a badge: a badge shows a state that people cannot change, and a tag\nnames something they can remove.\n\nThe remove button sends `helix-dismiss`. The tag does not remove itself,\nbecause your code owns the list it is in, so remove it in your handler. A\nlistener can cancel `helix-dismiss`, and `dismiss()` then returns `false`.\nWhen the handler removes a tag whose remove button has focus, focus moves to\nthe next tag's remove button, or to the previous one's after the last tag.\n\nThe remove button is named for its tag, such as \"Remove Apple\", so a list of\nbuttons says which tag each one removes. Write `{label}` in `dismiss-label`\nto put the tag's words somewhere else, such as `dismiss-label=\"{label}\nentfernen\"`.\n\n`href` makes the label a link, and `disabled` takes the tag out of reach: its\nlink and its remove button stop answering.\n\n**In a `Tag.Group` a tag is a row of a grid.** The group gives it its role,\nits place in the one tab stop and, where the group selects, whether it is\nselected. Its remove button leaves the tab order there, Delete and Backspace\ndoing its job from the row.\n\n**Styling a tag by what is happening to it.** `:state(selected)` while it is\nselected, `:state(focus-visible)` while its cell shows keyboard focus,\n`[disabled]` while it is out of reach, and the host's own `:hover` and\n`:active` under the pointer, as React Aria's `data-hovered` and\n`data-pressed` are.",
           "name": "HelixHeadlessTag",
           "cssParts": [
             {
@@ -165383,6 +165833,13 @@
               "description": "The remove button's name: `dismissLabel` with the tag's own words.\n\n**Named for its tag**, because a set of tags each named \"Remove\" is a list\nof buttons that says nothing about which tag each one takes away. The\nwords are the tag's slotted text, its category first, and `{label}` in\n`dismissLabel` says where they go. Without it they follow the verb, unless\nthe label already holds them, which is what a page naming each button by\nhand wrote.\n\nRead from the children, so empty on a server and while hydrating, where\nthe name is the verb alone until the update after.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleCellFocus",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Says whether the cell shows keyboard focus, as `:focus-visible` does, so a\nsheet outside can draw the ring on the tag by the host."
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -165975,6 +166432,10 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "The tag's cell has keyboard focus that the browser shows, in a `Tag.Group`.",
+              "name": "focus-visible"
+            },
             {
               "description": "The tag is selected in a `Tag.Group` that selects.",
               "name": "selected"
@@ -173320,6 +173781,14 @@
                 "words": true
               }
             },
+            {
+              "kind": "field",
+              "name": "timeContent",
+              "type": {
+                "text": "((time: string, written: string) => unknown) | undefined | undefined"
+              },
+              "description": "What each time in the list shows: a function given the time as `HH:mm`,\nor `HH:mm:ss` with `seconds`, and the time as the row writes it, that\nreturns text, an element or a Lit template.\n\nFor the seats left at a time, or a caption under it, as React Aria's\n`ListBoxItem` takes children. Content with `slot=\"start\"`, `slot=\"end\"`\nor `slot=\"description\"` goes to that slot of the row, and a description\nis read after the time. The row is still named by the written time, and\ntypeahead still finds it by that. Return the written time with your\ncontent where it should still show. A property only, there being no way\nto write a function in markup. The wheels draw their own figures."
+            },
             {
               "kind": "field",
               "name": "unavailableMessage",
@@ -175619,7 +176088,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Given `datetime`, the label you write is wrapped in a `<time>` element, so a\nmachine-readable value such as \"2026-08-19\" travels with a label such as\n\"yesterday\". Without `datetime`, the label is a `<span>`.\n\n**`relative` writes the time for you** as how long ago it was, such as \"3\nhours ago\", from `datetime`, where the `time` slot is empty. The words move\non as they go stale, \"3 hours ago\" becoming \"4 hours ago\", with one wakeup\nshared by every reading on the page, as `FormatDate` keeps its own. They are\nin the language of the page, or of the nearest `lang`.\n\nEach entry draws the connector line that arrives at it and hides it when it\nis the first entry, using `:host(:first-child)`. This needs no index, no\ncounting parent, and no script. `Steps` and `Breadcrumbs` work the same way.\n\n`tone` sets the kind of event and is the only thing that colors the mark. It\nuses the same values as `Announcement`. **A screen reader hears the tone as\na word**, from `tone-labels`: the mark is an image named \"Error\",\n\"Information\", \"Success\" or \"Warning\", so the color is not the only place\nthe meaning is. `neutral` and `primary` say nothing unless you name them.\n\n**`pending` marks an event that has not happened yet**, such as one that is\nscheduled. The mark is the open circle, and a screen reader hears\n`pending-label`, \"Scheduled\", with the tone's word.",
+          "description": "Given `datetime`, the label you write is wrapped in a `<time>` element, so a\nmachine-readable value such as \"2026-08-19\" travels with a label such as\n\"yesterday\". Without `datetime`, the label is a `<span>`.\n\n**`relative` writes the time for you** as how long ago it was, such as \"3\nhours ago\", from `datetime`, where the `time` slot is empty. The words move\non as they go stale, \"3 hours ago\" becoming \"4 hours ago\", with one wakeup\nshared by every reading on the page, as `FormatDate` keeps its own. They are\nin the language of the page, or of the nearest `lang`. The whole date and\ntime is the reading's `title`, so a pointer resting on \"3 hours ago\" shows\nwhen it was, and a screen reader reads it as the description.\n\nEach entry draws the connector line that arrives at it and hides it when it\nis the first entry, using `:host(:first-child)`. This needs no index, no\ncounting parent, and no script. `Steps` and `Breadcrumbs` work the same way.\n\n`tone` sets the kind of event and is the only thing that colors the mark. It\nuses the same values as `Announcement`. **A screen reader hears the tone as\na word**, from `tone-labels`: the mark is an image named \"Error\",\n\"Information\", \"Success\" or \"Warning\", so the color is not the only place\nthe meaning is. `neutral` and `primary` say nothing unless you name them.\n\n**`pending` marks an event that has not happened yet**, such as one that is\nscheduled. The mark is the open circle, and a screen reader hears\n`pending-label`, \"Scheduled\", with the tone's word.",
           "name": "HelixHeadlessTimelineItem",
           "cssParts": [
             {
@@ -175707,6 +176176,16 @@
               "default": "''",
               "description": "What the `time` slot shows where nothing is slotted: the reading under\n`relative`, read against the clock before each render, and nothing\notherwise."
             },
+            {
+              "kind": "field",
+              "name": "whole",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "description": "The whole date and time `datetime` names, the reading's title under `relative`."
+            },
             {
               "kind": "field",
               "name": "moment",
@@ -176281,15 +176760,35 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A timeline is a record of events that happened or are scheduled. Each entry\ncarries a time, and no entry is current or complete. For a process you move\nthrough, with a current stage and `active` and `complete` states, use\n`Steps`.\n\nEach entry draws the connector line that arrives at it and hides it when it\nis first, using `:host(:first-child)`. This resolves at layout with no\nscript, so the server markup is correct before anything runs.\n\nThe host has `role=\"list\"`, because the entries are your elements in the\nlight DOM. `Steps` does the same.\n\n**Group entries by date with `Timeline.Group`**, which puts a heading such as\n\"Today\" over its entries. The group is an entry of the timeline, and its\nentries are a list of their own named by the heading.\n\n**The reading order is the order you write the entries in**, in every layout\nthe styled tier draws: down the page, either side of a line down the middle,\nor across the page. Inside each entry the time is read before what happened.\nWrite the entries in the order the events happened, oldest or newest first,\nand the layout only moves where they are drawn.",
+          "description": "A timeline is a record of events that happened or are scheduled. Each entry\ncarries a time, and no entry is current or complete. For a process you move\nthrough, with a current stage and `active` and `complete` states, use\n`Steps`.\n\nEach entry draws the connector line that arrives at it and hides it when it\nis first, using `:host(:first-child)`. This resolves at layout with no\nscript, so the server markup is correct before anything runs.\n\nThe host has `role=\"list\"`, because the entries are your elements in the\nlight DOM. `Steps` does the same.\n\n**Group entries by date with `Timeline.Group`**, which puts a heading such as\n\"Today\" over its entries. The group is an entry of the timeline, and its\nentries are a list of their own named by the heading.\n\n**The reading order is the order you write the entries in**, in every layout\nthe styled tier draws: down the page, either side of a line down the middle,\nor across the page. Inside each entry the time is read before what happened.\nWrite the entries in the order the events happened, oldest or newest first,\nand the layout only moves where they are drawn.\n\n**A feed that loads more entries sets `loading` while it fetches.** The\ntimeline is busy, and an entry after the last says \"Loading more\"\n(`loading-label`, or your own content in the `loading` slot). Put a button\nthat asks for more after the timeline, and move focus to the first new\nentry when they arrive.",
           "name": "HelixHeadlessTimeline",
+          "cssParts": [
+            {
+              "description": "The entry after the last while `loading` is set.",
+              "name": "loading"
+            }
+          ],
           "slots": [
             {
               "description": "The entries, and any groups of them.",
               "name": ""
+            },
+            {
+              "description": "Content for the entry after the last while `loading` is set. Falls back to `loading-label`.",
+              "name": "loading"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "words",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'helix-timeline'",
+              "description": "The key this family's words are registered under, its styled tag:\n`registerWords('de', { 'helix-timeline': { loadingLabel: 'Wird geladen' } })`."
+            },
             {
               "kind": "field",
               "name": "label",
@@ -176300,6 +176799,30 @@
               "description": "Accessible name for the timeline, for people who reach it out of context.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the timeline as busy fetching more entries, and draws an entry\nafter the last that says so.",
+              "attribute": "loading",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loadingLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading more'",
+              "description": "The text of the entry drawn while `loading` is set, where the `loading` slot is empty.",
+              "attribute": "loading-label",
+              "helix": {
+                "words": true
+              }
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -176649,6 +177172,38 @@
               "default": "''",
               "description": "Accessible name for the timeline, for people who reach it out of context.",
               "fieldName": "label"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the timeline as busy fetching more entries, and draws an entry\nafter the last that says so.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "loading-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading more'",
+              "description": "The text of the entry drawn while `loading` is set, where the `loading` slot is empty.",
+              "fieldName": "loadingLabel"
+            }
+          ],
+          "cssStates": [
+            {
+              "description": "While `loading` is set.",
+              "name": "loading"
+            },
+            {
+              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
             }
           ],
           "superclass": {
@@ -176681,16 +177236,6 @@
           },
           "tagName": "helix-headless-timeline",
           "customElement": true,
-          "cssStates": [
-            {
-              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
-              "name": "settled",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
-            }
-          ],
           "modulePath": "src/timeline/root/timeline-root.ts",
           "definitionPath": "src/timeline/root/timeline-root.ts"
         }
@@ -181999,7 +182544,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The trigger stays your own element. The bubble renders in the\ntop layer through the popover API, so an ancestor with `overflow: hidden`\ndoes not clip it and no `z-index` is needed. `FloatingController` positions\nit and flips it to another side when the preferred side does not fit.\n\n**Place the tooltip beside its trigger, name the trigger with `for`, and\nname the tooltip in the trigger's `aria-describedby`.** The description is\nthen in your own markup, so it is in the server's HTML and in the\naccessibility tree at rest, in every browser, before anyone points at the\ntrigger or focuses it:\n\n```html\n<helix-headless-button aria-describedby=\"save-tip\" id=\"save\">Save</helix-headless-button>\n<helix-headless-tooltip content=\"Save your work\" for=\"save\" id=\"save-tip\"></helix-headless-tooltip>\n```\n\nWithout the attribute, the tooltip links itself through an element reference\non the control that takes focus, and it never writes into your markup before\nyou act, so hydration stays intact. A trigger that is a Helix component is\ndescribed at once, inside its own shadow root. A plain element in your\nmarkup is described when you first point at it or focus it, so a screen\nreader in reading mode meets it with no description until then. Where the\nbrowser has no element references, nothing links the two, and the tooltip\nwarns once on first open. The tooltip can also wrap its trigger, which\ndescribes a Helix component and leaves a plain element undescribed. In the\n`for` form the tooltip itself is out of the accessibility tree while its\nbubble is down, so you meet its words once, as the trigger's description.\n\nThe tooltip shows on hover and on focus. It hides on pointer leave, on blur,\non Escape, and when the trigger is activated. The pointer can move from the\ntrigger onto the bubble and the bubble stays, unless you set\n`hoverable=\"false\"`. `delay` is how long the pointer rests before it shows,\nand `delay-out` how long it stays once the pointer leaves.\n\nOnce one tooltip is showing, moving to another trigger shows its tooltip\nwith no `delay`, and the first one hides. The same holds for `skip-delay`\nmilliseconds after a tooltip hides, 300 unless you set it. `show-on=\"focus\"`\nshows the tooltip on keyboard focus only, for a hint a pointer does not need.",
+          "description": "The trigger stays your own element. The bubble renders in the\ntop layer through the popover API, so an ancestor with `overflow: hidden`\ndoes not clip it and no `z-index` is needed. `FloatingController` positions\nit and flips it to another side when the preferred side does not fit.\n\n**Place the tooltip beside its trigger, name the trigger with `for`, and\nname the tooltip in the trigger's `aria-describedby`.** The description is\nthen in your own markup, so it is in the server's HTML and in the\naccessibility tree at rest, in every browser, before anyone points at the\ntrigger or focuses it:\n\n```html\n<helix-headless-button aria-describedby=\"save-tip\" id=\"save\">Save</helix-headless-button>\n<helix-headless-tooltip content=\"Save your work\" for=\"save\" id=\"save-tip\"></helix-headless-tooltip>\n```\n\nWithout the attribute, the tooltip links itself through an element reference\non the control that takes focus, and it never writes into your markup before\nyou act, so hydration stays intact. A trigger that is a Helix component is\ndescribed at once, inside its own shadow root. A plain element in your\nmarkup is described when you first point at it or focus it, so a screen\nreader in reading mode meets it with no description until then. Where the\nbrowser has no element references, nothing links the two, and the tooltip\nwarns once on first open. The tooltip can also wrap its trigger, which\ndescribes a Helix component and leaves a plain element undescribed. In the\n`for` form the tooltip itself is out of the accessibility tree while its\nbubble is down, so you meet its words once, as the trigger's description.\nA trigger whose name is already the tooltip's words, such as an icon button\nnamed Settings under a tooltip reading Settings, is not described by them\nagain.\n\nThe tooltip shows on hover and on focus. It hides on pointer leave, on blur,\non Escape, and when the trigger is activated. The pointer can move from the\ntrigger onto the bubble and the bubble stays, unless you set\n`hoverable=\"false\"`. `delay` is how long the pointer rests before it shows,\nand `delay-out` how long it stays once the pointer leaves.\n\nOnce one tooltip is showing, moving to another trigger shows its tooltip\nwith no `delay`, and the first one hides. The same holds for `skip-delay`\nmilliseconds after a tooltip hides, 300 unless you set it. `show-on=\"focus\"`\nshows the tooltip on keyboard focus only, for a hint a pointer does not need.",
           "name": "HelixHeadlessTooltip",
           "cssParts": [
             {
@@ -182433,6 +182978,16 @@
               ],
               "description": "Describes the control that takes the trigger's focus by this tooltip.\n\n`light` says a reader has just acted, which is what allows a write onto a\nplain element in the consumer's markup. See `linkDescription`."
             },
+            {
+              "kind": "field",
+              "name": "describes",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether the bubble's words add anything to the trigger: they are not\nempty, and they are not the trigger's own name, such as an icon button\nnamed Settings under a tooltip reading Settings, which a screen reader\nread as \"Settings, Settings\".",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "linkOnArrival",
@@ -195396,13 +195951,295 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/virtual-list/reorder/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "reorderVirtualList",
+          "declaration": {
+            "name": "reorderVirtualList",
+            "module": "./virtual-list-reorder.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VirtualListReorderController",
+          "declaration": {
+            "name": "VirtualListReorderController",
+            "module": "./virtual-list-reorder.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/virtual-list/reorder/virtual-list-reorder.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Moves the items of a `reorderable` virtual list, by pointer and by keyboard,\nand says each move in a region screen readers announce.\n\n**Its own entry**, `@fusion.dev/helix-headless/virtual-list/reorder`, so a\nlist that never moves items carries none of this. Importing the entry gives\nevery virtual list one, and `reorderable` turns it on.\n\n- **Alt with Up or Down** moves the item the keys are on a place at once,\n  and Alt with Home or End to either end, as the APG's rearrangeable\n  listbox does. Across, Alt with Left or Right does, mirrored right to left.\n  The keys stay on the item that moved.\n- **A pointer** drags a whole row, with no grip: a press that travels is a\n  drag, and one that does not is still a press. The list scrolls near an\n  edge.\n- **The page moves the items.** A drop sends `helix-before-reorder` and then\n  `helix-reorder` with every key in the new order.\n\nA row being dragged carries `data-dragging`, and the row a drop would land\nbeside `data-drop-before` or `data-drop-after`. While a pointer drags a row,\na copy of it follows the pointer in the list's `drag-preview` part. The\nstyled tier's entry hands in the sheet that draws those, which the list\nadopts while it reorders.",
+          "name": "VirtualListReorderController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "HelixHeadlessVirtualList"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "sheet",
+              "type": {
+                "text": "CSSResult | undefined"
+              },
+              "description": "The sheet the list adopts while it reorders, from the styled tier.",
+              "default": "sheet"
+            },
+            {
+              "kind": "field",
+              "name": "marked",
+              "privacy": "private",
+              "default": "new Set<HTMLElement>()",
+              "description": "The rows marked last, so a mark that moves is taken off where it was."
+            },
+            {
+              "kind": "field",
+              "name": "live",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "description": "The region each move is said in, drawn while the list reorders."
+            },
+            {
+              "kind": "field",
+              "name": "reorder",
+              "type": {
+                "text": "ReorderController"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ReorderController(host, { get axis() { return host.orientation === 'horizontal' ? 'inline' : 'block' }, box: (key) => this.rowFor(key)?.getBoundingClientRect(), current: () => { const row = this.rows.find((one) => one.hasAttribute('data-active')) return row && !row.hasAttribute('data-disabled') ? this.keyOf(row) : undefined }, enabled: () => this.enabled, grip: (event) => { const row = this.rowOf(event) const key = row && !row.hasAttribute('data-disabled') ? this.keyOf(row) : undefined return row && key !== undefined ? { element: row, key } : undefined }, holds: false, keys: () => host.keys(), name: (key) => this.names.get(key) || key, preview: (key) => this.rowFor(key), say: (words) => { if (this.live) { this.live.textContent = words } }, scroller: () => host.renderRoot?.querySelector<HTMLElement>('[part=\"viewport\"]') ?? null, })"
+            },
+            {
+              "kind": "field",
+              "name": "enabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether the list moves its items now: one column, without sections.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "names",
+              "privacy": "private",
+              "default": "new Map<string, string>()",
+              "description": "The words of each drawn row by its item's key, as they were when the list\nlast drew. A move is said after the page has moved the items and before\nthe rows are drawn again, so a row's own words then belong to another item."
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "description": "The rows the list draws now.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "keyOf",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "The key of the item a row draws."
+            },
+            {
+              "kind": "method",
+              "name": "rowFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The row that draws the item with that key, where one is drawn."
+            },
+            {
+              "kind": "method",
+              "name": "rowOf",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The row an event passed through."
+            },
+            {
+              "kind": "field",
+              "name": "waiting",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private",
+              "description": "The place an item moved by a key goes to, until the page has moved it."
+            },
+            {
+              "kind": "field",
+              "name": "handleReorder",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Keeps the keys on the item that moved. The page moves the items as it\nhears this, and the rows are drawn again in place, so the row that had\nfocus now draws another item. Focus goes to the item's new row once the\nlist has drawn it."
+            },
+            {
+              "kind": "method",
+              "name": "draw",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "on",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Draws the list's `drag-preview` part and its region for the words while it\nreorders, and takes them away after. The list's own template draws\nneither."
+            },
+            {
+              "kind": "method",
+              "name": "mark",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Puts each row's mark in a move on it, and the styled tier's sheet on the list."
+            }
+          ],
+          "helix": {}
+        },
+        {
+          "kind": "function",
+          "name": "reorderVirtualList",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "typeof HelixHeadlessVirtualList"
+              }
+            },
+            {
+              "name": "sheet",
+              "optional": true,
+              "type": {
+                "text": "CSSResult"
+              }
+            }
+          ],
+          "description": "Gives every virtual list of a class a `VirtualListReorderController`, and\nthe class the words it says, as properties that read and write their\nattributes: `movedLabel`, `canceledLabel`, `droppedLabel`, and\n`pickedUpLabel`.\n\nThe entries call it for their own tier's class: the headless entry for\n`HelixHeadlessVirtualList`, and the styled one for `HelixVirtualList`, with\nthe sheet that draws a move. **Lists already on the page are given one\ntoo**, so a page that imports the list and then this entry has its lists\nreorder."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VirtualListReorderController",
+          "declaration": {
+            "name": "VirtualListReorderController",
+            "module": "src/virtual-list/reorder/virtual-list-reorder.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "reorderVirtualList",
+          "declaration": {
+            "name": "reorderVirtualList",
+            "module": "src/virtual-list/reorder/virtual-list-reorder.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/virtual-list/root/virtual-list-root.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The items arrive as data, in one of two ways:\n\n- `items` takes an array. A framework sets it as a property, and React\n  hydration keeps it.\n- `for` names a `<script type=\"application/json\">` that holds an array, which\n  a server sends as markup.\n\nEach item is drawn into a row in one of two ways:\n\n- `renderItem` is a function from an item and its index to the row's\n  content: a Lit template, a string, or a DOM node.\n- A `<template>` child defines one row. `data-field=\"name\"` fills an element\n  with the item's `name` as text, and `data-field-href=\"url\"` writes the\n  item's `url` into `href`, the same for any attribute. A field may be a path\n  of keys, such as `author.name`.\n\nRows are your markup in the light DOM, so your stylesheet styles them.\n\n**A grid.** `columns` lays the items out that many to a line, as a grid of\nequal columns, and windows the set a line at a time, as React Aria's grid\nlayout does. Each item draws one element, a cell of the grid, and\n`estimate` is the height of a line. `min-column-width` lays out as many\ncolumns as fit the box instead, as React Aria's grid layout does with its\nsmallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns\nof a grid, by a number of pixels the list counts in each row's place.\n\n**Across.** `orientation=\"horizontal\"` lays the items out along a line and\nscrolls it sideways, as a strip of cards does, windowed the same way:\n`estimate` is then an item's width, and the box needs an inline size.\n\n**Sections.** `section-field` names the field of each item that says which\nsection it is in, and the list draws a header before each section's items,\nas React Aria's list box sections do. Each section is an element with the\n`group` role, named by its header, which is its first child and carries\n`data-header`, so your stylesheet styles it, such as with `position:\nsticky`. A section starts wherever the field changes, so give the items in\norder. The window counts the headers with the items, and a section the\nwindow starts inside is drawn with its header. `renderSection` draws a\nheader of your own.\n\n**Keyboard.** The list is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |\n| Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |\n| Home, End | Moves to the first or the last item. |\n| Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |\n| A letter or a word | Moves to the next item whose text starts with what you typed. |\n| Escape | Lets go of every chosen item, in a list with `selection-mode`. |\n| Tab | Moves into the focused row's own links and buttons, then out of the list. |\n\nAn item that is not drawn is scrolled into view and focused, so a keyboard\nreaches the whole set. When the row holding the tab stop scrolls away, the\nstop moves to the first row on screen. Typing matches each item's\n`text-field`, which is the first `data-field` of the row template by default,\nor the item itself when it is a string or a number.\n\nEach row says its place in the whole set with `aria-posinset` and\n`aria-setsize`, so a screen reader says \"4,000 of 10,000\". The row holding\nfocus stays drawn when it scrolls out.\n\n**Selecting.** `selection-mode` makes the list a list box a reader chooses\nfrom: `single` selects one item and `multiple` any number. Space or a press\nselects an item, Shift with Space, an arrow, Home, End or a press takes in\nthe items from the last one chosen, and Control or Command with A selects\nthem all, in `multiple`. Escape lets go of every chosen item, and keeps the\nkey from the dialog or menu around the list while there was something to\nlet go of. `value` holds the chosen items' keys, separated by commas, in\nthe order of the set: `key-field` names each item's key, and a string or a\nnumber item is its own key. A change asks with `helix-before-change` and\ntells with `change`. Each row is an `option` marked `aria-selected`, so a\nrow's own links and buttons are not reached there: keep those to a list\nwithout `selection-mode`.\n\n`selection-behavior=\"replace\"` selects the item pressed alone, as a file\nlist does, and the arrow keys carry the selection with them. Control or\nCommand with a press or with Space adds or takes out one item, and with an\narrow moves without selecting.\n\n**Disabled items.** `disabled-keys` names items by their keys, separated by\ncommas. Their rows carry `aria-disabled`, the keys and typing pass over\nthem, and a press, Space, or Control with A does not select them.\n\n**Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,\na disabled one `data-disabled`, as React Aria's rows do, and the row the\nkeys are on, which holds the tab stop, `data-active`, whether or not the\nlist has focus.\n\n**Loading more.** `helix-range-change` fires as the items on screen change,\nand `range` holds them. `helix-load-more` fires once a reader is within one\nscreen of the end, once for each length of the set: add to `items` and it can\nfire again. While you fetch, set `loading`: the list is busy, and a row after\nthe last item says \"Loading more\" (`loading-label`, or your own content in\nthe `loading` slot). `scrollToIndex` takes a reader to an item.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown when there are no items and none are loading, such as\n\"No messages yet\" and a link to write one. Without either, an empty list\nshows nothing, since a list whose items have not arrived yet has not said\nit has none.\n\nThe list takes the `empty` state while it has read its items and holds none,\nand the `loading` state while `loading` is set, so your stylesheet can\nchange the box around it for either. A list with no name is reported once\nin a development build. Name it with `label` or `aria-label`.\n\n**Row height.** Rows are placed by `estimate` until they are drawn. Then the\nlist reads the drawn rows' height once and places every row by it, so a\nwrong estimate still reaches the last item. Set `measured` for rows of\ndifferent heights. Once the list draws rows of different heights, such as\nrows that wrap on a narrow screen, it places each row by its own height\nwhether `measured` is set or not.\n\nThe list follows its source. A new `items` array, an edit to the script's\ntext, or a script replaced under the same id draws the new rows. A row that\nstays in view keeps its element as the list scrolls.\n\nThe viewport scrolls on this tier. It carries `data-scroller`, and `core`\nships `[data-scroller] { overflow: auto }` into every shadow root, so\n`scrollTop` works with no stylesheet. You still need to set a block size.",
+          "description": "The items arrive as data, in one of two ways:\n\n- `items` takes an array. A framework sets it as a property, and React\n  hydration keeps it.\n- `for` names a `<script type=\"application/json\">` that holds an array, which\n  a server sends as markup.\n\nEach item is drawn into a row in one of two ways:\n\n- `renderItem` is a function from an item and its index to the row's\n  content: a Lit template, a string, or a DOM node.\n- A `<template>` child defines one row. `data-field=\"name\"` fills an element\n  with the item's `name` as text, and `data-field-href=\"url\"` writes the\n  item's `url` into `href`, the same for any attribute. A field may be a path\n  of keys, such as `author.name`.\n\nRows are your markup in the light DOM, so your stylesheet styles them.\n\n**A grid.** `columns` lays the items out that many to a line, as a grid of\nequal columns, and windows the set a line at a time, as React Aria's grid\nlayout does. Each item draws one element, a cell of the grid, and\n`estimate` is the height of a line. `min-column-width` lays out as many\ncolumns as fit the box instead, as React Aria's grid layout does with its\nsmallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns\nof a grid, by a number of pixels the list counts in each row's place.\n\n**Across.** `orientation=\"horizontal\"` lays the items out along a line and\nscrolls it sideways, as a strip of cards does, windowed the same way:\n`estimate` is then an item's width, and the box needs an inline size.\n\n**Sections.** `section-field` names the field of each item that says which\nsection it is in, and the list draws a header before each section's items,\nas React Aria's list box sections do. Each section is an element with the\n`group` role, named by its header, which is its first child and carries\n`data-header`, so your stylesheet styles it, such as with `position:\nsticky`. A section starts wherever the field changes, so give the items in\norder. The window counts the headers with the items, and a section the\nwindow starts inside is drawn with its header. `renderSection` draws a\nheader of your own.\n\n**Keyboard.** The list is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |\n| Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |\n| Home, End | Moves to the first or the last item. |\n| Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |\n| A letter or a word | Moves to the next item whose text starts with what you typed. |\n| Escape | Lets go of every chosen item, in a list with `selection-mode`. |\n| Alt with Up or Down | In a `reorderable` list, moves the item a place. Alt with Home or End moves it to either end. |\n| Tab | Moves into the focused row's own links and buttons, then out of the list. |\n\nAn item that is not drawn is scrolled into view and focused, so a keyboard\nreaches the whole set. The row a reader last focused keeps the tab stop and\nstays drawn when it scrolls away, so Tab and Shift+Tab come back to it, as\nReact Aria's collections do. In a list nobody has focused yet, the stop\nmoves to the first row on screen. Typing matches each item's\n`text-field`, which is the first `data-field` of the row template by default,\nor the item itself when it is a string or a number.\n\nEach row says its place in the whole set with `aria-posinset` and\n`aria-setsize`, so a screen reader says \"4,000 of 10,000\". The row holding\nfocus stays drawn when it scrolls out.\n\n**Selecting.** `selection-mode` makes the list a list box a reader chooses\nfrom: `single` selects one item and `multiple` any number. Space or a press\nselects an item, Shift with Space, an arrow, Home, End or a press takes in\nthe items from the last one chosen, and Control or Command with A selects\nthem all, in `multiple`. Escape lets go of every chosen item, and keeps the\nkey from the dialog or menu around the list while there was something to\nlet go of. `value` holds the chosen items' keys, separated by commas, in\nthe order of the set: `key-field` names each item's key, and a string or a\nnumber item is its own key. A change asks with `helix-before-change` and\ntells with `change`. Each row is an `option` marked `aria-selected`, so a\nrow's own links and buttons are not reached there: keep those to a list\nwithout `selection-mode`.\n\n`selection-behavior=\"replace\"` selects the item pressed alone, as a file\nlist does, and the arrow keys carry the selection with them. Control or\nCommand with a press or with Space adds or takes out one item, and with an\narrow moves without selecting.\n\n**Disabled items.** `disabled-keys` names items by their keys, separated by\ncommas. Their rows carry `aria-disabled`, the keys and typing pass over\nthem, and a press, Space, or Control with A does not select them.\n\n**Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,\na disabled one `data-disabled`, as React Aria's rows do, and the row the\nkeys are on, which holds the tab stop, `data-active`, whether or not the\nlist has focus.\n\n**Loading more.** `helix-range-change` fires as the items on screen change,\nand `range` holds them. `helix-load-more` fires once a reader is within one\nscreen of the end, once for each length of the set: add to `items` and it can\nfire again. While you fetch, set `loading`: the list is busy, and a row after\nthe last item says \"Loading more\" (`loading-label`, or your own content in\nthe `loading` slot). `scrollToIndex` takes a reader to an item.\n\n**Moving items** is a separate import, `@fusion.dev/helix/virtual-list/reorder`,\nas React Aria's drag and drop is. With it imported, `reorderable` lets a\nreader move items in a list of one column without sections:\n\n- Alt with Up or Down moves the item the keys are on a place, and Alt with\n  Home or End to either end, as the APG's rearrangeable listbox does.\n- A pointer drags a whole row. A press that does not travel is still a\n  press. The list scrolls near an edge, and an item far down a long set is\n  reached by dragging to the edge.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n  `helix-reorder`, whose `keys` hold every item's key in the new order.\n  **You move the items**: set `items` to them in that order. The keys stay\n  on the item that moved.\n- Each move is said in a region screen readers announce. The row being\n  dragged carries `data-dragging`, and the row a drop would land beside\n  `data-drop-before` or `data-drop-after`.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown when there are no items and none are loading, such as\n\"No messages yet\" and a link to write one. Without either, an empty list\nshows nothing, since a list whose items have not arrived yet has not said\nit has none.\n\nThe list takes the `empty` state while it has read its items and holds none,\nand the `loading` state while `loading` is set, so your stylesheet can\nchange the box around it for either. A list with no name is reported once\nin a development build. Name it with `label` or `aria-label`.\n\n**Row height.** Rows are placed by `estimate` until they are drawn. Then the\nlist reads the drawn rows' height once and places every row by it, so a\nwrong estimate still reaches the last item. Set `measured` for rows of\ndifferent heights. Once the list draws rows of different heights, such as\nrows that wrap on a narrow screen, it places each row by its own height\nwhether `measured` is set or not.\n\nThe list follows its source. A new `items` array, an edit to the script's\ntext, or a script replaced under the same id draws the new rows. A row that\nstays in view keeps its element as the list scrolls.\n\nThe viewport scrolls on this tier. It carries `data-scroller`, and `core`\nships `[data-scroller] { overflow: auto }` into every shadow root, so\n`scrollTop` works with no stylesheet. You still need to set a block size.",
           "name": "HelixHeadlessVirtualList",
           "cssParts": [
             {
@@ -195608,6 +196445,16 @@
               },
               "description": "Draws each section's header, given its name and its place among the\nsections, for a list given `section-field`. Set it as a property. Where\nit is unset, the header is the name as text."
             },
+            {
+              "kind": "field",
+              "name": "reorderable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections.",
+              "attribute": "reorderable"
+            },
             {
               "kind": "field",
               "name": "sectionField",
@@ -196189,17 +197036,6 @@
               ],
               "description": "The key of item `at` in `value`. See `keyField`."
             },
-            {
-              "kind": "method",
-              "name": "keys",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string[]"
-                }
-              },
-              "description": "Every item's key, in the order of the set."
-            },
             {
               "kind": "field",
               "name": "chosen",
@@ -196282,25 +197118,6 @@
               "readonly": true,
               "description": "A press on a row selects it, in a list with `selection-mode`, except on a\ncontrol of its own. Shift takes in a range."
             },
-            {
-              "kind": "method",
-              "name": "focusIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "Focuses the row for item `index`, scrolling it into view and drawing it\nfirst when it is not drawn."
-            },
             {
               "kind": "field",
               "name": "handleFocusOut",
@@ -196335,6 +197152,16 @@
               "privacy": "private",
               "description": "The item a key is moving focus to, drawn until it has it."
             },
+            {
+              "kind": "field",
+              "name": "visited",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether a reader has focused a row, after which their row keeps the tab stop."
+            },
             {
               "kind": "method",
               "name": "keptIndex",
@@ -196344,7 +197171,7 @@
                   "text": "number | undefined"
                 }
               },
-              "description": "The item drawn outside the window to keep focus, or to take it, if there is one."
+              "description": "The item drawn outside the window to keep focus, to take it, or to take\nit back: the row a reader last focused stays drawn after focus leaves the\nlist, so Shift+Tab returns to it."
             },
             {
               "kind": "method",
@@ -196467,7 +197294,7 @@
                   "text": "void"
                 }
               },
-              "description": "Puts the windowed rows into the light DOM, and takes the rest out.\n\n**A row that stays in the window keeps its element.** Clearing and\ncloning every row on every move replaced the node a reader had focused,\nso a link in a row lost focus to the body on any scroll, even with its row\nstill on screen. Rows are keyed by item: the ones leaving go, the ones\narriving are drawn in their place, and the ones staying are not moved.\n\n**The row holding focus is drawn outside the window too**, beside it on the\nside it belongs, and the spacer on that side gives up its room.\n\n**One row holds the tab stop**, the one the reader last focused while it is\ndrawn, and the first row on screen once it is not. Its own links and\nbuttons are in the tab order, and those of every other row wait."
+              "description": "Puts the windowed rows into the light DOM, and takes the rest out.\n\n**A row that stays in the window keeps its element.** Clearing and\ncloning every row on every move replaced the node a reader had focused,\nso a link in a row lost focus to the body on any scroll, even with its row\nstill on screen. Rows are keyed by item: the ones leaving go, the ones\narriving are drawn in their place, and the ones staying are not moved.\n\n**The row holding focus is drawn outside the window too**, beside it on the\nside it belongs, and the spacer on that side gives up its room.\n\n**One row holds the tab stop**, the one the reader last focused, which\nstays drawn outside the window, and the first row on screen in a list\nnobody has focused yet. Its own links and buttons are in the tab order,\nand those of every other row wait."
             },
             {
               "kind": "field",
@@ -196899,6 +197726,14 @@
               "name": "helix-before-change",
               "reactProp": "onhelix-before-change"
             },
+            {
+              "type": {
+                "text": "HelixBeforeReorderEvent"
+              },
+              "description": "Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is.",
+              "name": "helix-before-reorder",
+              "reactProp": "onhelix-before-reorder"
+            },
             {
               "type": {
                 "text": "HelixLoadMoreEvent"
@@ -196914,6 +197749,14 @@
               "description": "Fired when the items on screen change, with the new `first` and `last`, which `range` also holds.",
               "name": "helix-range-change",
               "reactProp": "onhelix-range-change"
+            },
+            {
+              "type": {
+                "text": "HelixReorderEvent"
+              },
+              "description": "Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen.",
+              "name": "helix-reorder",
+              "reactProp": "onhelix-reorder"
             }
           ],
           "attributes": [
@@ -197034,6 +197877,15 @@
               "description": "Which way the list runs. `horizontal` lays the items out along a line\nand scrolls it sideways: Left and Right move between items, the other\nway round on a right-to-left page, and `estimate` is an item's width. A\ngrid always runs down.",
               "fieldName": "orientation"
             },
+            {
+              "name": "reorderable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections.",
+              "fieldName": "reorderable"
+            },
             {
               "name": "section-field",
               "type": {
@@ -197324,6 +198176,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.172.0"
+    "version": "0.174.0"
   }
 }