@fusion.dev/helix 0.165.0 → 0.167.0

package/types/vue.d.ts

@@ -174,6 +174,7 @@ import type {
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
+  HelixBeforePasteEvent,
   HelixBeforeReconnectEvent,
   HelixBeforeRelabelEvent,
   HelixCanvasEditEvent,
@@ -182,6 +183,7 @@ import type {
   HelixCanvasZoomEvent,
   HelixConnectEvent,
   HelixMoveEvent,
+  HelixPastedEvent,
   HelixReconnectEvent,
   HelixRelabelEvent,
   HelixRemoveEvent,
@@ -192,14 +194,14 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
-  HelixToggleEvent,
   HelixCopyEvent,
+  HelixCopyErrorEvent,
+  HelixToggleEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
   HelixCreateEvent,
   HelixFilterEvent,
   HelixLoadMoreEvent,
-  HelixCopyErrorEvent,
   HelixBeforeReorderEvent,
   HelixExpandEvent,
   HelixFilteredEvent,
@@ -2230,6 +2232,9 @@ export type HelixCanvasElementEvent<E = Event> = TypedEvent<HelixCanvas, E>;
 /** `helix-before-move` event type */
 export type HelixCanvasHelixBeforeMoveElementEvent =
   HelixCanvasElementEvent<HelixBeforeMoveEvent>;
+/** `helix-before-paste` event type */
+export type HelixCanvasHelixBeforePasteElementEvent =
+  HelixCanvasElementEvent<HelixBeforePasteEvent>;
 /** `helix-before-reconnect` event type */
 export type HelixCanvasHelixBeforeReconnectElementEvent =
   HelixCanvasElementEvent<HelixBeforeReconnectEvent>;
@@ -2254,6 +2259,9 @@ export type HelixCanvasHelixConnectElementEvent =
 /** `helix-move` event type */
 export type HelixCanvasHelixMoveElementEvent =
   HelixCanvasElementEvent<HelixMoveEvent>;
+/** `helix-pasted` event type */
+export type HelixCanvasHelixPastedElementEvent =
+  HelixCanvasElementEvent<HelixPastedEvent>;
 /** `helix-reconnect` event type */
 export type HelixCanvasHelixReconnectElementEvent =
   HelixCanvasElementEvent<HelixReconnectEvent>;
@@ -2426,6 +2434,10 @@ at any zoom, and a consumer who wants their own units multiplies by them. */
   /** The hint shown when the board, waiting to be pressed with
 `gestures="activate"`, is scrolled or swiped over. */
   activateHintLabel?: (HelixCanvas["activateHintLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  "arranged-label"?: (HelixCanvas["arrangedLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  arrangedLabel?: (HelixCanvas["arrangedLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
   "comes-from-label"?: (HelixCanvas["comesFromLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
@@ -2524,6 +2536,10 @@ on a board that is a flow is the order its author meant.
 Absent is spatial, a resting value being an attribute's absence: a default
 that reflected would write a choice onto every host that no server sent. */
   order?: (HelixCanvas["order"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  "pasted-label"?: (HelixCanvas["pastedLabel"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  pastedLabel?: (HelixCanvas["pastedLabel"]) | undefined;
   /** The route every connection takes when it sets no `path` of its own:
 `straight`, or `step` for right angles.
 
@@ -2557,6 +2573,14 @@ walk the cards. */
   "redone-label"?: (HelixCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a move or a resize is made again. */
   redoneLabel?: (HelixCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  "removed-label"?: (HelixCanvas["removedLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  removedLabel?: (HelixCanvas["removedLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -2702,6 +2726,8 @@ it rather than fitting the board again. */
 export type HelixCanvasVueEvents = {
   /** Cards are about to move. Cancelable: cancel it to keep the positions in your own state. */
   "helix-before-move": HelixCanvasHelixBeforeMoveElementEvent;
+  /** Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state. */
+  "helix-before-paste": HelixCanvasHelixBeforePasteElementEvent;
   /** A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state. */
   "helix-before-reconnect": HelixCanvasHelixBeforeReconnectElementEvent;
   /** A connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state. */
@@ -2718,6 +2744,8 @@ export type HelixCanvasVueEvents = {
   "helix-connect": HelixCanvasHelixConnectElementEvent;
   /** Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed. */
   "helix-move": HelixCanvasHelixMoveElementEvent;
+  /** Cards and connections were pasted, and the board holds them. */
+  "helix-pasted": HelixCanvasHelixPastedElementEvent;
   /** A connection's end moved, and the move is finished. */
   "helix-reconnect": HelixCanvasHelixReconnectElementEvent;
   /** A connection's label or a group's name changed. */
@@ -3958,9 +3986,18 @@ export type HelixCodeBlockElementEvent<E = Event> = TypedEvent<
   HelixCodeBlock,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixCodeBlockHelixBeforeChangeElementEvent =
+  HelixCodeBlockElementEvent<HelixBeforeChangeEvent>;
 /** `helix-before-toggle` event type */
 export type HelixCodeBlockHelixBeforeToggleElementEvent =
   HelixCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-copy` event type */
+export type HelixCodeBlockHelixCopyElementEvent =
+  HelixCodeBlockElementEvent<HelixCopyEvent>;
+/** `helix-copy-error` event type */
+export type HelixCodeBlockHelixCopyErrorElementEvent =
+  HelixCodeBlockElementEvent<HelixCopyErrorEvent>;
 /** `helix-toggle` event type */
 export type HelixCodeBlockHelixToggleElementEvent =
   HelixCodeBlockElementEvent<HelixToggleEvent>;
@@ -4032,6 +4069,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixCodeBlock["expandLabel"]) | undefined;
+  /** The name of the file shown, where the block holds several Code Blocks:
+the `label` of one, or its `language` without one.
+
+Unset, or a name no file has, shows the first. */
+  file?: (HelixCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "files-label"?: (HelixCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  filesLabel?: (HelixCodeBlock["filesLabel"]) | undefined;
   /** The words of a button that hides a run of unchanged lines it showed, in a
 diff with `context-lines`. `{count}` is how many, and each language
 writes the forms it has. */
@@ -4168,8 +4214,16 @@ read, nor for a diff. */
 };
 
 export type HelixCodeBlockVueEvents = {
+  /** A file tab showed its file, whose name `file` now holds. */
+  change: HelixCodeBlockElementEvent;
+  /** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
+  "helix-before-change": HelixCodeBlockHelixBeforeChangeElementEvent;
   /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
   "helix-before-toggle": HelixCodeBlockHelixBeforeToggleElementEvent;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "helix-copy": HelixCodeBlockHelixCopyElementEvent;
+  /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
+  "helix-copy-error": HelixCodeBlockHelixCopyErrorElementEvent;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "helix-toggle": HelixCodeBlockHelixToggleElementEvent;
 };
@@ -8344,7 +8398,8 @@ such as `buddhist` for `th-TH`, and `gregory` for every other, such as
 `persian` for `fa-IR`, so a date written here reads as the same date a
 Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
   calendar?: (HelixFormatDate["calendar"]) | undefined;
-  /** The timestamp, in any format `Date` can parse.
+  /** The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+format `Date` can parse. The attribute is the string.
 
 An ISO string is what an API sends and what `<time datetime>` takes, so it
 is the shape that needs no translation at either end. Left unset this
@@ -12087,6 +12142,9 @@ export type HelixMenuHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixMenuHelixBeforeOpenElementEvent =
   HelixMenuElementEvent<HelixBeforeOpenEvent>;
+/** `helix-filter` event type */
+export type HelixMenuHelixFilterElementEvent =
+  HelixMenuElementEvent<HelixFilterEvent>;
 /** `helix-select` event type */
 export type HelixMenuHelixSelectElementEvent =
   HelixMenuElementEvent<HelixSelectEvent>;
@@ -12142,6 +12200,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixMenu["context"]) | undefined;
+  /** The text the rows are filtered by, which the filter field holds.
+
+Cleared as the menu closes and as a submenu opens or closes, so each page
+starts with every row showing. */
+  filter?: (HelixMenu["filter"]) | undefined;
+  /** Whether the menu shows a field above its rows that narrows them as the
+reader types, with focus staying in the field. */
+  filterable?: (HelixMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "filter-label"?: (HelixMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  filterLabel?: (HelixMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -12154,6 +12224,10 @@ to open the menu. Translate it with the rest of your interface. */
   /** The description a trigger gives under `open-on="long-press"`, saying how
 to open the menu. Translate it with the rest of your interface. */
   longPressLabel?: (HelixMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "no-results-text"?: (HelixMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  noResultsText?: (HelixMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   offset?: (HelixMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -12171,6 +12245,13 @@ It moves if that side does not fit. */
   /** 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;
+  /** Whether a row is kept by the filter: a function given the row's words and
+the filter, trimmed, that returns `true` to keep it showing, as React
+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;
 };
 
 export type HelixMenuVueEvents = {
@@ -12180,6 +12261,8 @@ export type HelixMenuVueEvents = {
   "helix-before-close": HelixMenuHelixBeforeCloseElementEvent;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
   "helix-before-open": HelixMenuHelixBeforeOpenElementEvent;
+  /** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
+  "helix-filter": HelixMenuHelixFilterElementEvent;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "helix-select": HelixMenuHelixSelectElementEvent;
 };
@@ -15041,6 +15124,16 @@ gives. */
   "panel-size"?: (HelixSandbox["panelSize"] | `${number}`) | undefined;
   /** Height of the panel, in pixels. */
   panelSize?: (HelixSandbox["panelSize"]) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  "preview-delay"?: (HelixSandbox["previewDelay"] | `${number}`) | undefined;
+  /** How long typing rests before the preview runs the new source, in
+milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+frame on each run, so a word typed runs it once. `0` runs it on every
+edit. */
+  previewDelay?: (HelixSandbox["previewDelay"]) | undefined;
   /** The name of the divider between the panes, read by screen readers.
 `{pane}` is the lead pane, `source` or `preview`, whose share the
 divider's value is, so each is a whole sentence: "Resize source pane" or
@@ -15101,6 +15194,14 @@ export type HelixSandboxSourceVueProps = {
   "field-label"?: (HelixSandboxSource["fieldLabel"]) | undefined;
   /** The editable region's name, read by screen readers. */
   fieldLabel?: (HelixSandboxSource["fieldLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  "field-name-label"?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
+  /** The editable region's name where the pane has a `label`, so each file's
+field says which file it holds. `{field}` is `field-label` and `{name}`
+the pane's `label`. */
+  fieldNameLabel?: (HelixSandboxSource["fieldNameLabel"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
   "keys-description"?: (HelixSandboxSource["keysDescription"]) | undefined;
   /** The field's description, read by screen readers while Tab indents. */
@@ -17435,6 +17536,15 @@ order has its whole sentence. `{order}` is the deprecated
   "unsorted-label"?: (HelixTable["unsortedLabel"]) | undefined;
   /** What screen readers hear when the table stops being sorted. */
   unsortedLabel?: (HelixTable["unsortedLabel"]) | undefined;
+  /** Draws only the rows in view, with empty space in place of the rest, as
+Data Table's `windowed` does. The table's box then scrolls, at the
+height `--table-block-size` gives it in the styled tier, and the
+headings stick to its top.
+
+Off by default. Windowing costs a scroll listener, a measurement per row
+drawn, and a height on the table, and a table of twenty rows should pay
+none of them. */
+  windowed?: (HelixTable["windowed"]) | undefined;
 };
 
 export type HelixTableVueEvents = {
@@ -18722,6 +18832,12 @@ and a wheel has exactly one value by construction. Rather than draw
 something that cannot say what it holds, `wheels` renders as a list
 whenever a mode is set. */
   mode?: (HelixTimePicker["mode"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixTimePicker["nowLabel"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixTimePicker["nowLabel"]) | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with
 `max`, written in `locale`. */
   "range-overflow-message"?: (HelixTimePicker["rangeOverflowMessage"]) | undefined;
@@ -18778,6 +18894,22 @@ wheels take a column of seconds, and `step` counts seconds, the unit
 rows, so give `seconds` a `step` and bounds that keep it a list, or use
 the wheels. */
   seconds?: (HelixTimePicker["seconds"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  "show-now"?: (HelixTimePicker["showNow"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  showNow?: (HelixTimePicker["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`.
 
@@ -20932,6 +21064,23 @@ follows the box as it resizes, which `columns` then does not decide. */
 out as many columns as fit the box at that width, at least one, and
 follows the box as it resizes, which `columns` then does not decide. */
   minColumnWidth?: (HelixVirtualList["minColumnWidth"]) | undefined;
+  /** Which way the list runs. `horizontal` lays the items out along a line
+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;
+  /** 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
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  "section-field"?: (HelixVirtualList["sectionField"]) | 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
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  sectionField?: (HelixVirtualList["sectionField"]) | undefined;
   /** What a press does to the items already chosen: `toggle` adds or takes out
 the item, and `replace` selects it alone and lets the arrow keys carry the
 selection, with Control or Command adding or taking out one item. */
@@ -20974,6 +21123,10 @@ It returns what Lit renders: a template from `html`, a string, or a DOM
 node. The list wraps each result in a `<div>` that carries the row's role
 and place in the set. Where it is unset, the row `<template>` is used. */
   renderItem?: (HelixVirtualList["renderItem"]) | undefined;
+  /** Draws each section's header, given its name and its place among the
+sections, for a list given `section-field`. Set it as a property. Where
+it is unset, the header is the name as text. */
+  renderSection?: (HelixVirtualList["renderSection"]) | undefined;
 };
 
 export type HelixVirtualListVueEvents = {
@@ -23012,6 +23165,8 @@ export type CustomCssProperties = {
   "--switch-thumb-color"?: (string) | undefined;
   /** The text alignment of the column above the cell: `start`, `center`, or `end`, and unset when the column sets none. The table writes it, and the stylesheet that draws the cell reads it for `justify-content` and `text-align`, which both follow the writing direction. */
   "--table-cell-align"?: (string) | undefined;
+  /** How tall the table's box is while `windowed`, when it scrolls its rows. 24em by default. */
+  "--table-block-size"?: (string) | undefined;
   /** Track list for the columns. It overrides the track list worked out from the columns. */
   "--table-columns"?: (string) | undefined;
   /** The fill behind the copy of a row a pointer drags. */
@@ -23028,6 +23183,8 @@ export type CustomCssProperties = {
   "--table-drag-preview-shadow"?: (string) | undefined;
   /** The color of the words in the line shown while `error-text` is set. */
   "--table-error-color"?: (string) | undefined;
+  /** The fill behind the headings while `windowed`, which the rows scroll under. The page's background by default. */
+  "--table-heading-background-color"?: (string) | undefined;
   /** The color of the words in the `heading` slot. */
   "--table-title-color"?: (string) | undefined;
   /** The space between the `heading` slot and the grid. */
@@ -23160,6 +23317,8 @@ export type CustomCssProperties = {
   "--time-picker-list-block-size"?: (string) | undefined;
   /** The corners of the mark on a wheel's row. */
   "--time-picker-mark-radius"?: (string) | undefined;
+  /** The ink of the button that chooses the current time, with `show-now`. */
+  "--time-picker-now-color"?: (string) | undefined;
   /** Fill behind the times inside a range. */
   "--time-picker-range-color"?: (string) | undefined;
   /** Height and minimum width of one row in a wheel. */
@@ -23446,7 +23605,7 @@ export type CustomCssProperties = {
   "--video-level"?: (string) | undefined;
   /** How far playback has reached, as a fraction of the duration. */
   "--video-progress"?: (string) | undefined;
-  /** How tall the scrolling box is. */
+  /** How tall the scrolling box is. A list that runs across is as tall as its rows unless you set it. */
   "--virtual-list-block-size"?: (string) | undefined;
   /** How faint a row `disabled-keys` names is drawn. */
   "--virtual-list-disabled-opacity"?: (string) | undefined;
@@ -24122,7 +24281,7 @@ export interface WcToolkitVueGlobalComponents {
     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 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.  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. '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. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,

package/types/words.d.ts

@@ -16,6 +16,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Press the board to use it`
        */
       activateHintLabel: Message
+      /**
+       * What screen readers hear after `arrange()` moves the cards.
+       *
+       * English: `Cards arranged`
+       */
+      arrangedLabel: Message
       /**
        * What a screen reader hears when a turn arrives. `{author}` is who wrote
        * it, as its name says it, and `{text}` its words. A turn with no author a
@@ -464,6 +470,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Later years`
        */
       nextYearsLabel: Message
+      /**
+       * The text shown when the filter keeps no rows.
+       *
+       * English: `No matches`
+       */
+      noResultsText: Message
       /**
        * What screen readers hear when the map is turned back to face north.
        *
@@ -522,6 +534,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Pan up`
        */
       panUpLabel: Message
+      /**
+       * What screen readers hear after a paste, with `{count}` for the cards pasted.
+       *
+       * English: `{count, plural, one {# card pasted} other {# cards pasted}}`
+       */
+      pastedLabel: Message
       /**
        * What screen readers hear when a key or a click picks up a row, with
        * `reorderable-rows`. `{name}` is the row's name.
@@ -616,6 +634,14 @@ declare module '@fusion.dev/helix-core' {
        * English: `Move made again`
        */
       redoneLabel: Message
+      /**
+       * What screen readers hear when Delete asks to remove what is selected, with
+       * `{count}` for how many cards and connections, and `{name}` for the one
+       * where there is one.
+       *
+       * English: `{count, plural, one {Asked to remove {name}.} other {Asked to remove # items.}}`
+       */
+      removedLabel: Message
       /**
        * The name of the control that removes one chosen option, with `{name}`
        * filled in.
@@ -1157,6 +1183,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Show all lines`
        */
       expandLabel: Message
+      /**
+       * The name of the file tabs, read by screen readers.
+       *
+       * English: `Files`
+       */
+      filesLabel: Message
       /**
        * The words of a button that hides a run of unchanged lines it showed, in a
        * diff with `context-lines`. `{count}` is how many, and each language
@@ -2187,6 +2219,14 @@ declare module '@fusion.dev/helix-core' {
        * English: `Example source`
        */
       fieldLabel: Message
+      /**
+       * The editable region's name where the pane has a `label`, so each file's
+       * field says which file it holds. `{field}` is `field-label` and `{name}`
+       * the pane's `label`.
+       *
+       * English: `{field}, {name}`
+       */
+      fieldNameLabel: Message
       /**
        * The field's description, read by screen readers while Tab indents.
        *
@@ -2489,6 +2529,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Time`
        */
       label: Message
+      /**
+       * The words on the button that chooses the current time, drawn with
+       * `show-now`.
+       *
+       * English: `Now`
+       */
+      nowLabel: Message
       /**
        * The validation message for a time after `max`. `{max}` is replaced with
        * `max`, written in `locale`.