@fusion.dev/helix 0.219.0 → 0.220.0

package/types/svelte.d.ts

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

package/types/vue.d.ts

@@ -102,8 +102,10 @@ import type {
   HelixFilterMenu,
   HelixFilterOperator,
   HelixFilteredEvent,
+  HelixFind,
   HelixFlex,
   HelixFormatDate,
+  HelixFoundEvent,
   HelixGraph,
   HelixGraphFilterEvent,
   HelixGraphLayoutEvent,
@@ -4565,6 +4567,9 @@ export type HelixCodeEditorElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixCodeEditorHelixBeforeChangeElementEvent =
   HelixCodeEditorElementEvent<HelixBeforeChangeEvent>;
+/** `helix-found` event type */
+export type HelixCodeEditorHelixFoundElementEvent =
+  HelixCodeEditorElementEvent<HelixFoundEvent>;
 
 export type HelixCodeEditorVueProps = {
   /** Covers the container instead of taking a height of its own, for an
@@ -4768,6 +4773,8 @@ export type HelixCodeEditorVueEvents = {
   change: HelixCodeEditorElementEvent;
   /** The text is about to change. Cancelable: cancel it to keep the current text. */
   "helix-before-change": HelixCodeEditorHelixBeforeChangeElementEvent;
+  /** 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": HelixCodeEditorHelixFoundElementEvent;
   /** Fired after the text changes. */
   input: HelixCodeEditorElementEvent;
 };
@@ -9541,6 +9548,138 @@ export type HelixFilterInputVueEvents = {
   input: HelixFilterInputElementEvent;
 };
 
+/** `HelixFind` component event */
+export type HelixFindElementEvent<E = Event> = TypedEvent<HelixFind, E>;
+/** `toggle` event type */
+export type HelixFindToggleElementEvent = HelixFindElementEvent<ToggleEvent>;
+/** `helix-before-close` event type */
+export type HelixFindHelixBeforeCloseElementEvent =
+  HelixFindElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixFindHelixBeforeOpenElementEvent =
+  HelixFindElementEvent<HelixBeforeOpenEvent>;
+/** `helix-found` event type */
+export type HelixFindHelixFoundElementEvent =
+  HelixFindElementEvent<HelixFoundEvent>;
+
+export type HelixFindVueProps = {
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixFind["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixFind["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?: (HelixFind["open"]) | undefined;
+  /** The close button's label. */
+  "close-label"?: (HelixFind["closeLabel"]) | undefined;
+  /** The close button's label. */
+  closeLabel?: (HelixFind["closeLabel"]) | undefined;
+  /** The name of the bar's toolbar, read by screen readers. */
+  "controls-label"?: (HelixFind["controlsLabel"]) | undefined;
+  /** The name of the bar's toolbar, read by screen readers. */
+  controlsLabel?: (HelixFind["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?: (HelixFind["for"]) | undefined;
+  /** What the count says when the regular expression cannot be read. */
+  "invalid-label"?: (HelixFind["invalidLabel"]) | undefined;
+  /** What the count says when the regular expression cannot be read. */
+  invalidLabel?: (HelixFind["invalidLabel"]) | undefined;
+  /** The field's name and placeholder, and the name of the bar. */
+  label?: (HelixFind["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"?: (HelixFind["matchCase"]) | undefined;
+  /** Whether case has to match, so "Error" does not find "error". The reader turns it on and off from the bar. */
+  matchCase?: (HelixFind["matchCase"]) | undefined;
+  /** The match case button's label. */
+  "match-case-label"?: (HelixFind["matchCaseLabel"]) | undefined;
+  /** The match case button's label. */
+  matchCaseLabel?: (HelixFind["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"?: (HelixFind["matchesLabel"]) | undefined;
+  /** What the count says of the matches. `{index}` is the current match,
+counting from 1, and `{count}` how many there are. */
+  matchesLabel?: (HelixFind["matchesLabel"]) | undefined;
+  /** The next match button's label. */
+  "next-label"?: (HelixFind["nextLabel"]) | undefined;
+  /** The next match button's label. */
+  nextLabel?: (HelixFind["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?: (HelixFind["options"]) | undefined;
+  /** The previous match button's label. */
+  "previous-label"?: (HelixFind["previousLabel"]) | undefined;
+  /** The previous match button's label. */
+  previousLabel?: (HelixFind["previousLabel"]) | undefined;
+  /** What the field holds: what the reader typed, or what you set. */
+  query?: (HelixFind["query"]) | undefined;
+  /** Hides replacing, for content the reader cannot change. The attribute is `readonly`, the platform's spelling. */
+  readonly?: (HelixFind["readOnly"]) | undefined;
+  /** Hides replacing, for content the reader cannot change. The attribute is `readonly`, the platform's spelling. */
+  readOnly?: (HelixFind["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?: (HelixFind["regex"]) | undefined;
+  /** The regular expression button's label. */
+  "regex-label"?: (HelixFind["regexLabel"]) | undefined;
+  /** The regular expression button's label. */
+  regexLabel?: (HelixFind["regexLabel"]) | undefined;
+  /** The Replace all button's words. */
+  "replace-all-label"?: (HelixFind["replaceAllLabel"]) | undefined;
+  /** The Replace all button's words. */
+  replaceAllLabel?: (HelixFind["replaceAllLabel"]) | undefined;
+  /** The replace field's name and placeholder. */
+  "replace-field-label"?: (HelixFind["replaceFieldLabel"]) | undefined;
+  /** The replace field's name and placeholder. */
+  replaceFieldLabel?: (HelixFind["replaceFieldLabel"]) | undefined;
+  /** The Replace button's words. */
+  "replace-label"?: (HelixFind["replaceLabel"]) | undefined;
+  /** The Replace button's words. */
+  replaceLabel?: (HelixFind["replaceLabel"]) | undefined;
+  /** What the replace field holds, which Replace puts in place of a match. */
+  replacement?: (HelixFind["replacement"]) | undefined;
+  /** The label of the button that shows the replace row. */
+  "replace-toggle-label"?: (HelixFind["replaceToggleLabel"]) | undefined;
+  /** The label of the button that shows the replace row. */
+  replaceToggleLabel?: (HelixFind["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?: (HelixFind["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?: (HelixFind["skip"]) | undefined;
+  /** Whether only whole words match. The reader turns it on and off from the bar. */
+  "whole-word"?: (HelixFind["wholeWord"]) | undefined;
+  /** Whether only whole words match. The reader turns it on and off from the bar. */
+  wholeWord?: (HelixFind["wholeWord"]) | undefined;
+  /** The whole word button's label. */
+  "whole-word-label"?: (HelixFind["wholeWordLabel"]) | undefined;
+  /** The whole word button's label. */
+  wholeWordLabel?: (HelixFind["wholeWordLabel"]) | undefined;
+};
+
+export type HelixFindVueEvents = {
+  /** Sent when the bar opens or closes, with `newState` and `oldState`. */
+  toggle: HelixFindToggleElementEvent;
+  /** Fired before the bar closes, and cancelable. */
+  "helix-before-close": HelixFindHelixBeforeCloseElementEvent;
+  /** Fired before the bar opens, and cancelable. Canceling it keeps the bar closed. */
+  "helix-before-open": HelixFindHelixBeforeOpenElementEvent;
+  /** 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": HelixFindHelixFoundElementEvent;
+};
+
 export type HelixFlexVueProps = {
   /** How the lines of a wrapping row share the space across it, set as
 `align-content`.
@@ -21506,6 +21645,9 @@ export type HelixTerminalElementEvent<E = Event> = TypedEvent<HelixTerminal, E>;
 /** `helix-copy` event type */
 export type HelixTerminalHelixCopyElementEvent =
   HelixTerminalElementEvent<HelixCopyEvent>;
+/** `helix-found` event type */
+export type HelixTerminalHelixFoundElementEvent =
+  HelixTerminalElementEvent<HelixFoundEvent>;
 /** `helix-terminal-bell` event type */
 export type HelixTerminalHelixTerminalBellElementEvent =
   HelixTerminalElementEvent<HelixTerminalBellEvent>;
@@ -21681,6 +21823,8 @@ write. Connect it to a setting your reader can turn on. */
 export type HelixTerminalVueEvents = {
   /** The copy control or its key put the selection on the clipboard. */
   "helix-copy": HelixTerminalHelixCopyElementEvent;
+  /** 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": HelixTerminalHelixFoundElementEvent;
   /** The program rang the bell. The frame flashes once. */
   "helix-terminal-bell": HelixTerminalHelixTerminalBellElementEvent;
   /** 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. */
@@ -26064,6 +26208,12 @@ export type CustomCssProperties = {
   "--filter-input-shadow"?: (string) | undefined;
   /** The height of the empty field. The field grows from this height. */
   "--filter-input-size"?: (string) | undefined;
+  /** The bar's fill. Defaults to the raised surface. */
+  "--find-background-color"?: (string) | undefined;
+  /** The line under the bar and the fields' edges. */
+  "--find-border-color"?: (string) | undefined;
+  /** The fields' fill. Defaults to the page's background. */
+  "--find-field-background-color"?: (string) | undefined;
   /** The narrowest the growing item of a `flank` layout gets before the two stack, as a share of the row. Defaults to `50%`. */
   "--flex-flank-min"?: (string) | undefined;
   /** The width of the fixed item of a `flank` layout. Defaults to its own width. */
@@ -28248,6 +28398,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixFilterInputVueProps,
     HelixFilterInputVueEvents
   >;
+  /** Drawn as the find bars of Terminal and Code Editor are: a dense strip on the raised surface, with a line under it where it meets the content. Place it above the content it searches, such as at the top of a pane, or make it sticky with 'position: sticky' on the element.  Every match is painted with '::highlight(helix-find-match)' and the current one with '::highlight(helix-find-current)', both in the base layer. Text is painted from the tree it lives in, so content in a shadow root of your own needs the two rules in that root's styles. */
+  "helix-find": DefineCustomElement<
+    HelixFind,
+    HelixFindVueProps,
+    HelixFindVueEvents
+  >;
   /** The host is the flex container and its only child is a slot, so '<helix-flex>' adds no box beyond the '<div>' it replaces.  There is no separate Stack component. For a stack, set 'direction="column"'.  'gap' takes a space token name, so spacing stays on the scale. 'row-gap' and 'column-gap' set one axis each and win over 'gap' on theirs.  'layout' sets up a common pattern, and any attribute you also write wins over the pattern's own value:  - 'cluster': items in a wrapping row, centered on one line, such as tags. - 'split': the first item at the start, the last at the end, and any between   them spaced evenly, such as a title and its actions. Put several actions   in a flex of their own so they stay together at the end. Wraps when there   is no room. - 'flank' and 'flank-end': a fixed item beside one that takes the rest, such   as an icon and its text, or a field and its button. The item that takes   the rest stays at least '--flex-flank-min' wide, and the pair stacks once   it cannot. - 'switch': the items share a row while the flex is at least   '--flex-switch-at' wide, and each takes a line of its own below that, such   as cards that stack on a narrow screen. It answers the width the flex is   given, wherever it sits, with no breakpoint to maintain.  Flex is presentation only, so it has no headless tier. */
   "helix-flex": DefineCustomElement<
     HelixFlex,

package/types/words.d.ts

@@ -2030,6 +2030,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 a surface waiting to be pressed is scrolled or