@fusion.dev/helix 0.171.0 → 0.173.0

package/types/vue.d.ts

@@ -1693,6 +1693,9 @@ separate actions. The semantics and the joining are separate questions:
 `role="group"` and a shared name are what make a set of buttons a set, and
 `helix-flex` gives the spacing without the group. */
   variant?: (HelixButtonGroup["variant"]) | undefined;
+  /** Disables every button in the group, and says so on the group with
+`aria-disabled`. Reflected, so a stylesheet can select on it. */
+  disabled?: (HelixButtonGroup["disabled"]) | undefined;
   /** Keeps at least one button pressed once one is, as React Aria's
 `disallowEmptySelection`: a press that would leave none pressed is
 refused. */
@@ -1742,6 +1745,9 @@ A button's own `value` names it, so a value holds no comma.
 The attribute is the seed, and a press changes the property, which does
 not reflect, as a native control's `value` does not. */
   value?: (HelixButtonGroup["value"]) | undefined;
+  /** The pressed values as a list, in a selection mode, and an empty list
+otherwise. Written, it presses exactly those buttons. */
+  values?: (HelixButtonGroup["values"]) | undefined;
 };
 
 export type HelixButtonGroupVueEvents = {
@@ -2513,6 +2519,9 @@ Third", rather than with a comma this component chose. */
   /** The text read with a card that has connections both ways. `{leadsTo}` is
 `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in. */
   linkedLabel?: (HelixCanvas["linkedLabel"]) | undefined;
+  /** Marks the board as busy while its document arrives: the board is
+`aria-busy`, and the `loading` slot is shown. */
+  loading?: (HelixCanvas["loading"]) | undefined;
   /** What screen readers hear after a key moves a card, with `{name}` for the
 card and `{x}` and `{y}` for where it now is, in the document's units.
 
@@ -3318,6 +3327,10 @@ export type HelixChatComposerHelixTypingElementEvent =
   HelixChatComposerElementEvent<HelixTypingEvent>;
 
 export type HelixChatComposerVueProps = {
+  /** A message about the draft, shown under the field. While set, the composer
+is invalid, does not send, and does not submit, as a field's `feedback`
+does, and the message is announced as it appears. */
+  feedback?: (HelixChatComposer["feedback"]) | undefined;
   /** The field's name, read by screen readers. */
   label?: (HelixChatComposer["label"]) | undefined;
   /** The most characters a draft can have. The field stops taking more. */
@@ -5541,6 +5554,24 @@ Defaulted rather than left empty. An icon-only control must be named, and
 the name of this one is not a judgment call: every copy button in the
 world is called Copy. A consumer with a better word still sets it. */
   label?: (HelixCopyButton["label"]) | undefined;
+  /** Draws the name as words beside the icon, and the result in their place
+after a press. The button stays as wide as the longest of them. */
+  "show-label"?: (HelixCopyButton["showLabel"]) | undefined;
+  /** Draws the name as words beside the icon, and the result in their place
+after a press. The button stays as wide as the longest of them. */
+  showLabel?: (HelixCopyButton["showLabel"]) | undefined;
+  /** When the tooltip shows: `full` on hover and focus and after a press,
+`copy` only after a press, to show the result, and `none` never, for a
+button whose result shows another way, such as under `show-label`.
+
+Unset is `full`, and the attribute stays absent until you write it. */
+  tooltip?: (HelixCopyButton["tooltip"]) | undefined;
+  /** The side the tooltip prefers. It moves to another side where this one
+does not fit. */
+  "tooltip-placement"?: (HelixCopyButton["tooltipPlacement"]) | undefined;
+  /** The side the tooltip prefers. It moves to another side where this one
+does not fit. */
+  tooltipPlacement?: (HelixCopyButton["tooltipPlacement"]) | undefined;
   /** The text copied to the clipboard.
 
 It replaces `Button.value`, the submit value: a copy button never submits,
@@ -6037,7 +6068,11 @@ thousand rows, where the page is a reasonable fetch and a poor render.
 
 Off by default. Windowing costs a scroll listener, a measurement per row
 drawn, and a `block-size` on the scrolling box, and a table of twenty rows
-should pay none of them. */
+should pay none of them.
+
+While windowed, the `table` part scrolls on this tier: it carries
+`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+every shadow root. You still need to give it a block size. */
   windowed?: (HelixDataTable["windowed"]) | undefined;
   /** Every row of the result, in the order it arrived.
 
@@ -8843,6 +8878,13 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
   /** How a note that links to the selected one is described, with `{note}`. */
   linksToLabel?: (HelixGraph["linksToLabel"]) | undefined;
+  /** Marks the graph as busy while its notes arrive: the list is `aria-busy`,
+and the panel says so where it holds no notes yet. */
+  loading?: (HelixGraph["loading"]) | undefined;
+  /** What the panel says while `loading` is set and the list holds no notes. */
+  "loading-label"?: (HelixGraph["loadingLabel"]) | undefined;
+  /** What the panel says while `loading` is set and the list holds no notes. */
+  loadingLabel?: (HelixGraph["loadingLabel"]) | undefined;
   /** What screen readers hear once the drawing has moved down, after `moved()`. */
   "moved-down-label"?: (HelixGraph["movedDownLabel"]) | undefined;
   /** What screen readers hear once the drawing has moved down, after `moved()`. */
@@ -8915,6 +8957,16 @@ own, since the fallback name is the same word. Empty leaves the role. */
   links?: (HelixGraph["links"]) | undefined;
   /** The notes. A property, never an attribute. */
   nodes?: (HelixGraph["nodes"]) | undefined;
+  /** What each note's row in the list shows in place of its name: a function
+given the note that returns text, an element or a Lit template.
+
+For an icon by its kind, or a date under its name, as React Aria's
+`ListBoxItem` takes children. The row is still named by the note's name,
+which typeahead and the search find it by, and described by how it stands
+to the selected note. Return the name with your content where it should
+still show. A property only, there being no way to write a function in
+markup. */
+  noteContent?: (HelixGraph["noteContent"]) | undefined;
 };
 
 export type HelixGraphVueEvents = {
@@ -10812,7 +10864,8 @@ itself. */
   type?: (HelixList["type"]) | undefined;
   /** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
 
-Set it to start with rows selected. A row's value is its `value`, or its
+A press or a key writes it in row order, as Data Table does, whatever
+order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
 words where it has none. */
   value?: (HelixList["value"]) | undefined;
 };
@@ -12316,6 +12369,14 @@ or on Alt+Down or Alt+Up. */
 
 It moves if that side does not fit. */
   placement?: (HelixMenu["placement"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  "results-label"?: (HelixMenu["resultsLabel"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  resultsLabel?: (HelixMenu["resultsLabel"]) | undefined;
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   submenus?: (HelixMenu["submenus"]) | undefined;
@@ -12326,11 +12387,21 @@ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
 Absent, a row is kept where its words hold the filter, in any case. A
 property only, there being no way to write a function in markup. */
   filterMatch?: (HelixMenu["filterMatch"]) | undefined;
+  /** The values of the choice rows that are checked, anywhere in the menu, in
+document order.
+
+Set it to check exactly those rows and uncheck every other choice row, as
+React Aria's `selectedKeys` controls a menu's selection from one place.
+Each row keeps its own `checked` too, which this reads and writes. `change`
+is sent on the menu when a reader's choice changes it. */
+  checkedValues?: (HelixMenu["checkedValues"]) | undefined;
 };
 
 export type HelixMenuVueEvents = {
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
   toggle: HelixMenuToggleElementEvent;
+  /** A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now. */
+  change: HelixMenuElementEvent;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "helix-before-close": HelixMenuHelixBeforeCloseElementEvent;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
@@ -13646,6 +13717,10 @@ box the sections scroll in. */
   /** The navigation's name, read by screen readers. A heading in the `heading`
 slot names it in place of this. */
   label?: (HelixOutline["label"]) | undefined;
+  /** Which links are marked. `reading` marks the one section being read, the
+last whose heading has passed the reading line. `visible` marks every
+section with part of it on screen, and the mark runs across their links. */
+  marks?: (HelixOutline["marks"]) | undefined;
   /** How far below the top of the scroll container a heading counts as reached,
 in pixels. The scroll container is the window or the panel the sections
 scroll in.
@@ -14156,17 +14231,42 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixPopover["open"]) | undefined;
+  /** The element the panel opens against, where that is not the trigger: its
+`id` in the same document or shadow root, or the element itself. Left
+empty, the panel opens against the trigger, or against the button whose
+command opened it. */
+  anchor?: (HelixPopover["anchor"]) | undefined;
   /** Draws a point on the panel's edge facing the trigger.
 
 Off by default, which is the house style: a panel that opens from its
 trigger already reads as belonging to it. */
   arrow?: (HelixPopover["arrow"]) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  "container-padding"?: (HelixPopover["containerPadding"] | `${number}`) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  containerPadding?: (HelixPopover["containerPadding"]) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  "cross-offset"?: (HelixPopover["crossOffset"] | `${number}`) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  crossOffset?: (HelixPopover["crossOffset"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   "fallback-label"?: (HelixPopover["fallbackLabel"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   fallbackLabel?: (HelixPopover["fallbackLabel"]) | undefined;
+  /** Whether the panel moves to the other side of the trigger when its own
+side has no room. On by default. Write `flip="false"` to keep it on its
+side, where it shrinks to fit, as React Aria's `shouldFlip` turns off. */
+  flip?: (HelixPopover["flip"]) | undefined;
   /** The panel's name, read by screen readers. Left empty, the first heading in
 the panel names it, and then `fallback-label`. */
   label?: (HelixPopover["label"]) | undefined;
@@ -15006,6 +15106,9 @@ export type HelixSandboxPreviewHelixResizeElementEvent =
   HelixSandboxPreviewElementEvent<HelixResizeEvent>;
 
 export type HelixSandboxPreviewVueProps = {
+  /** The address the packages in `dependencies` load from, which the name, an
+`@` and the version follow. */
+  cdn?: (HelixSandboxPreview["cdn"]) | undefined;
   /** The color mode the frame renders in.
 
 **The frame is a document and a document has its own color mode.** Setting
@@ -15037,6 +15140,11 @@ including every one of the 24 series colors a chart reads. */
   /** Whether the preview draws a reload button and a button that opens the
 example in a new tab, in its corner. */
   controls?: (HelixSandboxPreview["controls"]) | undefined;
+  /** The npm packages an example can import by name in the built-in document,
+each name to a version or a range, as a `package.json` lists them. Each
+loads from `cdn`. Set it as JSON in the attribute or as an object. Not
+read where `src` is set. */
+  dependencies?: (HelixSandboxPreview["dependencies"]) | undefined;
   /** Writing direction inside the frame.
 
 Not reflected. It is payload for the render message and nothing selects on
@@ -15063,6 +15171,10 @@ Not reflected, for `direction`'s reason: the placement is applied by the
 document inside the frame, against its own root, so no rule on this side
 could read it. */
   layout?: (HelixSandboxPreview["layout"]) | undefined;
+  /** Module files an example imports by a relative path in the built-in
+document, each path, such as `utils.js`, to its source. Not read where
+`src` is set. */
+  modules?: (HelixSandboxPreview["modules"]) | undefined;
   /** The name of the button that opens the example in a new tab, under
 `controls`. */
   "open-label"?: (HelixSandboxPreview["openLabel"]) | undefined;
@@ -15190,6 +15302,12 @@ names below keeps that true whichever way round they sit.
 `split` follows the lead pane rather than the source, so `split="30"` means
 the same thing in both directions: thirty percent to whatever comes first. */
   lead?: (HelixSandbox["lead"]) | undefined;
+  /** The description of a file tab whose pane holds an edit, read by screen
+readers after the file's name. */
+  "modified-label"?: (HelixSandbox["modifiedLabel"]) | undefined;
+  /** The description of a file tab whose pane holds an edit, read by screen
+readers after the file's name. */
+  modifiedLabel?: (HelixSandbox["modifiedLabel"]) | undefined;
   /** Whether the panes sit side by side or stacked.
 
 Not reflected, for `lead`'s reason above: no rule selects on it. The axis
@@ -15297,6 +15415,23 @@ export type HelixSandboxSourceHelixEditElementEvent =
   HelixSandboxSourceElementEvent<HelixEditEvent>;
 
 export type HelixSandboxSourceVueProps = {
+  /** Whether typing an opening bracket or quote types its closing one too, and
+a bracket typed with text selected goes around it. */
+  "close-brackets"?: (HelixSandboxSource["closeBrackets"]) | undefined;
+  /** Whether typing an opening bracket or quote types its closing one too, and
+a bracket typed with text selected goes around it. */
+  closeBrackets?: (HelixSandboxSource["closeBrackets"]) | undefined;
+  /** Whether the pane offers completions for the word before the caret, from
+the words of the source and of `completions`. */
+  complete?: (HelixSandboxSource["complete"]) | undefined;
+  /** Words the pane offers under `complete` beside the words of the source,
+such as tag and attribute names. `manifestWords` reads them from a custom
+elements manifest. Set it as JSON in the attribute or as an array. */
+  completions?: (HelixSandboxSource["completions"]) | undefined;
+  /** The name of the list of completions, read by screen readers. */
+  "completions-label"?: (HelixSandboxSource["completionsLabel"]) | undefined;
+  /** The name of the list of completions, read by screen readers. */
+  completionsLabel?: (HelixSandboxSource["completionsLabel"]) | undefined;
   /** The editable region's name, read by screen readers. */
   "field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
   /** The editable region's name, read by screen readers. */
@@ -15320,6 +15455,12 @@ holds several panes. Empty puts the pane's `name` on the tab. */
   "line-numbers"?: (HelixSandboxSource["lineNumbers"]) | undefined;
   /** Whether each line of the source is numbered, in a gutter beside it. */
   lineNumbers?: (HelixSandboxSource["lineNumbers"]) | undefined;
+  /** Whether the bracket beside the caret and its pair are marked while the
+field has focus. */
+  "match-brackets"?: (HelixSandboxSource["matchBrackets"]) | undefined;
+  /** Whether the bracket beside the caret and its pair are marked while the
+field has focus. */
+  matchBrackets?: (HelixSandboxSource["matchBrackets"]) | undefined;
   /** Which source this pane holds. Every `helix-before-edit` event includes it.
 
 `html` and `css` are what the sandbox root routes on; any other name is
@@ -15327,6 +15468,14 @@ passed through untouched for a consumer wiring their own panes.
 
 Not reflected: nothing selects on it, so it keeps a real default instead. */
   name?: (HelixSandboxSource["name"]) | undefined;
+  /** Whether the source is read only: it can be selected and copied, and not
+edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
+that is read only. */
+  readonly?: (HelixSandboxSource["readOnly"]) | undefined;
+  /** Whether the source is read only: it can be selected and copied, and not
+edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
+that is read only. */
+  readOnly?: (HelixSandboxSource["readOnly"]) | undefined;
   /** Whether Tab indents the source. When it is off, Tab moves focus. */
   "tab-indents"?: (HelixSandboxSource["tabIndents"]) | undefined;
   /** Whether Tab indents the source. When it is off, Tab moves focus. */
@@ -16649,6 +16798,13 @@ that should survive its own collapse says how much of itself to keep, and
 only whoever put it there knows that, which is the same reason `min` is a
 consumer's to set. */
   collapsedSize?: (HelixSplitter["collapsedSize"]) | undefined;
+  /** Which panes can be collapsed, as Zag's panels each take `collapsible`:
+`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
+at the edge without shutting. `Enter` collapses the end pane where only
+the end pane can be collapsed, and the start pane otherwise.
+
+Unset is `both`, and the attribute stays absent until you write it. */
+  collapsible?: (HelixSplitter["collapsible"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
   "corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
@@ -16677,6 +16833,18 @@ these words are the whole of where it is. */
   "default-position"?: (HelixSplitter["defaultPosition"] | `${number}`) | undefined;
   /** Where the divider starts, when `position` is not set. */
   defaultPosition?: (HelixSplitter["defaultPosition"]) | undefined;
+  /** The least the end pane keeps, in the units `min` takes: a percentage, or
+a CSS length such as `16rem` resolved against the splitter's box. The
+divider stops that far from the end, whatever `max` allows, so `min` and
+`end-min` hold a minimum for each pane, as Zag's panels each take
+`minSize`. */
+  "end-min"?: (HelixSplitter["endMin"]) | undefined;
+  /** The least the end pane keeps, in the units `min` takes: a percentage, or
+a CSS length such as `16rem` resolved against the splitter's box. The
+divider stops that far from the end, whatever `max` allows, so `min` and
+`end-min` hold a minimum for each pane, as Zag's panels each take
+`minSize`. */
+  endMin?: (HelixSplitter["endMin"]) | undefined;
   /** The divider's name, read by screen readers.
 
 An `aria-label` or `aria-labelledby` on the host names the divider too,
@@ -19095,6 +19263,18 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixTimePicker["name"]) | undefined;
+  /** What each time in the list shows: a function given the time as `HH:mm`,
+or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
+returns text, an element or a Lit template.
+
+For the seats left at a time, or a caption under it, as React Aria's
+`ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
+or `slot="description"` goes to that slot of the row, and a description
+is read after the time. The row is still named by the written time, and
+typeahead still finds it by that. Return the written time with your
+content where it should still show. A property only, there being no way
+to write a function in markup. The wheels draw their own figures. */
+  timeContent?: (HelixTimePicker["timeContent"]) | undefined;
   /** The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
 
 The platform's own pair on `<input type="time">`, epoch day included: a time
@@ -19182,6 +19362,13 @@ they run down it. */
   orientation?: (HelixTimeline["orientation"]) | undefined;
   /** Accessible name for the timeline, for people who reach it out of context. */
   label?: (HelixTimeline["label"]) | undefined;
+  /** Marks the timeline as busy fetching more entries, and draws an entry
+after the last that says so. */
+  loading?: (HelixTimeline["loading"]) | undefined;
+  /** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
+  "loading-label"?: (HelixTimeline["loadingLabel"]) | undefined;
+  /** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
+  loadingLabel?: (HelixTimeline["loadingLabel"]) | undefined;
 };
 
 export type HelixTimelineVueEvents = {};
@@ -21098,12 +21285,18 @@ export type HelixVirtualListElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixVirtualListHelixBeforeChangeElementEvent =
   HelixVirtualListElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-reorder` event type */
+export type HelixVirtualListHelixBeforeReorderElementEvent =
+  HelixVirtualListElementEvent<HelixBeforeReorderEvent>;
 /** `helix-load-more` event type */
 export type HelixVirtualListHelixLoadMoreElementEvent =
   HelixVirtualListElementEvent<HelixLoadMoreEvent>;
 /** `helix-range-change` event type */
 export type HelixVirtualListHelixRangeChangeElementEvent =
   HelixVirtualListElementEvent<HelixRangeChangeEvent>;
+/** `helix-reorder` event type */
+export type HelixVirtualListHelixReorderElementEvent =
+  HelixVirtualListElementEvent<HelixReorderEvent>;
 
 export type HelixVirtualListVueProps = {
   /** How many items a line holds. One, the default, is a list; more lays the
@@ -21183,6 +21376,13 @@ and scrolls it sideways: Left and Right move between items, the other
 way round on a right-to-left page, and `estimate` is an item's width. A
 grid always runs down. */
   orientation?: (HelixVirtualList["orientation"]) | undefined;
+  /** Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
+(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
+with an arrow moves the row the keys are on, and a pointer drags a row.
+The list moves no item itself: you move your `items` on `helix-reorder`.
+Without that import it does nothing, so a list that never moves items
+carries none of the code. A list of one column, without sections. */
+  reorderable?: (HelixVirtualList["reorderable"]) | undefined;
   /** The field of each item that names its section, as a key or a path of
 keys. Set, the items are drawn in sections: a header, then the items, in
 an element with the `group` role that the header names. A section starts
@@ -21248,10 +21448,14 @@ export type HelixVirtualListVueEvents = {
   change: HelixVirtualListElementEvent;
   /** Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable. */
   "helix-before-change": HelixVirtualListHelixBeforeChangeElementEvent;
+  /** 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. */
+  "helix-before-reorder": HelixVirtualListHelixBeforeReorderElementEvent;
   /** Fired when a reader comes within one screen of the last item, once for each length of the set. */
   "helix-load-more": HelixVirtualListHelixLoadMoreElementEvent;
   /** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
   "helix-range-change": HelixVirtualListHelixRangeChangeElementEvent;
+  /** 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. */
+  "helix-reorder": HelixVirtualListHelixReorderElementEvent;
 };
 
 export type CustomCssProperties = {
@@ -22761,6 +22965,8 @@ export type CustomCssProperties = {
   "--orb-ground"?: (string) | undefined;
   /** The diameter. Overrides `size`. */
   "--orb-size"?: (string) | undefined;
+  /** How fast the dots move, as a multiple of each state's own tempo. Defaults to `1`. */
+  "--orb-speed"?: (string) | undefined;
   /** The color of the heading in the `heading` slot. */
   "--outline-heading-color"?: (string) | undefined;
   /** How far each level is inset from the one above. */
@@ -22971,10 +23177,16 @@ export type CustomCssProperties = {
   "--sandbox-separator-color"?: (string) | undefined;
   /** Fill behind the source. */
   "--sandbox-source-background-color"?: (string) | undefined;
+  /** Fill behind a matched bracket, under `match-brackets`. Defaults to `--helix-color-accent-subtle`. */
+  "--sandbox-source-bracket-color"?: (string) | undefined;
   /** Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`. */
   "--sandbox-source-callable-color"?: (string) | undefined;
   /** Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`. */
   "--sandbox-source-comment-color"?: (string) | undefined;
+  /** Width of the edge of the list of completions, under `complete`. Defaults to `--helix-border-floating`. */
+  "--sandbox-source-completions-border-width"?: (string) | undefined;
+  /** Shadow under the list of completions, under `complete`. Defaults to `--helix-shadow-floating`. */
+  "--sandbox-source-completions-shadow"?: (string) | undefined;
   /** Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`. */
   "--sandbox-source-constant-color"?: (string) | undefined;
   /** Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`. */
@@ -23729,6 +23941,24 @@ export type CustomCssProperties = {
   "--virtual-list-block-size"?: (string) | undefined;
   /** How faint a row `disabled-keys` names is drawn. */
   "--virtual-list-disabled-opacity"?: (string) | undefined;
+  /** The fill behind the copy of a row a pointer drags, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported. */
+  "--virtual-list-drag-preview-background-color"?: (string) | undefined;
+  /** The color of the edge around the copy of a row a pointer drags. */
+  "--virtual-list-drag-preview-border-color"?: (string) | undefined;
+  /** The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it. */
+  "--virtual-list-drag-preview-border-width"?: (string) | undefined;
+  /** The opacity of the copy of a row a pointer drags. */
+  "--virtual-list-drag-preview-opacity"?: (string) | undefined;
+  /** The corner radius of the copy of a row a pointer drags. */
+  "--virtual-list-drag-preview-radius"?: (string) | undefined;
+  /** The shadow that raises the copy of a row a pointer drags over the page. */
+  "--virtual-list-drag-preview-shadow"?: (string) | undefined;
+  /** The opacity of a row being dragged, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported. */
+  "--virtual-list-dragging-opacity"?: (string) | undefined;
+  /** The color of the line where a dragged row would land. */
+  "--virtual-list-drop-indicator-color"?: (string) | undefined;
+  /** The thickness of the line where a dragged row would land. */
+  "--virtual-list-drop-indicator-size"?: (string) | undefined;
   /** The color of the text in the row shown when there are no items. */
   "--virtual-list-empty-color"?: (string) | undefined;
   /** The space around the text in the row shown when there are no items. */
@@ -24317,7 +24547,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixOptionSeparatorVueProps,
     HelixOptionSeparatorVueEvents
   >;
-  /** A cloud of dots drawn to a canvas, with one shape per state:  - 'connecting' and 'thinking': the same leaning sash, differing in how   agitated it is. - 'waiting' and 'done': the same settled ball at different tempos. - 'fetching': a globe with a light moving around it. - 'listening': a closed sphere with a ripple crossing it. - 'working': a ring.  Every state is the same banded grid with different parameters. Changing state interpolates the parameters, so every frame in between is a complete shape. A small change gets less time than a large one, such as a sash becoming a ring. The outline changes first, so the light starts orbiting only after the shape is round.  The cloud does not rotate, and all movement happens inside it. The exception is the light, which travels because a ring of evenly spaced dots looks the same when rotated, so a turning state needs something fixed passing over it.  Colors come from '--orb-color' and '--orb-ground'. Each dot's color is mixed toward the ground color by its depth, so depth holds when the theme changes.  The animation stops when the orb is off screen or in a background tab. With 'prefers-reduced-motion', it draws one still frame.  The orb is styled only and has behavior, which the tier split does not otherwise allow. Its role, name and busy state follow 'state', unless 'announce' makes it a status region, and the rest is drawing dots to a canvas, so there is no structure to restyle. For a drawing of your own, the headless 'Loader' holds the same busy progress bar and its name.  Each state is also a custom state, such as ':state(thinking)' or ':state(done)', so a page can style what sits around an orb by what it shows, whether the state was written as an attribute or set from script. */
+  /** A cloud of dots drawn to a canvas, with one shape per state:  - 'connecting' and 'thinking': the same leaning sash, differing in how   agitated it is. - 'waiting' and 'done': the same settled ball at different tempos. - 'fetching': a globe with a light moving around it. - 'listening': a closed sphere with a ripple crossing it. - 'working': a ring.  Every state is the same banded grid with different parameters. Changing state interpolates the parameters, so every frame in between is a complete shape. A small change gets less time than a large one, such as a sash becoming a ring. The outline changes first, so the light starts orbiting only after the shape is round.  The cloud does not rotate, and all movement happens inside it. The exception is the light, which travels because a ring of evenly spaced dots looks the same when rotated, so a turning state needs something fixed passing over it.  Colors come from '--orb-color' and '--orb-ground'. Each dot's color is mixed toward the ground color by its depth, so depth holds when the theme changes.  The animation stops when the orb is off screen or in a background tab. With 'prefers-reduced-motion', it draws one still frame.  The orb is styled only and has behavior, which the tier split does not otherwise allow. Its role, name and busy state follow 'state', unless 'announce' makes it a status region, and the rest is drawing dots to a canvas.  **A shape of your own goes in the default slot**, such as an SVG, an image, or an animation. The orb draws it over its box in place of the dots and stops drawing them, and keeps its role, name, busy state and custom states, so your stylesheet can change what you slotted by state, such as 'helix-orb:state(working) svg { animation-duration: 1s }'. What you slot is for the eye: a screen reader hears the orb's name.  '--orb-speed' scales how fast the dots move, so '0.5' is a calmer orb at half the tempo.  Each state is also a custom state, such as ':state(thinking)' or ':state(done)', so a page can style what sits around an orb by what it shows, whether the state was written as an attribute or set from script. */
   "helix-orb": DefineCustomElement<
     HelixOrb,
     HelixOrbVueProps,
@@ -24395,19 +24625,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'.  **A failed preview shows the error over the example**, in the 'error' part, until the next source is sent. The terminal says it too, so the part is not announced. Hide it with '::part(error) { display: none }' where the page draws its own.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
+  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **'dependencies' names packages by version instead**, as a 'package.json' does: '{"canvas-confetti": "^1.9"}' loads 'canvas-confetti' and the paths under it from 'cdn', 'https://esm.sh/' by default, at the version or range given. An address in 'imports' wins over a package of the same name.  **'modules' holds files the example imports by a relative path**: each path, such as 'utils.js', to its source, and 'import { add } from './utils.js'' in the 'js' pane or in another module loads it. A sandbox writes each pane named for a module file here.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'.  **A failed preview shows the error over the example**, in the 'error' part, until the next source is sent. The terminal says it too, so the part is not announced, and it is the frame's description while it shows, so a screen reader reads it with the frame. Hide it with '::part(error) { display: none }' where the page draws its own.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
     HelixSandboxPreviewVueEvents
   >;
-  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The preview runs an edit once typing has rested for 'preview-delay', 300 milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.  The event carries the pane's 'name', so one sandbox can hold several panes. 'html' sets the preview's markup, 'css' sets its stylesheet, and 'js' sets a script that runs as a module after the markup. The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width.  **Several source panes are files**, one shown at a time under a row of tabs, each named by the pane's 'label' or, without one, its 'name'. 'file' holds the 'name' of the pane shown. The tabs are a tab list: the arrow keys move between them and show each pane, and 'Home' and 'End' go to the first and the last. Choosing one sends 'helix-before-change' with the pane's 'name', which you can cancel, and 'change' once 'file' holds it. The panes not shown carry 'hidden'. One pane draws no tabs.  **Any editor can be the source pane**: an element in the 'source' slot with a 'name' that dispatches 'helix-before-edit' with its text, which bubbles. A wrapper around CodeMirror or Monaco sends one on each change and is a pane like 'helix-sandbox-source', and the sandbox reads its 'value' to seed the preview. Dispatch 'helix-caret' from it too for the status bar's position.  Sandbox is styled only and has behavior, as 'Aura' is. Its behavior is the hand-off from a source pane to a preview frame, which works with any pane that sends 'helix-before-edit', and what it draws is the layout around them: dividers, file tabs, and a panel. A page that wants another look slots its own panes and keeps the hand-off, so there is nothing for a headless version to hold.  A development build warns about a source pane with no 'label' and no 'name', whose file tab would have no words.  On a focused divider, the arrow keys move it, and 'Home' and 'End' move it to its ends. 'Enter' on the panes divider shuts the lead pane, and pressed again it opens the pane where it was. 'Enter' on the panel divider shuts the panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
+  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The preview runs an edit once typing has rested for 'preview-delay', 300 milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.  The event carries the pane's 'name', so one sandbox can hold several panes. The names the sandbox writes into its previews:  - 'html' sets the preview's markup. - 'css' sets its stylesheet. - 'js' sets a script that runs as a module after the markup. - A module file name ending in '.js' or '.mjs', such as 'utils.js', is a   module the other scripts import by its path, './utils.js'. - 'package.json' sets the npm packages the scripts import by name, from its   'dependencies', which load from the preview's 'cdn'.  The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The sandbox is ':state(modified)' while a source pane holds an edit**, and that pane's file tab is also 'file-modified' and described as modified to a screen reader. 'reset()' puts every pane back to the source it was given.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width.  **Several source panes are files**, one shown at a time under a row of tabs, each named by the pane's 'label' or, without one, its 'name'. 'file' holds the 'name' of the pane shown. The tabs are a tab list: the arrow keys move between them and show each pane, and 'Home' and 'End' go to the first and the last. Choosing one sends 'helix-before-change' with the pane's 'name', which you can cancel, and 'change' once 'file' holds it. The panes not shown carry 'hidden'. One pane draws no tabs.  **Any editor can be the source pane**: an element in the 'source' slot with a 'name' that dispatches 'helix-before-edit' with its text, which bubbles. A wrapper around CodeMirror or Monaco sends one on each change and is a pane like 'helix-sandbox-source', and the sandbox reads its 'value' to seed the preview. Dispatch 'helix-caret' from it too for the status bar's position.  Sandbox is styled only and has behavior, as 'Aura' is. Its behavior is the hand-off from a source pane to a preview frame, which works with any pane that sends 'helix-before-edit', and what it draws is the layout around them: dividers, file tabs, and a panel. A page that wants another look slots its own panes and keeps the hand-off, so there is nothing for a headless version to hold.  A development build warns about a source pane with no 'label' and no 'name', whose file tab would have no words.  On a focused divider, the arrow keys move it, and 'Home' and 'End' move it to its ends. 'Enter' on the panes divider shuts the lead pane, and pressed again it opens the pane where it was. 'Enter' on the panel divider shuts the panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,
     HelixSandboxVueEvents
   >;
-  /** A real '<textarea>', so undo, selection, spellcheck suppression, mobile keyboards, and screen reader support come from the platform.  Tab inserts two spaces, so you can indent code. To move focus out of the field, press Escape and then Tab. Shift+Tab moves focus back as it does anywhere else. The field's description says so to a screen reader.  **'tokenize' colors the source** with a highlighter you bring, such as one built on Lezer, Prism or Shiki. It is a function from the source to runs of text, each with an optional kind, and the pane draws the runs under a transparent field, so typing, selection and undo stay the textarea's. The kinds are 'callable', 'comment', 'constant', 'invalid', 'keyword', 'name', 'string' and 'tag', each colored by the '--helix-color-syntax-*' token of its name and a hook of its own, such as '--sandbox-source-keyword-color'. A run of any other kind is drawn in the field's own color. Every run with a kind is a 'token' part, and carries its kind as 'data-kind'. A 'tokenize' that throws leaves the source drawn plain and the field editable, and the error is reported to the page as an uncaught one.  **'line-numbers' numbers each line** in a gutter beside the source. A line that wraps keeps one number. The numbers are drawn, and hidden from screen readers, which read the field.  Enter keeps the indentation of the line it breaks, and the new line is undone with the next undo as typing is.  **The source can be written inside the pane** where 'value' is not set: its text, or the markup of a '<template>' it holds, without the indentation the page gave it. Markup goes in a template so the page does not render it or run its scripts. Text inside the pane is read once, when it connects. */
+  /** A real '<textarea>', so undo, selection, spellcheck suppression, mobile keyboards, and screen reader support come from the platform.  Tab inserts two spaces, so you can indent code. To move focus out of the field, press Escape and then Tab. Shift+Tab moves focus back as it does anywhere else. The field's description says so to a screen reader.  **'tokenize' colors the source** with a highlighter you bring, such as one built on Lezer, Prism or Shiki. It is a function from the source to runs of text, each with an optional kind, and the pane draws the runs under a transparent field, so typing, selection and undo stay the textarea's. The kinds are 'callable', 'comment', 'constant', 'invalid', 'keyword', 'name', 'string' and 'tag', each colored by the '--helix-color-syntax-*' token of its name and a hook of its own, such as '--sandbox-source-keyword-color'. A run of any other kind is drawn in the field's own color. Every run with a kind is a 'token' part, and carries its kind as 'data-kind'. A 'tokenize' that throws leaves the source drawn plain and the field editable, and the error is reported to the page as an uncaught one.  **'line-numbers' numbers each line** in a gutter beside the source. A line that wraps keeps one number. The numbers are drawn, and hidden from screen readers, which read the field.  Enter keeps the indentation of the line it breaks, one level deeper after an opening bracket, and puts the closing bracket of an empty pair on a line of its own. The new line is undone with the next undo as typing is.  **The editing keys are CodeMirror's.** Tab with text selected indents every line the selection touches. 'Mod+]' indents the lines and 'Mod+[' outdents them, and 'Mod+/' comments them out or back in: '//' in a 'js' pane, and one block comment in an 'html' or 'css' pane. 'Mod' is Command on a Mac and Control elsewhere. Each is one step of undo.  **'close-brackets' closes brackets and quotes** as you type them: '(', '[', '{' and the three quotes. A closing character typed before the same one steps over it, Backspace between an empty pair deletes both, and a bracket typed with text selected goes around the text. **'match-brackets' marks the bracket beside the caret and its pair** while the field has focus, each a 'bracket' part, and a bracket with no pair is also 'bracket-unmatched'. A bracket in a string or a comment is not matched, where 'tokenize' says which runs those are.  **'complete' offers completions as you type**: the words of the source and of 'completions' that start with the word before the caret. They open in a list under the word. The arrow keys move through it, Enter or Tab takes the word, and Escape closes it. 'Ctrl+Space' opens it where it is closed. The field is 'aria-autocomplete="list"' and points at the word chosen with 'aria-activedescendant', so a screen reader reads each one. Give 'completions' the names a page uses, such as the tag and attribute names of a custom elements manifest through 'manifestWords'.  **The pane is ':state(modified)' while its source differs from the source it was given**, the first 'value' or the last one set from outside. 'reset()' puts that source back, as an edit the sandbox passes on to its preview.  **The source can be written inside the pane** where 'value' is not set: its text, or the markup of a '<template>' it holds, without the indentation the page gave it. Markup goes in a template so the page does not render it or run its scripts. Text inside the pane is read once, when it connects. */
   "helix-sandbox-source": DefineCustomElement<
     HelixSandboxSource,
     HelixSandboxSourceVueProps,

package/types/words.d.ts

@@ -351,6 +351,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Options`
        */
       listLabel: Message
+      /**
+       * What the panel says while `loading` is set and the list holds no notes.
+       *
+       * English: `Loading notes`
+       */
+      loadingLabel: Message
       /**
        * The words shown in place of the drawing while `loading` is set and
        * there are no readings yet, and the fallback of the `loading` slot.
@@ -2178,6 +2184,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Files`
        */
       filesLabel: Message
+      /**
+       * The description of a file tab whose pane holds an edit, read by screen
+       * readers after the file's name.
+       *
+       * English: `Modified`
+       */
+      modifiedLabel: Message
       /**
        * The name of the panel's divider, read by screen readers.
        *
@@ -2217,6 +2230,12 @@ declare module '@fusion.dev/helix-core' {
       reloadLabel: Message
     }
     'helix-sandbox-source': {
+      /**
+       * The name of the list of completions, read by screen readers.
+       *
+       * English: `Completions`
+       */
+      completionsLabel: Message
       /**
        * The editable region's name, read by screen readers.
        *
@@ -2573,6 +2592,14 @@ declare module '@fusion.dev/helix-core' {
        */
       valueMissingMessage: Message
     }
+    'helix-timeline': {
+      /**
+       * The text of the entry drawn while `loading` is set, where the `loading` slot is empty.
+       *
+       * English: `Loading more`
+       */
+      loadingLabel: Message
+    }
     'helix-timeline-item': {
       /**
        * What a screen reader hears for an entry that is `pending`.