@fusion.dev/helix-headless 0.209.0 → 0.211.0

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

@@ -1,5 +1,7 @@
 import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import type { StaticValue } from 'lit/static-html.js';
+import '../../icon-button/index.js';
 import { type CanvasArrangeOptions } from '../arrange.js';
 import { type CanvasDocument, type CanvasRoute, type CanvasTone } from './canvas-document.js';
 export type { CanvasArrangeOptions } from '../arrange.js';
@@ -50,6 +52,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 +167,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.
@@ -170,6 +175,10 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart edges - A layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it `z-index: -1` to draw it under the cards.
  * @csspart footer - The strip below the board.
  * @csspart fullscreen - The button that makes the board fill the screen.
+ * @csspart fullscreen-button - `fullscreen`'s inner button.
+ * @csspart fullscreen-live - `fullscreen`'s live region, which speaks while it is pending.
+ * @csspart fullscreen-spinner - The ring `fullscreen` turns while it is pending.
+ * @csspart fullscreen-text - The box `fullscreen`'s glyph sits in.
  * @csspart gesture-hint - Words over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.
  * @csspart gesture-status - The line shown while a board with `gestures="activate"` has the gestures.
  * @csspart header - The strip above the board.
@@ -181,13 +190,37 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart minimap-node - One card in the minimap.
  * @csspart minimap-view - The frame in the minimap around what is on screen.
  * @csspart pan-down - The button that moves the board down.
+ * @csspart pan-down-button - `pan-down`'s inner button.
+ * @csspart pan-down-live - `pan-down`'s live region, which speaks while it is pending.
+ * @csspart pan-down-spinner - The ring `pan-down` turns while it is pending.
+ * @csspart pan-down-text - The box `pan-down`'s glyph sits in.
  * @csspart pan-end - The button that moves the board toward the end of a line of text: right in English.
+ * @csspart pan-end-button - `pan-end`'s inner button.
+ * @csspart pan-end-live - `pan-end`'s live region, which speaks while it is pending.
+ * @csspart pan-end-spinner - The ring `pan-end` turns while it is pending.
+ * @csspart pan-end-text - The box `pan-end`'s glyph sits in.
  * @csspart pan-start - The button that moves the board toward the start of a line of text: left in English.
+ * @csspart pan-start-button - `pan-start`'s inner button.
+ * @csspart pan-start-live - `pan-start`'s live region, which speaks while it is pending.
+ * @csspart pan-start-spinner - The ring `pan-start` turns while it is pending.
+ * @csspart pan-start-text - The box `pan-start`'s glyph sits in.
  * @csspart pan-up - The button that moves the board up.
+ * @csspart pan-up-button - `pan-up`'s inner button.
+ * @csspart pan-up-live - `pan-up`'s live region, which speaks while it is pending.
+ * @csspart pan-up-spinner - The ring `pan-up` turns while it is pending.
+ * @csspart pan-up-text - The box `pan-up`'s glyph sits in.
  * @csspart region - The named region the board is drawn in.
  * @csspart viewport - The box the board is drawn inside.
  * @csspart zoom-in - The button that zooms in.
+ * @csspart zoom-in-button - `zoom-in`'s inner button.
+ * @csspart zoom-in-live - `zoom-in`'s live region, which speaks while it is pending.
+ * @csspart zoom-in-spinner - The ring `zoom-in` turns while it is pending.
+ * @csspart zoom-in-text - The box `zoom-in`'s glyph sits in.
  * @csspart zoom-out - The button that zooms out.
+ * @csspart zoom-out-button - `zoom-out`'s inner button.
+ * @csspart zoom-out-live - `zoom-out`'s live region, which speaks while it is pending.
+ * @csspart zoom-out-spinner - The ring `zoom-out` turns while it is pending.
+ * @csspart zoom-out-text - The box `zoom-out`'s glyph sits in.
  *
  * @cssproperty --canvas-zoom - The board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at `calc(1px / var(--canvas-zoom))`.
  *
@@ -592,6 +625,11 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      */
     private readonly sides;
     private readEdges;
+    /**
+     * The board's controls, each an Icon Button: named here, where this family's
+     * imports register it, though the surface draws most of them.
+     */
+    protected get controlTag(): StaticValue;
     /** The events this family names for itself, the surface being shared. */
     protected panEvent(detail: ViewportPanDetail): Event;
     protected zoomEvent(detail: ViewportZoomDetail): Event;

package/dist/canvas/root/canvas-root.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { assignSlots, auditName, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforePasteEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixPastedEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, numberConverter, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import '../../icon-button/index.js';
 import { arrangement } from '../arrange.js';
 import { descriptionOf } from '../describe.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
@@ -887,6 +888,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             });
         });
     }
+    get controlTag() {
+        return this.tag('icon-button');
+    }
     panEvent(detail) {
         return new HelixCanvasPanEvent(detail);
     }

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

@@ -1,5 +1,7 @@
-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 StaticValue } from 'lit/static-html.js';
+import '../../icon-button/index.js';
 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 +45,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,13 +90,17 @@ 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.
  * @csspart filter-mark - The default icon beside the search field, shown when none is slotted.
  * @csspart footer - The strip below the graph.
  * @csspart fullscreen - The button that makes the graph fill the screen.
+ * @csspart fullscreen-button - `fullscreen`'s inner button.
+ * @csspart fullscreen-live - `fullscreen`'s live region, which speaks while it is pending.
+ * @csspart fullscreen-spinner - The ring `fullscreen` turns while it is pending.
+ * @csspart fullscreen-text - The box `fullscreen`'s glyph sits in.
  * @csspart gesture-hint - Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
  * @csspart gesture-status - The line shown while a graph with `gestures="activate"` has the gestures.
  * @csspart header - The strip above the graph.
@@ -110,10 +118,30 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart note-relation - How a note stands to the selected one, such as "Linked from Alpha".
  * @csspart note-selected - The selected note, first in the list.
  * @csspart notes-toggle - The button among the controls that opens the search and the list over the drawing, with `no-panel`.
+ * @csspart notes-toggle-button - `notes-toggle`'s inner button.
+ * @csspart notes-toggle-live - `notes-toggle`'s live region, which speaks while it is pending.
+ * @csspart notes-toggle-spinner - The ring `notes-toggle` turns while it is pending.
+ * @csspart notes-toggle-text - The box `notes-toggle`'s glyph sits in.
  * @csspart pan-down - The button that moves the graph down.
+ * @csspart pan-down-button - `pan-down`'s inner button.
+ * @csspart pan-down-live - `pan-down`'s live region, which speaks while it is pending.
+ * @csspart pan-down-spinner - The ring `pan-down` turns while it is pending.
+ * @csspart pan-down-text - The box `pan-down`'s glyph sits in.
  * @csspart pan-end - The button that moves the graph toward the end of a line of text: right in English.
+ * @csspart pan-end-button - `pan-end`'s inner button.
+ * @csspart pan-end-live - `pan-end`'s live region, which speaks while it is pending.
+ * @csspart pan-end-spinner - The ring `pan-end` turns while it is pending.
+ * @csspart pan-end-text - The box `pan-end`'s glyph sits in.
  * @csspart pan-start - The button that moves the graph toward the start of a line of text: left in English.
+ * @csspart pan-start-button - `pan-start`'s inner button.
+ * @csspart pan-start-live - `pan-start`'s live region, which speaks while it is pending.
+ * @csspart pan-start-spinner - The ring `pan-start` turns while it is pending.
+ * @csspart pan-start-text - The box `pan-start`'s glyph sits in.
  * @csspart pan-up - The button that moves the graph up.
+ * @csspart pan-up-button - `pan-up`'s inner button.
+ * @csspart pan-up-live - `pan-up`'s live region, which speaks while it is pending.
+ * @csspart pan-up-spinner - The ring `pan-up` turns while it is pending.
+ * @csspart pan-up-text - The box `pan-up`'s glyph sits in.
  * @csspart panel - The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.
  * @csspart region - The frame: the drawing, its controls and the list.
  * @csspart search - The bar holding the icon, the search field and the count.
@@ -123,7 +151,15 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart stop-layout - The button that stops a layout that has run past five seconds, where the notes stand.
  * @csspart viewport - The box the renderer draws in.
  * @csspart zoom-in - The zoom in button.
+ * @csspart zoom-in-button - `zoom-in`'s inner button.
+ * @csspart zoom-in-live - `zoom-in`'s live region, which speaks while it is pending.
+ * @csspart zoom-in-spinner - The ring `zoom-in` turns while it is pending.
+ * @csspart zoom-in-text - The box `zoom-in`'s glyph sits in.
  * @csspart zoom-out - The zoom out button.
+ * @csspart zoom-out-button - `zoom-out`'s inner button.
+ * @csspart zoom-out-live - `zoom-out`'s live region, which speaks while it is pending.
+ * @csspart zoom-out-spinner - The ring `zoom-out` turns while it is pending.
+ * @csspart zoom-out-text - The box `zoom-out`'s glyph sits in.
  *
  * @cssstate empty - The list holds no notes: the graph has none, or a search or the groups hid them all.
  * @cssstate fullscreen - The graph fills the screen.
@@ -343,15 +379,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
@@ -441,6 +476,11 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The graph's controls, each an Icon Button: named here, where this family's
+     * imports register it, though the surface draws most of them.
+     */
+    protected get controlTag(): StaticValue;
     /** The pan request, and the side it goes to, which `moved()` then says. */
     protected panEvent(detail: ViewportPanDetail): Event;
     /** The zoom request, and which way it goes, which `moved()` then says. */

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

@@ -1,12 +1,15 @@
 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';
+import { html as staticHtml } from 'lit/static-html.js';
+import '../../icon-button/index.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, cursorAfter, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
 const LONG_LAYOUT = 5000;
+const stopPress = (event) => event.stopPropagation();
 let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinControllerActive(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -59,14 +62,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'),
@@ -326,6 +327,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'focus' }));
         }
     }
+    get controlTag() {
+        return this.tag('icon-button');
+    }
     panEvent(detail) {
         this.asked = this.sideOf(detail.to);
         return new HelixGraphPanEvent(detail);
@@ -373,20 +377,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>`;
@@ -560,18 +559,23 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         if (!this.noPanel) {
             return nothing;
         }
-        return html `<button
+        const button = this.controlTag;
+        const { material, raised } = this.controlAxes;
+        return staticHtml `<${button}
       part="notes-toggle"
+      exportparts="button: notes-toggle-button, live: notes-toggle-live, spinner: notes-toggle-spinner, text: notes-toggle-text"
       aria-controls="panel"
-      aria-expanded=${this.panelOpen ? 'true' : 'false'}
-      aria-label=${this.notesLabel}
-      type="button"
+      .expanded=${this.panelOpen}
+      label=${this.notesLabel}
+      material=${material ?? nothing}
+      ?raised=${raised}
       @click=${() => this.togglePanel()}
+      @helix-press=${stopPress}
     >
       <svg aria-hidden="true" fill="currentColor" viewBox=${list.viewBox}>
         ${unsafeSVG(list.content)}
       </svg>
-    </button>`;
+    </${button}>`;
     }
     renderFilterIcon() {
         return html `<slot name="filter-icon">
@@ -882,9 +886,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/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

@@ -1,5 +1,7 @@
 import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { type StaticValue } from 'lit/static-html.js';
+import '../../icon-button/index.js';
 /**
  * What `ViewportControlsPlacement` is called for a map.
  *
@@ -27,7 +29,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,10 +102,18 @@ 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 face-north-button - `face-north`'s inner button.
+ * @csspart face-north-live - `face-north`'s live region, which speaks while it is pending.
+ * @csspart face-north-spinner - The ring `face-north` turns while it is pending.
+ * @csspart face-north-text - The box `face-north`'s glyph sits in.
  * @csspart footer - The strip below the map.
  * @csspart fullscreen - The button that makes the map fill the screen.
+ * @csspart fullscreen-button - `fullscreen`'s inner button.
+ * @csspart fullscreen-live - `fullscreen`'s live region, which speaks while it is pending.
+ * @csspart fullscreen-spinner - The ring `fullscreen` turns while it is pending.
+ * @csspart fullscreen-text - The box `fullscreen`'s glyph sits in.
  * @csspart gesture-hint - Words over the map for a moment when it lets a gesture pass to the page, such as how to zoom it.
  * @csspart gesture-status - The line shown while a map with `gestures="activate"` has the gestures.
  * @csspart header - The strip above the map.
@@ -113,6 +125,10 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @csspart layers - The list of the map's shown layers, such as routes, areas, and points, read by screen readers.
  * @csspart layers-menu - The menu of the map's layers, which the layers button opens.
  * @csspart layers-toggle - The button that opens and closes the layers menu.
+ * @csspart layers-toggle-button - `layers-toggle`'s inner button.
+ * @csspart layers-toggle-live - `layers-toggle`'s live region, which speaks while it is pending.
+ * @csspart layers-toggle-spinner - The ring `layers-toggle` turns while it is pending.
+ * @csspart layers-toggle-text - The box `layers-toggle`'s glyph sits in.
  * @csspart live - What screen readers hear after the map moves: the zoom level, the way it faces, its tilt, or the way it moved. Visually hidden in the styled tier.
  * @csspart map-type - One map type's card in the layers menu: a radio button, its picture, and its name.
  * @csspart map-type-name - The name on a map type's card.
@@ -120,16 +136,52 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @csspart map-types - The map-type cards at the top of the layers menu, where the map has imagery.
  * @csspart needle - The compass needle, turned to point north.
  * @csspart pan-down - The button that pans the map down.
+ * @csspart pan-down-button - `pan-down`'s inner button.
+ * @csspart pan-down-live - `pan-down`'s live region, which speaks while it is pending.
+ * @csspart pan-down-spinner - The ring `pan-down` turns while it is pending.
+ * @csspart pan-down-text - The box `pan-down`'s glyph sits in.
  * @csspart pan-end - The button that pans toward the end of a line of text: right in English.
+ * @csspart pan-end-button - `pan-end`'s inner button.
+ * @csspart pan-end-live - `pan-end`'s live region, which speaks while it is pending.
+ * @csspart pan-end-spinner - The ring `pan-end` turns while it is pending.
+ * @csspart pan-end-text - The box `pan-end`'s glyph sits in.
  * @csspart pan-start - The button that pans toward the start of a line of text: left in English.
+ * @csspart pan-start-button - `pan-start`'s inner button.
+ * @csspart pan-start-live - `pan-start`'s live region, which speaks while it is pending.
+ * @csspart pan-start-spinner - The ring `pan-start` turns while it is pending.
+ * @csspart pan-start-text - The box `pan-start`'s glyph sits in.
  * @csspart pan-up - The button that pans the map up.
+ * @csspart pan-up-button - `pan-up`'s inner button.
+ * @csspart pan-up-live - `pan-up`'s live region, which speaks while it is pending.
+ * @csspart pan-up-spinner - The ring `pan-up` turns while it is pending.
+ * @csspart pan-up-text - The box `pan-up`'s glyph sits in.
  * @csspart region - The named region the map sits in.
  * @csspart rotate-left - The button that turns the map counterclockwise.
+ * @csspart rotate-left-button - `rotate-left`'s inner button.
+ * @csspart rotate-left-live - `rotate-left`'s live region, which speaks while it is pending.
+ * @csspart rotate-left-spinner - The ring `rotate-left` turns while it is pending.
+ * @csspart rotate-left-text - The box `rotate-left`'s glyph sits in.
  * @csspart rotate-right - The button that turns the map clockwise.
+ * @csspart rotate-right-button - `rotate-right`'s inner button.
+ * @csspart rotate-right-live - `rotate-right`'s live region, which speaks while it is pending.
+ * @csspart rotate-right-spinner - The ring `rotate-right` turns while it is pending.
+ * @csspart rotate-right-text - The box `rotate-right`'s glyph sits in.
  * @csspart tilt - The 3D button, which tilts the map and makes it flat again. Pressed while the map is tilted.
+ * @csspart tilt-button - `tilt`'s inner button.
+ * @csspart tilt-live - `tilt`'s live region, which speaks while it is pending.
+ * @csspart tilt-spinner - The ring `tilt` turns while it is pending.
+ * @csspart tilt-text - The box `tilt`'s glyph sits in.
  * @csspart viewport - The box the map is drawn in.
  * @csspart zoom-in - The button that zooms in.
+ * @csspart zoom-in-button - `zoom-in`'s inner button.
+ * @csspart zoom-in-live - `zoom-in`'s live region, which speaks while it is pending.
+ * @csspart zoom-in-spinner - The ring `zoom-in` turns while it is pending.
+ * @csspart zoom-in-text - The box `zoom-in`'s glyph sits in.
  * @csspart zoom-out - The button that zooms out.
+ * @csspart zoom-out-button - `zoom-out`'s inner button.
+ * @csspart zoom-out-live - `zoom-out`'s live region, which speaks while it is pending.
+ * @csspart zoom-out-spinner - The ring `zoom-out` turns while it is pending.
+ * @csspart zoom-out-text - The box `zoom-out`'s glyph sits in.
  *
  * @cssproperty --map-needle-turn - How far the needle turns to point north, as an angle. The frame writes it from `bearing`.
  *
@@ -493,6 +545,11 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     private get keyShortcuts();
     /** Shift with the arrow keys: left and right rotate, and up and down tilt in steps. */
     protected handleMoreKeys(event: KeyboardEvent): boolean;
+    /**
+     * The map's controls, each an Icon Button: named here, where this family's
+     * imports register it, though the surface draws most of them.
+     */
+    protected get controlTag(): StaticValue;
     /** The events this family names, the surface naming none of its own. */
     protected panEvent(detail: ViewportPanDetail): Event;
     protected zoomEvent(detail: ViewportZoomDetail): Event;