@fusion.dev/helix-headless 0.110.5 → 0.110.6

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"
@@ -64521,6 +64533,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 +65041,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 +65909,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 +66348,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 +66384,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.

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,6 +28,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.current = false;
         this.height = 0;
         this.label = '';
+        this.placement = new PlacementController(this);
         this.name = '';
         this.links = '';
         this.readOnly = false;
@@ -39,6 +40,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);

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);
@@ -1495,12 +1488,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,10 +1586,12 @@ 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) : '';

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.110.6",
   "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.110.6",
+    "@fusion.dev/helix-icons": "0.110.6",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.5",
-    "@fusion.dev/helix-testing": "0.110.5",
+    "@fusion.dev/helix-cem": "0.110.6",
+    "@fusion.dev/helix-testing": "0.110.6",
     "@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

@@ -24517,6 +24517,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.
@@ -32754,6 +32755,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 +32910,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 +44452,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.
@@ -52799,6 +52803,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 +52964,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<