@fusion.dev/helix 0.164.0 → 0.166.0

package/types/vue.d.ts

@@ -192,14 +192,14 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
-  HelixToggleEvent,
   HelixCopyEvent,
+  HelixCopyErrorEvent,
+  HelixToggleEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
   HelixCreateEvent,
   HelixFilterEvent,
   HelixLoadMoreEvent,
-  HelixCopyErrorEvent,
   HelixBeforeReorderEvent,
   HelixExpandEvent,
   HelixFilteredEvent,
@@ -3958,9 +3958,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 +4041,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 +4186,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;
 };
@@ -8441,7 +8467,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   relative?: (HelixFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixFormatDate["second"]) | undefined;
@@ -12085,6 +12113,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>;
@@ -12140,6 +12171,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
@@ -12152,6 +12195,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
@@ -12169,6 +12216,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 = {
@@ -12178,6 +12232,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;
 };
@@ -12874,10 +12930,11 @@ one they already know. */
 invalid, as it is in a native number field.
 
 Unset, a step moves by one, or by one percent under a percent format, and
-a typed number is rounded to the smallest amount `format-options` shows
-rather than to whole steps, as React Aria's NumberField does: a field
-showing dollars keeps the cents typed into it. Without `format-options`
-the grid is whole numbers, as in a native number field. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   step?: (HelixNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -15038,6 +15095,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
@@ -15098,6 +15165,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. */
@@ -24119,7 +24194,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

@@ -464,6 +464,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.
        *
@@ -1157,6 +1163,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 +2199,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.
        *