@fusion.dev/helix-core 0.147.0 → 0.149.0

package/dist/mixins/mixin-tokens/mixin-tokens.d.ts

@@ -52,6 +52,11 @@ export declare class MixinTokensInterface {
      * either way and this is what says what pressing it does.
      */
     collapseLabel: string;
+    /**
+     * The count of the tokens past `max-tags`, as it is shown, with `{count}`
+     * for the number, written in the element's locale. `+{count}` by default.
+     */
+    restText: string;
     /**
      * The cap in force right now, which is none while the reader has expanded it.
      *

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

@@ -8,6 +8,7 @@ import { caretUp } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { drawIcon } from '../../utils/draw-icon/draw-icon.js';
+import { formatWords, words } from '../../words/words.js';
 export const MixinTokens = (Base) => {
     class TokensElement extends Base {
         constructor() {
@@ -16,11 +17,13 @@ export const MixinTokens = (Base) => {
             this.expandable = false;
             this.expandLabel = 'Show all';
             this.maxTags = 0;
+            this.restText = '+{count}';
             this.expanded = false;
             this.toggleExpanded = () => {
                 this.expanded = !this.expanded;
             };
         }
+        static { this.words = ''; }
         get shownLimit() {
             return this.expanded ? 0 : this.maxTags;
         }
@@ -29,7 +32,9 @@ export const MixinTokens = (Base) => {
         }
         renderRest(over) {
             if (!this.expandable) {
-                return over > 0 ? html `<span part="rest">${`+${over}`}</span>` : nothing;
+                return over > 0
+                    ? html `<span part="rest">${formatWords(this, 'restText', { count: over })}</span>`
+                    : nothing;
             }
             if (over < 1 && !this.expanded) {
                 return nothing;
@@ -39,7 +44,7 @@ export const MixinTokens = (Base) => {
         type="button"
         aria-label=${this.expanded ? this.collapseLabel : this.expandLabel}
         @click=${this.toggleExpanded}
-        >${this.expanded ? drawIcon(caretUp) : `+${over}`}</button
+        >${this.expanded ? drawIcon(caretUp) : formatWords(this, 'restText', { count: over })}</button
       >`;
         }
         hideOverflow(slot) {
@@ -64,17 +69,23 @@ export const MixinTokens = (Base) => {
         removeLastToken() { }
     }
     __decorate([
+        words,
         property({ attribute: 'collapse-label' })
     ], TokensElement.prototype, "collapseLabel", void 0);
     __decorate([
         property({ type: Boolean })
     ], TokensElement.prototype, "expandable", void 0);
     __decorate([
+        words,
         property({ attribute: 'expand-label' })
     ], TokensElement.prototype, "expandLabel", void 0);
     __decorate([
         property({ attribute: 'max-tags', type: Number })
     ], TokensElement.prototype, "maxTags", void 0);
+    __decorate([
+        words,
+        property({ attribute: 'rest-text' })
+    ], TokensElement.prototype, "restText", void 0);
     __decorate([
         state()
     ], TokensElement.prototype, "expanded", void 0);

package/dist/mixins/mixin-viewport/mixin-viewport.d.ts

@@ -15,7 +15,13 @@ export type ViewportGestures = 'activate' | 'always' | 'cooperative';
  * the cooperative set, or none, while an `activate` surface waits to be pressed.
  */
 export type ViewportGestureMode = 'cooperative' | 'free' | 'off';
-/** The words a surface says about its gestures, where the page does not say them. */
+/**
+ * The words a surface says about its gestures.
+ *
+ * @deprecated Each family declares its gesture words as word properties,
+ * `activate-hint-label` and its three, which a page registers by locale.
+ * Removed in the next major version.
+ */
 export interface ViewportGestureLabels {
     /** The hint while an `activate` surface waits to be pressed. */
     activate: string;
@@ -38,18 +44,16 @@ export declare class ViewportElement {
     fullscreenLabel: string;
     /** Which gestures the surface takes from the page. Unset is the family's own. */
     gestures?: ViewportGestures;
-    /** The hint while a surface with `gestures="activate"` waits to be pressed. */
-    activateHintLabel?: string;
-    /** The hint when one finger swipes over a surface with `gestures="cooperative"`. */
-    twoFingerHintLabel?: string;
-    /** The line while a surface with `gestures="activate"` has the gestures. */
-    usingLabel?: string;
-    /** The hint when the wheel scrolls past a surface with `gestures="cooperative"`, with `{key}`. */
-    wheelHintLabel?: string;
+    /** The hint while a surface with `gestures="activate"` waits to be pressed, a word property each family declares. */
+    activateHintLabel: string;
+    /** The hint when one finger swipes over a surface with `gestures="cooperative"`, a word property each family declares. */
+    twoFingerHintLabel: string;
+    /** The line while a surface with `gestures="activate"` has the gestures, a word property each family declares. */
+    usingLabel: string;
+    /** The hint when the wheel scrolls past a surface with `gestures="cooperative"`, with `{key}`, a word property each family declares. */
+    wheelHintLabel: string;
     /** @internal Which gestures the thing drawing the surface takes right now. */
     get gestureMode(): ViewportGestureMode;
-    /** What the surface says about its gestures where the page does not say it, which each family says for itself. */
-    protected get restingGestureLabels(): ViewportGestureLabels;
     /** Whether an `activate` surface has been pressed, and has the gestures. */
     protected gesturesTaken: boolean;
     /** Whether a gesture that started with this event is the surface's to answer. */
@@ -92,10 +96,8 @@ export declare class ViewportElement {
     protected readonly fullscreen: FullscreenController;
     /** The key relay, bound by the family's own frame. */
     protected handleKeydown: (event: KeyboardEvent) => void;
-    /** The name of the group of controls, read by screen readers. */
-    controlsLabel: string | undefined;
-    /** What the group of controls is called where the page does not say, which each family says for itself. */
-    protected get restingControlsLabel(): string;
+    /** The name of the group of controls, read by screen readers, a word property each family declares. */
+    controlsLabel: string;
     /** The pan event, built and not dispatched, for a family that names its own. */
     protected panEvent(detail: ViewportPanDetail): Event;
     /** The zoom event, built and not dispatched, for a family that names its own. */

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

@@ -8,9 +8,9 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
-import { fillTemplate } from '../../utils/fill-template/fill-template.js';
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { isRtl } from '../../utils/is-rtl/is-rtl.js';
+import { formatWords, words } from '../../words/words.js';
 const HINT_SHOWS = 1600;
 export const MixinViewport = (Base) => {
     class Viewport extends Base {
@@ -38,11 +38,10 @@ export const MixinViewport = (Base) => {
             this.handleGestureWheel = (event) => {
                 if (this.gestures === 'cooperative' && !(event.ctrlKey || event.metaKey)) {
                     const mac = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
-                    const words = this.wheelHintLabel ?? this.restingGestureLabels.wheel;
-                    this.showHint(fillTemplate(words, { key: mac ? '⌘' : 'Ctrl' }), event);
+                    this.showHint(formatWords(this, 'wheelHintLabel', { key: mac ? '⌘' : 'Ctrl' }), event);
                 }
                 else if (this.gestures === 'activate' && !this.gesturesTaken) {
-                    this.showHint(this.activateHintLabel ?? this.restingGestureLabels.activate, event);
+                    this.showHint(this.activateHintLabel, event);
                 }
             };
             this.handleGestureTouch = (event) => {
@@ -51,10 +50,10 @@ export const MixinViewport = (Base) => {
                     return;
                 }
                 if (this.gestures === 'cooperative') {
-                    this.showHint(this.twoFingerHintLabel ?? this.restingGestureLabels.twoFinger, finger);
+                    this.showHint(this.twoFingerHintLabel, finger);
                 }
                 else if (this.gestures === 'activate' && !this.gesturesTaken) {
-                    this.showHint(this.activateHintLabel ?? this.restingGestureLabels.activate, finger);
+                    this.showHint(this.activateHintLabel, finger);
                 }
             };
             this.handleTake = (event) => {
@@ -133,17 +132,7 @@ export const MixinViewport = (Base) => {
                 }
             };
         }
-        get restingControlsLabel() {
-            return 'View controls';
-        }
-        get restingGestureLabels() {
-            return {
-                activate: 'Press to use it',
-                twoFinger: 'Use two fingers to move it',
-                using: 'In use. Press Escape to scroll the page again.',
-                wheel: 'Use {key} and scroll to zoom',
-            };
-        }
+        static { this.words = ''; }
         get gestureMode() {
             if (this.gestures === 'cooperative') {
                 return 'cooperative';
@@ -215,7 +204,7 @@ export const MixinViewport = (Base) => {
           ?hidden=${this.hint === ''}
           style=${at ? `--_viewport-hint-x: ${(at.x * 100).toFixed(2)}%; --_viewport-hint-y: ${(at.y * 100).toFixed(2)}%` : nothing}
         >${this.hint}</div>
-        <div part="gesture-status" aria-hidden="true" ?hidden=${!this.gesturesTaken}>${this.usingLabel ?? this.restingGestureLabels.using}</div>`;
+        <div part="gesture-status" aria-hidden="true" ?hidden=${!this.gesturesTaken}>${this.usingLabel}</div>`;
         }
         panEvent(_detail) {
             throw new Error(`<${this.localName}> composes MixinViewport and must implement panEvent(), the surface naming no event of its own.`);
@@ -286,27 +275,28 @@ export const MixinViewport = (Base) => {
             if (!pan && !zoom && !fullscreen && more === nothing) {
                 return nothing;
             }
-            return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
+            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}>
         ${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,25 +308,20 @@ export const MixinViewport = (Base) => {
                 type="button"
                 @click=${this.toggleFullscreen}
               >
-                ⤢
+                <slot name="fullscreen-icon">⤢</slot>
               </button>`
                 : nothing}
       </div>`;
         }
     }
-    __decorate([
-        property({ attribute: 'activate-hint-label' })
-    ], Viewport.prototype, "activateHintLabel", void 0);
     __decorate([
         property({ reflect: true })
     ], Viewport.prototype, "controls", void 0);
-    __decorate([
-        property({ attribute: 'controls-label' })
-    ], Viewport.prototype, "controlsLabel", void 0);
     __decorate([
         property({ attribute: 'controls-placement', reflect: true })
     ], Viewport.prototype, "controlsPlacement", void 0);
     __decorate([
+        words,
         property({ attribute: 'fullscreen-label' })
     ], Viewport.prototype, "fullscreenLabel", void 0);
     __decorate([
@@ -346,30 +331,26 @@ export const MixinViewport = (Base) => {
         property({ attribute: 'idle-delay', type: Number })
     ], Viewport.prototype, "idleDelay", void 0);
     __decorate([
+        words,
         property({ attribute: 'pan-down-label' })
     ], Viewport.prototype, "panDownLabel", void 0);
     __decorate([
+        words,
         property({ attribute: 'pan-left-label' })
     ], Viewport.prototype, "panLeftLabel", void 0);
     __decorate([
+        words,
         property({ attribute: 'pan-right-label' })
     ], Viewport.prototype, "panRightLabel", void 0);
     __decorate([
         property({ attribute: 'pan-step', type: Number })
     ], Viewport.prototype, "panStep", void 0);
     __decorate([
+        words,
         property({ attribute: 'pan-up-label' })
     ], Viewport.prototype, "panUpLabel", void 0);
     __decorate([
-        property({ attribute: 'two-finger-hint-label' })
-    ], Viewport.prototype, "twoFingerHintLabel", void 0);
-    __decorate([
-        property({ attribute: 'using-label' })
-    ], Viewport.prototype, "usingLabel", void 0);
-    __decorate([
-        property({ attribute: 'wheel-hint-label' })
-    ], Viewport.prototype, "wheelHintLabel", void 0);
-    __decorate([
+        words,
         property({ attribute: 'zoom-in-label' })
     ], Viewport.prototype, "zoomInLabel", void 0);
     __decorate([
@@ -388,6 +369,7 @@ export const MixinViewport = (Base) => {
         state()
     ], Viewport.prototype, "hintAt", void 0);
     __decorate([
+        words,
         property({ attribute: 'zoom-out-label' })
     ], Viewport.prototype, "zoomOutLabel", void 0);
     return Viewport;

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/calendar/calendar.d.ts

@@ -16,6 +16,33 @@ export declare const localToday: (now?: Date) => string;
  * neither, as Firefox does not, or where the tag cannot be read.
  */
 export declare const weekStartOf: (locale: string) => number;
+/**
+ * The calendars a date family draws and writes: those whose months are the
+ * Gregorian months, so a grid of Gregorian days is one of their months.
+ *
+ * `buddhist` is Thailand's (2569 for 2026), `japanese` the Japanese eras
+ * (Reiwa 8), and `roc` Taiwan's Minguo years (115). They differ from
+ * `gregory` in the year alone, and `iso8601` in the order the parts are
+ * written.
+ */
+export type DateCalendar = 'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'roc';
+/**
+ * The language tag a date family formats with: `locale`, with the calendar it
+ * writes dates in.
+ *
+ * That is `calendar` where it is one of the five `DateCalendar` names, then
+ * the locale's own calendar where its months are the Gregorian months, then
+ * `gregory`. **A calendar with months of its own, such as `persian` for `fa-IR`
+ * or `islamic-umalqura` for `ar-SA` in some engines, is written as `gregory`.**
+ * The arithmetic is Gregorian, so a heading in Mehr 1405 over the days of
+ * October 2026 named a month the grid did not show.
+ *
+ * `locale` unchanged where nothing moves, so a page in a Gregorian locale
+ * formats exactly as it did. Empty is the runtime's own locale. A tag `Intl`
+ * refuses throws, as every formatter given one does. Remembered per locale and
+ * calendar, since reading a locale's calendar builds a formatter.
+ */
+export declare const calendarLocale: (locale: string, calendar?: string) => string;
 /** A month as `YYYY-MM`. */
 export declare const monthOf: (date: Date) => string;
 /** A date some days away, which may be negative, at midnight UTC. */

package/dist/utils/calendar/calendar.js

@@ -15,6 +15,23 @@ export const weekStartOf = (locale) => {
         return 0;
     }
 };
+const DRAWN = ['buddhist', 'gregory', 'iso8601', 'japanese', 'roc'];
+const tagged = new Map();
+export const calendarLocale = (locale, calendar = '') => {
+    const key = `${locale} ${calendar}`;
+    let tag = tagged.get(key);
+    if (tag === undefined) {
+        const own = new Intl.DateTimeFormat(locale || undefined).resolvedOptions();
+        const wanted = DRAWN.includes(calendar)
+            ? calendar
+            : DRAWN.includes(own.calendar)
+                ? ''
+                : 'gregory';
+        tag = wanted ? `${new Intl.Locale(locale || own.locale, { calendar: wanted })}` : locale;
+        tagged.set(key, tag);
+    }
+    return tag;
+};
 export const monthOf = (date) => `${String(date.getUTCFullYear()).padStart(4, '0')}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;
 export const addDays = (date, days) => utcDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days);
 export const sameMonth = (left, right) => left.getUTCFullYear() === right.getUTCFullYear() && left.getUTCMonth() === right.getUTCMonth();

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/count-label/count-label.d.ts

@@ -4,10 +4,13 @@
  *
  * **`Intl.PluralRules` picks the sentence**, because the line between "one"
  * and "other" is the language's: French says "0 résultat" where English says
- * "0 results". A language with more forms than two writes its `one` in the
- * first sentence and the rest in the second.
+ * "0 results". Each sentence is a message, so `other` can hold every form a
+ * language has, `{count, plural, one {# wynik} few {# wyniki} many {# wyników}
+ * other {# wyniku}}`, and an empty `one` leaves the choice to it.
  *
- * Data Table says how many rows a search left this way, and Listbox how many
- * options a filter left, which Combobox and Command hand down to it.
+ * Kept for the families whose singular property is still read. A family on the
+ * words registry formats its one plural message with `formatWords`. Listbox
+ * says how many options a filter left this way, which Combobox and Command
+ * hand down to it.
  */
 export declare const countLabel: (count: number, one: string, other: string, locale?: string) => string;

package/dist/utils/count-label/count-label.js

@@ -1,5 +1,2 @@
-import { fillTemplate } from '../fill-template/fill-template.js';
-import { formatNumbers } from '../format-numbers/format-numbers.js';
-export const countLabel = (count, one, other, locale = '') => fillTemplate(new Intl.PluralRules(locale || undefined).select(count) === 'one' ? one : other, {
-    count: formatNumbers(locale)(count),
-});
+import { formatMessage } from '../../words/message.js';
+export const countLabel = (count, one, other, locale = '') => formatMessage(one && new Intl.PluralRules(locale || undefined).select(count) === 'one' ? one : other, { count }, locale);