@fusion.dev/helix-headless 0.110.6 → 0.111.1

package/custom-elements.json

@@ -11230,6 +11230,16 @@
               "description": "The text announced when a connection is stopped before it is requested.",
               "attribute": "stopped-label"
             },
+            {
+              "kind": "field",
+              "name": "toneLabels",
+              "type": {
+                "text": "Partial<Record<CanvasTone, string>>"
+              },
+              "default": "{}",
+              "description": "What each tone means on this board, in words read out with the cards and\nconnections in it, such as `{\"danger\": \"Blocked\", \"success\": \"Done\"}`.\n\n**Named by the page, since the tone names a color and the page gives it\nits meaning.** JSON Canvas leaves its six colors to the application, so\nred is \"blocked\" on one board and \"urgent\" on the next. A reader who can\nsee the board is told by the color; this is how a reader who cannot is\ntold the same. A tone left out is not read.",
+              "attribute": "tone-labels"
+            },
             {
               "kind": "field",
               "name": "stop",
@@ -11688,6 +11698,23 @@
               "privacy": "private",
               "description": "A card being resized from a corner, with the box it started from."
             },
+            {
+              "kind": "field",
+              "name": "fingers",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<number, { x: number; y: number }>()",
+              "description": "Where each finger on the board is, by pointer, which a pinch is measured from."
+            },
+            {
+              "kind": "field",
+              "name": "pinching",
+              "type": {
+                "text": "| {\n        at: { x: number; y: number; zoom: number }\n        middle: { x: number; y: number }\n        spread: number\n      }\n    | undefined"
+              },
+              "privacy": "private",
+              "description": "A pinch under way: how far apart its fingers were and the point between\nthem, in the box, and the view, when the second finger landed."
+            },
             {
               "kind": "field",
               "name": "dragging",
@@ -12696,6 +12723,39 @@
               ],
               "description": "The box a Shift-drag is drawing, on the plane, while it is."
             },
+            {
+              "kind": "method",
+              "name": "fingerSpan",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ middle: { x: number; y: number }; spread: number }"
+                }
+              },
+              "description": "The fingers' spread and the point between them, in the box. Taken from\nthe first two fingers down, where a third has landed as well."
+            },
+            {
+              "kind": "method",
+              "name": "startPinch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Turns what the first finger was doing into a pinch, where that was a pan\nor a press that had not yet moved anything. A finger already carrying a\ncard, drawing a line, resizing or drawing a box goes on doing that."
+            },
+            {
+              "kind": "method",
+              "name": "pinch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Scales the board by how far the fingers have spread since the pinch\nbegan, about the point between them, and carries it with that point, so\nwhat was under the fingers stays under them."
+            },
             {
               "kind": "method",
               "name": "zoomAbout",
@@ -13965,6 +14025,15 @@
               "description": "The text announced when a connection is stopped before it is requested.",
               "fieldName": "stoppedLabel"
             },
+            {
+              "name": "tone-labels",
+              "type": {
+                "text": "Partial<Record<CanvasTone, string>>"
+              },
+              "default": "{}",
+              "description": "What each tone means on this board, in words read out with the cards and\nconnections in it, such as `{\"danger\": \"Blocked\", \"success\": \"Done\"}`.\n\n**Named by the page, since the tone names a color and the page gives it\nits meaning.** JSON Canvas leaves its six colors to the application, so\nred is \"blocked\" on one board and \"urgent\" on the next. A reader who can\nsee the board is told by the color; this is how a reader who cannot is\ntold the same. A tone left out is not read.",
+              "fieldName": "toneLabels"
+            },
             {
               "name": "controls",
               "type": {
@@ -20034,6 +20103,14 @@
               "readonly": true,
               "default": "new AriaForwardController(this, { target: () => this.partNamed('control'), })"
             },
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('control'))",
+              "description": "A click on the element itself, `click()` or a page's `<label for>`, toggles it."
+            },
             {
               "kind": "field",
               "name": "indeterminate",
@@ -80097,7 +80174,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.",
+              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.\n\n**An option with a label and nothing in it shows the label**, as\n`<option label>` does: written the platform's way, a select listed a row of\nnothing for every choice.",
               "attribute": "label"
             },
             {
@@ -80126,7 +80203,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The option's text, which a listbox matches typed text against.\n\nRead from the rendered content rather than required as a property, because\nthe content is where a consumer naturally puts it and asking for both is\nasking for two things to disagree.\n\n**The default slot's content, never `this.textContent`.** An option holds\nthree slots: the words, plus `start` for an icon and `end` for a shortcut\nor a count. Neither of the latter two is what a reader searched for, and\n`textContent` runs both onto the end of it. Measured on a font picker whose\noptions carry a two-letter specimen in `end`: the field read\n`Noto Sans Linear BAg`, and typing `ag` matched 1,892 of 1,893 options,\nevery row containing the sample. An option with a keyboard shortcut in its\nend slot has the same fault and a worse one, every row carrying one matching\nevery letter of it.\n\nSix things read this: the collapsed field of Select and of Combobox, the\nlistbox's filter, Combobox's match against typed text, its inline\ncompletion, and the label on a chosen tag.\n\nA node goes to the default slot when it names no other, which is the rule\nthe platform applies at assignment. Asking the same question here rather\nthan a second one is what stops the two disagreeing. Text nodes are\nalways the default slot's and cannot say otherwise.\n\n**Text and elements, named rather than \"not an element\".** The filter read\n`!(node instanceof Element) || node.slot === ''`, which admits a comment,\nand `textContent` on a comment is the comment's own body. Every option Lit\nrenders carries one: a child binding is marked with `<!--?lit$1234$-->`, so\nan option written as `` html`<${option}>${size}</${option}>` `` read back as\n`?lit$090648746$25`. Measured in `pagination/footer`, where the trigger\npainted exactly that instead of `25`, on both twins.\n\nIt is worse than one wrong label, because of the six readers listed above:\nthe filter and Combobox's match compare against this string, so a marker in\nit is in every comparison too.",
+              "description": "The option's text, which a listbox matches typed text against.\n\nRead from the rendered content rather than required as a property, because\nthe content is where a consumer naturally puts it and asking for both is\nasking for two things to disagree.\n\n**The default slot's content, never `this.textContent`.** An option holds\nthree slots: the words, plus `start` for an icon and `end` for a shortcut\nor a count. Neither of the latter two is what a reader searched for, and\n`textContent` runs both onto the end of it. Measured on a font picker whose\noptions carry a two-letter specimen in `end`: the field read\n`Noto Sans Linear BAg`, and typing `ag` matched 1,892 of 1,893 options,\nevery row containing the sample. An option with a keyboard shortcut in its\nend slot has the same fault and a worse one, every row carrying one matching\nevery letter of it.\n\nSix things read this: the collapsed field of Select and of Combobox, the\nlistbox's filter, Combobox's match against typed text, its inline\ncompletion, and the label on a chosen tag.\n\nA node goes to the default slot when it names no other, which is the rule\nthe platform applies at assignment. Asking the same question here rather\nthan a second one is what stops the two disagreeing. Text nodes are\nalways the default slot's and cannot say otherwise.\n\n**Text and elements, named rather than \"not an element\".** The filter read\n`!(node instanceof Element) || node.slot === ''`, which admits a comment,\nand `textContent` on a comment is the comment's own body. Every option Lit\nrenders carries one: a child binding is marked with `<!--?lit$1234$-->`, so\nan option written as `` html`<${option}>${size}</${option}>` `` read back as\n`?lit$090648746$25`. Measured in `pagination/footer`, where the trigger\npainted exactly that instead of `25`, on both twins.\n\nIt is worse than one wrong label, because of the six readers listed above:\nthe filter and Combobox's match compare against this string, so a marker in\nit is in every comparison too.\n\n**The `label` where the slot holds nothing**, which is what the row shows\nthen, so the six read the words a reader sees.",
               "readonly": true
             },
             {
@@ -80528,7 +80605,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.",
+              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.\n\n**An option with a label and nothing in it shows the label**, as\n`<option label>` does: written the platform's way, a select listed a row of\nnothing for every choice.",
               "fieldName": "label"
             },
             {
@@ -88769,6 +88846,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('item'))",
+              "description": "A click on the element itself, `click()` included, chooses it."
+            },
             {
               "kind": "field",
               "name": "defaultSelected",
@@ -101707,6 +101792,14 @@
               "readonly": true,
               "default": "new AriaForwardController(this, { target: () => this.partNamed('control'), })"
             },
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('control'))",
+              "description": "A click on the element itself, `click()` or a page's `<label for>`, toggles it."
+            },
             {
               "kind": "field",
               "name": "value",

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

@@ -122,6 +122,12 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      * hears what the card says first and where it leads second.
      */
     links: string;
+    /**
+     * @internal What the card's tone means, in the page's words, written by the
+     * board from its `toneLabels`. Read out before where the card leads, since
+     * a reader who can see the board is told it by the card's color first.
+     */
+    meaning: string;
     /**
      * Prevents the card from being moved, connected, or removed.
      *
@@ -204,12 +210,15 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      */
     focus(options?: FocusOptions): void;
     /**
-     * The card, and the sentence that says where it leads.
+     * The card, and the sentence that says what its tone means and where it
+     * leads.
      *
      * **`aria-describedby` at a hidden element, which is allowed and is the
      * point.** A description is computed from its target whether or not the
      * target is rendered, so the connections are read out and never drawn: the
-     * arrows already draw them.
+     * arrows already draw them. **One element, the two joined with a comma**:
+     * two elements named in the reference are joined with a space alone, which
+     * read "Done leads to Launch" as one phrase.
      */
     protected render(): TemplateResult;
 }

package/dist/canvas/node/canvas-node.js

@@ -31,6 +31,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.placement = new PlacementController(this);
         this.name = '';
         this.links = '';
+        this.meaning = '';
         this.readOnly = false;
         this.selected = false;
         this.movable = false;
@@ -71,7 +72,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
           </svg>`
             : nothing}<div
       part="node"
-      aria-describedby=${this.links ? 'links' : nothing}
+      aria-describedby=${this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.group ? this.label || nothing : nothing}
       aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
       role=${this.group ? 'group' : 'article'}
@@ -79,7 +80,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     >
       <slot></slot>
       <slot name="description"></slot>
-      <span id="links" hidden>${this.links}</span>
+      <span id="about" hidden>${[this.meaning, this.links].filter(Boolean).join(', ')}</span>
     </div>
     ${this.connectable
             ? html `<span part="handle handle-top" aria-hidden="true" data-side="top"></span>
@@ -120,6 +121,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCanvasNode.prototype, "links", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "meaning", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCanvasNode.prototype, "readOnly", void 0);

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

@@ -1,6 +1,6 @@
 import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type CanvasDocument } from './canvas-document.js';
+import { type CanvasDocument, type CanvasTone } from './canvas-document.js';
 export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & typeof HelixElement;
@@ -227,6 +227,17 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private editing;
     /** The text announced when a connection is stopped before it is requested. */
     stoppedLabel: string;
+    /**
+     * What each tone means on this board, in words read out with the cards and
+     * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+     *
+     * **Named by the page, since the tone names a color and the page gives it
+     * its meaning.** JSON Canvas leaves its six colors to the application, so
+     * red is "blocked" on one board and "urgent" on the next. A reader who can
+     * see the board is told by the color; this is how a reader who cannot is
+     * told the same. A tone left out is not read.
+     */
+    toneLabels: Partial<Record<CanvasTone, string>>;
     /** The card or connection that holds the board's one tab stop, by its key. */
     private stop;
     /**
@@ -419,6 +430,13 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private marquee;
     /** A card being resized from a corner, with the box it started from. */
     private sizing;
+    /** Where each finger on the board is, by pointer, which a pinch is measured from. */
+    private readonly fingers;
+    /**
+     * A pinch under way: how far apart its fingers were and the point between
+     * them, in the box, and the view, when the second finger landed.
+     */
+    private pinching;
     /** Where a drag started, and where the board was when it did. */
     private dragging;
     /**
@@ -749,6 +767,23 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private renderEditor;
     /** The box a Shift-drag is drawing, on the plane, while it is. */
     private renderMarquee;
+    /**
+     * The fingers' spread and the point between them, in the box. Taken from
+     * the first two fingers down, where a third has landed as well.
+     */
+    private fingerSpan;
+    /**
+     * Turns what the first finger was doing into a pinch, where that was a pan
+     * or a press that had not yet moved anything. A finger already carrying a
+     * card, drawing a line, resizing or drawing a box goes on doing that.
+     */
+    private startPinch;
+    /**
+     * Scales the board by how far the fingers have spread since the pinch
+     * began, about the point between them, and carries it with that point, so
+     * what was under the fingers stays under them.
+     */
+    private pinch;
     /** Scales about a point in the box, which is what both the buttons and a pinch want. */
     private zoomAbout;
     /** What one card says in the reading list, its links included. */

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

@@ -48,6 +48,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
         this.selected = '';
         this.stoppedLabel = 'Stopped connecting.';
+        this.toneLabels = {};
         this.said = '';
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
@@ -58,6 +59,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.sides = new Map();
         this.pressing = false;
         this.pointing = false;
+        this.fingers = new Map();
         this.keying = undefined;
         this.edgeKeys = new WeakMap();
         this.handlePointerDown = (event) => {
@@ -67,6 +69,15 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (event.button !== 0 || on('controls') || !(card || on('viewport'))) {
                 return;
             }
+            if (event.pointerType === 'touch') {
+                this.fingers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                if (this.fingers.size > 1) {
+                    if (this.fingers.size === 2 && !this.pinching) {
+                        this.startPinch();
+                    }
+                    return;
+                }
+            }
             if (this.held) {
                 event.preventDefault();
                 this.putDown(event);
@@ -178,6 +189,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.handlePointerMove = (event) => {
             this.idle.stir();
+            if (this.fingers.has(event.pointerId)) {
+                this.fingers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                if (this.pinching) {
+                    this.pinch();
+                    return;
+                }
+            }
             const pressed = this.carrying ?? this.dragging ?? this.sizing ?? this.marquee ?? this.linking?.pointer;
             if (event.pointerType === 'mouse' &&
                 event.buttons === 0 &&
@@ -258,6 +276,27 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             };
         };
         this.handlePointerUp = (event) => {
+            const finger = this.fingers.delete(event.pointerId);
+            if (this.pinching) {
+                if (this.fingers.size < 2) {
+                    this.pinching = undefined;
+                    this.direct = false;
+                }
+                if (this.fingers.size === 0) {
+                    this.pressing = false;
+                }
+                return;
+            }
+            const owner = [
+                this.sizing?.pointer,
+                this.marquee?.pointer,
+                this.linking?.pointer,
+                this.carrying?.pointer,
+                this.dragging?.pointer,
+            ].includes(event.pointerId);
+            if (finger && !owner && this.fingers.size > 0) {
+                return;
+            }
             this.pressing = false;
             const pointing = this.pointing;
             this.pointing = false;
@@ -1263,6 +1302,48 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
       style=${`--_canvas-marquee-x: ${left}px; --_canvas-marquee-y: ${top}px; --_canvas-marquee-inline-size: ${Math.abs(box.to.x - box.from.x)}px; --_canvas-marquee-block-size: ${Math.abs(box.to.y - box.from.y)}px`}
     ></div>`;
     }
+    fingerSpan() {
+        const [one, two] = [...this.fingers.values()];
+        const box = this.partNamed('viewport')?.getBoundingClientRect();
+        return {
+            middle: {
+                x: (one.x + two.x) / 2 - (box?.left ?? 0),
+                y: (one.y + two.y) / 2 - (box?.top ?? 0),
+            },
+            spread: Math.hypot(two.x - one.x, two.y - one.y),
+        };
+    }
+    startPinch() {
+        if (this.sizing || this.marquee || this.linking || this.held || this.carrying?.started) {
+            return;
+        }
+        this.carrying = undefined;
+        this.dragging = undefined;
+        this.pointing = false;
+        const { middle, spread } = this.fingerSpan();
+        if (spread === 0) {
+            return;
+        }
+        for (const pointer of this.fingers.keys()) {
+            capturePointer(this, pointer);
+        }
+        this.touched = true;
+        this.direct = true;
+        this.pinching = { at: { ...this.at }, middle, spread };
+    }
+    pinch() {
+        const start = this.pinching;
+        if (!start) {
+            return;
+        }
+        const { middle, spread } = this.fingerSpan();
+        const zoom = Math.min(Math.max((start.at.zoom * spread) / start.spread, ZOOM_MIN), ZOOM_MAX);
+        this.at = {
+            x: middle.x - ((start.middle.x - start.at.x) * zoom) / start.at.zoom,
+            y: middle.y - ((start.middle.y - start.at.y) * zoom) / start.at.zoom,
+            zoom,
+        };
+    }
     zoomAbout(by, about) {
         const from = this.at.zoom;
         const to = Math.min(Math.max(from * by, ZOOM_MIN), ZOOM_MAX);
@@ -1595,6 +1676,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             const node = this.byId.get(card.name);
             card.links = node ? this.linksOf(node) : '';
+            card.meaning = card.tone ? (this.toneLabels[card.tone] ?? '') : '';
             card.current = card.name === stop;
             card.selected = picked.has(card.name);
             card.resizable = alone === card.name && !this.fixed(card);
@@ -1661,7 +1743,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const ends = heads(edge);
             return svg `<path
             part="edge-target"
-            aria-description=${edge.label || nothing}
+            aria-description=${[element?.tone ? this.toneLabels[element.tone] : undefined, edge.label].filter(Boolean).join(', ') || nothing}
             aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
             d=${drawn.d}
             data-edge=${key}
@@ -1844,6 +1926,9 @@ __decorate([
 __decorate([
     property({ attribute: 'stopped-label' })
 ], HelixHeadlessCanvas.prototype, "stoppedLabel", void 0);
+__decorate([
+    property({ attribute: 'tone-labels', type: Object })
+], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "stop", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -49,6 +49,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
     protected readonly aria: AriaForwardController;
+    /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
+    protected readonly clicks: HostClickController;
     /**
      * Shows the box as neither checked nor unchecked.
      *

package/dist/checkbox/root/checkbox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -13,6 +13,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.indeterminate = false;
         this.value = 'on';
         this.handleChange = (event) => {

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

@@ -152,6 +152,10 @@ export declare class HelixHeadlessOption extends HelixElement {
      * room than the row does, which is what a select's closed trigger has. Empty
      * means the row's own content, which is the common case and is why this is not
      * simply the accessible name.
+     *
+     * **An option with a label and nothing in it shows the label**, as
+     * `<option label>` does: written the platform's way, a select listed a row of
+     * nothing for every choice.
      */
     label: string;
     /**
@@ -201,6 +205,9 @@ export declare class HelixHeadlessOption extends HelixElement {
      * It is worse than one wrong label, because of the six readers listed above:
      * the filter and Combobox's match compare against this string, so a marker in
      * it is in every comparison too.
+     *
+     * **The `label` where the slot holds nothing**, which is what the row shows
+     * then, so the six read the words a reader sees.
      */
     get text(): string;
     /** Sends `helix-select` for this option. Does nothing when it is disabled. */

package/dist/option/root/option-root.js

@@ -29,11 +29,11 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.toggleAttribute('selected', next);
     }
     get text() {
-        return [...this.childNodes]
+        return ([...this.childNodes]
             .filter((node) => node.nodeType === Node.TEXT_NODE || (node instanceof Element && node.slot === ''))
             .map((node) => node.textContent ?? '')
             .join('')
-            .trim();
+            .trim() || this.label);
     }
     select() {
         if (this.disabled) {
@@ -57,7 +57,7 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     >
       <slot name="start"></slot>
       <span part="text">
-        <span part="label"><slot></slot></span>
+        <span part="label"><slot>${this.label}</slot></span>
         ${this.description ? html `<span part="description">${this.description}</span>` : nothing}
       </span>
       <slot name="end"></slot>

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
@@ -41,6 +41,8 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  * @cssstate selected - The radio is chosen.
  */
 export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
+    /** A click on the element itself, `click()` included, chooses it. */
+    protected readonly clicks: HostClickController;
     /**
      * Whether the markup declares the radio chosen. A form reset returns to it.
      *

package/dist/radio/root/radio-root.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
+        this.clicks = new HostClickController(this, () => this.partNamed('item'));
         this.focusable = false;
     }
     get defaultSelected() {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -45,6 +45,8 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
     protected readonly aria: AriaForwardController;
+    /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
+    protected readonly clicks: HostClickController;
     /**
      * Value submitted when the switch is on.
      */

package/dist/switch/root/switch-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -13,6 +13,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.value = 'on';
         this.handleChange = (event) => {
             event.stopPropagation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.110.6",
+  "version": "0.111.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.6",
-    "@fusion.dev/helix-icons": "0.110.6",
+    "@fusion.dev/helix-core": "0.111.1",
+    "@fusion.dev/helix-icons": "0.111.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.6",
-    "@fusion.dev/helix-testing": "0.110.6",
+    "@fusion.dev/helix-cem": "0.111.1",
+    "@fusion.dev/helix-testing": "0.111.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -2242,6 +2242,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  toneLabels?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.
 
@@ -2542,6 +2560,24 @@ Written to select from outside, and read to act on the selection. */
   "attr:stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   "prop:stoppedLabel"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "attr:tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "prop:toneLabels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.
 
@@ -14363,7 +14399,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   label?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -14470,7 +14510,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   "prop:label"?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -24658,6 +24702,14 @@ export type CustomElements = {
    *
    * Written to select from outside, and read to act on the selection.
    * - `stopped-label`/`stoppedLabel`: The text announced when a connection is stopped before it is requested.
+   * - `tone-labels`/`toneLabels`: What each tone means on this board, in words read out with the cards and
+   * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+   *
+   * **Named by the page, since the tone names a color and the page gives it
+   * its meaning.** JSON Canvas leaves its six colors to the application, so
+   * red is "blocked" on one board and "urgent" on the next. A reader who can
+   * see the board is told by the color; this is how a reader who cannot is
+   * told the same. A tone left out is not read.
    * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
    * `none`. A family can add words of its own.
    *
@@ -34982,6 +35034,10 @@ export type CustomElements = {
    * room than the row does, which is what a select's closed trigger has. Empty
    * means the row's own content, which is the common case and is why this is not
    * simply the accessible name.
+   *
+   * **An option with a label and nothing in it shows the label**, as
+   * `<option label>` does: written the platform's way, a select listed a row of
+   * nothing for every choice.
    * - `selected`: Whether this choice is currently chosen.
    *
    * Written by the listbox.
@@ -35046,7 +35102,10 @@ export type CustomElements = {
    *
    * It is worse than one wrong label, because of the six readers listed above:
    * the filter and Combobox's match compare against this string, so a marker in
-   * it is in every comparison too. (property only) (readonly)
+   * it is in every comparison too.
+   *
+   * **The `label` where the slot holds nothing**, which is what the row shows
+   * then, so the six read the words a reader sees. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -44594,6 +44653,14 @@ export type CustomElementsSolidJs = {
    *
    * Written to select from outside, and read to act on the selection.
    * - `stopped-label`/`stoppedLabel`: The text announced when a connection is stopped before it is requested.
+   * - `tone-labels`/`toneLabels`: What each tone means on this board, in words read out with the cards and
+   * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+   *
+   * **Named by the page, since the tone names a color and the page gives it
+   * its meaning.** JSON Canvas leaves its six colors to the application, so
+   * red is "blocked" on one board and "urgent" on the next. A reader who can
+   * see the board is told by the color; this is how a reader who cannot is
+   * told the same. A tone left out is not read.
    * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
    * `none`. A family can add words of its own.
    *
@@ -55066,6 +55133,10 @@ export type CustomElementsSolidJs = {
    * room than the row does, which is what a select's closed trigger has. Empty
    * means the row's own content, which is the common case and is why this is not
    * simply the accessible name.
+   *
+   * **An option with a label and nothing in it shows the label**, as
+   * `<option label>` does: written the platform's way, a select listed a row of
+   * nothing for every choice.
    * - `selected`: Whether this choice is currently chosen.
    *
    * Written by the listbox.
@@ -55130,7 +55201,10 @@ export type CustomElementsSolidJs = {
    *
    * It is worse than one wrong label, because of the six readers listed above:
    * the filter and Combobox's match compare against this string, so a marker in
-   * it is in every comparison too. (property only) (readonly)
+   * it is in every comparison too.
+   *
+   * **The `label` where the slot holds nothing**, which is what the row shows
+   * then, so the six read the words a reader sees. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by

package/types/svelte.d.ts

@@ -24,6 +24,8 @@ declare module 'svelte/elements' {
     'helix-headless-callout': CustomElements['helix-headless-callout']
     'helix-headless-canvas-edge': CustomElements['helix-headless-canvas-edge']
     'helix-headless-canvas-node': CustomElements['helix-headless-canvas-node']
+    'danger': CustomElements['danger']
+    'success': CustomElements['success']
     'helix-headless-canvas': CustomElements['helix-headless-canvas']
     'helix-headless-card': CustomElements['helix-headless-card']
     'helix-headless-carousel': CustomElements['helix-headless-carousel']

package/types/vue.d.ts

@@ -1246,6 +1246,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  toneLabels?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.
 
@@ -7403,7 +7421,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   label?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.