@fusion.dev/helix-headless 0.219.0 → 0.220.0

package/types/svelte.d.ts

@@ -82,6 +82,7 @@ declare module 'svelte/elements' {
     'helix-headless-filter-menu': Helix<'helix-headless-filter-menu'>
     'helix-headless-filter-operator': Helix<'helix-headless-filter-operator'>
     'helix-headless-filter-input': Helix<'helix-headless-filter-input'>
+    'helix-headless-find': Helix<'helix-headless-find'>
     'helix-headless-format-date': Helix<'helix-headless-format-date'>
     'helix-headless-graph': Helix<'helix-headless-graph'>
     'helix-headless-heatmap': Helix<'helix-headless-heatmap'>

package/types/vue.d.ts

@@ -41,6 +41,7 @@ import type {
   HelixFacetEvent,
   HelixFilterEvent,
   HelixFilteredEvent,
+  HelixFoundEvent,
   HelixGraphFilterEvent,
   HelixGraphLayoutEvent,
   HelixGraphPanEvent,
@@ -101,6 +102,7 @@ import type {
   HelixHeadlessFilterInput,
   HelixHeadlessFilterMenu,
   HelixHeadlessFilterOperator,
+  HelixHeadlessFind,
   HelixHeadlessFormatDate,
   HelixHeadlessGraph,
   HelixHeadlessHeatmap,
@@ -3695,6 +3697,9 @@ export type HelixHeadlessCodeEditorElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessCodeEditorHelixBeforeChangeElementEvent =
   HelixHeadlessCodeEditorElementEvent<HelixBeforeChangeEvent>;
+/** `helix-found` event type */
+export type HelixHeadlessCodeEditorHelixFoundElementEvent =
+  HelixHeadlessCodeEditorElementEvent<HelixFoundEvent>;
 
 export type HelixHeadlessCodeEditorVueProps = {
   /** The name of the header's toolbar, read by screen readers. */
@@ -3891,6 +3896,8 @@ export type HelixHeadlessCodeEditorVueEvents = {
   change: HelixHeadlessCodeEditorElementEvent;
   /** The text is about to change. Cancelable: cancel it to keep the current text. */
   "helix-before-change": HelixHeadlessCodeEditorHelixBeforeChangeElementEvent;
+  /** The find bar searched or moved among the matches, with `count` and the selected match's `index`, counting from 0, or -1 for none. */
+  "helix-found": HelixHeadlessCodeEditorHelixFoundElementEvent;
   /** Fired after the text changes. */
   input: HelixHeadlessCodeEditorElementEvent;
 };
@@ -8452,6 +8459,142 @@ export type HelixHeadlessFilterInputVueEvents = {
   toggle: HelixHeadlessFilterInputToggleElementEvent;
 };
 
+/** `HelixHeadlessFind` component event */
+export type HelixHeadlessFindElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessFind,
+  E
+>;
+/** `helix-before-close` event type */
+export type HelixHeadlessFindHelixBeforeCloseElementEvent =
+  HelixHeadlessFindElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessFindHelixBeforeOpenElementEvent =
+  HelixHeadlessFindElementEvent<HelixBeforeOpenEvent>;
+/** `helix-found` event type */
+export type HelixHeadlessFindHelixFoundElementEvent =
+  HelixHeadlessFindElementEvent<HelixFoundEvent>;
+/** `toggle` event type */
+export type HelixHeadlessFindToggleElementEvent =
+  HelixHeadlessFindElementEvent<ToggleEvent>;
+
+export type HelixHeadlessFindVueProps = {
+  /** The close button's label. */
+  "close-label"?: (HelixHeadlessFind["closeLabel"]) | undefined;
+  /** The close button's label. */
+  closeLabel?: (HelixHeadlessFind["closeLabel"]) | undefined;
+  /** The name of the bar's toolbar, read by screen readers. */
+  "controls-label"?: (HelixHeadlessFind["controlsLabel"]) | undefined;
+  /** The name of the bar's toolbar, read by screen readers. */
+  controlsLabel?: (HelixHeadlessFind["controlsLabel"]) | undefined;
+  /** The id of the element whose text Find searches, in the same tree as Find.
+With a finder attached, it names only where the find key opens the bar. */
+  for?: (HelixHeadlessFind["for"]) | undefined;
+  /** What the count says when the regular expression cannot be read. */
+  "invalid-label"?: (HelixHeadlessFind["invalidLabel"]) | undefined;
+  /** What the count says when the regular expression cannot be read. */
+  invalidLabel?: (HelixHeadlessFind["invalidLabel"]) | undefined;
+  /** The field's name and placeholder, and the name of the bar. */
+  label?: (HelixHeadlessFind["label"]) | undefined;
+  /** Whether case has to match, so "Error" does not find "error". The reader turns it on and off from the bar. */
+  "match-case"?: (HelixHeadlessFind["matchCase"]) | undefined;
+  /** Whether case has to match, so "Error" does not find "error". The reader turns it on and off from the bar. */
+  matchCase?: (HelixHeadlessFind["matchCase"]) | undefined;
+  /** The match case button's label. */
+  "match-case-label"?: (HelixHeadlessFind["matchCaseLabel"]) | undefined;
+  /** The match case button's label. */
+  matchCaseLabel?: (HelixHeadlessFind["matchCaseLabel"]) | undefined;
+  /** What the count says of the matches. `{index}` is the current match,
+counting from 1, and `{count}` how many there are. */
+  "matches-label"?: (HelixHeadlessFind["matchesLabel"]) | undefined;
+  /** What the count says of the matches. `{index}` is the current match,
+counting from 1, and `{count}` how many there are. */
+  matchesLabel?: (HelixHeadlessFind["matchesLabel"]) | undefined;
+  /** The next match button's label. */
+  "next-label"?: (HelixHeadlessFind["nextLabel"]) | undefined;
+  /** The next match button's label. */
+  nextLabel?: (HelixHeadlessFind["nextLabel"]) | undefined;
+  /** Which options the bar draws, as a list of `match-case`, `whole-word`, and
+`regex`, or `none`. They are always drawn in that order. */
+  options?: (HelixHeadlessFind["options"]) | undefined;
+  /** The previous match button's label. */
+  "previous-label"?: (HelixHeadlessFind["previousLabel"]) | undefined;
+  /** The previous match button's label. */
+  previousLabel?: (HelixHeadlessFind["previousLabel"]) | undefined;
+  /** What the field holds: what the reader typed, or what you set. */
+  query?: (HelixHeadlessFind["query"]) | undefined;
+  /** Hides replacing, for content the reader cannot change. The attribute is `readonly`, the platform's spelling. */
+  readonly?: (HelixHeadlessFind["readOnly"]) | undefined;
+  /** Hides replacing, for content the reader cannot change. The attribute is `readonly`, the platform's spelling. */
+  readOnly?: (HelixHeadlessFind["readOnly"]) | undefined;
+  /** Whether the field reads as a regular expression, in JavaScript's syntax. The reader turns it on and off from the bar. */
+  regex?: (HelixHeadlessFind["regex"]) | undefined;
+  /** The regular expression button's label. */
+  "regex-label"?: (HelixHeadlessFind["regexLabel"]) | undefined;
+  /** The regular expression button's label. */
+  regexLabel?: (HelixHeadlessFind["regexLabel"]) | undefined;
+  /** The Replace all button's words. */
+  "replace-all-label"?: (HelixHeadlessFind["replaceAllLabel"]) | undefined;
+  /** The Replace all button's words. */
+  replaceAllLabel?: (HelixHeadlessFind["replaceAllLabel"]) | undefined;
+  /** The replace field's name and placeholder. */
+  "replace-field-label"?: (HelixHeadlessFind["replaceFieldLabel"]) | undefined;
+  /** The replace field's name and placeholder. */
+  replaceFieldLabel?: (HelixHeadlessFind["replaceFieldLabel"]) | undefined;
+  /** The Replace button's words. */
+  "replace-label"?: (HelixHeadlessFind["replaceLabel"]) | undefined;
+  /** The Replace button's words. */
+  replaceLabel?: (HelixHeadlessFind["replaceLabel"]) | undefined;
+  /** What the replace field holds, which Replace puts in place of a match. */
+  replacement?: (HelixHeadlessFind["replacement"]) | undefined;
+  /** The label of the button that shows the replace row. */
+  "replace-toggle-label"?: (HelixHeadlessFind["replaceToggleLabel"]) | undefined;
+  /** The label of the button that shows the replace row. */
+  replaceToggleLabel?: (HelixHeadlessFind["replaceToggleLabel"]) | undefined;
+  /** The key that opens the bar, as a chord such as `mod+f`, where `mod` is
+Command on an Apple keyboard and Control elsewhere. Empty turns the key
+off, as for a bar the page opens itself. */
+  shortcut?: (HelixHeadlessFind["shortcut"]) | undefined;
+  /** Elements inside the content whose text is not searched, as a selector,
+such as line numbers or the buttons beside each message. */
+  skip?: (HelixHeadlessFind["skip"]) | undefined;
+  /** Whether only whole words match. The reader turns it on and off from the bar. */
+  "whole-word"?: (HelixHeadlessFind["wholeWord"]) | undefined;
+  /** Whether only whole words match. The reader turns it on and off from the bar. */
+  wholeWord?: (HelixHeadlessFind["wholeWord"]) | undefined;
+  /** The whole word button's label. */
+  "whole-word-label"?: (HelixHeadlessFind["wholeWordLabel"]) | undefined;
+  /** The whole word button's label. */
+  wholeWordLabel?: (HelixHeadlessFind["wholeWordLabel"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixHeadlessFind["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixHeadlessFind["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+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?: (HelixHeadlessFind["open"]) | undefined;
+};
+
+export type HelixHeadlessFindVueEvents = {
+  /** Fired before the bar closes, and cancelable. */
+  "helix-before-close": HelixHeadlessFindHelixBeforeCloseElementEvent;
+  /** Fired before the bar opens, and cancelable. Canceling it keeps the bar closed. */
+  "helix-before-open": HelixHeadlessFindHelixBeforeOpenElementEvent;
+  /** Sent after each search and each move among the matches, with `count` and the current match's `index`, counting from 0, or -1 for none. */
+  "helix-found": HelixHeadlessFindHelixFoundElementEvent;
+  /** Sent when the bar opens or closes, with `newState` and `oldState`. */
+  toggle: HelixHeadlessFindToggleElementEvent;
+};
+
 export type HelixHeadlessFormatDateVueProps = {
   /** The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
 `roc`, or `iso8601`, or a calendar with months of its own, such as
@@ -18797,6 +18940,9 @@ export type HelixHeadlessTerminalElementEvent<E = Event> = TypedEvent<
 /** `helix-copy` event type */
 export type HelixHeadlessTerminalHelixCopyElementEvent =
   HelixHeadlessTerminalElementEvent<HelixCopyEvent>;
+/** `helix-found` event type */
+export type HelixHeadlessTerminalHelixFoundElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixFoundEvent>;
 /** `helix-terminal-bell` event type */
 export type HelixHeadlessTerminalHelixTerminalBellElementEvent =
   HelixHeadlessTerminalElementEvent<HelixTerminalBellEvent>;
@@ -18965,6 +19111,8 @@ write. Connect it to a setting your reader can turn on. */
 export type HelixHeadlessTerminalVueEvents = {
   /** The copy control or its key put the selection on the clipboard. */
   "helix-copy": HelixHeadlessTerminalHelixCopyElementEvent;
+  /** The find bar searched or moved among the matches, with `count` and the current match's `index`, counting from 0, or -1 for none. */
+  "helix-found": HelixHeadlessTerminalHelixFoundElementEvent;
   /** The program rang the bell. The frame flashes once. */
   "helix-terminal-bell": HelixHeadlessTerminalHelixTerminalBellElementEvent;
   /** The reader typed or pasted, with `data` encoded for the program. Write it to the process. Not sent while `readonly`, or once `exit-code` is set. */
@@ -22780,6 +22928,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFilterInputVueProps,
     HelixHeadlessFilterInputVueEvents
   >;
+  /** Searches the content 'for' names, by id, and marks every match, with the current one marked apart. The count says which match is current and how many there are. Find opens with Command+F, or Control+F on Windows and Linux, while the reader is in that content or in the bar. Everywhere else on the page, the key opens the browser's own find. 'shortcut' changes the key, and empty turns it off.  The match case, whole word, and regular expression options are drawn in the bar. 'options' names the ones it draws. Text that is not shown is not searched, nor text under 'inert' or 'aria-hidden="true"', nor what 'skip' matches. Text under 'hidden="until-found"' and in a closed '<details>' is searched, and opened when its match becomes current, as the browser's find opens it: an Accordion section opens. A match is scrolled into the middle of what scrolls it unless it is already in sight. While Find is open, a change to the content searches again once the content is still.  Content drawn some other way, such as a terminal's grid, an editor's document, or rows of a list that are not all in the page, is searched by a finder the page attaches with 'attach(finder)'. Terminal and Code Editor draw a Find of their own, which searches through their renderer. Find offers replacing to a finder that can replace, unless 'readonly' is set.  The bar is a search landmark named by 'label'. The count is said in a live region as it changes.  **Keyboard.** In the field, Enter moves to the next match and Shift+Enter to the previous one. Escape closes the bar from anywhere in it, and focus returns to where it was before the bar opened. The find key pressed again moves focus to the field and selects what it holds. In the replace field, Enter replaces the current match, and Command+Enter or Control+Enter replaces every match. */
+  "helix-headless-find": DefineCustomElement<
+    HelixHeadlessFind,
+    HelixHeadlessFindVueProps,
+    HelixHeadlessFindVueEvents
+  >;
   /** Formats a date with 'Intl' where it is shown, so you do not write the same 'Intl' call and options in your own code.  **'elapsed' shows compact relative time for a feed**, such as "42m", "3h", or "1d". After six days it shows a date. In en-US, 'Intl.NumberFormat' narrow renders both 'minute' and 'month' as 'm', so a compact "3m" could mean three minutes or three months. 'elapsedTime' in 'helix/core' does the measurement.  **'relative' shows the same reading in words**, such as "3 hours ago" at 'long', "3 hr. ago" at 'short' and "3h ago" at 'narrow', the styles 'sl-relative-time' offers. 'numeric="always"' says "1 day ago" where the default says "yesterday". Both readings round the count, as 'sl-relative-time' does: 100 seconds ago is "2 minutes ago", and 59.6 minutes is "1 hour".  **'date-style' and 'time-style' take each locale's own pattern**, such as "Tuesday, August 4, 2026" at 'full', and stand in for the separate fields, which 'Intl' refuses beside them. 'hour-cycle' sets a twelve or twenty-four hour clock either way.  **The text refreshes on one timer shared by the page.** Each element schedules an update for when its current reading expires, and an element showing a date schedules none, so a long feed left open costs almost nothing. 'frozen' draws the reading once and leaves it.  **'fields' draws each field of a date as a part of its own**, such as 'day', 'month' and 'year', so a stylesheet can set the year in a lighter ink or the weekday in capitals with '::part()'. The text between the fields is the locale's own and has no part. An 'elapsed' or 'relative' reading is one phrase, with no parts inside it.  **The output is always '<time datetime>'**, so copy and paste and scripts parsing the page get the exact instant, whatever the visible text says. A screen reader reads the text, so an 'elapsed' reading is named in full, such as "3 hours ago", and carries the whole date as its title.  **A date with no time, such as '2026-08-04', is that day everywhere.** It is formatted in UTC unless 'time-zone' says otherwise, as Date Input and Date Picker format their dates, so a reader west of UTC sees August 4 and not August 3.  **A date is written in a calendar Date Picker draws**: the locale's own where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR'. 'calendar' picks any of them, 'persian' and 'hebrew' included. */
   "helix-headless-format-date": DefineCustomElement<
     HelixHeadlessFormatDate,
@@ -22876,7 +23030,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLoaderVueProps,
     HelixHeadlessLoaderVueEvents
   >;
-  /** A group is a disclosure: its heading is a button that shows and hides the lines inside it, and says whether they are shown with 'aria-expanded'. Put 'Log.Line' elements inside it, and nest groups for steps within steps.  'status' draws a mark before the heading, and a screen reader hears the status after the heading ('status-label'). 'duration' stands at the end of the heading, as you write it, such as '12s'.  A group starts shut. Write 'default-open' on the step a reader should see, such as the one that failed. */
+  /** A group is a disclosure: its heading is a button that shows and hides the lines inside it, and says whether they are shown with 'aria-expanded'. Put 'Log.Line' elements inside it, and nest groups for steps within steps.  'status' draws a mark before the heading, and a screen reader hears the status after the heading ('status-label'). 'duration' stands at the end of the heading, as you write it, such as '12s'.  A group starts shut. Write 'default-open' on the step a reader should see, such as the one that failed. A shut group's lines are hidden until found: the browser's find and Find search them, and the group opens on the one that holds the match, unless 'helix-before-open' is canceled. */
   "helix-headless-log-group": DefineCustomElement<
     HelixHeadlessLogGroup,
     HelixHeadlessLogGroupVueProps,
@@ -23416,7 +23570,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTourStopVueProps,
     HelixHeadlessTourStopVueEvents
   >;
-  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when an item is slotted into 'children', with 'slot="children"' on each nested item. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it, or 'selection-mode="leaf"', where only the items at the ends are chosen.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in.  **In a 'reorderable' tree, the row has a grip** at its far end, which a pointer drags to move the item among its siblings. The tree says which item is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. */
+  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when an item is slotted into 'children', with 'slot="children"' on each nested item. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it, or 'selection-mode="leaf"', where only the items at the ends are chosen.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A closed branch's children are hidden until found: the browser's find and Find search them, and the branch opens on the one that holds the match, unless 'helix-before-open' is canceled.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in.  **In a 'reorderable' tree, the row has a grip** at its far end, which a pointer drags to move the item among its siblings. The tree says which item is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states. */
   "helix-headless-tree-item": DefineCustomElement<
     HelixHeadlessTreeItem,
     HelixHeadlessTreeItemVueProps,

package/types/words.d.ts

@@ -2023,6 +2023,93 @@ declare module '@fusion.dev/helix-core' {
        */
       label: Message
     }
+    'helix-find': {
+      /**
+       * The close button's label.
+       *
+       * English: `Close find`
+       */
+      closeLabel: Message
+      /**
+       * The name of the bar's toolbar, read by screen readers.
+       *
+       * English: `Find controls`
+       */
+      controlsLabel: Message
+      /**
+       * What the count says when the regular expression cannot be read.
+       *
+       * English: `Not a valid regular expression`
+       */
+      invalidLabel: Message
+      /**
+       * The field's name and placeholder, and the name of the bar.
+       *
+       * English: `Find`
+       */
+      label: Message
+      /**
+       * The match case button's label.
+       *
+       * English: `Match case`
+       */
+      matchCaseLabel: Message
+      /**
+       * What the count says of the matches. `{index}` is the current match,
+       * counting from 1, and `{count}` how many there are.
+       *
+       * English: `{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}`
+       */
+      matchesLabel: Message
+      /**
+       * The next match button's label.
+       *
+       * English: `Next match`
+       */
+      nextLabel: Message
+      /**
+       * The previous match button's label.
+       *
+       * English: `Previous match`
+       */
+      previousLabel: Message
+      /**
+       * The regular expression button's label.
+       *
+       * English: `Use regular expression`
+       */
+      regexLabel: Message
+      /**
+       * The Replace all button's words.
+       *
+       * English: `Replace all`
+       */
+      replaceAllLabel: Message
+      /**
+       * The replace field's name and placeholder.
+       *
+       * English: `Replace with`
+       */
+      replaceFieldLabel: Message
+      /**
+       * The Replace button's words.
+       *
+       * English: `Replace`
+       */
+      replaceLabel: Message
+      /**
+       * The label of the button that shows the replace row.
+       *
+       * English: `Find and replace`
+       */
+      replaceToggleLabel: Message
+      /**
+       * The whole word button's label.
+       *
+       * English: `Match whole word`
+       */
+      wholeWordLabel: Message
+    }
     'helix-graph': {
       /**
        * The hint shown when the graph, waiting to be pressed with