@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,11 +4,12 @@ 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() {
         super(...arguments);
@@ -18,6 +19,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.missed = '';
         this.waiting = false;
         this.arrived = '';
+        this.pending = '';
     }
     static get observedAttributes() {
         return [...super.observedAttributes, 'aria-label'];
@@ -64,27 +66,57 @@ 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 }));
         }
         this.arrived = '';
         if (this.drawn === undefined && this.name !== '' && !this.waiting) {
-            if (this.missed !== this.name) {
-                this.missed = this.name;
-                this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
-                reportRuntime({
-                    kind: 'unknown-icon',
-                    message: `<${this.localName} name="${this.name}"> names no registered icon, so it draws ` +
-                        'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
-                        'and pass it as `icon`.',
-                    tag: this.localName,
-                });
+            if (this.missed !== this.name && this.pending !== this.name) {
+                this.pending = this.name;
+                afterPageSettles(() => this.reportMissing());
             }
         }
         else {
             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 = '';
+        if (this.name !== name || this.drawn !== undefined || this.waiting || !this.isConnected) {
+            return;
+        }
+        this.missed = name;
+        this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
+        reportRuntime({
+            kind: 'unknown-icon',
+            message: `<${this.localName} name="${name}"> names no registered icon, so it draws ` +
+                'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                'and pass it as `icon`.',
+            tag: this.localName,
+        });
+    }
     render() {
         const icon = this.drawn;
         if (!icon) {

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

@@ -0,0 +1,7 @@
+/**
+ * Calls back once the page has loaded and painted a frame after it: every
+ * module a page lists has run by then, and with it every `registerIcons` and
+ * `registerIconLibrary` they hold. A page that has loaded already waits only
+ * the frame.
+ */
+export declare const afterPageSettles: (callback: () => void) => void;

package/dist/icon/settle.js

@@ -0,0 +1,10 @@
+export const afterPageSettles = (callback) => {
+    const frame = () => {
+        requestAnimationFrame(() => callback());
+    };
+    if (document.readyState === 'complete') {
+        frame();
+        return;
+    }
+    window.addEventListener('load', frame, { once: true });
+};

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

@@ -17,6 +17,8 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  * mean a part of a button, and an icon-only button is a complete button with
  * different content and a different shape.
  *
+ * **Keyboard.** Enter and Space press the button, as `Button`'s do.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions

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

@@ -12,13 +12,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The `placeholder` slot is empty by default, so the headless tier does not
  * depend on `Skeleton`, which it does not ship.
  *
+ * The placeholder is hidden from screen readers, the picture having a name of
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
  * @aliases Picture, Img, Figure
  * @documentation https://fusion.dev/helix/components/image
  *
- * @slot fallback - Shown in place of the image if it fails to load.
+ * @slot fallback - Shown in place of the image if it fails to load, and read by screen readers then, such as "Photo unavailable".
  * @slot placeholder - Shown until the image loads.
  *
  * @event {Event} error - The image failed to load. Relayed from the inner image, whose own event stays inside the shadow root.
@@ -30,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 {
     /**
@@ -117,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';
     /**
@@ -190,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,12 +147,12 @@ 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
         part="fallback"
-        aria-hidden="true"
+        aria-hidden=${this.status === 'error' ? nothing : 'true'}
         ?hidden=${this.status !== 'error'}
         ><slot name="fallback"></slot
       ></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';
@@ -20,7 +20,21 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * which a reset restores.
  *
  * Validity comes from the browser. `type` and `required` are set on the real
- * input, and its `validity` is copied to the host.
+ * input, and its `validity` is copied to the host. `validate` adds your own
+ * rule, run on every change once the browser finds nothing wrong, as React
+ * 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
@@ -28,10 +42,13 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @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.
@@ -48,7 +65,8 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @csspart reveal - The button that shows and hides a password.
  * @csspart reveal-pressed - The reveal button while the password is shown, added beside `reveal`.
  *
- * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate blank - The field holds no text.
+ * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     protected readonly aria: AriaForwardController;
@@ -281,6 +299,19 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * validation follow.
      */
     type: InputType;
+    /**
+     * Your own rule for the value, run on every change once the browser finds
+     * 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?: 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, } 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';
@@ -48,7 +48,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         };
         this.handleKeypress = (event) => {
             if (event.key === 'Enter' && !event.defaultPrevented) {
-                this.submitImplicitly();
+                submitImplicitly(this.form);
             }
         };
         this.handleChange = (event) => {
@@ -112,6 +112,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             return;
         }
         this.copyValidity(control);
+        applyOwnRule(this.internals, control, this.validate, this.value);
         this.refreshFeedback();
     }
     focus(options) {
@@ -136,6 +137,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
         if (!this.hasUpdated) {
             return;
         }
@@ -150,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">
@@ -193,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'
@@ -207,7 +217,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
                 this.revealed = !this.revealed;
             }}
             >
-              ${drawIcon(this.revealed ? eyeSlash : eye)}
+              ${this.renderRevealIcon()}
             </button>`
             : nothing}
     </div>
@@ -268,6 +278,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "type", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessInput.prototype, "validate", void 0);
 HelixHeadlessInput = __decorate([
     customElement('helix-headless-input')
 ], HelixHeadlessInput);

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 ? '-' : '') : '+' };
+};

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

@@ -23,6 +23,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the shortcut with the control. A chord the page wrote there itself is left
  * alone, and the key takes back only what it added.
  *
+ * `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"}'`. 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
  * @category typography
@@ -33,9 +44,29 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixShortcutEvent} helix-shortcut - The chord was pressed. Cancelable: cancel it to let the key press keep its usual effect.
  *
- * @csspart kbd - The key.
+ * @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 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
+     * and most docs draw `Ctrl` `K`.
+     *
+     * Absent, a chord is one key holding the whole label, as it always was.
+     * Reflected, because the styled tier draws the caps on the keys under it.
+     */
+    caps: boolean;
     /**
      * The id of the control the shortcut works, which is given the chord as its
      * `aria-keyshortcuts`.
@@ -45,6 +76,18 @@ export declare class HelixHeadlessKbd extends HelixElement {
      * shortcut the page binds itself.
      */
     for: string;
+    /**
+     * Names for keys in place of the platform's own, by the key's name in
+     * `keys`, written as JSON in the attribute: `key-labels='{"mod":"Command",
+     * "enter":"Return"}'` shows `Command` and `Return` wherever `mod` and
+     * `enter` are written.
+     *
+     * For a page in another language, or a product with its own word for a key.
+     * Absent, the platform's glyphs and words are used. Only what is shown
+     * changes: the chord written onto `aria-keyshortcuts` keeps the names a
+     * screen reader knows.
+     */
+    keyLabels: Record<string, string>;
     /**
      * The key or chord to show, such as `mod+k`, `?`, or `/`.
      *
@@ -91,8 +134,16 @@ 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;
+    /**
+     * The chord under `caps`, a part for each key and for each `+` between two,
+     * so a sheet can draw a cap per key. Written with no space between, so a
+     * chord reads as the one label it was.
+     */
+    protected renderChord(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/kbd/root/kbd-root.js

@@ -4,9 +4,10 @@ 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 { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { keyNames } from '../keys.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
 const typing = (node) => {
     if (node instanceof HTMLTextAreaElement) {
@@ -29,48 +30,12 @@ const UNTYPED = new Set([
     'reset',
     'submit',
 ]);
-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: '↑',
-};
 let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     constructor() {
         super(...arguments);
+        this.caps = false;
         this.for = '';
+        this.keyLabels = {};
         this.keys = '';
         this.handleKeydown = (event) => {
             const press = event;
@@ -87,9 +52,11 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
             }
             const shortcut = new HelixShortcutEvent({ keys: this.keys });
             this.dispatchEvent(shortcut);
-            if (!shortcut.defaultPrevented) {
-                press.preventDefault();
+            if (shortcut.defaultPrevented) {
+                return;
             }
+            press.preventDefault();
+            this.act();
         };
     }
     connectedCallback() {
@@ -132,10 +99,7 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         }
     }
     get label() {
-        const apple = !this.hydrating && onApple();
-        const names = apple ? APPLE : ELSEWHERE;
-        const parts = chordParts(this.keys).map((part) => names[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
-        return parts.join(apple ? '' : '+');
+        return keyNames(chordParts(this.keys), !this.hydrating && onApple(), this.keyLabels ?? {});
     }
     listen() {
         if (!this.within || this.keys === '') {
@@ -152,17 +116,46 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.listening?.removeEventListener('keydown', this.handleKeydown);
         this.listening = undefined;
     }
+    act() {
+        const control = this.activate && this.for !== '' ? elementById(this, this.for) : null;
+        if (!(control instanceof HTMLElement)) {
+            return;
+        }
+        if (this.activate === 'click') {
+            control.click();
+        }
+        else {
+            control.focus();
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
     render() {
-        return html `<kbd part="kbd">${this.keys === '' ? html `<slot></slot>` : this.label}</kbd>`;
+        if (this.keys === '') {
+            return html `<kbd part="kbd"><slot></slot></kbd>`;
+        }
+        const { keys, separator } = this.label;
+        return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+    }
+    renderChord() {
+        const { keys, separator } = this.label;
+        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator">${separator}</span>` : nothing}<span part="key">${key}</span>`)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessKbd.prototype, "activate", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessKbd.prototype, "caps", void 0);
 __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "for", void 0);
+__decorate([
+    property({ attribute: 'key-labels', converter: wordsConverter })
+], HelixHeadlessKbd.prototype, "keyLabels", void 0);
 __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "keys", void 0);