@fusion.dev/helix 0.110.5 → 0.111.0

package/custom-elements.json

@@ -13539,6 +13539,18 @@
                 "module": "src/canvas/node/canvas-node.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the card was placed, kept in its own shadow root.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvasNode",
+                "module": "src/canvas/node/canvas-node.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -14296,6 +14308,14 @@
                 "module": "src/canvas/node/canvas-node.ts"
               }
             },
+            {
+              "description": "Placed on the board.",
+              "name": "placed",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvasNode",
+                "module": "src/canvas/node/canvas-node.ts"
+              }
+            },
             {
               "description": "The card is selected.",
               "name": "selected",
@@ -15169,6 +15189,20 @@
                 "module": "src/canvas/root/canvas-root.ts"
               }
             },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "stop",
@@ -15627,6 +15661,31 @@
                 "module": "src/canvas/root/canvas-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "dragging",
@@ -16895,6 +16954,51 @@
                 "module": "src/canvas/root/canvas-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "zoomAbout",
@@ -17940,6 +18044,19 @@
                 "name": "HelixHeadlessCanvas",
                 "module": "src/canvas/root/canvas-root.ts"
               }
+            },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCanvas",
+                "module": "src/canvas/root/canvas-root.ts"
+              }
             }
           ],
           "superclass": {
@@ -17982,7 +18099,7 @@
                 "slug": "read-only"
               },
               {
-                "description": "Outlined, filled, elevated, and plain cards, joined by solid, dashed, and dotted connections.",
+                "description": "Outlined, filled, elevated, and plain cards, joined by solid, dashed, and dotted connections, with what each tone means read out.",
                 "slug": "styles"
               },
               {
@@ -79801,6 +79918,18 @@
                 "module": "src/map/marker/map-marker.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the marker was placed, kept in its own shadow root.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMapMarker",
+                "module": "src/map/marker/map-marker.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -80474,6 +80603,14 @@
                 "module": "src/map/marker/map-marker.ts"
               }
             },
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMapMarker",
+                "module": "src/map/marker/map-marker.ts"
+              }
+            },
             {
               "description": "Shows its name before the point, because there was no room after it.",
               "name": "start",
@@ -81571,6 +81708,18 @@
                 "module": "src/map/position/map-position.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the position was placed, kept in its own shadow root.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMapPosition",
+                "module": "src/map/position/map-position.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "spoken",
@@ -82155,6 +82304,14 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMapPosition",
+                "module": "src/map/position/map-position.ts"
+              }
+            },
             {
               "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
               "name": "settled",

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

@@ -205,7 +205,7 @@ color: var(--helix-color-foreground-subtle);
 font-size: var(--helix-text-xs);
 }
 
-:host(:not([style*="--_canvas-card-x"])) {
+:host(:not(:state(placed))) {
 position: static;
 }
 

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

@@ -27,7 +27,7 @@ position: absolute;
 z-index: calc(var(--helix-layer-raised) + 1);
 }
 
-:host(:not([style*="--_map-marker-x"])) {
+:host(:not(:state(placed))) {
 visibility: hidden;
 }
 

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

@@ -27,7 +27,7 @@ position: absolute;
 z-index: var(--helix-layer-raised);
 }
 
-:host(:not([style*="--_map-position-x"])) [part="position"] {
+:host(:not(:state(placed))) [part="position"] {
 visibility: hidden;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.110.5",
+  "version": "0.111.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.5",
-    "@fusion.dev/helix-headless": "0.110.5",
-    "@fusion.dev/helix-styles": "0.110.5"
+    "@fusion.dev/helix-core": "0.111.0",
+    "@fusion.dev/helix-headless": "0.111.0",
+    "@fusion.dev/helix-styles": "0.111.0"
   },
   "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

@@ -3163,6 +3163,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixCanvas["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"?: (HelixCanvas["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?: (HelixCanvas["toneLabels"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -3471,6 +3489,24 @@ Written to select from outside, and read to act on the selection. */
   "attr:stopped-label"?: (HelixCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   "prop:stoppedLabel"?: (HelixCanvas["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"?: (HelixCanvas["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"?: (HelixCanvas["toneLabels"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -28504,6 +28540,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.
@@ -28672,6 +28709,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.
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -37238,6 +37283,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.
    */
@@ -37400,6 +37446,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-map-position": Partial<
@@ -50301,6 +50348,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.
@@ -50472,6 +50520,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.
    * - `view`: The board's current view: the document's point at the middle of the view,
    * and the zoom.
    *
@@ -59196,6 +59252,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.
    */
@@ -59364,6 +59421,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-map-position": Partial<

package/types/svelte.d.ts

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

package/types/vue.d.ts

@@ -1777,6 +1777,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixCanvas["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"?: (HelixCanvas["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?: (HelixCanvas["toneLabels"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.