@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/tour/root/tour-root.js

@@ -4,10 +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 { customElement, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, hostAria, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
-let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
+let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.backLabel = '';
@@ -16,7 +16,6 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.indexState = undefined;
         this.label = '';
         this.nextLabel = '';
-        this.open = false;
         this.skipLabel = '';
         this.spotlightPadding = 8;
         this.sizer = undefined;
@@ -42,6 +41,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.handleViewport = () => {
             this.light();
         };
+        this.followed = false;
     }
     get index() {
         return this.indexState ?? this.defaultIndex;
@@ -71,19 +71,14 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.move(this.index - 1);
     }
     skip() {
-        const event = new HelixBeforeCloseEvent();
-        this.dispatchEvent(event);
-        if (event.defaultPrevented) {
-            return;
-        }
-        this.open = false;
+        this.requestOpen(false);
     }
     finish() {
         this.dispatchEvent(new HelixCompleteEvent({ value: String(this.index) }));
         this.open = false;
     }
     move(to) {
-        requestChange({
+        const moved = requestChange({
             apply: (value) => {
                 this.index = value;
             },
@@ -91,6 +86,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             host: this,
             next: to,
         });
+        if (moved) {
+            this.dispatchEvent(new HelixActivateEvent({ value: String(this.index) }));
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -113,12 +111,54 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'region' });
+        hostAria(this.internals, {
+            label: this.open ? this.label : '',
+            role: this.open ? 'region' : '',
+        });
     }
     updated(changed) {
         super.updated(changed);
         this.settle();
         this.light();
+        this.follow(changed);
+    }
+    follow(changed) {
+        if (!this.followed) {
+            this.followed = true;
+            return;
+        }
+        const opened = changed.has('open') && this.open && changed.get('open') === false;
+        const closed = changed.has('open') && !this.open && changed.get('open') === true;
+        const active = deepActiveElement();
+        const inside = active === null || active === document.body || deepContains(this, active);
+        if (opened) {
+            if (active instanceof HTMLElement && !deepContains(this, active)) {
+                this.returnFocus = active;
+            }
+            this.focusCurrent();
+        }
+        else if (closed) {
+            const back = this.returnFocus;
+            this.returnFocus = undefined;
+            if (inside && back?.isConnected) {
+                back.focus();
+            }
+        }
+        else if (this.open && changed.has('index') && inside) {
+            this.focusCurrent();
+        }
+    }
+    focusCurrent() {
+        const stops = this.stops;
+        const stop = stops[Math.max(0, Math.min(this.index, stops.length - 1))];
+        if (!stop) {
+            return;
+        }
+        void stop.updateComplete.then(() => {
+            if (this.open && stop.current) {
+                stop.focus();
+            }
+        });
     }
     settle() {
         const stops = this.stops;
@@ -215,9 +255,6 @@ __decorate([
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessTour.prototype, "nextLabel", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTour.prototype, "open", void 0);
 __decorate([
     property({ attribute: 'skip-label' })
 ], HelixHeadlessTour.prototype, "skipLabel", void 0);

package/dist/tour/stop/tour-stop.d.ts

@@ -25,6 +25,10 @@ import '../../button/index.js';
  * on the page from markup. It resolves against the stop's root node, so a stop
  * inside a shadow tree points at a target in that tree.
  *
+ * The panel is a `group`, named by the first heading in the stop's content,
+ * and only while the stop is shown. `focus()` moves focus to the panel, which
+ * is what the tour does when it opens or moves on.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -110,7 +114,20 @@ export declare class HelixHeadlessTourStop extends HelixElement {
     /** The element the stop points at, or `null` when no element has the `for` id. */
     get target(): HTMLElement | null;
     private readonly floating;
-    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Moves focus to the panel while the stop is shown.
+     *
+     * The host draws no box and takes no focus, so focusing it did nothing. The
+     * panel takes focus without joining the `Tab` order, and a screen reader
+     * reads the group it is.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Names the panel by the first heading in the content, by element
+     * reference: the heading is in the light DOM and the panel in this shadow
+     * root, which an IDREF cannot cross.
+     */
+    private nameByHeading;
     protected updated(changed: PropertyValues): void;
     /**
      * Skip, back and next, behind a seam the styled tier can move.

package/dist/tour/stop/tour-stop.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, elementById, HelixElement, HelixTourAskEvent, hostAria, PopoverController, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, HelixTourAskEvent, PopoverController, } from '@fusion.dev/helix-core';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
@@ -43,12 +43,26 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     get target() {
         return this.for === '' ? null : elementById(this, this.for);
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { role: 'group' });
+    focus(options) {
+        const bubble = this.partNamed('bubble');
+        if (this.current && bubble) {
+            bubble.focus(options);
+            return;
+        }
+        super.focus(options);
+    }
+    nameByHeading() {
+        const bubble = this.partNamed('bubble');
+        if (!bubble || !('ariaLabelledByElements' in bubble)) {
+            return;
+        }
+        const heading = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+        const found = [...this.children].flatMap((one) => one.matches(heading) ? [one] : [...one.querySelectorAll(heading)])[0];
+        bubble.ariaLabelledByElements = found ? [found] : null;
     }
     updated(changed) {
         super.updated(changed);
+        this.nameByHeading();
         if (this.current) {
             this.floating.show();
         }
@@ -85,7 +99,13 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     </slot>`;
     }
     render() {
-        return html `<div part="bubble" popover="manual" ?hidden=${!this.current}>
+        return html `<div
+      part="bubble"
+      popover="manual"
+      role="group"
+      tabindex="-1"
+      ?hidden=${!this.current}
+    >
       ${''}
       <div
         part="arrow${this.side ? { bottom: ' arrow-bottom', left: ' arrow-left', right: ' arrow-right', top: ' arrow-top' }[this.side] : ''}"

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

@@ -19,6 +19,10 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * **`href` makes the whole row a link**, rendered as an `<a>`. Enter, middle
  * click, and the status bar then work anywhere on the row.
  *
+ * Pressing a branch, or Enter or Space on it, opens or closes it. A branch with
+ * a `value` is chosen as well and sends `helix-select`, unless the tree has
+ * `nesting="heading"`, where a branch names the list under it.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TreeNode, Branch, Leaf
@@ -32,7 +36,7 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before a branch closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before a branch opens, and cancelable.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen, and cancelable. Canceling it changes nothing.
- * @event {Event} toggle - Sent when the branch opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Sent when the branch opens or closes, with `newState` and `oldState`.
  *
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target unless `href` moves it to the row.
@@ -46,6 +50,12 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @cssstate selected - While it is selected.
  */
 export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
+    /**
+     * @internal Set by the tree: whether a branch heads the list under it, as
+     * under `nesting="heading"`. Such a branch only opens and closes when it is
+     * pressed, because it names a list and is not a destination of its own.
+     */
+    heads: boolean;
     /**
      * The URL this node links to. Setting it makes the row a link.
      *
@@ -101,14 +111,14 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * Where the link opens. Use it for a row that leaves the site.
      */
     target: string;
-    /**
-     * Identifies the item to your code. It is sent in `helix-select`.
-     */
-    value: string;
     /**
      * Whether this item holds the tree's single tab stop.
      */
     focusable: boolean;
+    /**
+     * Identifies the item to your code. It is sent in `helix-select`.
+     */
+    value: string;
     /**
      * Whether anything is slotted into `children`.
      *
@@ -119,6 +129,12 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      */
     private branch;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * @internal Whether pressing this branch chooses it as well as opening or
+     * closing it: it has a value and does not head its list. Read by the tree
+     * for Enter and Space.
+     */
+    get choosable(): boolean;
     /**
      * @internal Whether this row holds children, read by the tree, which moves
      * and opens differently for a branch. Public rather than protected because

package/dist/tree/item/tree-item.js

@@ -12,12 +12,13 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.heads = false;
         this.href = '';
         this.rel = '';
         this.selected = false;
         this.target = '';
-        this.value = '';
         this.focusable = false;
+        this.value = '';
         this.branch = false;
         this.handleToggleClick = (event) => {
             event.preventDefault();
@@ -28,6 +29,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             const onLink = event.composedPath().some((node) => node instanceof HTMLAnchorElement);
             if (this.branch && this.href === '') {
                 if (!onLink) {
+                    if (this.choosable) {
+                        this.select();
+                    }
                     this.toggleOpen();
                 }
                 return;
@@ -46,6 +50,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             this.branch = slot.assignedElements().length > 0;
         });
     }
+    get choosable() {
+        return this.value !== '' && !this.heads;
+    }
     get isBranch() {
         return this.branch;
     }
@@ -145,6 +152,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "heads", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "href", void 0);
@@ -160,12 +170,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "target", void 0);
-__decorate([
-    property()
-], HelixHeadlessTreeItem.prototype, "value", void 0);
 __decorate([
     state()
 ], HelixHeadlessTreeItem.prototype, "focusable", void 0);
+__decorate([
+    property()
+], HelixHeadlessTreeItem.prototype, "value", void 0);
 __decorate([
     state()
 ], HelixHeadlessTreeItem.prototype, "branch", void 0);

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -13,6 +13,9 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * Items are found with `instanceof`, never by tag name, so the headless tier
  * does not depend on the styled one.
  *
+ * Typing a letter moves to the next visible item whose name starts with it,
+ * and `*` opens every branch beside the focused item.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -33,8 +36,15 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
 export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /**
      * Accessible name for the tree.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the tree too, and
+     * wins over this.
      */
     label: string;
+    /** Carries a host `aria-label` and `aria-labelledby` to the tree. */
+    protected readonly aria: AriaForwardController;
+    /** The letters typed so far, for moving to an item by its name. */
+    private readonly typeahead;
     /**
      * What a deeper level means: `peer` for no change, `subordinate` for a lower
      * rank, or `heading` for a parent that heads the items under it.
@@ -98,16 +108,30 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * so an item moved in the tree gets the right indent without knowing it moved.
      */
     private syncItems;
+    /** The nearest item around `item` that a reader can see, if any. */
+    private visibleAncestor;
+    /**
+     * Moves to the next visible item whose name starts with the letters typed,
+     * or opens every branch beside the focused item on `*`.
+     *
+     * Returns whether the press was one of those.
+     */
+    private handleTyping;
     private move;
     private focusOn;
     private readonly handleKeydown;
     /**
      * A branch opened or closed, whoever did it.
      *
-     * Listening for the item's own open events rather than calling `syncItems`
-     * from each keyboard path: that misses the pointer, and collapsing a branch
-     * by clicking its chevron then leaves the tree's one tab stop on a row inside
-     * the subtree just hidden. It also covers a consumer setting `open` directly.
+     * Listening for the item's own `toggle` rather than calling `syncItems` from
+     * each keyboard path: that misses the pointer, and collapsing a branch by
+     * clicking its row then left the tree's one tab stop on a row inside the
+     * subtree just hidden, so Tab passed over the tree. It also covers a
+     * consumer setting `open` directly.
+     *
+     * **In capture**, because `toggle` does not bubble, which is the platform's
+     * shape for it. The `helix-before-*` pair this listened for does not bubble
+     * either, and is sent before the branch has moved.
      */
     private readonly handleBranch;
     connectedCallback(): void;

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 { closestInstance, customElement, HelixElement, inlineStep, MixinCollection, MixinControllerActive, scrollItemIntoView, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, 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';
@@ -22,7 +22,16 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.label = 'Tree';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('tree'),
+        });
+        this.typeahead = new Typeahead();
         this.handleSelection = (event) => {
+            const origin = event.target;
+            if (!(origin instanceof HelixHeadlessTreeItem) || !this.items.includes(origin)) {
+                return;
+            }
             if (!event.defaultPrevented) {
                 this.requestActive(event.detail.value);
             }
@@ -30,9 +39,17 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         };
         this.handleKeydown = (event) => {
             const current = closestInstance(event.target, HelixHeadlessTreeItem);
-            if (!current || !this.items.includes(current) || !KEYS.has(event.key)) {
+            if (!current || !this.items.includes(current)) {
                 return;
             }
+            if (this.handleTyping(current, event)) {
+                event.preventDefault();
+                return;
+            }
+            if (!KEYS.has(event.key)) {
+                return;
+            }
+            this.typeahead.reset();
             const along = inlineStep(this, event.key);
             if (event.key === 'ArrowDown') {
                 this.move(current, 1);
@@ -67,6 +84,9 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             else {
                 if (current.isBranch) {
+                    if (current.choosable) {
+                        current.select();
+                    }
                     current.toggleOpen();
                     this.syncItems();
                 }
@@ -98,8 +118,10 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     syncItems() {
         const visible = this.visibleItems;
         const chosen = this.resolveActive(visible);
-        const held = visible.find((item) => item.focusable);
+        const held = visible.find((item) => item.focusable) ??
+            this.visibleAncestor(this.items.find((item) => item.focusable));
         const stop = held ?? chosen;
+        const heads = this.nesting === 'heading';
         for (const item of this.items) {
             const selected = item.value !== '' && item.value === this.active;
             const focusable = item === stop;
@@ -115,9 +137,45 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 item.selected = selected;
                 item.focusable = focusable;
                 item.level = level;
+                item.heads = heads;
             });
         }
     }
+    visibleAncestor(item) {
+        const visible = this.visibleItems;
+        let node = item?.parentElement ?? null;
+        while (node && node !== this) {
+            if (node instanceof HelixHeadlessTreeItem && visible.includes(node)) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return undefined;
+    }
+    handleTyping(current, event) {
+        if (!typesCharacter(event) || keyClaimed(event)) {
+            return false;
+        }
+        if (event.key === ' ' && !this.typeahead.typing()) {
+            return false;
+        }
+        if (event.key === '*') {
+            const siblings = [...(current.parentElement?.children ?? [])].filter((node) => node instanceof HelixHeadlessTreeItem && node.slot === current.slot);
+            for (const sibling of siblings) {
+                if (sibling.isBranch && !sibling.open) {
+                    sibling.requestOpen(true);
+                }
+            }
+            this.syncItems();
+            return true;
+        }
+        const visible = this.visibleItems;
+        const at = this.typeahead.match(event.key, visible.map((item) => slottedWords(item, [''])), visible.indexOf(current));
+        if (at >= 0) {
+            this.focusOn(visible[at]);
+        }
+        return true;
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);
@@ -137,8 +195,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        this.addEventListener('helix-before-open', this.handleBranch);
-        this.addEventListener('helix-before-close', this.handleBranch);
+        this.addEventListener('toggle', this.handleBranch, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.watcher = new MutationObserver(() => this.syncItems());
         this.watcher.observe(this, { childList: true, subtree: true });
@@ -146,8 +203,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
-        this.removeEventListener('helix-before-open', this.handleBranch);
-        this.removeEventListener('helix-before-close', this.handleBranch);
+        this.removeEventListener('toggle', this.handleBranch, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.watcher?.disconnect();
         this.watcher = undefined;
@@ -158,7 +214,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active')) {
+        if (changed.has('active') || changed.has('nesting')) {
             this.syncItems();
         }
     }

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

@@ -16,7 +16,8 @@ import { type TemplateResult } from 'lit';
  *
  * The direction 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.
+ * accessibility tree. The words are properties, `up-label` through
+ * `worse-label`, so a page in another language can set its own.
  *
  * 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
@@ -35,6 +36,10 @@ import { type TemplateResult } from 'lit';
  * @csspart icon - The arrow.
  */
 export declare class HelixHeadlessTrend extends HelixElement {
+    /**
+     * The word read out after the direction when the move is an improvement.
+     */
+    betterLabel: string;
     /**
      * Which way the measurement moved.
      *
@@ -46,6 +51,10 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * and reports as a hydration mismatch.
      */
     direction?: 'down' | 'neutral' | 'up';
+    /**
+     * The word read out for a move down.
+     */
+    downLabel: string;
     /**
      * Which direction counts as an improvement for this metric.
      *
@@ -55,6 +64,19 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * direction changes underneath.
      */
     good?: 'down' | 'up';
+    /**
+     * The word read out for no move, or for a direction that is not one of the
+     * three.
+     */
+    unchangedLabel: string;
+    /**
+     * The word read out for a move up.
+     */
+    upLabel: string;
+    /**
+     * The word read out after the direction when the move is a setback.
+     */
+    worseLabel: string;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/trend/root/trend-root.js

@@ -10,18 +10,24 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const DIRECTIONS = {
-    down: { icon: arrowDown, word: 'Down' },
-    neutral: { icon: minus, word: 'Unchanged' },
-    up: { icon: arrowUp, word: 'Up' },
+    down: { icon: arrowDown, word: 'downLabel' },
+    neutral: { icon: minus, word: 'unchangedLabel' },
+    up: { icon: arrowUp, word: 'upLabel' },
 };
 const readDirection = (value) => DIRECTIONS[value] ?? DIRECTIONS.neutral;
 let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.betterLabel = 'better';
+        this.downLabel = 'Down';
+        this.unchangedLabel = 'Unchanged';
+        this.upLabel = 'Up';
+        this.worseLabel = 'worse';
+    }
     render() {
         const direction = readDirection(this.direction);
         const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? this.good === this.direction
-                ? ', better'
-                : ', worse'
+            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
             : '';
         return html `<svg
         aria-hidden="true"
@@ -32,17 +38,32 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
       >
         ${unsafeSVG(direction.icon.content)}
       </svg>
-      <span part="direction">${`${direction.word}${judgment}`}</span>
+      <span part="direction">${`${this[direction.word]}${judgment}`}</span>
       <slot></slot>
       <slot name="label"></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'better-label' })
+], HelixHeadlessTrend.prototype, "betterLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "direction", void 0);
+__decorate([
+    property({ attribute: 'down-label' })
+], HelixHeadlessTrend.prototype, "downLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    property({ attribute: 'unchanged-label' })
+], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);
+__decorate([
+    property({ attribute: 'up-label' })
+], HelixHeadlessTrend.prototype, "upLabel", void 0);
+__decorate([
+    property({ attribute: 'worse-label' })
+], HelixHeadlessTrend.prototype, "worseLabel", void 0);
 HelixHeadlessTrend = __decorate([
     customElement('helix-headless-trend')
 ], HelixHeadlessTrend);

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

@@ -21,5 +21,10 @@ export interface KeyActions {
  * Nothing is taken while focus is in a range. The scrubber and the volume are
  * real inputs and the arrows are already theirs, so intercepting would mean
  * seeking twice for one press.
+ *
+ * **Nor a press a control already handled, nor Space on a control.** Space is
+ * how a button is pressed, so Space on Mute played the video and left it
+ * unmuted, and a menu row chosen with Space also toggled playback. A key a
+ * menu or a control took for itself arrives here already refused.
  */
 export declare const takeKey: (event: KeyboardEvent, video: HTMLVideoElement, actions: KeyActions) => boolean;