@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -24,6 +24,18 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * checked values, comma separated, which `values` also gives as a list, and
  * the tree says `aria-multiselectable`.
  *
+ * `selection-mode="leaf"` chooses one item at a time and only the items at the
+ * ends: a press, Enter or Space on a branch opens or closes it and chooses
+ * nothing, as Web Awesome's `leaf` mode does.
+ *
+ * Keys: Up and Down Arrow move between the items a reader can see; Right
+ * Arrow opens a shut branch and then moves into it, and Left Arrow shuts an
+ * open one and then moves to its parent, the two swapping on a right-to-left
+ * page. Home and End go to the first and the last item, Enter and Space choose
+ * or open, and the tree's one tab stop stays on the item last reached. In a
+ * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
+ * item or clears them all, and Shift with Up or Down Arrow moves and checks.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -91,12 +103,12 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      */
     nesting?: 'heading' | 'peer' | 'subordinate';
     /**
-     * Whether a reader can check many items. Unset, one item is chosen at a
-     * time.
+     * Whether a reader can check many items, or choose only the items at the
+     * ends. Unset, one item is chosen at a time, branches included.
      *
      * Optional, so a tree of one choice writes no attribute onto the host.
      */
-    selectionMode?: 'multiple';
+    selectionMode?: 'leaf' | 'multiple';
     /**
      * The checked values, as a list, under `selection-mode="multiple"`, and the
      * chosen value alone otherwise. Writing it sets `active`.
@@ -154,6 +166,15 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * Returns whether the press was one of those.
      */
     private handleTyping;
+    /**
+     * The keys of a tree of check marks, as the tree pattern gives them:
+     * Control+A (Command+A on an Apple keyboard) checks every item, or clears
+     * them all where every one is checked, and Shift with Up or Down Arrow moves
+     * to the item before or after and checks or unchecks it.
+     *
+     * Returns whether the press was one of those.
+     */
+    private handleMultiple;
     private move;
     private focusOn;
     private readonly handleKeydown;

package/dist/tree/root/tree-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, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -45,6 +45,10 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             if (!current || !this.items.includes(current)) {
                 return;
             }
+            if (this.multiple && this.handleMultiple(current, event)) {
+                event.preventDefault();
+                return;
+            }
             if (this.handleTyping(current, event)) {
                 event.preventDefault();
                 return;
@@ -71,21 +75,16 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             else if (event.key === 'End') {
                 this.focusOn(this.visibleItems.at(-1));
             }
-            else if (along === 1) {
-                if (current.isBranch && !current.open && !current.disabled) {
-                    current.requestOpen(true);
+            else if (along !== 0) {
+                const arrow = treeArrow({ branch: current.isBranch, disabled: current.disabled, open: current.open }, along);
+                if (arrow === 'open' || arrow === 'close') {
+                    current.requestOpen(arrow === 'open');
                     this.syncItems();
                 }
-                else if (current.isBranch) {
+                else if (arrow === 'child') {
                     this.move(current, 1);
                 }
-            }
-            else if (along === -1) {
-                if (current.isBranch && current.open && !current.disabled) {
-                    current.requestOpen(false);
-                    this.syncItems();
-                }
-                else {
+                else if (arrow === 'parent') {
                     const parent = closestInstance(current.parentElement, HelixHeadlessTreeItem);
                     this.focusOn(parent instanceof HelixHeadlessTreeItem ? parent : undefined);
                 }
@@ -157,7 +156,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const held = visible.find((item) => item.focusable) ??
             this.visibleAncestor(this.items.find((item) => item.focusable));
         const stop = held ?? chosen;
-        const heads = this.nesting === 'heading';
+        const heads = this.nesting === 'heading' || this.selectionMode === 'leaf';
         const multiple = this.multiple;
         const checked = new Set(this.values);
         for (const item of this.items) {
@@ -217,6 +216,26 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }
         return true;
     }
+    handleMultiple(current, event) {
+        if (selectsAll(event)) {
+            const leaves = this.items
+                .filter((item) => !this.holds(item) && !item.disabled && item.value !== '')
+                .map((item) => item.value);
+            this.requestActive(pressRow({ branch: true, disabled: false, leaves, value: '' }, this.values, this.order).join(','));
+            this.syncItems();
+            return true;
+        }
+        if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            const visible = this.visibleItems;
+            const next = visible[visible.indexOf(current) + (event.key === 'ArrowDown' ? 1 : -1)];
+            if (next) {
+                this.focusOn(next);
+                next.select();
+            }
+            return true;
+        }
+        return false;
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);

package/dist/tree/selection.js

@@ -1,3 +1,4 @@
+import { toggleEvery } from '@fusion.dev/helix-core';
 const valuesOf = (row) => row.branch && row.leaves.length > 0 ? [...row.leaves] : row.value === '' ? [] : [row.value];
 export const checkedState = (row, chosen) => {
     const values = valuesOf(row);
@@ -8,19 +9,5 @@ export const checkedState = (row, chosen) => {
     return count === values.length ? true : 'mixed';
 };
 export const pressRow = (row, chosen, order) => {
-    if (row.disabled) {
-        return [...chosen];
-    }
-    const values = valuesOf(row);
-    const all = values.every((value) => chosen.includes(value));
-    const next = new Set(chosen);
-    for (const value of values) {
-        if (all) {
-            next.delete(value);
-        }
-        else {
-            next.add(value);
-        }
-    }
-    return order.filter((value) => next.has(value));
+    return row.disabled ? [...chosen] : toggleEvery(chosen, valuesOf(row), order);
 };

package/dist/trend/figure.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The movement a signed change makes: `up` above zero, `down` below it and
+ * `neutral` at zero. Nothing for a value that is no number, so a trend with
+ * none falls back to what its attributes say.
+ */
+export declare const movementOf: (value: number | undefined) => 'down' | 'neutral' | 'up' | undefined;
+/**
+ * A change written in a locale with `Intl.NumberFormat` options, such as
+ * `12%` for 0.12 with `{ style: 'percent' }`.
+ *
+ * **The size of the change, with no sign**, because the movement is already
+ * said by the arrow and the word: "Down, worse 8%" rather than "Down, worse
+ * -8%". Options that set `signDisplay` ask for the sign, and get the value as
+ * it is.
+ */
+export declare const figureOf: (value: number, locale?: string, options?: Intl.NumberFormatOptions) => string;

package/dist/trend/figure.js

@@ -0,0 +1,8 @@
+import { formatNumber } from '@fusion.dev/helix-core';
+export const movementOf = (value) => {
+    if (value === undefined || !Number.isFinite(value)) {
+        return undefined;
+    }
+    return value > 0 ? 'up' : value < 0 ? 'down' : 'neutral';
+};
+export const figureOf = (value, locale = '', options) => formatNumber(options?.signDisplay === undefined ? Math.abs(value) : value, locale, options);

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

@@ -1,23 +1,36 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary An indicator that shows which way a measurement moved, and whether the change is good.
  *
  * @description
- * A trend has three parts: a direction of up, down, or neutral, the metric that
- * moved, and a label for the period it moved over. The arrow shows the
- * direction and its color shows whether the change is good. Direction and
+ * A trend has three parts: a `movement` of up, down, or neutral, the metric
+ * that moved, and a label for the period it moved over. The arrow shows the
+ * movement and its color shows whether the change is good. Movement and
  * judgment are separate properties because they are separate facts.
  *
  * `good` is unset by default, so a trend with no judgment is gray. For churn,
  * latency, error rate, cost, and bounce rate, up is bad. Set the metric's
  * polarity once with `good`, and the component picks the color from the
- * direction.
+ * movement. The judgment is also a custom state, `better` or `worse`, for a
+ * sheet of your own.
  *
- * The direction is also written as a word, so a screen reader reads it. The
+ * The movement is also written as a word, so a screen reader reads it. The
  * styled tier hides `part="direction"` visually and keeps it in the
  * accessibility tree. The words are properties, `up-label` through
- * `worse-label`, so a page in another language can set its own.
+ * `worse-label`, so a page in another language can set its own. The arrow and
+ * any glyph slotted in its place are hidden from screen readers.
+ *
+ * **Or give the change as a number.** `value` is the signed change, such as
+ * `0.12` or `-8`: its sign is the movement, and its size is written as the
+ * metric with `Intl.NumberFormat`, in `locale` and with `format-options`,
+ * such as `{"style":"percent"}` for `12%`. `movement` still wins when it is
+ * written. Without `value` the metric is what the page slots.
+ *
+ * Slot one glyph per movement into `up-icon`, `down-icon` and `neutral-icon`,
+ * and the trend shows the one that matches; a glyph in `icon` stands in for
+ * all three. Inside a `Stat`, put the trend in the stat's `trend` slot so it is
+ * read with the figure it qualifies.
  *
  * The metric and the label are bare slots. An element that assigned its own
  * slot on connect would add an attribute to its host after upgrade, which the
@@ -29,12 +42,19 @@ import { type TemplateResult } from 'lit';
  * @aliases Delta, Change, Movement
  * @documentation https://fusion.dev/helix/components/trend
  *
- * @slot - The metric that moved.
- * @slot icon - Replaces the arrow, such as with a glyph of your own set. Slot the one for the current direction.
+ * @slot - The metric that moved. Not needed with `value`, which writes it.
+ * @slot down-icon - Replaces the arrow while `movement` is `down`. Hidden from screen readers.
+ * @slot icon - Replaces the arrow for every movement, such as with a glyph of your own set. Hidden from screen readers, since the movement is also a word.
  * @slot label - The period the metric moved over.
+ * @slot neutral-icon - Replaces the bar while the trend has not moved. Hidden from screen readers.
+ * @slot up-icon - Replaces the arrow while `movement` is `up`. Hidden from screen readers.
  *
- * @csspart direction - The direction as a word, for people who cannot see the arrow.
+ * @csspart direction - The movement as a word, for people who cannot see the arrow.
  * @csspart icon - The arrow.
+ * @csspart value - The change written from `value`, hidden while `value` is no number.
+ *
+ * @cssstate better - The trend moved the way `good` names.
+ * @cssstate worse - The trend moved against the way `good` names.
  */
 export declare class HelixHeadlessTrend extends HelixElement {
     /**
@@ -42,14 +62,11 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     betterLabel: string;
     /**
-     * Which way the measurement moved.
+     * Which way the measurement moved, as `movement` says it.
      *
-     * Absent is neutral, so a trend with nothing to report draws a bar rather
-     * than picking a direction. Optional rather than defaulted for the reason
-     * `Stat.direction` is: a reflecting property with a default writes its
-     * attribute onto the host the moment the element upgrades, and the host is
-     * markup the consumer rendered, which React compares against what it rendered
-     * and reports as a hydration mismatch.
+     * @deprecated Use `movement`. `direction` is a layout on `Stat` and `Flex`,
+     * which are written beside a trend, so one word meant two things. Still read
+     * when `movement` is absent.
      */
     direction?: 'down' | 'neutral' | 'up';
     /**
@@ -57,14 +74,45 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     downLabel: string;
     /**
-     * Which direction counts as an improvement for this metric.
+     * `Intl.NumberFormat` options `value` is written with, as React Aria's
+     * NumberField takes them: a percent, a currency, a unit or a number of
+     * decimals. Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+     * ```
+     *
+     * The example says "Down 8.4%". The size is written without a sign, since
+     * the arrow and the word say which way; set `signDisplay` for one. Absent
+     * writes the number as the locale writes any number.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Which movement counts as an improvement for this metric.
      *
      * Absent states the movement without judging it, which is the honest default:
      * revenue up is good news and latency up is bad news, and only the consumer
      * knows which one this is. Set it once per metric and it holds while the
-     * direction changes underneath.
+     * movement changes underneath.
      */
     good?: 'down' | 'up';
+    /**
+     * The locale `value` is written in, such as `de` for `1.234,5`.
+     *
+     * Absent uses the runtime's own. Set it on a page rendered on a server, so
+     * the server and the browser write the figure alike.
+     */
+    locale: string;
+    /**
+     * Which way the measurement moved.
+     *
+     * Absent is neutral, so a trend with nothing to report draws a bar rather
+     * than picking a direction. Optional rather than defaulted: a reflecting
+     * property with a default writes its attribute onto the host the moment the
+     * element upgrades, and the host is markup the consumer rendered, which React
+     * compares against what it rendered and reports as a hydration mismatch.
+     */
+    movement?: 'down' | 'neutral' | 'up';
     /**
      * The word read out for no move, or for a direction that is not one of the
      * three.
@@ -74,6 +122,16 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * The word read out for a move up.
      */
     upLabel: string;
+    /**
+     * The change as a signed number, such as `0.12` or `-8`, which sets the
+     * movement by its sign and is written as the metric.
+     *
+     * Above zero is up, below is down, and zero is neutral; `movement` wins when
+     * both are written. The size is written in the `value` part with
+     * `format-options` and `locale`, in place of a slotted metric. Absent leaves
+     * the movement to `movement` and the metric to the slot.
+     */
+    value?: number;
     /**
      * The word read out after the direction when the move is a setback.
      */
@@ -90,6 +148,12 @@ export declare class HelixHeadlessTrend extends HelixElement {
         content: string;
         viewBox: string;
     }): TemplateResult;
+    /** The movement, read from `movement`, then from the old `direction`, then from the sign of `value`. */
+    private get moved();
+    /** Better or worse, or neither when `good` is unset or nothing moved. */
+    private get judged();
+    protected updated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/trend/root/trend-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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { arrowDown, arrowUp, minus } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { figureOf, movementOf } from '../figure.js';
 const DIRECTIONS = {
     down: { icon: arrowDown, word: 'downLabel' },
     neutral: { icon: minus, word: 'unchangedLabel' },
@@ -20,12 +21,13 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         super(...arguments);
         this.betterLabel = 'better';
         this.downLabel = 'Down';
+        this.locale = '';
         this.unchangedLabel = 'Unchanged';
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
     }
     renderIcon(icon) {
-        return html `<slot name="icon"
+        return html `<slot aria-hidden="true" name="icon"
       ><svg
         aria-hidden="true"
         data-glyph
@@ -37,14 +39,51 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
       </svg></slot
     >`;
     }
+    get moved() {
+        return this.movement ?? this.direction ?? movementOf(this.value);
+    }
+    get judged() {
+        const moved = this.moved;
+        if (!this.good || !moved || !(moved in DIRECTIONS) || moved === 'neutral') {
+            return undefined;
+        }
+        return this.good === moved ? 'better' : 'worse';
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('direction') && this.direction && changed.get('direction') === undefined) {
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName} direction="${this.direction}"> is deprecated: write ` +
+                    `movement="${this.direction}", which says the same. \`direction\` is a layout on Stat and Flex.`,
+                tag: this.localName,
+            });
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const judged = this.judged;
+        this.toggleState('better', judged === 'better');
+        this.toggleState('worse', judged === 'worse');
+    }
     render() {
-        const direction = readDirection(this.direction);
-        const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
-            : '';
-        return html `${this.renderIcon(direction.icon)}
+        const moved = this.moved;
+        const direction = readDirection(moved);
+        const judged = this.judged;
+        const judgment = judged ? `, ${judged === 'better' ? this.betterLabel : this.worseLabel}` : '';
+        const icon = this.renderIcon(direction.icon);
+        const glyph = moved === 'up'
+            ? html `<slot aria-hidden="true" name="up-icon">${icon}</slot>`
+            : moved === 'down'
+                ? html `<slot aria-hidden="true" name="down-icon">${icon}</slot>`
+                : html `<slot aria-hidden="true" name="neutral-icon">${icon}</slot>`;
+        const value = this.value;
+        const figure = value === undefined || !Number.isFinite(value)
+            ? ''
+            : figureOf(value, this.locale, this.formatOptions);
+        return html `${glyph}
       <span part="direction">${`${this[direction.word]}${judgment}`}</span>
-      <slot></slot>
+      <span part="value" ?hidden=${figure === ''}>${figure}</span><slot></slot>
       <slot name="label"></slot>`;
     }
 };
@@ -57,15 +96,27 @@ __decorate([
 __decorate([
     property({ attribute: 'down-label' })
 ], HelixHeadlessTrend.prototype, "downLabel", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessTrend.prototype, "formatOptions", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    property()
+], HelixHeadlessTrend.prototype, "locale", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTrend.prototype, "movement", void 0);
 __decorate([
     property({ attribute: 'unchanged-label' })
 ], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);
 __decorate([
     property({ attribute: 'up-label' })
 ], HelixHeadlessTrend.prototype, "upLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTrend.prototype, "value", void 0);
 __decorate([
     property({ attribute: 'worse-label' })
 ], HelixHeadlessTrend.prototype, "worseLabel", void 0);

package/dist/video/media-events.d.ts

@@ -22,28 +22,23 @@ export declare const MEDIA_EVENTS: readonly ['abort', 'canplay', 'canplaythrough
 /** One of the media events the player relays. */
 export type MediaEventName = (typeof MEDIA_EVENTS)[number];
 /**
- * The copy the host sends: the same name, neither bubbling nor composed.
+ * Hands each media event the video fires to `relay`, and returns what stops
+ * it. The player relays through `relayNativeEvent`, which sends the same name
+ * with the same `bubbles`, `cancelable` and `composed`.
  *
- * **As the platform sends it, which is what makes it reach a React consumer at
- * all.** These names are in react-dom's `nonDelegatedEvents`, which React wires
- * on a `<video>` and never on a custom element, so its root listener hears none
- * of them. `bindReactHandler` closes that for an event that does not bubble,
- * and skips one that does, on the grounds that a bubbling relay already reaches
- * React's delegated listener and binding it again would double every call. A
- * copy sent with `bubbles: true` lands in the branch that refuses to bind, and
- * `onPlay` on the player is silent.
- *
- * Not cancelable, as the platform's are not: the media has already moved by the
- * time the event is sent, and a refusal would have nothing to stop.
- */
-export declare const relayedCopy: (event: Event) => Event;
-/**
- * Sends each media event the video fires on from the host, and returns what
- * stops it.
+ * **As the platform sends it, neither bubbling nor composed, which is what
+ * makes it reach a React consumer at all.** These names are in react-dom's
+ * `nonDelegatedEvents`, which React wires on a `<video>` and never on a custom
+ * element, so its root listener hears none of them. `bindReactHandler` closes
+ * that for an event that does not bubble, and skips one that does, on the
+ * grounds that a bubbling relay already reaches React's delegated listener and
+ * binding it again would double every call. A copy sent with `bubbles: true`
+ * would land in the branch that refuses to bind, and `onPlay` on the player
+ * would be silent.
  *
  * Bound once, after the first render, so the player's own listeners in its
  * template are ahead of it on the same video: what a consumer reads off the
  * player in a handler (`paused`, `volume`, `currentTime`) is already the
  * player's state by the time the copy reaches them.
  */
-export declare const relayMedia: (video: EventTarget, host: EventTarget) => (() => void);
+export declare const relayMedia: (video: EventTarget, relay: (event: Event) => void) => (() => void);

package/dist/video/media-events.js

@@ -23,11 +23,7 @@ export const MEDIA_EVENTS = [
     'volumechange',
     'waiting',
 ];
-export const relayedCopy = (event) => new Event(event.type, { bubbles: false, cancelable: false, composed: false });
-export const relayMedia = (video, host) => {
-    const relay = (event) => {
-        host.dispatchEvent(relayedCopy(event));
-    };
+export const relayMedia = (video, relay) => {
     for (const name of MEDIA_EVENTS) {
         video.addEventListener(name, relay);
     }

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

@@ -20,6 +20,18 @@ export interface Conditions {
 }
 /** Whether this platform can do a named control at all. */
 export declare const offers: (one: string, player: Conditions) => boolean;
+/**
+ * What `full` stands for in a list of controls: every control that does
+ * something to the video by itself, as Web Awesome's `full` preset adds speed
+ * and picture in picture to its standard bar.
+ *
+ * `download`, `previous` and `next` are left out. Offering the file is a
+ * decision about the content, and the other two move a set the player cannot
+ * see, so each is named where it is wanted.
+ */
+export declare const FULL_CONTROLS: readonly ['rewind', 'forward', 'speed', 'pip', 'remote'];
+/** The names in a written list, with `full` read as the controls it stands for, each once. */
+export declare const controlNames: (written: string) => string[];
 /** The extras asked for, in order, and only the ones this platform can do. */
 export declare const barControls: (written: string, player: Conditions) => string[];
 /**

package/dist/video/root/extra-controls.js

@@ -20,10 +20,14 @@ export const offers = (one, player) => {
     }
     return one === 'speed';
 };
-export const barControls = (written, player) => writtenList(written).filter((one) => offers(one, player));
+export const FULL_CONTROLS = ['rewind', 'forward', 'speed', 'pip', 'remote'];
+export const controlNames = (written) => [
+    ...new Set(writtenList(written).flatMap((one) => one === 'full' ? FULL_CONTROLS : [one])),
+];
+export const barControls = (written, player) => controlNames(written).filter((one) => offers(one, player));
 export const menuControls = (written, onBar, player) => {
     const bar = new Set(onBar);
-    return writtenList(written).filter((one) => !bar.has(one) && offers(one, player));
+    return controlNames(written).filter((one) => !bar.has(one) && offers(one, player));
 };
 export const ownFile = (src) => {
     if (src === '') {

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

@@ -17,11 +17,22 @@ import '../../menu/index.js';
  * not drawn, and the keys below are not bound, so a key press does not seek
  * twice.
  *
- * The keys match other players, and they are bound on the element only:
- * - Space and `k` play or pause.
- * - The arrow keys seek and change the volume.
- * - `m` mutes.
- * - `f` toggles fullscreen.
+ * **Keyboard.** The keys match other players, and they are bound on the
+ * element only, so they work while focus is on the player.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Space, `k` | Plays or pauses. Space on a button presses the button. |
+ * | Right, Left | Moves 5 seconds forward or back. |
+ * | Shift with Right or Left | Moves 10 seconds forward or back. |
+ * | `l`, `j` | Moves 10 seconds forward or back, as the skip buttons do. |
+ * | Up, Down | Raises or lowers the volume by a tenth. |
+ * | `m` | Mutes or unmutes. |
+ * | `f` | Enters or leaves fullscreen. |
+ * | Tab | Moves through the controls on the bar. |
+ *
+ * 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.
  *
  * `<source>` and `<track>` children are copied into the video. A media element
  * selects resources from its own child nodes, and a slot is one node, so
@@ -107,6 +118,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The trailing mark: a check mark when the row is checked, or a caret when it opens a submenu.
  * @csspart entry-shortcut - The key drawn for a row's shortcut. The player's rows set none.
  * @csspart entry-shortcut-kbd - The key inside `entry-shortcut`.
+ * @csspart entry-shortcut-key - One key of a row's shortcut chord, inside `entry-shortcut`. The player's rows set none.
+ * @csspart entry-shortcut-separator - The `+` between two keys of a row's shortcut, where the platform writes one.
  * @csspart entry-start - The leading column that holds the `start` slot. It is always rendered.
  * @csspart failure - The message shown when the source cannot be played.
  * @csspart forward - The button that skips forward ten seconds.
@@ -229,7 +242,11 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * that cannot work is worse than one that is not there.
      *
      * The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-     * `previous` and `next`.
+     * `previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+     * `pip` and `remote` in that order, the controls that act on the video by
+     * themselves, as Web Awesome's `full` preset does, and a name it already
+     * holds is drawn once. `extra-controls="full"` is the whole bar, and
+     * `overflow-controls="full"` puts all of it behind one button.
      *
      * **`previous` and `next` do nothing to the video, and are offered anyway.**
      * They announce `helix-previous` and `helix-next` and stop there, so what