@fusion.dev/helix-headless 0.155.0 → 0.156.0

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

@@ -34,17 +34,41 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * hour, a minute, and AM or PM where the clock has them, each set with digits
  * or the arrow keys. Alt+Down opens the list from a segment.
  *
+ * Text that is not a time gives the form an empty value, as a native time
+ * field does, and `value` keeps the text so it can be corrected.
+ *
+ * **Keyboard.** The field is one tab stop, or each segment is with
+ * `segmented`, and the trigger is one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down | In the text field, opens the list on the chosen time. |
+ * | Alt with Down | Opens the list, from the text field or a segment. |
+ * | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. |
+ * | Escape | Closes the list and puts focus back in the field. |
+ * | Up, Down on a segment | Steps the segment by one, round from its last value to its first. |
+ * | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. |
+ * | Home, End on a segment | Goes to the segment's first or last value. |
+ * | Digits on a segment | Fill it, and move to the next once it can take no more. |
+ * | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. |
+ * | Backspace, Delete on a segment | Empty the segment. |
+ * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
+ *
+ * In the list, the keys are `TimePicker`'s.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases TimeField, InputTime
  * @documentation https://fusion.dev/helix/components/time-input
  *
+ * @slot end - Content after the time, before the trigger, such as a clear button.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help under the field.
  * @slot label - The label, for content richer than the `label` text.
  * @slot panel-footer - Content in the panel under the times, such as a note or an action.
  * @slot panel-header - Content in the panel above the times, such as a heading or a shortcut.
+ * @slot start - Content before the time, such as an icon.
  * @slot trigger - The icon on the field that shows a list opens.
  *
  * @event {Event} change - Fired after the value changes.
@@ -76,6 +100,8 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-search-field - The filter field.
  * @csspart picker-columns - The row of columns, in `wheels`.
  * @csspart picker-feedback - The picker's own message, under the times, while the picker's `feedback` is set.
+ * @csspart picker-hint - The picker's hint, which Time Input never sets: help under the field is the field's own `hint`.
+ * @csspart picker-label - The picker's visible label, which Time Input never draws: the field's `label` names it.
  * @csspart picker-list - The listbox holding the times, in `list`.
  * @csspart picker-list-empty - The text shown when the filter hides every option.
  * @csspart picker-list-error - The list's `error` part, which the list never sets: its times do not load.
@@ -283,7 +309,12 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * what says the reader is done.
      */
     private readonly handleWheelEnter;
-    /** Each time, where `mode` holds several, sent one entry each. */
+    /**
+     * Each time, where `mode` holds several, sent one entry each.
+     *
+     * One time that is text and no time, such as `2:45 P`, is sent as an empty
+     * entry, as a native time field sends a time it cannot read.
+     */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */
     protected validate(): string | readonly [keyof ValidityStateFlags, string];

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

@@ -146,7 +146,11 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         return held.length > 0 && held.every((one) => this.isTime(one)) ? held.join(',') : '';
     }
     get answers() {
-        return this.mode === undefined ? undefined : this.held;
+        if (this.mode !== undefined) {
+            return this.held;
+        }
+        const text = this.value.trim();
+        return text === '' || this.isTime(text) ? undefined : [''];
     }
     validate() {
         const held = this.held;
@@ -197,7 +201,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
         column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
-        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, list: picker-list,
+        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, hint: picker-hint,
+        label: picker-label, list: picker-list,
         list-empty: picker-list-empty, list-error: picker-list-error, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
@@ -269,10 +274,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
+        <slot name="start"></slot>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
+        <slot name="end"></slot>
         <button
           part="trigger"
           type="button"

package/dist/time-picker/root/time-picker-root.d.ts

@@ -35,12 +35,37 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * its choice in markup for the same reason. The list and the wheels both do
  * this, because each wheel is also a listbox.
  *
+ * **Keyboard.** The list is one tab stop, and each wheel is one.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. |
+ * | Home, End | Moves to the first or the last time, or the first or the last in a wheel. |
+ * | Page Down, Page Up | Moves by as many times as the list shows at once. |
+ * | Digits | Moves to the next time that starts with what you typed, such as `9` for 9:00. |
+ * | Enter, Space | Chooses the highlighted time. Moving chooses too, except under `manual` or with a `mode`. With a `mode`, Space adds or removes the time. |
+ * | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. |
+ * | Tab | Moves to the next wheel, then out of the picker. |
+ *
+ * **ARIA.** The list is a `listbox` named by `label`, a slotted label, the
+ * host's `aria-label` or its `aria-labelledby`. A development build warns
+ * where all four are empty. The list is described by the hint, or by the
+ * message in `feedback` in its place, and carries `aria-multiselectable` with
+ * a `mode` and `aria-invalid` while `feedback` says what is wrong. The wheels
+ * are a `group` with that name, holding one `listbox` per wheel, named "Hour",
+ * "Minute", "Second" and "AM/PM" in the page's language, and each described
+ * the same way.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Time, TimeList
  * @documentation https://fusion.dev/helix/components/time-picker
  *
+ * @slot empty - What the list shows when no time falls between `min` and `max`, for content richer than `empty-text`.
+ * @slot hint - Help under the times, for content richer than the `hint` text.
+ * @slot label - A visible label above the times, which names the list, for content richer than the `label` text.
+ *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes, and cancelable. Canceling it keeps the current time.
  * @event {Event} input - Fired after the value changes.
@@ -60,6 +85,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-search-field - The filter field.
  * @csspart columns - The row of columns, in `wheels`.
  * @csspart feedback - The message under the times, while `feedback` is set.
+ * @csspart hint - Help under the times, shown while there is no message in `feedback`.
+ * @csspart label - The visible label above the times, drawn while a label is slotted.
  * @csspart list - The listbox holding the times, in `list`.
  * @csspart list-empty - The text shown when the filter hides every option.
  * @csspart list-error - The list's `error` part, which Time Picker never sets: its times do not load.
@@ -115,6 +142,19 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * reached honestly rather than by handing over an empty range.
      */
     disableTimes: string;
+    /**
+     * What the list says when no time falls between `min` and `max`.
+     *
+     * The fallback of the `empty` slot.
+     */
+    emptyText: string;
+    /**
+     * Help under the times, such as the hours a shop is open, read by screen
+     * readers as the list's description. A message in `feedback` replaces it.
+     *
+     * The fallback of the `hint` slot.
+     */
+    hint: string;
     /**
      * The clock the times are written on: `h12` for twelve hours with a
      * meridiem, `h23` for twenty-four.
@@ -134,7 +174,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /**
      * Accessible name for the list, which has no visible one of its own.
      *
-     * An `aria-label` or `aria-labelledby` on the host names the list instead.
+     * An `aria-label` or `aria-labelledby` on the host names the list instead,
+     * and so does a label slotted into `label`, which is also drawn above it.
      */
     label: string;
     /**
@@ -473,6 +514,26 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * aria-label="Slot">` was a listbox named "Time".
      */
     private get listName();
+    /** Whether a hint is slotted, which draws the `hint` part around it. */
+    private hintSlotted;
+    /** Whether the hint shows: there is one, and no message stands in its place. */
+    private get hinted();
+    /** The ids that describe each list: the hint, or the message in its place. */
+    private get describedBy();
+    /**
+     * The hint under the times, or a bare slot while there is none to show,
+     * hidden while a message stands in its place, so a slotted hint goes too.
+     */
+    private renderHint;
+    /** Whether a label is slotted, which draws the `label` part around it. */
+    private labelSlotted;
+    /** Reads the `label` slot, and the list's name again with it. */
+    private readonly handleLabelSlot;
+    /**
+     * The slotted label, in the `label` part, above the times. A bare slot while
+     * nothing is slotted, which draws no box.
+     */
+    private renderSlottedLabel;
     /**
      * Hears the host's `aria-label` and `aria-labelledby` change, which no
      * property reports. Made on connection, there being no `MutationObserver` on
@@ -482,6 +543,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Moves focus to the list, or to the first wheel.

package/dist/time-picker/root/time-picker-root.js

@@ -4,9 +4,9 @@ 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 { clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { auditName, clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, slotFilled, slottedWords, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
@@ -16,6 +16,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         super(...arguments);
         this.badInputMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
         this.disableTimes = '';
+        this.emptyText = 'No times to choose from';
+        this.hint = '';
         this.label = 'Time';
         this.locale = '';
         this.manual = false;
@@ -83,6 +85,12 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.unavailableMessage = 'Choose a time that is available.';
         this.valueMissingMessage = 'Choose a time.';
         this.listRevealed = false;
+        this.hintSlotted = false;
+        this.labelSlotted = false;
+        this.handleLabelSlot = (event) => {
+            this.labelSlotted = slotFilled(event.target);
+            this.requestUpdate();
+        };
         this.naming = undefined;
         this.handleColumnsKeydown = (event) => {
             const step = inlineStep(this, event.key);
@@ -247,7 +255,27 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.reveal();
     }
     get listName() {
-        return hostWords(this, this.label);
+        const slotted = this.labelSlotted ? slottedWords(this, ['label']) : '';
+        return hostWords(this, slotted || this.label);
+    }
+    get hinted() {
+        return (this.hint !== '' || this.hintSlotted) && this.feedback === '';
+    }
+    get describedBy() {
+        return this.feedback !== '' ? 'feedback' : this.hinted ? 'hint' : nothing;
+    }
+    renderHint() {
+        const read = (event) => {
+            this.hintSlotted = slotFilled(event.target);
+        };
+        return this.hinted
+            ? html `<p part="hint" id="hint"><slot name="hint" @slotchange=${read}>${this.hint}</slot></p>`
+            : html `<slot name="hint" ?hidden=${this.feedback !== ''} @slotchange=${read}></slot>`;
+    }
+    renderSlottedLabel() {
+        return this.labelSlotted
+            ? html `<div part="label"><slot name="label" @slotchange=${this.handleLabelSlot}></slot></div>`
+            : html `<slot name="label" @slotchange=${this.handleLabelSlot}></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -264,6 +292,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.report();
         this.toggleState('blank', this.value === '');
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        auditName(this, () => null, 'Give it a `label`, a label in the `label` slot, or an `aria-label` that says what the time is for.', () => this.listName !== '');
+        const list = this.partNamed('list');
+        if (list) {
+            auditName(list, () => null, '', () => true);
+        }
+    }
     updated(changed) {
         super.updated(changed);
         this.reportRequired();
@@ -284,7 +320,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
-      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
@@ -336,7 +372,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
-      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
@@ -344,6 +380,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
+      empty-text=${this.emptyText}
       ?manual=${this.manual}
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
@@ -365,13 +402,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
           >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
         >`;
         })}
+      <slot name="empty" slot="empty">${this.emptyText}</slot>
     </${this.tag('listbox')}>`;
     }
     render() {
         if (this.variant === 'wheels' && this.mode === undefined) {
-            return html `${this.renderSpinner()}${this.renderPickerFeedback()}`;
+            return html `${this.renderSlottedLabel()}${this.renderSpinner()}${this.renderHint()}${this.renderPickerFeedback()}`;
         }
-        return html `${this.renderList()}${this.renderPickerFeedback()}`;
+        return html `${this.renderSlottedLabel()}${this.renderList()}${this.renderHint()}${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         const at = valueAsSeconds(this.value);
@@ -397,6 +435,13 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-text' })
+], HelixHeadlessTimePicker.prototype, "emptyText", void 0);
+__decorate([
+    property()
+], HelixHeadlessTimePicker.prototype, "hint", void 0);
 __decorate([
     property({ attribute: 'hour-cycle' })
 ], HelixHeadlessTimePicker.prototype, "hourCycle", void 0);
@@ -466,6 +511,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "variant", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "hintSlotted", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "labelSlotted", void 0);
 HelixHeadlessTimePicker = __decorate([
     customElement('helix-headless-time-picker')
 ], HelixHeadlessTimePicker);

package/dist/timeline/item/timeline-item.d.ts

@@ -8,6 +8,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * machine-readable value such as "2026-08-19" travels with a label such as
  * "yesterday". Without `datetime`, the label is a `<span>`.
  *
+ * **`relative` writes the time for you** as how long ago it was, such as "3
+ * hours ago", from `datetime`, where the `time` slot is empty. The words move
+ * on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup
+ * shared by every reading on the page, as `FormatDate` keeps its own. They are
+ * in the language of the page, or of the nearest `lang`.
+ *
  * Each entry draws the connector line that arrives at it and hides it when it
  * is the first entry, using `:host(:first-child)`. This needs no index, no
  * counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
@@ -44,6 +50,25 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
      * know what instant it names.
      */
     datetime: string;
+    /**
+     * Writes the time as how long ago it was, or how long until it, from
+     * `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
+     * `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
+     * `long`. The words move on as they go stale.
+     */
+    relative?: 'long' | 'narrow' | 'short';
+    /** The time the reading is drawn against, moved on when the words go stale. */
+    private readonly clock;
+    /**
+     * What the `time` slot shows where nothing is slotted: the reading under
+     * `relative`, read against the clock before each render, and nothing
+     * otherwise.
+     */
+    private reading;
+    /** The instant `datetime` names, where `relative` asks for a reading of it. */
+    private get moment();
+    /** What the reading says at `now`, and when it stops being true. */
+    private readingAt;
     /**
      * The kind of event. It sets the color of the mark and nothing else.
      */

package/dist/timeline/item/timeline-item.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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, RelativeClockController, relativeTime, wordsLocale, } from '@fusion.dev/helix-core';
 import { circle, record } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -13,9 +13,31 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     constructor() {
         super(...arguments);
         this.datetime = '';
+        this.clock = new RelativeClockController(this, {
+            expires: (now) => {
+                const moment = this.moment;
+                return moment ? this.readingAt(moment, now).next : undefined;
+            },
+        });
+        this.reading = '';
+    }
+    get moment() {
+        if (this.relative === undefined || this.datetime === '') {
+            return undefined;
+        }
+        const parsed = new Date(this.datetime);
+        return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+    }
+    readingAt(moment, now) {
+        return relativeTime(wordsLocale(this), { style: this.relative || 'long' })(moment, now);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (['datetime', 'relative'].some((key) => changed.has(key))) {
+            this.clock.tick();
+        }
+        const moment = this.moment;
+        this.reading = moment ? this.readingAt(moment, new Date(this.clock.now)).text : '';
         hostAria(this.internals, { role: 'listitem' });
     }
     renderMarker() {
@@ -29,7 +51,7 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     >`;
     }
     render() {
-        const when = html `<slot name="time"></slot>`;
+        const when = html `<slot name="time">${this.reading}</slot>`;
         return html `<div part="rail">
         ${this.renderMarker()}
       </div>
@@ -46,6 +68,9 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
 __decorate([
     property()
 ], HelixHeadlessTimelineItem.prototype, "datetime", void 0);
+__decorate([
+    property()
+], HelixHeadlessTimelineItem.prototype, "relative", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimelineItem.prototype, "tone", void 0);

package/dist/video/root/keys.d.ts

@@ -3,18 +3,22 @@
  *
  * Separable because the table is a convention rather than a fact about this
  * element: Space and `k` play, the arrows scrub and change the volume, `m`
- * mutes, `f` fills the screen, and `j` and `l` jump the distance the bar's own
- * buttons jump. What it needs is the media element and four actions, which is
+ * mutes, `f` fills the screen, `c` turns captions on and off, Home, End and
+ * the digits go to the start, the end and each tenth, and `j` and `l` jump the
+ * distance the bar's own buttons jump. What it needs is the media element and four actions, which is
  * the same handful the media session hands to a headset. Whether the keys are
  * bound at all, and what a taken press does to the event, stay with the element.
  */
 /** What a press asks the player for, which is all a key can do. */
 export interface KeyActions {
+    captions: () => void;
     fullscreen: () => void;
     seek: (seconds: number) => void;
     skipBy: (seconds: number) => void;
     toggle: () => void;
 }
+/** The keys `takeKey` answers, as `aria-keyshortcuts` names them. */
+export declare const PLAYER_KEYS = "Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9";
 /**
  * Answers one press, and says whether it was one of these.
  *

package/dist/video/root/keys.js

@@ -1,8 +1,9 @@
 import { SKIP_SECONDS } from '@fusion.dev/helix-core';
 const PRESSED_BY_SPACE = new Set(['a', 'button', 'select', 'summary', 'textarea']);
 const PRESSED_ROLES = /^(button|checkbox|link|menuitem\w*|option|radio|switch|tab)$/;
+export const PLAYER_KEYS = 'Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9';
 export const takeKey = (event, video, actions) => {
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
         return false;
     }
     const origin = (event.composedPath?.()[0] ?? event.target);
@@ -54,7 +55,23 @@ export const takeKey = (event, video, actions) => {
             actions.fullscreen();
             break;
         }
+        case 'c': {
+            actions.captions();
+            break;
+        }
+        case 'Home': {
+            actions.seek(0);
+            break;
+        }
+        case 'End': {
+            actions.seek(video.duration);
+            break;
+        }
         default: {
+            if (/^[0-9]$/.test(event.key) && Number.isFinite(video.duration)) {
+                actions.seek((video.duration * Number(event.key)) / 10);
+                break;
+            }
             return false;
         }
     }

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

@@ -29,8 +29,16 @@ import '../../menu/index.js';
  * | Up, Down | Raises or lowers the volume by a tenth. |
  * | `m` | Mutes or unmutes. |
  * | `f` | Enters or leaves fullscreen. |
+ * | `c` | Turns captions on or off. |
+ * | Home, End | Goes to the start or the end. |
+ * | `0` to `9` | Goes to that tenth of the video: `5` is the middle. |
  * | Tab | Moves through the controls on the bar. |
  *
+ * A key with Control, Command, or Alt held is left to the browser. The
+ * player lists its keys in `aria-keyshortcuts`, and a live region says what a
+ * key changed that is not on the focused control: playing or paused, muted,
+ * the volume, captions on or off, and where the video is after a seek.
+ *
  * On the scrubber and the volume slider, the arrow keys, Page Up, Page Down,
  * Home, and End move the slider, as on any range input.
  *
@@ -125,7 +133,7 @@ import '../../menu/index.js';
  * @csspart forward - The button that skips forward ten seconds.
  * @csspart fullscreen - The button that enters and leaves fullscreen.
  * @csspart header - The region at the top left that holds the `header` slot.
- * @csspart live - A live region that repeats the loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
+ * @csspart live - A live region that says the loading text, and what a key changed, such as the volume. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the video waits for more data. Draw the spinner
  * with `::part(loading)::before` in your stylesheet. This tier ships no CSS and renders
  * no extra box for it.
@@ -187,6 +195,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * looking at.
      */
     autoplay: boolean;
+    /**
+     * What the live region says when `c` turns captions off.
+     */
+    captionsHiddenLabel: string;
     /**
      * The name of the captions control when the video has one track. The control
      * turns that track on and off.
@@ -201,6 +213,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * tracks.
      */
     captionsOffLabel: string;
+    /**
+     * What the live region says when `c` turns captions on.
+     */
+    captionsShownLabel: string;
     /**
      * Whether the browser draws its native controls. When set, this element draws
      * no controls of its own.
@@ -326,6 +342,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * What the button that opens `overflow-controls` is called.
      */
     moreLabel: string;
+    /**
+     * What the live region says when a key mutes the video.
+     */
+    mutedLabel: string;
     /**
      * The name of the mute control. The control shows as pressed while the video
      * is muted.
@@ -353,6 +373,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * bar: two of the same control is worse than either placement.
      */
     overflowControls: string;
+    /**
+     * What the live region says when a key pauses the video.
+     */
+    pausedLabel: string;
     /**
      * The name of the play control while pressing it would pause the video.
      */
@@ -372,6 +396,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * this is what a screen reader calls it on arriving.
      */
     playerLabel: string;
+    /**
+     * What the live region says when a key plays the video.
+     */
+    playingLabel: string;
     /**
      * The name of the play control while pressing it would start the video.
      */
@@ -453,6 +481,15 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * `{duration}` filled in.
      */
     timeLabel: string;
+    /**
+     * What the live region says when a key unmutes the video.
+     */
+    unmutedLabel: string;
+    /**
+     * What the live region says when a key changes the volume. `{percent}` is the
+     * volume from 0 to 100, written in the locale.
+     */
+    volumeChangedLabel: string;
     /**
      * What the volume slider is called.
      */
@@ -773,6 +810,28 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * key means and this says that nothing else gets it.
      */
     private readonly handleKeydown;
+    /**
+     * What a reader hears after a key, which changed something they may not be
+     * looking at: the focus is on the player or a control, and the bar may be
+     * hidden.
+     *
+     * **Said from the video's state after the press**, except for playing,
+     * which starts on a promise: whether the video was paused before the press
+     * says which way it went. Nothing for fullscreen, which a reader sees and a
+     * screen reader reports as the window changing, nor for `c` where there are
+     * no captions to turn on.
+     */
+    private sayKey;
+    /**
+     * What the live region says after a key, until the video waits for data,
+     * which it says over this.
+     */
+    private said;
+    /**
+     * Puts words in the live region. The same words twice differ by a space no
+     * reader hears, since a region whose text does not change is not read again.
+     */
+    private say;
     /** The caption tracks among the copies, named as the menu names them. */
     private captions;
     /**