@fusion.dev/helix-headless 0.209.0 → 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/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/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/toolbar/root/toolbar-root.d.ts

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, ToolbarController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A group of controls that share one tab stop.
@@ -94,13 +94,6 @@ export declare class HelixHeadlessToolbar extends HelixElement {
     label: string;
     /** Carries a host `aria-label` and `aria-labelledby` to the toolbar. */
     protected readonly aria: AriaForwardController;
-    /**
-     * Whether the stop has been written onto controls this package does not
-     * know, which happens on the first focus. From then on, every move of the
-     * stop has to write them too, or the one at `0` can be removed or disabled
-     * and leave every other one at `-1`.
-     */
-    private wroteForeign;
     /**
      * The direction the arrow keys move focus in.
      */
@@ -110,77 +103,12 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * wrap around from one end to the other.
      */
     stopAtEnds: boolean;
-    private watcher;
-    /**
-     * The children that take part in the toolbar, in document order, each with
-     * the elements in it that take focus.
-     *
-     * A test on the element rather than a list of tag names: a toolbar holds
-     * anything, including elements this package has never heard of. A child
-     * that takes no focus and holds nothing that does is skipped. Client only,
-     * there being no tree to walk on the server.
-     */
-    private get controls();
-    /**
-     * The toolbar's children, a slot among them read as the elements assigned
-     * to it.
-     *
-     * **For a toolbar a component renders in its own shadow root** and passes a
-     * page's controls into through a slot, as Terminal's header does with its
-     * `actions`: read as a child, the slot holds only its fallback, and the
-     * page's controls kept tab stops of their own beside the toolbar's one.
-     */
-    private get members();
-    /** The elements in a child's light DOM that take focus. */
-    private within;
-    /**
-     * The stops of a child that takes focus itself: the child, or the members of
-     * a composite that owns its tab stop, such as a toggle group, which the
-     * toolbar enters at a member and moves the stop of through `focusable`.
-     */
-    private inside;
-    /**
-     * Where focus lands on arriving at a control. A nested composite is entered
-     * at the stop it holds, which for a toggle group is the chosen toggle.
-     */
-    private entry;
-    /** The control a press or a focus came from, by its path. */
-    private origin;
     /**
-     * Moves the single tab stop to one control.
-     *
-     * Prefers the control's own `focusable` property to writing `tabindex` on it.
-     * The attribute is a change to markup the consumer rendered, which a React
-     * consumer's hydration reports and does not patch up; a control that offers
-     * the property moves the stop inside its own shadow root instead.
-     *
-     * `tabindex` stays as the fallback, because a toolbar has to hold controls
-     * this package has never heard of.
-     */
-    private setTabStop;
-    /**
-     * Sets the first tab stop once every custom control has upgraded.
-     *
-     * A custom element has no properties at all before it upgrades, so a pass
-     * that ran first would find no `focusable`, take the `tabindex` fallback, and
-     * write the very attribute this exists to avoid.
-     */
-    private claimTabStop;
-    private readonly handleFocusIn;
-    /**
-     * Gives the tab stop back to a control that still exists.
-     *
-     * `controls` excludes anything disabled or hidden, so disabling the control
-     * holding the stop drops it out of the list while every other control is
-     * already at `-1`, leaving a toolbar the keyboard cannot reach at all. A Save
-     * button disabling itself once the form is clean is enough to do it.
-     *
-     * `foreign` stays false, the same as the first claim, until a focus has
-     * written `tabindex="-1"` onto foreign controls. From then on `setTabStop`
-     * writes them as well, so removing or disabling the native button that held
-     * the stop hands it to the first one left.
+     * The one tab stop and the arrow keys, shared with every toolbar a
+     * component draws: the controls are the children, a slot among them read as
+     * the elements assigned to it.
      */
-    private readonly restoreTabStop;
+    protected readonly tabStop: ToolbarController;
     /**
      * Whether this toolbar sits inside another, which then owns the keys and the
      * tab stop: a toolbar inside a toolbar held the reader's arrows inside it.
@@ -195,18 +123,7 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * so a reflected default cannot appear on the host after hydration.
      */
     private get axis();
-    /**
-     * The toolbar's own keys, from inside a nested composite.
-     *
-     * In capture, ahead of the composite, which answers every arrow itself and
-     * would otherwise hold the reader inside it. Only the keys along the
-     * toolbar's axis and Home and End are taken, so the arrows across it still
-     * move inside the composite.
-     */
-    private readonly handleCompositeKeydown;
-    private readonly handleKeydown;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;