@fusion.dev/helix-core 0.147.0 → 0.148.0

package/dist/index.js

@@ -2,6 +2,7 @@ export { auditName } from '#audit-name';
 export { AriaForwardController, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, } from './controllers/arrival-controller/arrival-controller.js';
 export { ChartPointerController, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
+export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, } from './controllers/copy-controller/copy-controller.js';
 export { CountdownController, } 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, } from './controllers/indicator-controller/indicator-controller.js';
-export { KeyboardNavigationController, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { focusItemOf, KeyboardNavigationController, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
 export { MediaSessionController, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
-export { animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
+export { animationsFinished, animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
+export { OptionWindowController, } from './controllers/option-window-controller/option-window-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
 export { PopoverController, } from './controllers/popover-controller/popover-controller.js';
@@ -50,27 +52,37 @@ export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
 export { MixinViewport, } 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 { drawAutofill, } from './utils/autofill-select/autofill-select.js';
 export { addDays, addMonths, barredBy, localToday, monthOf, monthOut, 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, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
+export { keyNames } from './utils/chord/key-names.js';
 export { clamp } from './utils/clamp/clamp.js';
 export { clockLocale, dayPeriod, isTwelveHour, nearestTime, offeredTimes, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
 export { 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 { formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
+export { dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
 export { segmentName } from './utils/date-segments/date-segments.js';
 export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { 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, } from './utils/follow-link/follow-link.js';
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
+export { 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 { hostAria } from './utils/host-aria/host-aria.js';
@@ -87,7 +99,7 @@ export { markRegion } from './utils/mark-region/mark-region.js';
 export { copiesOf, 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 } from './utils/own-rule/own-rule.js';
 export { plainClick } from './utils/plain-click/plain-click.js';
@@ -102,7 +114,7 @@ export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/repo
 export { RUNTIME_LOG, RUNTIME_SLOT, 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 { requestChange, } from './utils/request-change/request-change.js';
+export { requestChange, requestValue, } from './utils/request-change/request-change.js';
 export { resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
 export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
 export { rovingStop } from './utils/roving-stop/roving-stop.js';
@@ -110,9 +122,9 @@ export { valueAt } from './utils/row-data/row-data.js';
 export { arranged, cycle, filter, format, ordered, parse, sort, window_, } from './utils/row-order/row-order.js';
 export { extent, linear } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
-export { scrollItemIntoView, scrollingAncestor, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
+export { 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, settleSwipe, snapTravel, swipeAxis,
 export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
 export { subscribe } from './utils/ticker/ticker.js';
 export { TONE_MARKS, toneMark, } from './utils/tone-marks/tone-marks.js';
+export { toolbarAround, toolbarAxis } from './utils/toolbar-around/toolbar-around.js';
 export { treeArrow } from './utils/tree-arrow/tree-arrow.js';
 export { Typeahead, 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 { 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';

package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts

@@ -178,6 +178,11 @@ export declare class MixinChartSourceInterface {
      * hid.
      */
     showsColumn(cell: number): boolean;
+    /**
+     * The heading of the column at this place in a row, read from the first row
+     * that has a cell there, or `''` where none has.
+     */
+    columnName(cell: number): string;
     /**
      * The number of readings, which the pointer position maps onto.
      */

package/dist/mixins/mixin-chart-source/mixin-chart-source.js

@@ -70,6 +70,9 @@ export const MixinChartSource = (Base) => {
             const name = this.sourceRows[0]?.cells[cell]?.name;
             return name === undefined || this.showsSeries(name);
         }
+        columnName(cell) {
+            return this.sourceRows.find((row) => row.cells[cell])?.cells[cell]?.name ?? '';
+        }
         get readings() {
             return this.sourceRows.length;
         }

package/dist/mixins/mixin-viewport/mixin-viewport.js

@@ -286,27 +286,28 @@ export const MixinViewport = (Base) => {
             if (!pan && !zoom && !fullscreen && more === nothing) {
                 return nothing;
             }
+            const [up, start, end, down] = ['up', 'start', 'end', 'down'].map((way) => this.panGlyph(way));
             return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
         ${pan
                 ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
-                  ${this.panGlyph('up')}
+                  <slot name="pan-up-icon">${up}</slot>
                 </button>
                 <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
-                  ${this.panGlyph('start')}
+                  <slot name="pan-start-icon">${start}</slot>
                 </button>
                 <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
-                  ${this.panGlyph('end')}
+                  <slot name="pan-end-icon">${end}</slot>
                 </button>
                 <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
-                  ${this.panGlyph('down')}
+                  <slot name="pan-down-icon">${down}</slot>
                 </button>`
                 : nothing}
         ${zoom
                 ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                  +
+                  <slot name="zoom-in-icon">+</slot>
                 </button>
                 <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                  −
+                  <slot name="zoom-out-icon">−</slot>
                 </button>`
                 : nothing}
         ${more}
@@ -318,7 +319,7 @@ export const MixinViewport = (Base) => {
                 type="button"
                 @click=${this.toggleFullscreen}
               >
-                ⤢
+                <slot name="fullscreen-icon">⤢</slot>
               </button>`
                 : nothing}
       </div>`;

package/dist/utils/assign-slots/assign-slots.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Sends each child to the slot it names, and every other child to the default
+ * slot, in a shadow root that assigns its slots by hand.
+ *
+ * **A root that assigns by hand routes nothing by itself**, its named slots
+ * included, so a header, a footer or an empty state slotted by name reaches
+ * nothing unless it is assigned here too. `place` says where a child goes when
+ * the host decides it, a row to its list or a card to the slot the layout drew
+ * for it, and a child it gives no slot to goes where its `slot` attribute says,
+ * as it would under the default assignment.
+ *
+ * **A slot already holding exactly what it would be given is left alone**, so
+ * calling this after every update fires no `slotchange` that nothing changed.
+ *
+ * Pair it with `ChildrenController`, which calls back when a child arrives
+ * after the first render, the case no `slotchange` reports.
+ */
+export declare const assignSlots: (root: ParentNode | null | undefined, children: Iterable<Element>, place?: (child: Element) => string | undefined) => void;

package/dist/utils/assign-slots/assign-slots.js

@@ -0,0 +1,14 @@
+export const assignSlots = (root, children, place = () => undefined) => {
+    const named = new Map();
+    for (const child of children) {
+        const name = place(child) ?? child.getAttribute('slot') ?? '';
+        named.set(name, [...(named.get(name) ?? []), child]);
+    }
+    for (const slot of root?.querySelectorAll?.('slot') ?? []) {
+        const wanted = named.get(slot.name) ?? [];
+        const had = slot.assignedNodes();
+        if (had.length !== wanted.length || had.some((one, at) => one !== wanted[at])) {
+            slot.assign?.(...wanted);
+        }
+    }
+};

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/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/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/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/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/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();