@fusion.dev/helix-core 0.146.0 → 0.148.0

package/dist/utils/audit-source/audit-source.js

@@ -0,0 +1,27 @@
+import { reportRuntime } from '../report-runtime/report-runtime.js';
+const audited = new WeakSet();
+export const auditSource = (host, table) => {
+    if (host.for === '' || audited.has(host) || typeof document === 'undefined') {
+        return;
+    }
+    audited.add(host);
+    const read = () => {
+        setTimeout(() => {
+            if (host.isConnected && host.for !== '' && !table()) {
+                reportRuntime({
+                    kind: 'missing-table',
+                    message: `<${host.localName} for="${host.for}"> names no table, so it draws nothing. ` +
+                        'Point `for` at the id of a <table>, an element with role="table" or "grid", or a ' +
+                        'helix-table, in the same tree.',
+                    tag: host.localName,
+                });
+            }
+        }, 0);
+    };
+    if (document.readyState === 'complete') {
+        read();
+    }
+    else {
+        window.addEventListener('load', read, { once: true });
+    }
+};

package/dist/utils/autofill-select/autofill-select.d.ts

@@ -0,0 +1,40 @@
+import { nothing, type TemplateResult } from 'lit';
+/** What the hidden native select offers a browser's autofill, and what it does with the answer. */
+export interface DrawAutofillOptions {
+    /** The autofill token, such as `country` or `cc-exp-month`. Empty draws nothing. */
+    autocomplete: string;
+    /** Whether the select is disabled, which takes it out of autofill too. */
+    disabled: boolean;
+    /** Whether more than one option can be chosen. */
+    multiple: boolean;
+    /** Takes what the browser filled in, as a value: several are joined by commas. */
+    onFill: (value: string) => void;
+    /** The options, each with its value and its words, in order. */
+    options: readonly {
+        text: string;
+        value: string;
+    }[];
+    /** The value now, several joined by commas. */
+    value: string;
+}
+/**
+ * A native `<select>` that a browser's autofill can fill, holding the same
+ * options as the custom select beside it. Select, Combobox and Listbox draw it
+ * under `autocomplete`.
+ *
+ * **A browser fills native fields only.** It reads `autocomplete`, picks an
+ * option by its value or its words, and sends `change`, which `onFill` turns
+ * into the custom select's value. Chromium fills a select inside a shadow root
+ * when its host is inside the form being filled.
+ *
+ * **The select's own `input` stops here.** It is composed, so it crossed the
+ * shadow root and reached the host before `change` did, with the host's value
+ * still the old one: measured in Chromium, a fill sent a page's `input`
+ * listener two events, the first carrying the old value. The host sends its
+ * own `input` and `change` once the value is taken.
+ *
+ * **Hidden from everyone but the browser**: clipped to a pixel, `aria-hidden`,
+ * and out of the tab order, with no `name`, so the form still receives the
+ * value once, from the custom select itself.
+ */
+export declare const drawAutofill: ({ autocomplete, disabled, multiple, onFill, options, value, }: DrawAutofillOptions) => TemplateResult | typeof nothing;

package/dist/utils/autofill-select/autofill-select.js

@@ -0,0 +1,14 @@
+import { html, nothing } from 'lit';
+const HIDDEN = 'position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none';
+export const drawAutofill = ({ autocomplete, disabled, multiple, onFill, options, value, }) => {
+    if (autocomplete === '') {
+        return nothing;
+    }
+    const chosen = value.split(',');
+    const fill = (event) => onFill([...event.currentTarget.selectedOptions]
+        .map((option) => option.value)
+        .filter(Boolean)
+        .join(','));
+    const stop = (event) => event.stopPropagation();
+    return html `<select aria-hidden="true" autocomplete=${autocomplete} style=${HIDDEN} tabindex="-1" ?disabled=${disabled} ?multiple=${multiple} @change=${fill} @input=${stop}><option value=""></option>${options.map((option) => html `<option value=${option.value} ?selected=${chosen.includes(option.value)}>${option.text}</option>`)}</select>`;
+};

package/dist/utils/call-listener/call-listener.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What the three diagnostics slots share: a listener on `globalThis` under a
+ * registered symbol, called where there is one, whose failure is printed once.
+ *
+ * `reportRuntime`, `reportUsage` and `reportRender` each wrote this out, with
+ * a flag and a sentence of its own, and every element carries all three. Kept
+ * as one function, the sentence is one template and the flags one set.
+ */
+/**
+ * Calls the function in `slot` with `args`, and answers what it returned.
+ *
+ * **A listener that throws never breaks the caller.** The error is printed
+ * once per `kind`, saying what happened instead (`after`), and the answer is
+ * `undefined`, as it is where nothing listens.
+ */
+export declare const callListener: (slot: symbol, kind: string, after: string, ...args: unknown[]) => unknown;

package/dist/utils/call-listener/call-listener.js

@@ -0,0 +1,17 @@
+const told = new Set();
+export const callListener = (slot, kind, after, ...args) => {
+    const listener = globalThis[slot];
+    if (typeof listener !== 'function') {
+        return undefined;
+    }
+    try {
+        return listener(...args);
+    }
+    catch (error) {
+        if (!told.has(kind)) {
+            told.add(kind);
+            console.error(`helix: a ${kind} listener threw, and ${after}. Later failures are not printed.`, error);
+        }
+        return undefined;
+    }
+};

package/dist/utils/center-in-view/center-in-view.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Scrolls `box` to put `item`, one of the things it scrolls, in its middle.
+ *
+ * For a list read as a dial rather than scanned, as Time Picker's wheels read
+ * a Listbox. A delta from the two boxes rather than `offsetTop`: a slotted
+ * item's `offsetParent` is whatever is positioned above it, which is not the
+ * box and is not guaranteed to be anything.
+ *
+ * **Twice, and the second pass is not superstition.** The first delta is
+ * computed against whatever layout is current when this is called, and inside
+ * a panel that has just been revealed it is a frame behind: measured, one call
+ * landed a whole row short, 672 where 704 was wanted, and calling it again
+ * from a settled layout put it exactly on center. Reading a rect forces
+ * layout, so the second pass sees the result of the first and corrects the
+ * remainder. It stops as soon as there is nothing left to correct, and where
+ * either box has no height, as on a page not laid out.
+ */
+export declare const centerInView: (box: HTMLElement, item: Element) => void;

package/dist/utils/center-in-view/center-in-view.js

@@ -0,0 +1,14 @@
+export const centerInView = (box, item) => {
+    for (let pass = 0; pass < 2; pass += 1) {
+        const outer = box.getBoundingClientRect();
+        const inner = item.getBoundingClientRect();
+        if (outer.height === 0 || inner.height === 0) {
+            return;
+        }
+        const off = inner.top + inner.height / 2 - (outer.top + outer.height / 2);
+        if (Math.abs(off) < 1) {
+            return;
+        }
+        box.scrollTop += off;
+    }
+};

package/dist/utils/chord/chord.d.ts

@@ -41,3 +41,17 @@ export interface ChordPress {
  * should go to whatever did want it.
  */
 export declare const matchesChord: (press: ChordPress, keys: string, apple: boolean) => boolean;
+/**
+ * Whether a key press is Control+A, or Command+A on an Apple keyboard: the
+ * press that selects every item of a multiple selection.
+ *
+ * List, Tree, Listbox, Data Table and Virtual List each wrote the test. Either
+ * modifier counts on any platform, as they did, and Alt held is another
+ * shortcut.
+ */
+export declare const selectsAll: (press: {
+    readonly altKey: boolean;
+    readonly ctrlKey: boolean;
+    readonly key: string;
+    readonly metaKey: boolean;
+}) => boolean;

package/dist/utils/chord/chord.js

@@ -51,3 +51,4 @@ export const matchesChord = (press, keys, apple) => {
         (ctrl ? press.ctrlKey : !press.ctrlKey) &&
         (meta ? press.metaKey : !press.metaKey));
 };
+export const selectsAll = (press) => (press.ctrlKey || press.metaKey) && !press.altKey && press.key.toLowerCase() === 'a';

package/dist/utils/chord/key-names.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The words and glyphs a chord is drawn with, per platform.
+ *
+ * In core beside `ariaChord`, which says a chord to a reader as this draws it
+ * for the eye: Kbd draws a chord with it, and Speed Dial draws an action's
+ * shortcut with it where nothing is slotted, without importing Kbd.
+ */
+/** A chord's keys as they are shown, and what is shown between two of them. */
+export interface KeyNames {
+    /** Each key's label, in the order the chord names them. */
+    keys: string[];
+    /** What goes between two keys: `+`, a hyphen, or nothing. */
+    separator: string;
+}
+/**
+ * The labels of a chord's keys on a platform, with `own` labels in place of
+ * the platform's, and what goes between two keys.
+ *
+ * `parts` are the chord's names as `chordParts` splits them. A name `own`
+ * holds takes that label, a name the platform knows takes its glyph or word,
+ * and any other single character is shown in capitals.
+ *
+ * **On an Apple keyboard glyphs run together and words are joined with a
+ * hyphen**, as Apple writes `Command-K`. A label of more than one character
+ * from `own` is a word, so `{"mod": "Command"}` shows `Command-K` there, where
+ * nothing between the two ran them into `CommandK`. The platform's own `Esc`
+ * and `Space` keep running on from a glyph, as `⌘Esc` always has. Everywhere
+ * else keys are joined with `+`.
+ */
+export declare const keyNames: (parts: readonly string[], apple: boolean, own?: Readonly<Record<string, string>>) => KeyNames;

package/dist/utils/chord/key-names.js

@@ -0,0 +1,52 @@
+const APPLE = {
+    alt: '⌥',
+    backspace: '⌫',
+    cmd: '⌘',
+    ctrl: '⌃',
+    del: '⌦',
+    down: '↓',
+    enter: '↵',
+    esc: 'Esc',
+    left: '←',
+    meta: '⌘',
+    mod: '⌘',
+    opt: '⌥',
+    right: '→',
+    shift: '⇧',
+    space: 'Space',
+    tab: '⇥',
+    up: '↑',
+};
+const ELSEWHERE = {
+    alt: 'Alt',
+    backspace: 'Backspace',
+    cmd: 'Win',
+    ctrl: 'Ctrl',
+    del: 'Del',
+    down: '↓',
+    enter: 'Enter',
+    esc: 'Esc',
+    left: '←',
+    meta: 'Win',
+    mod: 'Ctrl',
+    opt: 'Alt',
+    right: '→',
+    shift: 'Shift',
+    space: 'Space',
+    tab: 'Tab',
+    up: '↑',
+};
+export const keyNames = (parts, apple, own = {}) => {
+    const names = apple ? APPLE : ELSEWHERE;
+    let worded = false;
+    const keys = parts.map((part) => {
+        const name = part.toLowerCase();
+        const mine = own[name];
+        if (mine !== undefined) {
+            worded ||= [...mine].length > 1;
+            return mine;
+        }
+        return names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+    });
+    return { keys, separator: apple ? (worded ? '-' : '') : '+' };
+};

package/dist/utils/clamp/clamp.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `value` held between `low` and `high`.
+ *
+ * Written four times before: Lightbox's zoom, Scroll Area's scrollbar, Color
+ * Picker's channels and core's color reading.
+ */
+export declare const clamp: (value: number, low: number, high: number) => number;

package/dist/utils/clamp/clamp.js

@@ -0,0 +1 @@
+export const clamp = (value, low, high) => Math.min(Math.max(value, low), high);

package/dist/utils/column-step/column-step.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Where Up or Down moves in a list laid out in columns, as a grid of tiles or
+ * a wrapping row is: to the next item after `at` (with `by` of `1`) or the
+ * last one before it (`-1`) that starts at the same inline offset, which is
+ * the item above or below it. `at` itself where there is none, so the key
+ * stops at the edge, as React Aria's grid layout stops.
+ *
+ * Read from where the items are drawn rather than from a column count, so it
+ * holds for a grid of any width, a row that wraps, and a column cut short.
+ * `starts` are the items' inline offsets in the order of the list, such as
+ * each one's `getBoundingClientRect().left`.
+ */
+export declare const columnStep: (starts: readonly number[], at: number, by: -1 | 1) => number;

package/dist/utils/column-step/column-step.js

@@ -0,0 +1,9 @@
+export const columnStep = (starts, at, by) => {
+    const column = starts[at];
+    for (let index = at + by; index >= 0 && index < starts.length; index += by) {
+        if (starts[index] === column) {
+            return index;
+        }
+    }
+    return at;
+};

package/dist/utils/css-color/css-color.js

@@ -1,4 +1,4 @@
-const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+import { clamp } from '../clamp/clamp.js';
 const toAlpha = (token) => {
     if (token === undefined) {
         return 100;

package/dist/utils/data-options/data-options.d.ts

@@ -0,0 +1,60 @@
+/** One option of a list fed as data, as the list reads and marks it. */
+export interface DataOption {
+    /** Whether the keyboard is on it. The list writes this. */
+    active: boolean;
+    /** Whether it can be chosen. */
+    disabled: boolean;
+    /** Whether a filter hides it. The list writes this. */
+    hidden: boolean;
+    /** Whether it is chosen. The list writes this. */
+    selected: boolean;
+    /** The words a reader sees, which the filter and the typeahead match. */
+    text: string;
+    /** What choosing it puts in the value. */
+    value: string;
+}
+/**
+ * An option as a page hands it over: its value alone, which is also its words,
+ * or a record with a `value`, the `label` a reader sees (the value where it is
+ * left out) and `disabled`.
+ */
+export type DataOptionItem = number | string | {
+    disabled?: boolean;
+    label?: string;
+    value: number | string;
+};
+/**
+ * The options a page handed over as data, as a list reads them, built once per
+ * array.
+ *
+ * Values and words are strings, as an option element's are, so a number and
+ * its digits choose the same option.
+ */
+export declare const dataOptions: (items: readonly DataOptionItem[]) => DataOption[];
+/**
+ * The positions a window draws, in order, with `kept` added where it lies
+ * outside the window: before it where it comes first, after it where it comes
+ * later. `-1` keeps nothing. Positions past `count` are left out.
+ *
+ * `kept` is the option the keyboard is on. **It has to be drawn wherever it
+ * is**, because `aria-activedescendant` points at an element, and an option
+ * that is not drawn is one a screen reader cannot be told about.
+ * `VirtualizeController.spacers(kept)` takes its room out of the spacer on its
+ * side, so the scrollbar still measures the set.
+ */
+export declare const windowOf: (first: number, last: number, count: number, kept: number) => number[];
+/**
+ * Draws `rows[index]` for each of `at` into `box`, as elements named `tag`,
+ * and returns them in order.
+ *
+ * **Reused by position.** A scroll moves the window by a row or two at a time,
+ * so the elements already drawn take the next rows' words and state rather than
+ * being thrown away: a list of ten thousand keeps the twenty or so elements a
+ * screen holds.
+ *
+ * Each element carries its place in the whole set, `aria-posinset` and
+ * `aria-setsize`, so a reader on the four-thousandth of ten thousand hears
+ * that, and not its place in what happens to be drawn. `disabled` holds every
+ * row down, for a list that is disabled itself.
+ */
+export declare const drawOptions: (box: Element, tag: string, rows: readonly DataOption[], at: readonly number[], disabled: boolean) => HTMLElement[];

package/dist/utils/data-options/data-options.js

@@ -0,0 +1,46 @@
+export const dataOptions = (items) => items.map((item) => {
+    const record = typeof item === 'object' ? item : { value: item };
+    return {
+        active: false,
+        disabled: Boolean(record.disabled),
+        hidden: false,
+        selected: false,
+        text: String(record.label ?? record.value),
+        value: String(record.value),
+    };
+});
+export const windowOf = (first, last, count, kept) => {
+    const at = [];
+    for (let index = first; index < Math.min(last, count); index += 1) {
+        at.push(index);
+    }
+    if (kept >= 0 && kept < count && !at.includes(kept)) {
+        kept < first ? at.unshift(kept) : at.push(kept);
+    }
+    return at;
+};
+export const drawOptions = (box, tag, rows, at, disabled) => {
+    const drawn = [...box.children];
+    while (drawn.length > at.length) {
+        drawn.pop()?.remove();
+    }
+    while (drawn.length < at.length) {
+        drawn.push(box.appendChild(box.ownerDocument.createElement(tag)));
+    }
+    at.forEach((index, i) => {
+        const row = rows[index];
+        const element = drawn[i];
+        Object.assign(element, {
+            active: row.active,
+            disabled: row.disabled || disabled,
+            selected: row.selected,
+            value: row.value,
+        });
+        if (element.textContent !== row.text) {
+            element.textContent = row.text;
+        }
+        element.setAttribute('aria-posinset', String(index + 1));
+        element.setAttribute('aria-setsize', String(rows.length));
+    });
+    return drawn;
+};

package/dist/utils/draw-tooltip/draw-tooltip.d.ts

@@ -44,9 +44,14 @@ export interface TooltipAt {
 /**
  * What the keyboard is reading, which `drawTooltip` says aloud and marks.
  *
- * The chart's `pointer` is one, and is what every chart passes.
+ * The chart's `pointer` is one, and is what every chart passes. A chart whose
+ * readings can be chosen passes one with `state` as well, a word such as
+ * "selected" said after where the reading stands.
  */
-export type ReadingCursor = Pick<ChartPointerController, 'column' | 'keyed'> & Partial<Pick<ChartPointerController, 'position' | 'shows'>>;
+export type ReadingCursor = Pick<ChartPointerController, 'column' | 'keyed'> & Partial<Pick<ChartPointerController, 'position' | 'shows'>> & {
+    /** A word said after the reading's position, such as "selected", or nothing. */
+    state?: string;
+};
 /**
  * What a pointer resting on a reading shows, as `Tooltip` pointed at a mark.
  *

package/dist/utils/draw-tooltip/draw-tooltip.js

@@ -11,7 +11,7 @@ export const drawTooltip = (rows, at, tag, where, slotOf, reading) => {
     const live = reading === undefined || rows.length === 0
         ? nothing
         : html `<span aria-live="polite" part="live" role="status">${reading.keyed && row
-            ? spokenReading(row, reading.column, (cell) => reading.shows?.(cell) !== false, reading.position)
+            ? spokenReading(row, reading.column, (cell) => reading.shows?.(cell) !== false, reading.position, reading.state)
             : ''}</span>`;
     if (!row || rows.length === 0) {
         return live;

package/dist/utils/draw-tooltip/spoken-reading.d.ts

@@ -9,6 +9,7 @@ import type { Row } from '../read-series/read-series.js';
  * false for, which is a series a legend hid.
  *
  * `position` follows in brackets, such as "2 of 12", where the chart gives
- * one: last, so the reading is heard before where it stands.
+ * one: last, so the reading is heard before where it stands. `state`, a word
+ * such as "selected", follows it in the same brackets, "2 of 12, selected".
  */
-export declare const spokenReading: (row: Row, column?: number, shows?: (cell: number) => boolean, position?: string) => string;
+export declare const spokenReading: (row: Row, column?: number, shows?: (cell: number) => boolean, position?: string, state?: string) => string;

package/dist/utils/draw-tooltip/spoken-reading.js

@@ -1,5 +1,6 @@
-export const spokenReading = (row, column, shows = () => true, position = '') => {
-    const after = position === '' ? '' : ` (${position})`;
+export const spokenReading = (row, column, shows = () => true, position = '', state = '') => {
+    const bracket = [position, state].filter((word) => word !== '').join(', ');
+    const after = bracket === '' ? '' : ` (${bracket})`;
     const cell = column === undefined ? undefined : row.cells[column];
     if (cell) {
         return `${`${row.label}, ${cell.name} ${cell.text}`.trim()}${after}`;

package/dist/utils/elapsed-time/elapsed-time.d.ts

@@ -1,4 +1,4 @@
-import type { Relative } from '../relative-time/relative-time.js';
+import { type Relative } from '../relative-time/relative-time.js';
 /**
  * A formatter for one locale, kept.
  *

package/dist/utils/elapsed-time/elapsed-time.js

@@ -1,10 +1,7 @@
+import { UNITS as TIME_UNITS } from '../relative-time/relative-time.js';
 const held = new Map();
 const dated = new Map();
-const UNITS = [
-    { ms: 60_000, unit: 'minute' },
-    { ms: 3_600_000, unit: 'hour' },
-    { ms: 86_400_000, unit: 'day' },
-];
+const UNITS = TIME_UNITS.slice(1, 4);
 const HORIZON = 604_800_000;
 const compact = (locale) => {
     let found = held.get(locale);

package/dist/utils/export-parts/export-parts.d.ts

@@ -0,0 +1,14 @@
+/**
+ * An `exportparts` list that forwards each of an inner component's parts under
+ * a prefix: `exportParts(['button', 'text'], 'copy')` is
+ * `button: copy-button, text: copy-text`.
+ *
+ * **One list per inner component, written once beside it**, so the next part
+ * Button gains reaches every family that renders a Button. Ten lists written
+ * out by hand each had to be found and edited when Button gained `spinner`.
+ *
+ * The inner component's parts are its own declared list, never ones read from
+ * a rendered element: the attribute is written on the server too, before
+ * anything has rendered.
+ */
+export declare const exportParts: (parts: readonly string[], prefix: string) => string;

package/dist/utils/export-parts/export-parts.js

@@ -0,0 +1 @@
+export const exportParts = (parts, prefix) => parts.map((part) => `${part}: ${prefix}-${part}`).join(', ');

package/dist/utils/fill-template/fill-template.d.ts

@@ -11,3 +11,12 @@
  * shows up on the page as the mistake it is.
  */
 export declare const fillTemplate: (template: string, values: Record<string, string | number>) => string;
+/**
+ * A name made from a template and the words of what it acts on: `{key}` in
+ * the template filled with the words, or the words after the template where it
+ * has no `{key}`.
+ *
+ * The shape of every "Remove {label}" a page can override: written either way,
+ * "Remove" alone still names which one, as "Remove Draft".
+ */
+export declare const labelWith: (template: string, key: string, words: string) => string;

package/dist/utils/fill-template/fill-template.js

@@ -1 +1,4 @@
 export const fillTemplate = (template, values) => Object.entries(values).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, () => String(value)), template);
+export const labelWith = (template, key, words) => template.includes(`{${key}}`)
+    ? fillTemplate(template, { [key]: words })
+    : `${template} ${words}`.trim();

package/dist/utils/filter-marks/filter-marks.d.ts

@@ -0,0 +1,36 @@
+/** What the marks are called in `CSS.highlights`, and in `base.css`. */
+export declare const FILTER_MARK = "helix-filter-match";
+/**
+ * Where a needle sits inside an element, as a range over its text nodes, or
+ * nothing where it does not.
+ *
+ * Walked rather than measured off `textContent`, because the words may be split
+ * across several nodes and wrapped in elements of the consumer's, and a match
+ * can begin in one node and end in another. The offsets are mapped back onto
+ * the nodes they came from, so the range covers the real text either way.
+ * Matched without regard to case, as a filter matches.
+ */
+export declare const rangeOf: (root: Element, needle: string) => Range[];
+/**
+ * Marks where `needle` matches in each of `elements`, for `owner`, without
+ * touching the elements. An empty needle takes the owner's marks away, which
+ * is also what an owner leaving the page calls.
+ *
+ * **The Custom Highlight API paints a range, and nothing is inserted.** The
+ * words are usually the consumer's own light DOM, slotted through as many as
+ * two shadow roots, and wrapping the matched part in a `<mark>` would mean
+ * rewriting their content: markup they wrote would come back changed. So an
+ * option holding a link or an icon is marked as readily as one holding a bare
+ * word. Listbox marks what its filter matched this way, and so every family
+ * that filters through one: Select, Combobox, Command and Time Picker.
+ *
+ * **The rule that paints it lives in `base.css`**, as
+ * `::highlight(helix-filter-match)`, rather than in a component's styles. A
+ * highlight is styled from the tree its text lives in, and that text lives in
+ * the consumer's document.
+ *
+ * Nothing at all where the API is missing, as on a server, in a test
+ * environment or in an older browser: the text nodes are not walked for an
+ * answer nothing can paint.
+ */
+export declare const markMatches: (owner: Element, elements: Iterable<Element>, needle: string) => void;

package/dist/utils/filter-marks/filter-marks.js

@@ -0,0 +1,41 @@
+export const FILTER_MARK = 'helix-filter-match';
+const matched = new Map();
+export const rangeOf = (root, needle) => {
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    let whole = '';
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+        nodes.push([node, whole.length]);
+        whole += node.nodeValue;
+    }
+    const at = whole.toLowerCase().indexOf(needle.toLowerCase());
+    if (at < 0 || needle === '') {
+        return [];
+    }
+    const range = root.ownerDocument.createRange();
+    const [start, before] = nodes.findLast(([, from]) => from <= at);
+    range.setStart(start, at - before);
+    const end = at + needle.length;
+    const [last, under] = nodes.findLast(([, from]) => from < end);
+    range.setEnd(last, end - under);
+    return [range];
+};
+export const markMatches = (owner, elements, needle) => {
+    const registry = globalThis.CSS?.highlights;
+    if (registry === undefined) {
+        return;
+    }
+    if (needle === '') {
+        matched.delete(owner);
+    }
+    else {
+        matched.set(owner, [...elements].flatMap((element) => rangeOf(element, needle)));
+    }
+    const all = [...matched.values()].flat();
+    if (all.length === 0) {
+        registry.delete(FILTER_MARK);
+    }
+    else {
+        registry.set(FILTER_MARK, new Highlight(...all));
+    }
+};

package/dist/utils/focus-target/focus-target.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The element focus lands on when a trigger is focused: the trigger itself,
+ * or, for a component that delegates focus, the control inside its shadow root,
+ * followed down through any component nested there.
+ *
+ * **What a description or a name has to be written on**, since a reader hears
+ * the element that has focus: a tooltip describing a Helix button describes
+ * the `<button>` inside it, and a badge counting on an icon button counts on
+ * the same one. Read from outside through `shadowRoot`, so it works for any
+ * component with an open root and names none.
+ */
+export declare const focusTarget: (trigger: Element) => Element;

package/dist/utils/focus-target/focus-target.js

@@ -0,0 +1,9 @@
+const CONTROL = 'a[href], button, input, select, textarea, [contenteditable], [tabindex]:not([tabindex="-1"])';
+export const focusTarget = (trigger) => {
+    const root = trigger.shadowRoot;
+    if (!root?.delegatesFocus) {
+        return trigger;
+    }
+    const inner = root.querySelector(CONTROL);
+    return inner ? focusTarget(inner) : trigger;
+};