@fusion.dev/helix-core 0.147.0 → 0.148.0

package/dist/controllers/children-controller/children-controller.d.ts

@@ -0,0 +1,28 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Calls back whenever a child arrives at its host or leaves it.
+ *
+ * **A root that assigns its slots by hand needs this, and nothing else
+ * does.** `slotchange` fires when an assignment changes, and under
+ * `slotAssignment: 'manual'` the only thing that changes one is the host
+ * calling `assign`. A child appended after the first render reaches no slot,
+ * fires no `slotchange` and schedules no render, so it is drawn nowhere and
+ * counted by nothing: a notification added to a feed of three was never shown
+ * until some property changed. A default slot takes whatever is there and
+ * needs no watcher.
+ *
+ * **`childList` and not `subtree`.** A child rewriting its own text, a
+ * streaming chat turn on every frame, is no arrival, and a subtree watch would
+ * render the whole host again for each change.
+ *
+ * Asks the host for an update unless given something else to do. Watches
+ * from connection to disconnection, and again after a move.
+ */
+export declare class ChildrenController implements ReactiveController {
+    private readonly host;
+    private readonly changed;
+    private watcher;
+    constructor(host: ReactiveControllerHost & Node, changed?: () => void);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/controllers/children-controller/children-controller.js

@@ -0,0 +1,18 @@
+export class ChildrenController {
+    constructor(host, changed = () => host.requestUpdate()) {
+        this.host = host;
+        this.changed = changed;
+        this.watcher = undefined;
+        host.addController(this);
+    }
+    hostConnected() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.watcher ??= new MutationObserver(() => this.changed());
+        this.watcher.observe(this.host, { childList: true });
+    }
+    hostDisconnected() {
+        this.watcher?.disconnect();
+    }
+}

package/dist/controllers/countdown-controller/countdown-controller.d.ts

@@ -3,6 +3,13 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
 export interface CountdownOptions {
     /** Runs once the time is spent. */
     done: () => void;
+    /**
+     * Whether a hidden page holds the clock, as a pointer on the message does,
+     * so a timed message is not spent in a background tab. Counted as one hold
+     * however often the page hides, and a clock started while the page is
+     * hidden waits for it to show. Defaults to `false`.
+     */
+    holdWhileHidden?: boolean;
     /** Runs with `true` when the clock stops partway and `false` when it runs again. */
     paused?: (paused: boolean) => void;
 }
@@ -23,7 +30,10 @@ export interface CountdownOptions {
  * **Leaving the page pauses it**, keeping the time already spent, and drops
  * the holds, since a pointer or focus on a detached element never leaves it.
  * Coming back does not resume on its own: the host says whether it should,
- * such as only while it is still showing. `DelayController` is the other wait
+ * such as only while it is still showing.
+ *
+ * **A hidden page holds it too, where the host asks** with `holdWhileHidden`:
+ * RAC's toast queue stops its timers while the window is in the background. `DelayController` is the other wait
  * in core, for a wait that starts over and forgets itself on leaving.
  */
 export declare class CountdownController implements ReactiveController {
@@ -35,6 +45,10 @@ export declare class CountdownController implements ReactiveController {
     private timer;
     /** How many reasons there are to hold the clock. */
     private holds;
+    /** Whether a hidden page is one of the holds, with `holdWhileHidden`. */
+    private hidden;
+    /** Holds the clock as the page hides, and lets it go as the page shows. */
+    private readonly handleVisibility;
     constructor(host: ReactiveControllerHost, options: CountdownOptions);
     /** Whether the clock is running now. */
     get running(): boolean;

package/dist/controllers/countdown-controller/countdown-controller.js

@@ -2,15 +2,37 @@ export class CountdownController {
     constructor(host, options) {
         this.options = options;
         this.holds = 0;
+        this.hidden = false;
+        this.handleVisibility = () => {
+            if (document.hidden === this.hidden) {
+                return;
+            }
+            this.hidden = document.hidden;
+            if (this.hidden) {
+                this.hold();
+            }
+            else {
+                this.release();
+            }
+        };
         host.addController(this);
     }
     get running() {
         return this.timer !== undefined;
     }
-    hostConnected() { }
+    hostConnected() {
+        if (this.options.holdWhileHidden && typeof document !== 'undefined') {
+            document.addEventListener('visibilitychange', this.handleVisibility);
+            this.handleVisibility();
+        }
+    }
     hostDisconnected() {
         this.pause();
         this.holds = 0;
+        this.hidden = false;
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this.handleVisibility);
+        }
     }
     start(ms) {
         if (ms === undefined || !(ms > 0)) {
@@ -30,7 +52,10 @@ export class CountdownController {
         this.options.paused?.(true);
     }
     resume() {
-        if (this.timer !== undefined || this.remaining === undefined || this.remaining <= 0) {
+        if (this.hidden ||
+            this.timer !== undefined ||
+            this.remaining === undefined ||
+            this.remaining <= 0) {
             return;
         }
         this.startedAt = Date.now();

package/dist/controllers/floating-controller/floating-controller.d.ts

@@ -97,6 +97,17 @@ export interface FloatingOptions {
      */
     within?: () => Element | null | undefined;
 }
+/**
+ * How wide a panel that matches its anchor is drawn: the anchor's width, no
+ * wider than the room the panel has inside the window's margins.
+ *
+ * **A trigger as wide as the window gave a list as wide as the window**, and
+ * `shift` keeps a margin it then cannot keep: a Select spanning a phone with no
+ * gutter opened its list 8 pixels past the end edge, on both sides of the
+ * window at once. The room is Floating UI's `availableWidth` after the shift,
+ * so a panel that fits is the anchor's width exactly, as before.
+ */
+export declare const matchedInlineSize: (anchor: number, room: number) => number;
 /**
  * Places one element against another, and keeps it there.
  *
@@ -123,7 +134,7 @@ export interface FloatingOptions {
  * package and none of them is private. the `hooks` rule pairs a documented
  * hook with a rule that reads one, in both directions.
  *
- * @cssproperty --floating-anchor-inline-size - The anchor's width, for a panel that matches it.
+ * @cssproperty --floating-anchor-inline-size - The anchor's width, for a panel that matches it, and never wider than the room the panel has inside the window's margins.
  * @cssproperty --floating-arrow-x - Where the arrow meets the anchor, from the panel's left edge in both text directions.
  * @cssproperty --floating-arrow-y - Where the arrow meets the anchor, from the panel's top edge.
  * @cssproperty --floating-available-block-size - How much room is left below, for a panel that scrolls.

package/dist/controllers/floating-controller/floating-controller.js

@@ -20,6 +20,7 @@ const corner = (floating) => {
     }
     return largest;
 };
+export const matchedInlineSize = (anchor, room) => Math.round(Math.max(0, Math.min(anchor, room)));
 export class FloatingController {
     constructor(host, options) {
         this.run = 0;
@@ -53,7 +54,7 @@ export class FloatingController {
                     apply: ({ availableHeight, availableWidth, elements, rects }) => {
                         room = availableWidth;
                         elements.floating.style.setProperty('--floating-available-block-size', `${Math.round(availableHeight)}px`);
-                        elements.floating.style.setProperty('--floating-anchor-inline-size', `${Math.round(rects.reference.width)}px`);
+                        elements.floating.style.setProperty('--floating-anchor-inline-size', `${matchedInlineSize(rects.reference.width, availableWidth)}px`);
                     },
                     padding: 8,
                 }));

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.d.ts

@@ -25,6 +25,31 @@ export interface NavigableItem {
      */
     readonly words?: string;
 }
+/** What `focusItemOf` reads of an element, where its defaults do not fit. */
+export interface FocusItemOptions {
+    /** Whether the item is skipped. Defaults to `false`. */
+    disabled?: boolean;
+    /** Moves focus to the item. Defaults to the element's own `focus()`. */
+    focus?: () => void;
+    /**
+     * Whether a node is the item, for `origin: 'focus'`. Defaults to the element
+     * and anything inside it; an item whose children are content of their own,
+     * an accordion section's panel, answers for itself alone.
+     */
+    owns?: (node: Node | null) => boolean;
+    /** The words a reader types the start of. */
+    words?: string;
+}
+/**
+ * An item that is only ever focused: arrows move between such items and
+ * nothing is chosen on arrival, the shape of a toolbar, a megamenu bar or a
+ * legend.
+ *
+ * Eight families wrote the same object literal by hand, `select` a no-op and
+ * `selected` false, and an item that forgot one of them type-checked
+ * wherever its `contains` came from an element.
+ */
+export declare const focusItemOf: (element: HTMLElement, options?: FocusItemOptions) => NavigableItem;
 /** Where a move starts from: the item that has focus, or the chosen item. */
 export type KeyboardOrigin = 'focus' | 'selection';
 /** How the controller is told what it is moving through. */

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.js

@@ -1,6 +1,14 @@
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { keyClaimed } from '../../utils/key-claimed/key-claimed.js';
 import { typesCharacter } from '../../utils/typeahead/typeahead.js';
+export const focusItemOf = (element, options = {}) => ({
+    contains: options.owns ?? ((node) => element.contains(node)),
+    disabled: options.disabled ?? false,
+    focusItem: options.focus ?? (() => element.focus()),
+    select: () => { },
+    selected: false,
+    ...(options.words === undefined ? {} : { words: options.words }),
+});
 const KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 export class KeyboardNavigationController {
     constructor(host, { items, origin = 'selection', reserved = () => [], selects = () => true, typeahead, wrap = true, }) {

package/dist/controllers/open-phase-controller/open-phase-controller.d.ts

@@ -14,6 +14,16 @@ export interface OpenPhaseOptions {
     /** The element whose animations are the entrance and the exit. */
     surface: () => Element | null | undefined;
 }
+/**
+ * Resolves once every animation running on an element and inside it has
+ * finished, or at once where none is running.
+ *
+ * **Asked now, with no frame waited first**, for an exit that is already
+ * running when the caller asks: a section closing, a message leaving. A
+ * canceled animation counts as finished. `animationsSettled` waits two frames
+ * first, for an entrance that has not started yet.
+ */
+export declare const animationsFinished: (element: Element | null | undefined) => Promise<void>;
 /**
  * Resolves once an element's animations have finished, or two frames on where
  * it has none.

package/dist/controllers/open-phase-controller/open-phase-controller.js

@@ -1,3 +1,9 @@
+export const animationsFinished = async (element) => {
+    if (!element || typeof element.getAnimations !== 'function') {
+        return;
+    }
+    await Promise.allSettled(element.getAnimations({ subtree: true }).map((one) => one.finished));
+};
 export const animationsSettled = async (element) => {
     const frame = () => new Promise((resolve) => {
         if (typeof requestAnimationFrame === 'function') {
@@ -9,10 +15,7 @@ export const animationsSettled = async (element) => {
     });
     await frame();
     await frame();
-    if (!element || typeof element.getAnimations !== 'function') {
-        return;
-    }
-    await Promise.allSettled(element.getAnimations({ subtree: true }).map((one) => one.finished));
+    await animationsFinished(element);
 };
 export class OpenPhaseController {
     constructor(host, options) {

package/dist/controllers/option-window-controller/option-window-controller.d.ts

@@ -0,0 +1,96 @@
+import { type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
+import { type DataOption, type DataOptionItem } from '../../utils/data-options/data-options.js';
+/** What the controller needs of a list whose options can come as data. */
+export interface OptionWindowOptions {
+    /** The value of the option the keyboard is on, which is kept drawn. */
+    current: () => string;
+    /** The options as data, or nothing for a list of child elements. */
+    items: () => readonly DataOptionItem[] | undefined;
+}
+/**
+ * Draws the options of a list handed over as data, a window of them at a
+ * time, for a list too long to draw whole.
+ *
+ * **The list keeps its logic and this keeps the drawing.** `records` are the
+ * options as the list reads them, built once per `items` array: the keyboard,
+ * the typeahead, the filter and the value work over all of them, and the list
+ * writes `hidden`, `selected` and `active` onto them as it would onto its
+ * option elements. This draws the ones in the window as option elements of
+ * the host's tier, between two spacers that hold the room of the rest, through
+ * `VirtualizeController`.
+ *
+ * **The option the keyboard is on is always drawn**, wherever the window is,
+ * because `aria-activedescendant` points at an element. `follow` brings it into
+ * view when it moves, in two steps where it is far: the arithmetic scrolls the
+ * window to it, and the host scrolls the drawn element into view on the next
+ * update, as it does for a list of children.
+ *
+ * **The scrolling box is the element `render` was drawn into**, so the host
+ * says nothing about it: it puts the template inside its box. A host's
+ * `isDisabled`, or else its `disabled`, holds every drawn option down.
+ *
+ * Listbox uses it, and so every list that holds a Listbox can.
+ */
+export declare class OptionWindowController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The option elements drawn on the last update, in order. */
+    drawn: HTMLElement[];
+    /** The `items` array the records were built from. */
+    private source;
+    private built;
+    /** Which slice is drawn, made the first time there are records. */
+    private virtualize;
+    /** Where in the shown records the highlight is: `-1` for nowhere. */
+    private kept;
+    /** Whether the highlight is still being brought into view. */
+    private following;
+    /**
+     * The window as it was last drawn, which `follow` reads: the controller's
+     * own may have moved since, measured after the draw, and an option is in
+     * its place only in the window that drew it.
+     */
+    private span;
+    constructor(host: ReactiveControllerHost & HTMLElement & {
+        disabled?: boolean;
+        isDisabled?: boolean;
+    }, options: OptionWindowOptions);
+    /**
+     * The options as the list reads them, or undefined for a list of children.
+     *
+     * Built when `items` is a new array, so a page that changes the set hands
+     * over a new one, as a property of any framework is set. The windowing is
+     * made then too, and only then: a list of children observes no size and
+     * listens to no scroll it does not need. Its estimate of 32 pixels is
+     * corrected by the rows it draws, on first sight.
+     */
+    get records(): DataOption[] | undefined;
+    /** The box the window is drawn into, inside the scrolling one. */
+    private box;
+    /** The records a filter has left showing. */
+    private get shown();
+    /**
+     * The spacers and the box the window is drawn in, for the host's scrolling
+     * box, or undefined for a list of children, which draws its slot instead.
+     *
+     * A spacer never shrinks: in a column of rows that flexes, it shrank to
+     * nothing, and the list scrolled for a screenful.
+     */
+    render(): TemplateResult | undefined;
+    /**
+     * Draws the window once the render has put its box in place, then measures
+     * it again. Before `VirtualizeController`'s own pass, which reads the rows.
+     */
+    hostUpdated(): void;
+    /**
+     * Brings the highlight into view where `moved` says it moved, and answers
+     * whether its drawn element is in place for the host to scroll to now.
+     *
+     * Only when it moved, or the filter did: the window moves on every scroll,
+     * and following then would pull a reader scrolling with a wheel back to the
+     * highlight.
+     */
+    follow(moved: boolean): boolean;
+    /** Scrolls the box to put the option of `value` in its middle. */
+    center(value: string): void;
+}

package/dist/controllers/option-window-controller/option-window-controller.js

@@ -0,0 +1,81 @@
+import { html, } from 'lit';
+import { dataOptions, drawOptions, windowOf, } from '../../utils/data-options/data-options.js';
+import { VirtualizeController } from '../virtualize-controller/virtualize-controller.js';
+export class OptionWindowController {
+    constructor(host, options) {
+        this.drawn = [];
+        this.kept = -1;
+        this.following = false;
+        this.span = { first: 0, last: 0 };
+        this.host = host;
+        this.options = options;
+        host.addController(this);
+    }
+    get records() {
+        const items = this.options.items();
+        if (items !== this.source) {
+            this.source = items;
+            this.built = items && dataOptions(items);
+            if (items) {
+                this.virtualize ??= new VirtualizeController(this.host, {
+                    container: () => this.box()?.parentElement,
+                    count: () => this.shown.length,
+                    estimate: () => 32,
+                    measured: () => false,
+                    rows: () => this.drawn.map((element) => ({
+                        element,
+                        index: Number(element.getAttribute('aria-posinset')) - 1,
+                    })),
+                });
+            }
+        }
+        return this.built;
+    }
+    box() {
+        return this.host.shadowRoot?.querySelector('[data-rows]');
+    }
+    get shown() {
+        return this.records?.filter((record) => !record.hidden) ?? [];
+    }
+    render() {
+        if (!this.records || !this.virtualize) {
+            return undefined;
+        }
+        const current = this.options.current();
+        this.kept = this.shown.findIndex((record) => record.value === current);
+        const { after, before } = this.virtualize.spacers(this.kept < 0 ? undefined : this.kept);
+        return html `<div style="flex: none; block-size: ${before}px"></div>
+      <div data-rows></div>
+      <div style="flex: none; block-size: ${after}px"></div>`;
+    }
+    hostUpdated() {
+        const box = this.box();
+        if (!this.records || !this.virtualize || !box) {
+            return;
+        }
+        const { first, last } = this.virtualize.window;
+        const shown = this.shown;
+        this.span = { first, last };
+        this.drawn = drawOptions(box, `${this.host.constructor.tier}option`, shown, windowOf(first, last, shown.length, this.kept), Boolean(this.host.isDisabled ?? this.host.disabled));
+        this.virtualize.measure();
+    }
+    follow(moved) {
+        this.following ||= moved;
+        if (!this.virtualize || !this.following || this.kept < 0) {
+            return false;
+        }
+        const { first, last } = this.span;
+        if (this.kept < first || this.kept >= last) {
+            this.virtualize.reveal(this.kept);
+            return false;
+        }
+        this.following = false;
+        return true;
+    }
+    center(value) {
+        const at = this.shown.findIndex((record) => record.value === value);
+        if (at >= 0) {
+            this.virtualize?.reveal(at, 0, { align: 'center' });
+        }
+    }
+}

package/dist/controllers/popover-controller/popover-controller.js

@@ -44,7 +44,7 @@ export class PopoverController {
     }
     show() {
         const surface = this.options.surface();
-        if (this.shown || !surface) {
+        if (this.shown || !surface?.isConnected) {
             return;
         }
         this.shown = true;

package/dist/helix-element/helix-element.d.ts

@@ -1,5 +1,5 @@
 import { type CSSResultOrNative, LitElement, type PropertyValues } from 'lit';
-import { type StaticValue } from 'lit/static-html.js';
+import type { StaticValue } from 'lit/static-html.js';
 /**
  * @summary Base class every Helix element extends.
  *
@@ -46,10 +46,19 @@ export declare class HelixElement extends LitElement {
     /**
      * One composed tag, as a static value a template can interpolate.
      *
-     * `unsafeStatic` is safe by construction: the name is a literal in our own
-     * source and the prefix is one of two strings this class defines. Called per
-     * render and not cached, which costs nothing, because `static-html` keys its
-     * template cache on the joined string rather than on the object.
+     * What `unsafeStatic` returns, safe by construction: the name is a literal in
+     * our own source and the prefix is one of two strings this class defines.
+     * Called per render and not cached, which costs nothing, because
+     * `static-html` keys its template cache on the joined string rather than on
+     * the object.
+     *
+     * **Written out rather than imported, for every element that never renders
+     * one.** `lit/static-html.js` declares no side effects, so importing
+     * `unsafeStatic` alone kept the module's three `withStatic` calls in every
+     * bundle: about 210 bytes gzipped on each of the families that compose no
+     * tag, Divider and Badge among them. The value is lit's cross-copy protocol,
+     * keyed by `Symbol.for('')` so that two copies of lit on a page read each
+     * other's, and a spec holds it equal to `unsafeStatic`'s.
      */
     protected tag(name: string): StaticValue;
     /**

package/dist/helix-element/helix-element.js

@@ -1,5 +1,4 @@
 import { LitElement, unsafeCSS } from 'lit';
-import { unsafeStatic } from 'lit/static-html.js';
 import { measuring, reportRender } from '../utils/report-render/report-render.js';
 import { noteVersion, reportUsage } from '../utils/report-usage/report-usage.js';
 import { applyReactProperties, auditReactProps, bindReactHandler, reactPropsOf, } from './react-bridge.js';
@@ -15,7 +14,10 @@ const LOOK_FOR = 96;
 export class HelixElement extends LitElement {
     static { this.tier = 'helix-headless-'; }
     tag(name) {
-        return unsafeStatic(`${this.constructor.tier}${name}`);
+        return {
+            _$litStatic$: `${this.constructor.tier}${name}`,
+            r: Symbol.for(''),
+        };
     }
     partNamed(name) {
         const root = this.renderRoot;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { auditName } from '#audit-name';
 export { AriaForwardController, type AriaForwardOptions, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, type ArrivalOptions, } from './controllers/arrival-controller/arrival-controller.js';
 export { ChartPointerController, type ChartPointerHost, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
+export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, type CopyOptions, } from './controllers/copy-controller/copy-controller.js';
 export { CountdownController, type CountdownOptions, } from './controllers/countdown-controller/countdown-controller.js';
@@ -16,9 +17,10 @@ export { FullscreenController } from './controllers/fullscreen-controller/fullsc
 export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
 export { IdleController } from './controllers/idle-controller/idle-controller.js';
 export { IndicatorController, type IndicatorOptions, } from './controllers/indicator-controller/indicator-controller.js';
-export { KeyboardNavigationController, type KeyboardNavigationOptions, type KeyboardOrigin, type NavigableItem, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { type FocusItemOptions, focusItemOf, KeyboardNavigationController, type KeyboardNavigationOptions, type KeyboardOrigin, type NavigableItem, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
 export { MediaSessionController, type SessionHandlers, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
-export { animationsSettled, type OpenPhase, OpenPhaseController, type OpenPhaseOptions, } from './controllers/open-phase-controller/open-phase-controller.js';
+export { animationsFinished, animationsSettled, type OpenPhase, OpenPhaseController, type OpenPhaseOptions, } from './controllers/open-phase-controller/open-phase-controller.js';
+export { OptionWindowController, type OptionWindowOptions, } from './controllers/option-window-controller/option-window-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, type PaintGateOptions, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
 export { PopoverController, type PopoverOptions, } from './controllers/popover-controller/popover-controller.js';
@@ -50,27 +52,37 @@ export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mi
 export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
+export { assignSlots } from './utils/assign-slots/assign-slots.js';
+export { type DrawAutofillOptions, drawAutofill, } from './utils/autofill-select/autofill-select.js';
 export { addDays, addMonths, type Barring, barredBy, type CalendarView, localToday, monthOf, monthOut, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
+export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
+export { type KeyNames, keyNames } from './utils/chord/key-names.js';
 export { clamp } from './utils/clamp/clamp.js';
 export { clockLocale, dayPeriod, type HourCycle, isTwelveHour, nearestTime, offeredTimes, type TimeFault, type TimeRules, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
 export { type ColorWords, colorName, hueName } from './utils/color-name/color-name.js';
+export { columnStep } from './utils/column-step/column-step.js';
 export { countLabel } from './utils/count-label/count-label.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
+export { type DataOption, type DataOptionItem, dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
 export { segmentName } from './utils/date-segments/date-segments.js';
 export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
-export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
+export { CHART_PLOT, drawTooltip, type ReadingCursor } from './utils/draw-tooltip/draw-tooltip.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
-export { fillTemplate } from './utils/fill-template/fill-template.js';
-export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
+export { exportParts } from './utils/export-parts/export-parts.js';
+export { fillTemplate, labelWith } from './utils/fill-template/fill-template.js';
+export { FILTER_MARK, markMatches, rangeOf } from './utils/filter-marks/filter-marks.js';
+export { focusTarget } from './utils/focus-target/focus-target.js';
+export { deepActiveElement, deepContains, focusableElements, PRESSABLE, pressedOwnControl, } from './utils/focusable-elements/focusable-elements.js';
 export { afterLinkFollowed, followLink, type LinkModifiers, type LinkTarget, } from './utils/follow-link/follow-link.js';
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
+export { type GridBounds, type GridKeys, type GridPlace, gridMove, pageRows, } from './utils/grid-move/grid-move.js';
 export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
 export { headingLevel } from './utils/heading-level/heading-level.js';
 export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
@@ -87,7 +99,7 @@ export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.
 export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
 export { nameText } from './utils/name-text/name-text.js';
 export { nearest } from './utils/nearest/nearest.js';
-export { formatNumber, parseNumber, readingText } from './utils/number-format/number-format.js';
+export { formatNumber, formatPercent, parseNumber, readingText, } from './utils/number-format/number-format.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { applyOwnRule, type OwnRule } from './utils/own-rule/own-rule.js';
 export { plainClick } from './utils/plain-click/plain-click.js';
@@ -101,8 +113,8 @@ export { type Relative, type RelativeOptions, relativeTime, } from './utils/rela
 export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
 export { RUNTIME_LOG, RUNTIME_SLOT, type RuntimeEvent, type RuntimeKind, reportRuntime, } from './utils/report-runtime/report-runtime.js';
 export { noteVersion, reportUsage, USAGE_SLOT, VERSIONS_SLOT, } from './utils/report-usage/report-usage.js';
-export { reportValues } from './utils/report-values/report-values.js';
-export { type ChangeRequestOptions, requestChange, } from './utils/request-change/request-change.js';
+export { type ReportValuesOptions, reportValues } from './utils/report-values/report-values.js';
+export { type ChangeRequestOptions, requestChange, requestValue, } from './utils/request-change/request-change.js';
 export { type ActivatableItem, resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
 export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
 export { type RovingOptions, rovingStop } from './utils/roving-stop/roving-stop.js';
@@ -110,9 +122,9 @@ export { valueAt } from './utils/row-data/row-data.js';
 export { type Arranged, type Axis, arranged, cycle, type DataRow, filter, format, type Ordered, ordered, parse, type Sort, sort, window_, } from './utils/row-order/row-order.js';
 export { extent, linear, type Scale } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
-export { type ScrollerOptions, type ScrollItemOptions, scrollItemIntoView, scrollingAncestor, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
+export { type ScrollerOptions, type ScrollItemOptions, type ScrollRoomOptions, scrollItemIntoView, scrollingAncestor, scrollRoom, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
 export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scroll-lock.js';
-export { slotFilled } from './utils/slot-filled/slot-filled.js';
+export { slotFilled, slotNamed } from './utils/slot-filled/slot-filled.js';
 export { SlottedGlyph } from './utils/slotted-glyph/slotted-glyph.js';
 export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';
@@ -120,9 +132,11 @@ export { edgeOffset, FLING, parseSnapPoints, type SwipeAxis, type SwipeEdge, typ
 export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
 export { subscribe } from './utils/ticker/ticker.js';
 export { type HelixStatusTone, TONE_MARKS, type ToneMark, toneMark, } from './utils/tone-marks/tone-marks.js';
+export { toolbarAround, toolbarAxis } from './utils/toolbar-around/toolbar-around.js';
 export { type TreeArrow, type TreeArrowRow, treeArrow } from './utils/tree-arrow/tree-arrow.js';
 export { Typeahead, type TypeaheadBy, typeaheadBy, typeaheadByWords, typesCharacter, } from './utils/typeahead/typeahead.js';
 export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
+export { type PickerVerdict, verdictFlags } from './utils/verdict-flags/verdict-flags.js';
 export { watchTheme } from './utils/watch-theme/watch-theme.js';
 export { wordsConverter } from './utils/words-converter/words-converter.js';
 export { writeClock, writeTime } from './utils/write-time/write-time.js';