@fusion.dev/helix-headless 0.146.0 → 0.148.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, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, 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,12 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.gap = 2;
         this.minCell = 8;
         this.rows = 1;
+        this.selectedLabel = 'selected';
+        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 +30,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 +76,29 @@ 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;
+        }
+        requestValue(this, next, (value) => {
+            this.value = value;
+            this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
+        });
+    }
+    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 +154,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 +173,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.onKeydown);
         this.observer?.disconnect();
         this.observer = undefined;
     }
@@ -143,6 +204,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 +214,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 +223,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 +243,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>`;
     }
@@ -216,7 +272,24 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        }, undefined, this.pointer);
+        }, undefined, this.reading(at));
+    }
+    reading(at) {
+        const pointer = this.pointer;
+        const key = this.keysOf(this.drawn)[at] ?? '';
+        if (!this.selectionMode || key === '' || this.selectedLabel === '') {
+            return pointer;
+        }
+        if (!commaList(this.value).includes(key)) {
+            return pointer;
+        }
+        return {
+            column: pointer.column,
+            keyed: pointer.keyed,
+            position: pointer.position,
+            shows: (cell) => pointer.shows(cell),
+            state: this.selectedLabel,
+        };
     }
 };
 __decorate([
@@ -234,6 +307,15 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessHeatmap.prototype, "selectedLabel", 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 +325,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

@@ -16,6 +16,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * its own. The fallback is read once the picture fails, after the picture's
  * `alt`, so a reader hears that it did not load, as a sighted reader sees.
  *
+ * **An image with no `alt` says so.** At its first render it reports a
+ * `missing-alt` warning, printed in the console and counted by
+ * `@fusion.dev/helix-diagnostics`, which names the fix: describe the picture
+ * in `alt`, or write `alt=""` for one that is decoration. An image hidden with
+ * `aria-hidden="true"` needs neither and is not reported.
+ *
+ * A sheet of yours reads the state as `:state(loading)`, `:state(loaded)`,
+ * `:state(error)`, and `:state(waiting)`, the last while `placeholder-delay`
+ * holds the placeholder back. It can also read `data-status` on the host once
+ * the picture has loaded or failed.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -34,6 +45,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 +134,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 +212,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/root/kbd-root.d.ts

@@ -26,7 +26,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `caps` draws a chord as a key per key: each is a `key` part and the `+`
  * between two a `separator` part, so a sheet can draw a cap for each.
  * `key-labels` renames any key, on every platform, such as
- * `key-labels='{"mod":"Command"}'`.
+ * `key-labels='{"mod":"Command"}'`. On an Apple keyboard a word joins the
+ * next key with a hyphen, as in `Command-K`.
+ *
+ * **`activate` makes the shortcut work the control `for` names**, with no
+ * script: `activate="focus"` moves focus to it, as `/` does to a search
+ * field, and `activate="click"` presses it. It acts once `helix-shortcut` has
+ * gone out and no listener canceled it, and only where `within` listens.
  *
  * @since 0.1.0
  * @status stable
@@ -40,9 +46,18 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart kbd - The key, or the chord under `keys`.
  * @csspart key - One key of a chord under `keys` and `caps`, such as `Ctrl` in `Ctrl+K`.
- * @csspart separator - The `+` between two keys of a chord under `keys` and `caps`, drawn where the platform writes one: on Windows and Linux. An Apple keyboard writes none.
+ * @csspart separator - The `+` between two keys of a chord under `keys` and `caps`, drawn where the platform writes one: on Windows and Linux. An Apple keyboard writes none between glyphs, and a hyphen between words from `key-labels`.
  */
 export declare class HelixHeadlessKbd extends HelixElement {
+    /**
+     * What the chord does to the control `for` names once it is pressed:
+     * `focus` moves focus to the control and `click` presses it.
+     *
+     * Unset, the chord sends `helix-shortcut` and does nothing else, for a page
+     * that acts on the event itself. It acts only where `within` listens, after
+     * `helix-shortcut`, and not when a listener cancels that event.
+     */
+    activate?: 'click' | 'focus';
     /**
      * Draws a chord under `keys` as one key per key, each a `key` part with a
      * `separator` part between two where the platform writes a `+`, as GitHub
@@ -72,7 +87,7 @@ export declare class HelixHeadlessKbd extends HelixElement {
      * changes: the chord written onto `aria-keyshortcuts` keeps the names a
      * screen reader knows.
      */
-    keyLabels?: Record<string, string>;
+    keyLabels: Record<string, string>;
     /**
      * The key or chord to show, such as `mod+k`, `?`, or `/`.
      *
@@ -119,6 +134,8 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private listen;
     private deafen;
     private readonly handleKeydown;
+    /** Focuses or presses the control `for` names, as `activate` says. */
+    private act;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**