@fusion.dev/helix-headless 0.208.1 → 0.210.0

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

@@ -50,6 +50,9 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  *   board, where the arrow keys pan it.
  * - Plus and minus zoom the board, on the board and on a card or a
  *   connection.
+ * - The pan and zoom buttons are a toolbar and one tab stop. The arrow keys
+ *   move between them by where they sit, Right from the up arrow to zoom in,
+ *   and Enter or Space presses one.
  * - The arrow keys move through the cards in reading order. The card you land
  *   on scrolls into view, and its connections are announced with it.
  * - The card you land on is selected. Control or Command with an arrow key,
@@ -162,7 +165,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  *
  * @csspart arrow - The arrowhead at an end of a connection that has one.
  * @csspart board - The plane the cards are placed on, which pans and zooms.
- * @csspart controls - The group the pan and zoom buttons sit in.
+ * @csspart controls - The toolbar the pan and zoom buttons sit in, one tab stop.
  * @csspart draft - The connection being drawn, before `helix-connect` is sent.
  * @csspart edge - One connector between two cards.
  * @csspart edge-end - An end of a selected connection. Drag it, or click it to pick it up.

package/dist/element-events.generated.js

@@ -339,6 +339,15 @@ registerElementEvents({
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
     'helix-headless-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
+    'helix-headless-terminal': [
+        'helix-copy',
+        'helix-terminal-bell',
+        'helix-terminal-input',
+        'helix-terminal-link',
+        'helix-terminal-resize',
+        'helix-terminal-restart',
+        'helix-terminal-title',
+    ],
     'helix-headless-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-time-input': [
         'change',

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

@@ -1,4 +1,4 @@
-import { type GraphSignalDetail, HelixElement, KeyboardNavigationController, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type GraphSignalDetail, HelixElement, ToolbarController, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
@@ -43,7 +43,9 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * or hides its notes. `hiddenGroups` holds the groups turned off, and the
  * list holds only what the drawing shows. The legend is a toolbar and one tab
  * stop: the arrow keys, Home, End and a group's first letters move between
- * its buttons, and Space or Enter presses one.
+ * its buttons, and Space or Enter presses one. The pan and zoom buttons are
+ * a toolbar and one tab stop too, the arrow keys moving between them by where
+ * they sit on screen.
  *
  * `nodes` and `links` are properties, never markup: a graph of ten thousand
  * notes as ten thousand elements would cost what the renderer exists to save.
@@ -86,7 +88,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart after - The room the notes after those drawn would take, so the list scrolls its whole length.
  * @csspart before - The room the notes before those drawn would take.
  * @csspart body - The drawing beside the list, or above it where the frame is narrow.
- * @csspart controls - The group the pan and zoom buttons sit in.
+ * @csspart controls - The toolbar the pan and zoom buttons sit in, one tab stop.
  * @csspart count - How many notes the list holds, which a search narrows, at the end of the search bar.
  * @csspart empty - The box in place of the list when it holds no notes, holding the `empty` slot.
  * @csspart filter-icon - The icon beside the search field.
@@ -343,15 +345,14 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * and wrote `active` itself.
      */
     private selectionAsked;
-    /** The legend's button that holds its one tab stop, by place: the one a reader was last on, or the first. */
-    private legendStop;
     /**
-     * The arrow keys, Home, End and typed letters among the legend's buttons,
-     * so a legend of twelve groups is one tab stop, as the `Legend` family's
-     * toolbar is. Only a press that starts on a legend button moves: the frame's
-     * own arrows pan the drawing, and the list's walk the notes.
+     * The legend's buttons as one tab stop: the arrow keys, Home, End and typed
+     * letters move among them, so a legend of twelve groups is one tab stop, as
+     * the `Legend` family's toolbar is. Only a press that starts on a legend
+     * button moves: the frame's own arrows pan the drawing, and the list's walk
+     * the notes. Both axes, the buttons wrapping onto more lines.
      */
-    protected readonly legendKeys: KeyboardNavigationController;
+    protected readonly legendKeys: ToolbarController;
     private readonly virtualize;
     /**
      * @internal The notes the drawing shows, which `connectGraph` reads: those

package/dist/graph/root/graph-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { auditName, customElement, focusItemOf, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, isRtl, KeyboardNavigationController, MixinControllerActive, MixinViewport, numberConverter, SCROLLER_RULE, scrollRoom, scrollWithin, Typeahead, typeaheadBy, VIRTUAL_RULE, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { auditName, customElement, formatWords, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, isRtl, MixinControllerActive, MixinViewport, numberConverter, SCROLLER_RULE, scrollRoom, scrollWithin, ToolbarController, Typeahead, VIRTUAL_RULE, VirtualizeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { list, magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -59,14 +59,12 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.whole = false;
         this.said = '';
         this.countAsked = false;
-        this.legendStop = 0;
-        this.legendKeys = new KeyboardNavigationController(this, {
-            items: () => [
-                ...(this.renderRoot?.querySelectorAll?.('[part~="legend-item"]') ?? []),
-            ].map((button) => focusItemOf(button, { words: button.textContent?.trim() ?? '' })),
-            origin: 'focus',
-            selects: () => false,
-            typeahead: typeaheadBy((item) => item.words ?? ''),
+        this.legendKeys = new ToolbarController(this, {
+            arrows: () => 'both',
+            members: () => [...(this.partNamed('legend')?.children ?? [])],
+            own: true,
+            watch: () => this.renderRoot,
+            words: (button) => button.textContent?.trim() ?? '',
         });
         this.virtualize = new VirtualizeController(this, {
             container: () => this.partNamed('list'),
@@ -373,20 +371,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             return nothing;
         }
         const hidden = new Set(this.hiddenGroups);
-        const stop = Math.min(this.legendStop, this.groups.length - 1);
         return html `<div part="legend" role="toolbar" aria-label=${this.legendLabel}>
-      ${this.groups.map(({ name, tone }, index) => {
+      ${this.groups.map(({ name, tone }) => {
             const shown = !hidden.has(name);
             return html `<button
           part="legend-item${shown ? '' : ' legend-item-hidden'}"
           type="button"
-          tabindex=${index === stop ? '0' : '-1'}
           aria-pressed=${shown ? 'true' : 'false'}
           data-tone=${tone ?? nothing}
           @click=${() => this.toggleGroup(name)}
-          @focus=${() => {
-                this.legendStop = index;
-            }}
         >
           <span part="legend-swatch" aria-hidden="true"></span>${name}
         </button>`;
@@ -882,9 +875,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessGraph.prototype, "said", void 0);
-__decorate([
-    state()
-], HelixHeadlessGraph.prototype, "legendStop", void 0);
 HelixHeadlessGraph = __decorate([
     customElement('helix-headless-graph')
 ], HelixHeadlessGraph);

package/dist/index.d.ts

@@ -103,6 +103,7 @@ export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './tag/index.js';
+export * from './terminal/index.js';
 export * from './textarea/index.js';
 export * from './time-input/index.js';
 export * from './time-picker/index.js';

package/dist/index.js

@@ -94,6 +94,7 @@ export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './tag/index.js';
+export * from './terminal/index.js';
 export * from './textarea/index.js';
 export * from './time-input/index.js';
 export * from './time-picker/index.js';

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, SourceController } from '@fusion.dev/helix-core';
+import { HelixElement, SourceController, ToolbarController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A list of the series in a chart, each name beside the color it is drawn in.
@@ -108,17 +108,12 @@ export declare class HelixHeadlessLegend extends HelixElement {
     toggles: boolean;
     protected readonly source: SourceController;
     /**
-     * The toggle that holds the one tab stop, by place: the one a reader was
-     * last on, or the first.
+     * The toggles as one tab stop: the arrow keys, Home, End and typed letters
+     * move among them, so a legend of twelve series is one tab stop, as a
+     * toolbar of toggle buttons is. Both axes, the entries wrapping onto more
+     * lines. Nothing without `toggles`, where there is nothing to press.
      */
-    private stop;
-    /**
-     * The arrow keys, Home, End and typed letters among the toggles, so a
-     * legend of twelve series is one tab stop, as a toolbar of
-     * toggle buttons is. Nothing without `toggles`, where there is nothing to
-     * press.
-     */
-    protected readonly keys: KeyboardNavigationController;
+    protected readonly keys: ToolbarController;
     /** The table this legend last wrote its `hidden-series` to, so leaving undoes it. */
     private wroteTo;
     /** Whether this update writes `hidden-series` to the table, decided before the render. */
@@ -198,11 +193,10 @@ export declare class HelixHeadlessLegend extends HelixElement {
      * The button around a name under `toggles`, behind a seam a tier can move.
      *
      * Pressed while its series is shown, which is the state a reader changes by
-     * pressing it: a toggle button says whether its thing is on. `holds` says
-     * whether it is the one tab stop, which is the last toggle a reader was on,
-     * the toggle at `index`.
+     * pressing it: a toggle button says whether its thing is on. Which toggle
+     * holds the one tab stop is `keys`'s to say, so the button names none.
      */
-    protected renderToggle(name: string, off: boolean, index?: number, holds?: boolean): TemplateResult;
+    protected renderToggle(name: string, off: boolean, index?: number): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/legend/root/legend-root.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
-import { customElement, focusItemOf, HelixElement, KeyboardNavigationController, requestValue, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, requestValue, SourceController, seriesIndex, seriesKey, ToolbarController, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { isHidden, namesIn, toggledNames } from '../hidden-series.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
@@ -11,14 +11,12 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         this.label = '';
         this.toggles = false;
         this.source = new SourceController(this);
-        this.stop = 0;
-        this.keys = new KeyboardNavigationController(this, {
-            items: () => this.toggles
-                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => focusItemOf(button, { words: button.textContent?.trim() ?? '' }))
-                : [],
-            origin: 'focus',
-            selects: () => false,
-            typeahead: typeaheadBy((item) => item.words ?? ''),
+        this.keys = new ToolbarController(this, {
+            arrows: () => 'both',
+            members: () => (this.toggles ? [...(this.partNamed('list')?.children ?? [])] : []),
+            own: true,
+            watch: () => this.renderRoot,
+            words: (button) => button.textContent?.trim() ?? '',
         });
         this.wroteTo = null;
         this.writes = false;
@@ -75,7 +73,6 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     render() {
         const named = this.label || this.source.element?.querySelector('caption')?.textContent?.trim();
         const names = this.names();
-        const stop = Math.min(this.stop, names.length - 1);
         const toolbar = this.toggles;
         return html `<ul
       aria-label=${named || nothing}
@@ -90,7 +87,7 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role=${toolbar ? 'none' : 'listitem'}
         >
-          ${this.renderSwatch(name, index)}${toolbar ? this.renderToggle(name, off, index, index === stop) : this.renderName(name, index)}
+          ${this.renderSwatch(name, index)}${toolbar ? this.renderToggle(name, off, index) : this.renderName(name, index)}
         </li>`;
         })}
     </ul>`;
@@ -101,16 +98,12 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     renderName(name, _index) {
         return html `<span part="name">${name}</span>`;
     }
-    renderToggle(name, off, index = 0, holds = true) {
+    renderToggle(name, off, index = 0) {
         return html `<button
       aria-pressed=${off ? 'false' : 'true'}
       part="toggle"
-      tabindex=${holds ? '0' : '-1'}
       type="button"
       @click=${() => this.toggle(name)}
-      @focus=${() => {
-            this.stop = index;
-        }}
     >
       ${this.renderName(name, index)}
     </button>`;
@@ -131,9 +124,6 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLegend.prototype, "toggles", void 0);
-__decorate([
-    state()
-], HelixHeadlessLegend.prototype, "stop", void 0);
 HelixHeadlessLegend = __decorate([
     customElement('helix-headless-legend')
 ], HelixHeadlessLegend);

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

@@ -27,7 +27,9 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * map. Dragging is otherwise the only way a pointer moves the map, so add them
  * where the map has to be usable without dragging, as WCAG 2.2 asks at level
  * AA. The arrow keys pan the map and Shift with Left or Right turns it either
- * way.
+ * way. The buttons are a toolbar and one tab stop: on them, the arrow keys
+ * move between the buttons by where they sit, and Shift with an arrow still
+ * turns or tilts the map.
  *
  * The pan and zoom buttons and the arrow keys send `helix-map-pan` and
  * `helix-map-zoom`. Move your map in response, or connect it with
@@ -98,7 +100,7 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * @csspart attribution - The strip under the map that holds the credit.
  * @csspart compass - The compass and the pan and rotate buttons around it.
- * @csspart controls - The column of buttons that move the map.
+ * @csspart controls - The column of buttons that move the map, a toolbar and one tab stop.
  * @csspart face-north - The compass: its needle points north as the map turns, and pressing it turns the map to face north.
  * @csspart footer - The strip below the map.
  * @csspart fullscreen - The button that makes the map fill the screen.

package/dist/map/root/map-root.js

@@ -525,7 +525,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (!pan && !zoom && !rotate && !tilt && !fullscreen && menu === nothing) {
             return nothing;
         }
-        return html `<div part="controls" role="group" aria-label=${this.controlsLabel}>
+        return html `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
       ${fullscreen
             ? html `<button
               part="fullscreen"

package/dist/terminal/index.d.ts

@@ -0,0 +1,3 @@
+export type { TerminalShortcut } from './keys.js';
+export type { TerminalColorName, TerminalFindOptions, TerminalLook, TerminalRenderer, TerminalSettings, TerminalSink, } from './root/terminal-root.js';
+export { HelixHeadlessTerminal } from './root/terminal-root.js';

package/dist/terminal/index.js

@@ -0,0 +1 @@
+export { HelixHeadlessTerminal } from './root/terminal-root.js';

package/dist/terminal/keys.d.ts

@@ -0,0 +1,14 @@
+import { type ChordPress } from '@fusion.dev/helix-core';
+/** What a terminal frame does with a key press before the program sees it. */
+export type TerminalShortcut = 'copy' | 'find' | 'tab-focus';
+/** The chord for a shortcut on this keyboard, or `undefined` where the frame takes none. */
+export declare const chordOf: (shortcut: TerminalShortcut, apple: boolean) => string | undefined;
+/** Which shortcut a press is, or `null` for a press the program should have. */
+export declare const shortcutOf: (press: ChordPress, apple: boolean) => TerminalShortcut | null;
+/**
+ * A chord as a reader says it, such as "Control+Shift+M": the key names
+ * `aria-keyshortcuts` uses, which a screen reader reads aloud whole.
+ */
+export declare const spokenChord: (shortcut: TerminalShortcut, apple: boolean) => string;
+/** Whether a press is a bare Tab or Shift+Tab, which moves focus while Tab is set to. */
+export declare const isTab: (press: ChordPress) => boolean;

package/dist/terminal/keys.js

@@ -0,0 +1,20 @@
+import { ariaChord, matchesChord } from '@fusion.dev/helix-core';
+const CHORDS = {
+    apple: { copy: undefined, find: 'cmd+f', 'tab-focus': 'ctrl+shift+m' },
+    other: { copy: 'ctrl+shift+c', find: 'ctrl+shift+f', 'tab-focus': 'ctrl+m' },
+};
+export const chordOf = (shortcut, apple) => CHORDS[apple ? 'apple' : 'other'][shortcut];
+export const shortcutOf = (press, apple) => {
+    for (const shortcut of ['copy', 'find', 'tab-focus']) {
+        const chord = chordOf(shortcut, apple);
+        if (chord !== undefined && matchesChord(press, chord, apple)) {
+            return shortcut;
+        }
+    }
+    return null;
+};
+export const spokenChord = (shortcut, apple) => {
+    const chord = chordOf(shortcut, apple);
+    return chord === undefined ? '' : ariaChord(chord, apple).replace('Meta', 'Command');
+};
+export const isTab = (press) => press.key === 'Tab' && !press.altKey && !press.ctrlKey && !press.metaKey;