@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/heatmap/root/heatmap-root.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, byRow, CHART_PLOT, customElement, drawTooltip, formatNumbers, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestChange, StatusController, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { fits, toneOf } from './buckets.js';
+import { fits, monthPage, overviewOf, toneOf } from './buckets.js';
 let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
@@ -17,9 +17,11 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.gap = 2;
         this.minCell = 8;
         this.rows = 1;
+        this.selectionLabel = '{count} selected';
         this.thresholds = '';
         this.tones = '';
         this.totalLabel = 'Total';
+        this.value = '';
         this.width = undefined;
         this.metrics = undefined;
         this.aria = new AriaForwardController(this, {
@@ -27,6 +29,35 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         });
         this.observer = undefined;
         this.announced = undefined;
+        this.anchor = -1;
+        this.status = new StatusController(this);
+        this.onKeydown = (event) => {
+            const at = this.pointer.at;
+            if (!this.selectionMode || at < 0 || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this.press(at);
+                return;
+            }
+            const moves = /^(Arrow|Page|Home$|End$)/.test(event.key);
+            if (!event.shiftKey || !moves || this.selectionMode !== 'multiple') {
+                return;
+            }
+            const keys = this.keysOf(this.drawn);
+            const added = rangeAdd(commaList(this.value), keys, this.anchor < 0 ? at : this.anchor, at);
+            if (added) {
+                this.choose(added.join(', '));
+            }
+        };
+        this.onClick = (event) => {
+            const cell = event.target?.closest?.('[part~="cell"]');
+            const index = Number(cell?.getAttribute('data-index') ?? -1);
+            if (cell && Number.isInteger(index) && index >= 0) {
+                this.press(index);
+            }
+        };
         this.onPointerOver = (event) => {
             if (!this.pointer.accepts(event)) {
                 return;
@@ -44,6 +75,35 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     get visible() {
         return Math.min(this.points.length, this.room);
     }
+    keysOf(cells) {
+        const offset = this.points.length - cells.length;
+        const rows = this.sourceRows;
+        return cells.map((_, index) => rows[offset + index]?.label ?? '');
+    }
+    choose(next) {
+        if (next === this.value) {
+            return;
+        }
+        requestChange({
+            apply: (value) => {
+                this.value = value;
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next,
+        });
+    }
+    press(index) {
+        const mode = this.selectionMode;
+        const key = this.keysOf(this.drawn)[index];
+        if (!mode || key === undefined || key === '') {
+            return;
+        }
+        this.anchor = index;
+        this.choose(pressedValue(mode, this.value, key));
+    }
     get points() {
         const series = this.series[0];
         if (!series) {
@@ -99,8 +159,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         super.willUpdate(changed);
         this.pointer.grid = this.rowCount;
     }
+    pageFrom(at, forward) {
+        const offset = this.points.length - this.drawn.length;
+        return monthPage(this.sourceRows.slice(offset).map((row) => row.when), at, forward);
+    }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('keydown', this.onKeydown);
         if (typeof ResizeObserver !== 'undefined') {
             this.observer = new ResizeObserver((entries) => {
                 const measured = entries[0]?.contentRect.width;
@@ -113,6 +178,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.onKeydown);
         this.observer?.disconnect();
         this.observer = undefined;
     }
@@ -143,6 +209,8 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const palette = writtenList(this.tones);
         const cells = this.drawn;
         const readable = cells.length > 0;
+        const keys = this.selectionMode ? this.keysOf(cells) : [];
+        const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
         return html `<div
         aria-describedby=${readable ? 'helix-chart-summary' : nothing}
         aria-label=${this.named || 'Heatmap'}
@@ -151,6 +219,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         role=${readable ? 'application' : 'img'}
         style="--heatmap-rows: ${this.rowCount}"
         tabindex=${readable ? '0' : nothing}
+        @click=${this.onClick}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
       >
@@ -159,13 +228,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             : cells.map((reading, index) => {
                 const tone = toneOf(reading, bounds, palette);
                 const active = this.pointer.at === index;
+                const picked = chosen.has(keys[index] ?? '');
                 return tone === undefined
                     ? html `<span
-                      part="cell${active ? ' cell-active' : ''}"
+                      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
                       data-index=${index}
                     ></span>`
                     : html `<span
-                part="cell${active ? ' cell-active' : ''}"
+                part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
                 data-index=${index}
                 data-tone=${tone}
                 style="--heatmap-tone: var(--heatmap-tone-${tone})"
@@ -178,27 +248,18 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>
         <span part="end"><slot name="end"></slot></span>
-      </div>${readable ? this.renderOverview(cells) : nothing}`;
+      </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
+            ? html `<span part="selection" role="status">${this.status.said}</span>`
+            : nothing}`;
     }
     renderOverview(cells) {
         const rows = this.sourceRows;
         const offset = this.points.length - cells.length;
         const column = this.plottedColumns[0] ?? -1;
-        let busiest = -1;
-        let total = 0;
-        cells.forEach((cell, index) => {
-            if (cell.value === undefined) {
-                return;
-            }
-            total += cell.value;
-            if (busiest < 0 || cell.value > (cells[busiest]?.value ?? 0)) {
-                busiest = index;
-            }
-        });
+        const { busiest, total } = overviewOf(cells);
         const row = rows[offset + busiest];
-        const most = row
-            ? `${this.busiestLabel}: ${row.label} ${row.cells[column]?.text ?? ''}`.trim()
-            : '';
+        const text = row?.cells[column]?.text ?? '';
+        const most = row ? `${this.busiestLabel}: ${row.label}${text === '' ? '' : `, ${text}`}` : '';
         const sum = `${this.totalLabel} ${formatNumbers(this.locale)(total)}`;
         return html `<p id="helix-chart-summary" part="overview">${most ? `${most}; ${sum}` : sum}.</p>`;
     }
@@ -234,6 +295,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'selection-label' })
+], HelixHeadlessHeatmap.prototype, "selectionLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-mode' })
+], HelixHeadlessHeatmap.prototype, "selectionMode", void 0);
 __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "thresholds", void 0);
@@ -243,6 +310,9 @@ __decorate([
 __decorate([
     property({ attribute: 'total-label' })
 ], HelixHeadlessHeatmap.prototype, "totalLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessHeatmap.prototype, "value", void 0);
 __decorate([
     state()
 ], HelixHeadlessHeatmap.prototype, "width", void 0);

package/dist/icon/index.d.ts

@@ -1,3 +1,3 @@
 import './set.js';
-export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
+export { type IconLibraryOptions, type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from './registry.js';
 export * from './root/icon-root.js';

package/dist/icon/index.js

@@ -1,3 +1,3 @@
 import './set.js';
-export { registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
+export { registerIconLibrary, registerIcons, resolveIcon, } from './registry.js';
 export * from './root/icon-root.js';

package/dist/icon/registry.d.ts

@@ -1,6 +1,15 @@
 import type { HelixIcon } from '@fusion.dev/helix-icons';
 /** What a library gives for a name: a glyph, a glyph later, or nothing. */
 export type IconResolver = (name: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;
+/** How a library's glyphs are drawn, beside the names it resolves. */
+export interface IconLibraryOptions {
+    /**
+     * Changes each drawn `<svg>` of the library's glyphs, as Web Awesome's
+     * `mutator` does: a stroke width, a fill, an attribute the set leaves out.
+     * Called after every render that draws one of them.
+     */
+    mutator?: (svg: SVGSVGElement) => void;
+}
 /**
  * Makes glyphs resolvable by name: a record of names to glyphs, such as the
  * whole set, or a list of glyphs, each under its own `name`.
@@ -15,14 +24,30 @@ export declare const registerIcons: (glyphs: Record<string, HelixIcon> | readonl
  * The resolver may answer at once or with a promise; an element waiting on a
  * promise draws the glyph when it arrives and fires `load`. Each written name
  * is asked once, and a prefix registered again is asked afresh.
+ *
+ * A sprite sheet is a library whose glyphs point into it, so the sheet is
+ * fetched once and cached:
+ *
+ * ```js
+ * registerIconLibrary('sprite', (name) => ({
+ *   content: `<use href="/icons.svg#${name}"></use>`,
+ *   name,
+ *   viewBox: '0 0 24 24',
+ * }))
+ * ```
+ *
+ * `mutator` changes each drawn `<svg>` of the library, such as
+ * `(svg) => svg.setAttribute('stroke-width', '1.5')`.
  */
-export declare const registerIconLibrary: (prefix: string, resolve: IconResolver) => void;
+export declare const registerIconLibrary: (prefix: string, resolve: IconResolver, options?: IconLibraryOptions) => void;
 /**
  * Calls `watcher` whenever a glyph or a library is registered, so an element
  * drawn before its glyph was registered can look again. Returns the function
  * that stops it.
  */
 export declare const watchIcons: (watcher: () => void) => (() => void);
+/** The mutator of the library a written name asks, or `undefined`. */
+export declare const iconMutator: (name: string) => ((svg: SVGSVGElement) => void) | undefined;
 /** The registered glyph of this name, or `undefined`. */
 export declare const registeredIcon: (name: string) => HelixIcon | undefined;
 /**

package/dist/icon/registry.js

@@ -24,9 +24,16 @@ export const registerIcons = (glyphs) => {
     }
     changed(held);
 };
-export const registerIconLibrary = (prefix, resolve) => {
+export const registerIconLibrary = (prefix, resolve, options = {}) => {
     const held = registry();
     held.libraries.set(prefix, resolve);
+    held.mutators ??= new Map();
+    if (options.mutator) {
+        held.mutators.set(prefix, options.mutator);
+    }
+    else {
+        held.mutators.delete(prefix);
+    }
     for (const name of held.answers.keys()) {
         if (name.startsWith(`${prefix}:`)) {
             held.answers.delete(name);
@@ -41,6 +48,10 @@ export const watchIcons = (watcher) => {
         held.watchers.delete(watcher);
     };
 };
+export const iconMutator = (name) => {
+    const split = name.indexOf(':');
+    return split > 0 ? registry().mutators?.get(name.slice(0, split)) : undefined;
+};
 export const registeredIcon = (name) => registry().glyphs.get(name);
 export const resolveIcon = (name) => {
     const registered = registeredIcon(name);

package/dist/icon/root/icon-root.d.ts

@@ -36,6 +36,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * button with no text. An `aria-label` on the element works too: the element
  * is then an image with that name.
  *
+ * **A decorative icon that is all a control holds is reported.** In a
+ * development build, a button or a link whose only content is an icon with no
+ * `label`, and which has no name of its own, warns `missing-name` once,
+ * through the runtime channel every Helix warning uses.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -121,6 +126,14 @@ export declare class HelixHeadlessIcon extends HelixElement {
     private lookup;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** Hands the drawn `<svg>` to the mutator of the library `name` asks, where it has one. */
+    private mutate;
+    /**
+     * Asks the button or link a decorative icon sits in whether it has a name.
+     * Its content is this icon alone where it has none, and the audit says so
+     * once, in a development build only. A Helix button reports its own name.
+     */
+    private auditControl;
     /** The name a report is waiting on the page to settle for, so it is asked once. */
     private pending;
     /**

package/dist/icon/root/icon-root.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria, reportRuntime } from '@fusion.dev/helix-core';
+import { auditName, customElement, HelixElement, hostAria, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { resolveIcon, watchIcons } from '../registry.js';
+import { iconMutator, resolveIcon, watchIcons } from '../registry.js';
 import { afterPageSettles } from '../settle.js';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     constructor() {
@@ -66,6 +66,10 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        if (this.drawn !== undefined) {
+            this.mutate();
+            this.auditControl();
+        }
         if (this.arrived === this.name && this.drawn !== undefined) {
             this.dispatchEvent(new Event('load', { bubbles: false, cancelable: false, composed: false }));
         }
@@ -80,6 +84,23 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             this.missed = '';
         }
     }
+    mutate() {
+        const svg = this.renderRoot.querySelector('svg');
+        const mutator = this.icon === undefined ? iconMutator(this.name) : undefined;
+        if (svg && mutator) {
+            mutator(svg);
+        }
+    }
+    auditControl() {
+        if (this.label !== '' || this.hasAttribute('aria-label')) {
+            return;
+        }
+        const control = this.closest('a[href], button, summary, [role="button"], [role="link"]');
+        if (control) {
+            auditName(control, () => null, `Its only content is <${this.localName}>, which is decorative: give the icon a \`label\`, or the control an \`aria-label\`.`, () => (control.textContent ?? '').trim() !== '' ||
+                control.querySelector('[alt]:not([alt=""]), [aria-label]:not([aria-label=""])') !== null);
+        }
+    }
     reportMissing() {
         const name = this.pending;
         this.pending = '';

package/dist/icon/root/index.d.ts

@@ -1,2 +1,2 @@
-export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export { type IconLibraryOptions, type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '../registry.js';
 export * from './icon-root.js';

package/dist/icon/root/index.js

@@ -1,2 +1,2 @@
-export { registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export { registerIconLibrary, registerIcons, resolveIcon, } from '../registry.js';
 export * from './icon-root.js';

package/dist/image/root/image-root.d.ts

@@ -34,6 +34,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate error - The image failed to load, and the fallback shows.
  * @cssstate loaded - The image loaded.
+ * @cssstate loading - The image is on its way, so neither `loaded` nor `error` is true yet.
+ * @cssstate waiting - The image is on its way and `placeholder-delay` still holds the placeholder back.
  */
 export declare class HelixHeadlessImage extends HelixElement {
     /**
@@ -121,6 +123,11 @@ export declare class HelixHeadlessImage extends HelixElement {
      *
      * `loading` writes nothing, because it is where every image starts and the
      * resting state of a mirror is the attribute's absence.
+     *
+     * **Kept beside the custom states, and what the styled tier draws from.** An
+     * engine without `CustomStateSet`, Safari before 17.4 and Firefox before
+     * 126, records no state, and a picture faded in by `:state(loaded)` alone
+     * would stay transparent there for good. A sheet of your own can read either.
      */
     status: 'error' | 'loaded' | 'loading';
     /**
@@ -194,6 +201,8 @@ export declare class HelixHeadlessImage extends HelixElement {
     private settle;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the picture is on its way and the wait still holds the placeholder back. */
+    private get waiting();
     private startWait;
     protected firstUpdated(changed: PropertyValues): void;
     /**

package/dist/image/root/image-root.js

@@ -92,7 +92,12 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
             }
             this.toggleState('loaded', this.status === 'loaded');
             this.toggleState('error', this.status === 'error');
+            this.toggleState('loading', this.status === 'loading');
         }
+        this.toggleState('waiting', this.waiting);
+    }
+    get waiting() {
+        return this.status === 'loading' && this.placeholderDelay > 0 && !this.wait.elapsed;
     }
     startWait() {
         this.wait.start(this.placeholderDelay > 0 ? this.placeholderDelay : undefined);
@@ -142,7 +147,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
       <span
         part="placeholder"
         aria-hidden="true"
-        ?hidden=${this.status !== 'loading' || (this.placeholderDelay > 0 && !this.wait.elapsed)}
+        ?hidden=${this.status !== 'loading' || this.waiting}
         ><slot name="placeholder"></slot
       ></span>
       <span

package/dist/input/root/input-root.d.ts

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type OwnRule } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /** What the control accepts, which is text of one kind or another. */
 export type InputType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
@@ -25,16 +25,30 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * Aria's TextField `validate` does. What it returns is the message the field
  * shows once the user has edited it, and the message a submit raises.
  *
+ * **Keyboard.** The field's own keys are the platform's. Enter submits the
+ * form through its default button, as in a native field. The clear button
+ * under `clearable` and the reveal button under `reveal` are tab stops of
+ * their own after the field, so a keyboard reaches them.
+ *
+ * The inner input is named by `label`, or by a host `aria-label`,
+ * `aria-labelledby` or `<label for>`, and is described by the hint and the
+ * message, with `aria-invalid` while a message shows. The clear button is
+ * named `clear-label`, and the reveal button `reveal-label` with
+ * `aria-pressed` while the password shows.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases TextField, Field, TextInput
  * @documentation https://fusion.dev/helix/components/input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
+ * @slot conceal-icon - Replaces the crossed-out eye on the reveal button while the password shows, under `reveal`.
  * @slot end - After the text, for an icon or a unit.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
  * @slot label - The label, for content richer than the `label` text.
+ * @slot reveal-icon - Replaces the eye on the reveal button while the password is hidden, under `reveal`.
  * @slot start - Before the text, for an icon or a prefix.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
@@ -290,7 +304,14 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * nothing wrong. Return a message, or a list of them, to mark the field
      * invalid, and `true`, `null`, or nothing to accept the value.
      */
-    validate?: (value: string) => string | string[] | true | null | undefined;
+    validate?: OwnRule;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
+    /**
+     * The eye on the reveal button, behind a seam a tier can move: open while
+     * the password is hidden, and crossed out while it shows.
+     */
+    protected renderRevealIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/input/root/input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -112,11 +112,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             return;
         }
         this.copyValidity(control);
-        const own = control.validity.valid ? this.validate?.(this.value) : undefined;
-        const message = Array.isArray(own) ? own.join(' ') : typeof own === 'string' ? own : '';
-        if (message !== '') {
-            this.internals.setValidity({ customError: true }, message, control);
-        }
+        applyOwnRule(this.internals, control, this.validate, this.value);
         this.refreshFeedback();
     }
     focus(options) {
@@ -156,6 +152,14 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.releaseCaret = undefined;
         this.sync();
     }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
+    renderRevealIcon() {
+        return this.revealed
+            ? html `<slot name="conceal-icon">${drawIcon(eyeSlash)}</slot>`
+            : html `<slot name="reveal-icon">${drawIcon(eye)}</slot>`;
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field">
@@ -199,7 +203,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
               aria-label=${this.clearLabel}
               @click=${this.handleClear}
             >
-              ${drawIcon(x)}
+              ${this.renderClearIcon()}
             </button>`
             : nothing}
       ${this.reveal && this.type === 'password'
@@ -213,7 +217,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
                 this.revealed = !this.revealed;
             }}
             >
-              ${drawIcon(this.revealed ? eyeSlash : eye)}
+              ${this.renderRevealIcon()}
             </button>`
             : nothing}
     </div>

package/dist/kbd/keys.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The words and glyphs a chord is drawn with, per platform.
+ *
+ * Beside the family's `index.ts`, because which label a key gets is a table
+ * and a rule, and not the key's template.
+ */
+/** 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/kbd/keys.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 ? '-' : '') : '+' };
+};