@fusion.dev/helix-headless 0.110.5 → 0.111.0

package/custom-elements.json

@@ -9993,6 +9993,14 @@
               "description": "The card's name as text. A group shows it, and another card's connections\nread it out.\n\nA group needs one because it has no text of its own; a card that has text\nis named by it, and one holding a picture or a figure is named by nothing\nshort enough to read out in another card's connections.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the card was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -10510,6 +10518,10 @@
               "description": "The card that receives focus when you tab into the board.",
               "name": "current"
             },
+            {
+              "description": "Placed on the board.",
+              "name": "placed"
+            },
             {
               "description": "The card is selected.",
               "name": "selected"
@@ -11218,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",
@@ -11676,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",
@@ -12684,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",
@@ -13953,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": {
@@ -64521,6 +64602,14 @@
               "description": "Longitude, in degrees.",
               "attribute": "lng"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the marker was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -65021,6 +65110,10 @@
               "description": "Marked as passed.",
               "name": "passed"
             },
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed"
+            },
             {
               "description": "Shows its name before the point, because there was no room after it.",
               "name": "start"
@@ -65885,6 +65978,14 @@
               "description": "Longitude, in degrees.",
               "attribute": "lng"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the position was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "spoken",
@@ -66316,6 +66417,20 @@
               "fieldName": "lng"
             }
           ],
+          "cssStates": [
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed"
+            },
+            {
+              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
           "superclass": {
             "name": "HelixElement",
             "package": "@fusion.dev/helix-core"
@@ -66338,16 +66453,6 @@
           },
           "tagName": "helix-headless-map-position",
           "customElement": true,
-          "cssStates": [
-            {
-              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
-              "name": "settled",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
-            }
-          ],
           "modulePath": "src/map/position/map-position.ts",
           "definitionPath": "src/map/position/map-position.ts"
         }

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

@@ -57,6 +57,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate candidate - While a connection is being drawn and this card is somewhere it could arrive.
  * @cssstate current - The card that receives focus when you tab into the board.
+ * @cssstate placed - Placed on the board.
  * @cssstate selected - The card is selected.
  * @cssstate target - A connection being drawn would end here if you released it.
  */
@@ -97,6 +98,16 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      * short enough to read out in another card's connections.
      */
     label: string;
+    /** Where the card was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the card, written by the board: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /**
      * The name that connections and events use for this card, unique on its
      * board.
@@ -111,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.
      *
@@ -193,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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, PlacementController } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const DRAWN = [
@@ -28,8 +28,10 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.current = false;
         this.height = 0;
         this.label = '';
+        this.placement = new PlacementController(this);
         this.name = '';
         this.links = '';
+        this.meaning = '';
         this.readOnly = false;
         this.selected = false;
         this.movable = false;
@@ -39,6 +41,13 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.x = 0;
         this.y = 0;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_canvas-card-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('candidate', this.candidate);
@@ -63,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'}
@@ -71,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>
@@ -112,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

@@ -33,14 +33,7 @@ const onPlane = (node, origin) => ({
 const INTERACTIVE = 'input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"])';
 const custom = (element, name) => element?.style.getPropertyValue(name).trim() ?? '';
 const finite = (value) => (Number.isFinite(value) ? value : 0);
-const size = (element, name, value) => {
-    if (value > 0) {
-        element.style.setProperty(name, `${value}px`);
-    }
-    else {
-        element.style.removeProperty(name);
-    }
-};
+const size = (value) => (value > 0 ? `${value}px` : undefined);
 let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
@@ -55,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;
@@ -65,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) => {
@@ -74,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);
@@ -185,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 &&
@@ -265,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;
@@ -1270,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);
@@ -1495,12 +1569,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             return true;
         }
         const target = record.target;
-        if (target instanceof HelixHeadlessCanvasNode &&
-            this.placed.has(target) &&
-            custom(target, '--_canvas-card-x') === '') {
-            this.placed.delete(target);
-            return true;
-        }
         const name = target instanceof HelixHeadlessCanvasNode
             ? '--canvas-node-color'
             : target instanceof HelixHeadlessCanvasEdge
@@ -1599,13 +1667,16 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const placed = `${x} ${y} ${finite(card.width)} ${finite(card.height)}`;
             if (this.placed.get(card) !== placed) {
                 this.placed.set(card, placed);
-                card.style.setProperty('--_canvas-card-x', `${x}px`);
-                card.style.setProperty('--_canvas-card-y', `${y}px`);
-                size(card, '--_canvas-card-inline-size', finite(card.width));
-                size(card, '--_canvas-card-block-size', finite(card.height));
+                card.place({
+                    '--_canvas-card-block-size': size(finite(card.height)),
+                    '--_canvas-card-inline-size': size(finite(card.width)),
+                    '--_canvas-card-x': `${x}px`,
+                    '--_canvas-card-y': `${y}px`,
+                });
             }
             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);
@@ -1672,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}
@@ -1855,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/map/marker/map-marker.d.ts

@@ -36,6 +36,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate fanned - Spread out from a location it shares with other markers, after their cluster was pressed.
  * @cssstate icon - Has content in the icon slot.
  * @cssstate passed - Marked as passed.
+ * @cssstate placed - Placed on the map by the connector.
  * @cssstate start - Shows its name before the point, because there was no room after it.
  */
 export declare class HelixHeadlessMapMarker extends HelixElement {
@@ -86,6 +87,16 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      * the point unless the view's edge would cut the name off there.
      */
     side: 'end' | 'start';
+    /** Where the marker was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the marker, written by the connector: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /** The value `helix-activate` reports. Defaults to the label. */
     name: string;
     /**

package/dist/map/marker/map-marker.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, PlacementController, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const BOOKKEEPING = new Set([
@@ -25,11 +25,19 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
         this.gatheredBy = undefined;
         this.isMapMarker = true;
         this.side = 'end';
+        this.placement = new PlacementController(this);
         this.name = '';
         this.passed = false;
         this.passedLabel = 'passed';
         this.handingOver = false;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_map-marker-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.handingOver =

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

@@ -28,6 +28,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart position - The image of the position, named by its label.
  * @csspart pulse - A ring that spreads out from the point, showing that the position is live.
  * @csspart status - The description, announced when it changes.
+ *
+ * @cssstate placed - Placed on the map by the connector.
  */
 export declare class HelixHeadlessMapPosition extends HelixElement {
     /** How accurate the position is, in meters. Drawn as a ring with this radius. */
@@ -49,6 +51,16 @@ export declare class HelixHeadlessMapPosition extends HelixElement {
     lat?: number;
     /** Longitude, in degrees. */
     lng?: number;
+    /** Where the position was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the position, written by the connector: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /** The words last spoken, which is what the status holds. */
     private spoken;
     /** When they were spoken, for the interval. */

package/dist/map/position/map-position.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, PlacementController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixElement {
@@ -13,9 +13,17 @@ let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixEleme
         this.announceEvery = 5000;
         this.isMapPosition = true;
         this.label = 'Live position';
+        this.placement = new PlacementController(this);
         this.spoken = '';
         this.spokenAt = Number.NEGATIVE_INFINITY;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_map-position-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!changed.has('description') || !this.hasUpdated) {

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.5",
+  "version": "0.111.0",
   "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.5",
-    "@fusion.dev/helix-icons": "0.110.5",
+    "@fusion.dev/helix-core": "0.111.0",
+    "@fusion.dev/helix-icons": "0.111.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.5",
-    "@fusion.dev/helix-testing": "0.110.5",
+    "@fusion.dev/helix-cem": "0.111.0",
+    "@fusion.dev/helix-testing": "0.111.0",
     "@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.
 
@@ -24517,6 +24553,7 @@ export type CustomElements = {
    *
    * - `candidate`: While a connection is being drawn and this card is somewhere it could arrive.
    * - `current`: The card that receives focus when you tab into the board.
+   * - `placed`: Placed on the board.
    * - `selected`: The card is selected.
    * - `target`: A connection being drawn would end here if you released it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -24657,6 +24694,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.
    *
@@ -32754,6 +32799,7 @@ export type CustomElements = {
    * - `fanned`: Spread out from a location it shares with other markers, after their cluster was pressed.
    * - `icon`: Has content in the icon slot.
    * - `passed`: Marked as passed.
+   * - `placed`: Placed on the map by the connector.
    * - `start`: Shows its name before the point, because there was no room after it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -32908,6 +32954,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed`: Placed on the map by the connector.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-map-position": Partial<
@@ -44449,6 +44496,7 @@ export type CustomElementsSolidJs = {
    *
    * - `candidate`: While a connection is being drawn and this card is somewhere it could arrive.
    * - `current`: The card that receives focus when you tab into the board.
+   * - `placed`: Placed on the board.
    * - `selected`: The card is selected.
    * - `target`: A connection being drawn would end here if you released it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -44590,6 +44638,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.
    *
@@ -52799,6 +52855,7 @@ export type CustomElementsSolidJs = {
    * - `fanned`: Spread out from a location it shares with other markers, after their cluster was pressed.
    * - `icon`: Has content in the icon slot.
    * - `passed`: Marked as passed.
+   * - `placed`: Placed on the map by the connector.
    * - `start`: Shows its name before the point, because there was no room after it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -52959,6 +53016,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed`: Placed on the map by the connector.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-map-position": Partial<

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.