@fusion.dev/helix 0.110.6 → 0.111.1

package/custom-elements.json

@@ -15189,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",
@@ -15647,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",
@@ -16915,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",
@@ -17960,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": {
@@ -18002,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"
               },
               {
@@ -26342,6 +26439,18 @@
                 "module": "src/checkbox/root/checkbox-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCheckbox",
+                "module": "src/checkbox/root/checkbox-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "indeterminate",
@@ -99053,7 +99162,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessOption",
@@ -99094,7 +99203,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,
               "inheritedFrom": {
                 "name": "HelixHeadlessOption",
@@ -99626,7 +99735,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessOption",
@@ -110722,6 +110831,18 @@
                 "text": "select() => boolean"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessRadio",
+                "module": "src/radio/root/radio-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "defaultSelected",
@@ -127881,15 +128002,29 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Stats wrap onto a new line when space runs out, and each figure keeps its own\nwidth. Figures are read by comparing them, and equal columns would make a\nfour-digit number and a two-digit one look like the same quantity.",
+          "description": "Stats wrap onto a new line when space runs out, and each figure keeps its own\nwidth. Figures are read by comparing them, and equal columns would make a\nfour-digit number and a two-digit one look like the same quantity.\n\nSet `columns` where the stats are a set to be read across, such as three\nfacts about one thing: they then share the row equally, their labels wrap\nwithin their own column, and the rule between them follows the rows.",
           "name": "HelixStatGroup",
           "cssProperties": [
+            {
+              "description": "An explicit track list while `columns` is set, such as one column below a width.",
+              "name": "--stat-group-columns"
+            },
             {
               "description": "Space between figures.",
               "name": "--stat-group-gap"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.\n\n**Opted into, never the default.** Three stats whose labels ran to about\nforty characters broke two and one at 768 pixels, the third alone on a row\nwith its rule; and a count is what a set of facts read across wants, where\nfigures compared one against another keep their own widths.",
+              "attribute": "columns",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "divided",
@@ -128241,6 +128376,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "columns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.\n\n**Opted into, never the default.** Three stats whose labels ran to about\nforty characters broke two and one at 768 pixels, the third alone on a row\nwith its rule; and a count is what a set of facts read across wants, where\nfigures compared one against another keep their own widths.",
+              "fieldName": "columns"
+            },
             {
               "name": "divided",
               "type": {
@@ -130821,6 +130964,18 @@
                 "module": "src/switch/root/switch-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSwitch",
+                "module": "src/switch/root/switch-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "value",

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

@@ -6,6 +6,8 @@ export const styles = createSheet(`:host {
 --_canvas-card-inline-size: auto;
 --_canvas-card-block-size: auto;
 
+--_heading-ink: var(--helix-color-foreground);
+
 --_canvas-card-tone: var(--helix-color-border);
 --_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));
 

package/dist/card/root/card-root.css.js

@@ -4,6 +4,8 @@ export const styles = createSheet(`:host {
 --_card-inset: var(--card-padding, var(--helix-space-control));
 
 --_card-media: var(--card-media-size, 12rem);
+
+--_heading-ink: var(--helix-color-foreground);
 background-color: var(--card-background-color, var(--helix-color-surface));
 border: var(--card-border-width, var(--helix-border-surface)) solid
 var(--card-border-color, var(--helix-color-border));

package/dist/grid/root/grid-root.js

@@ -8,6 +8,7 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './grid-root.css.js';
+const UNINHERITED = '--grid-columns: initial; --_grid-template: initial;';
 let HelixGrid = class HelixGrid extends HelixElement {
     constructor() {
         super(...arguments);
@@ -22,8 +23,8 @@ let HelixGrid = class HelixGrid extends HelixElement {
         const min = this.min?.trim() ?? '';
         sheet.textContent =
             min !== '' && length.test(min)
-                ? `:host { --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`
-                : '';
+                ? `:host { ${UNINHERITED} --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`
+                : `:host { ${UNINHERITED} }`;
     }
     updated(changed) {
         super.updated(changed);
@@ -32,7 +33,7 @@ let HelixGrid = class HelixGrid extends HelixElement {
         }
     }
     render() {
-        return html `<style id="template"></style>
+        return html `<style id="template">:host { --grid-columns: initial; --_grid-template: initial; }</style>
       <slot></slot>`;
     }
     static { this.styles = styles; }

package/dist/stat/group/stat-group.css.js

@@ -6,6 +6,25 @@ flex-wrap: wrap;
 gap: var(--_stat-group-gap);
 }
 
+:host([columns]) {
+display: grid;
+}
+:host([columns="2"]) {
+grid-template-columns: var(--stat-group-columns, repeat(2, minmax(0, 1fr)));
+}
+:host([columns="3"]) {
+grid-template-columns: var(--stat-group-columns, repeat(3, minmax(0, 1fr)));
+}
+:host([columns="4"]) {
+grid-template-columns: var(--stat-group-columns, repeat(4, minmax(0, 1fr)));
+}
+:host([columns="5"]) {
+grid-template-columns: var(--stat-group-columns, repeat(5, minmax(0, 1fr)));
+}
+:host([columns="6"]) {
+grid-template-columns: var(--stat-group-columns, repeat(6, minmax(0, 1fr)));
+}
+
 :host([divided]) {
 column-gap: calc(var(--_stat-group-gap) * 2);
 overflow-x: clip;

package/dist/stat/group/stat-group.d.ts

@@ -8,14 +8,28 @@ import type { CSSResultGroup } from 'lit';
  * width. Figures are read by comparing them, and equal columns would make a
  * four-digit number and a two-digit one look like the same quantity.
  *
+ * Set `columns` where the stats are a set to be read across, such as three
+ * facts about one thing: they then share the row equally, their labels wrap
+ * within their own column, and the rule between them follows the rows.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Metrics, KPIs, Figures
  * @documentation https://fusion.dev/helix/components/stat
  *
+ * @cssproperty --stat-group-columns - An explicit track list while `columns` is set, such as one column below a width.
  * @cssproperty --stat-group-gap - Space between figures.
  */
 export declare class HelixStatGroup extends HelixHeadlessStatGroup {
+    /**
+     * A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+     *
+     * **Opted into, never the default.** Three stats whose labels ran to about
+     * forty characters broke two and one at 768 pixels, the third alone on a row
+     * with its rule; and a count is what a set of facts read across wants, where
+     * figures compared one against another keep their own widths.
+     */
+    columns?: number;
     /**
      * Draws a rule between the figures, in addition to the space.
      */

package/dist/stat/group/stat-group.js

@@ -15,6 +15,9 @@ let HelixStatGroup = class HelixStatGroup extends HelixHeadlessStatGroup {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixStatGroup.prototype, "columns", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixStatGroup.prototype, "divided", void 0);

package/dist/steps/step/step.css.js

@@ -2,6 +2,8 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --_step-inset: var(--helix-space-sm);
+
+align-content: start;
 align-items: start;
 column-gap: var(--helix-space-2xs);
 counter-increment: helix-step;

package/dist/text/root/text-root.css.js

@@ -94,6 +94,23 @@ letter-spacing: var(--helix-tracking-normal);
 line-height: var(--helix-leading-normal);
 }
 
+:host(
+:is(
+[as="h1"],
+[as="h2"],
+[as="h3"],
+[as="h4"],
+[as="h5"],
+[as="h6"],
+[variant="display"],
+[variant="heading"],
+[variant="subheading"],
+[variant="title"]
+)
+) {
+color: var(--_heading-ink, currentColor);
+}
+
 [part="text"] {
 color: inherit;
 font: inherit;

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.6",
+  "version": "0.111.1",
   "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.6",
-    "@fusion.dev/helix-headless": "0.110.6",
-    "@fusion.dev/helix-styles": "0.110.6"
+    "@fusion.dev/helix-core": "0.111.1",
+    "@fusion.dev/helix-headless": "0.111.1",
+    "@fusion.dev/helix-styles": "0.111.1"
   },
   "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

@@ -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.
 
@@ -16608,7 +16644,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?: (HelixOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -16715,7 +16755,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"?: (HelixOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -20956,6 +21000,13 @@ Reading gives where it is; writing declares it the consumer's, and
 };
 
 export type HelixStatGroupProps = {
+  /** A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+
+**Opted into, never the default.** Three stats whose labels ran to about
+forty characters broke two and one at 768 pixels, the third alone on a row
+with its rule; and a count is what a set of facts read across wants, where
+figures compared one against another keep their own widths. */
+  columns?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   divided?: (HelixStatGroup["divided"]) | undefined;
   /** Accessible name for the group. */
@@ -20963,6 +21014,13 @@ export type HelixStatGroupProps = {
 };
 
 export type HelixStatGroupSolidJsProps = {
+  /** A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+
+**Opted into, never the default.** Three stats whose labels ran to about
+forty characters broke two and one at 768 pixels, the third alone on a row
+with its rule; and a count is what a set of facts read across wants, where
+figures compared one against another keep their own widths. */
+  "prop:columns"?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   "prop:divided"?: (HelixStatGroup["divided"]) | undefined;
   /** Accessible name for the group. */
@@ -28673,6 +28731,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.
    *
@@ -39449,6 +39515,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.
@@ -39513,7 +39583,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
@@ -43447,10 +43520,20 @@ export type CustomElements = {
    * width. Figures are read by comparing them, and equal columns would make a
    * four-digit number and a two-digit one look like the same quantity.
    *
+   * Set `columns` where the stats are a set to be read across, such as three
+   * facts about one thing: they then share the row equally, their labels wrap
+   * within their own column, and the rule between them follows the rows.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `columns`: A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+   *
+   * **Opted into, never the default.** Three stats whose labels ran to about
+   * forty characters broke two and one at 768 pixels, the third alone on a row
+   * with its rule; and a count is what a set of facts read across wants, where
+   * figures compared one against another keep their own widths.
    * - `divided`: Draws a rule between the figures, in addition to the space.
    * - `label`: Accessible name for the group.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -43484,6 +43567,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--stat-group-columns`: An explicit track list while `columns` is set, such as one column below a width. (default: `undefined`)
    * - `--stat-group-gap`: Space between figures. (default: `undefined`)
    *
    * ## CSS States
@@ -50476,6 +50560,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.
    *
@@ -61464,6 +61556,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.
@@ -61528,7 +61624,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
@@ -65555,10 +65654,20 @@ export type CustomElementsSolidJs = {
    * width. Figures are read by comparing them, and equal columns would make a
    * four-digit number and a two-digit one look like the same quantity.
    *
+   * Set `columns` where the stats are a set to be read across, such as three
+   * facts about one thing: they then share the row equally, their labels wrap
+   * within their own column, and the rule between them follows the rows.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `columns`: A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+   *
+   * **Opted into, never the default.** Three stats whose labels ran to about
+   * forty characters broke two and one at 768 pixels, the third alone on a row
+   * with its rule; and a count is what a set of facts read across wants, where
+   * figures compared one against another keep their own widths.
    * - `divided`: Draws a rule between the figures, in addition to the space.
    * - `label`: Accessible name for the group.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
@@ -65592,6 +65701,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--stat-group-columns`: An explicit track list while `columns` is set, such as one column below a width. (default: `undefined`)
    * - `--stat-group-gap`: Space between figures. (default: `undefined`)
    *
    * ## CSS States
@@ -71110,6 +71220,8 @@ export type CustomCssProperties = {
   "--splitter-corner-at"?: (string) | undefined;
   /** Where the divider sits, as a percentage of the box. */
   "--splitter-position"?: (string) | undefined;
+  /** An explicit track list while `columns` is set, such as one column below a width. */
+  "--stat-group-columns"?: (string) | undefined;
   /** Space between figures. */
   "--stat-group-gap"?: (string) | undefined;
   /** Size of the figure. */

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.
 
@@ -8554,7 +8572,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?: (HelixOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -10740,6 +10762,13 @@ export type HelixSplitterVueEvents = {
 };
 
 export type HelixStatGroupVueProps = {
+  /** A fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.
+
+**Opted into, never the default.** Three stats whose labels ran to about
+forty characters broke two and one at 768 pixels, the third alone on a row
+with its rule; and a count is what a set of facts read across wants, where
+figures compared one against another keep their own widths. */
+  columns?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   divided?: (HelixStatGroup["divided"]) | undefined;
   /** Accessible name for the group. */
@@ -14388,6 +14417,8 @@ export type CustomCssProperties = {
   "--splitter-corner-at"?: (string) | undefined;
   /** Where the divider sits, as a percentage of the box. */
   "--splitter-position"?: (string) | undefined;
+  /** An explicit track list while `columns` is set, such as one column below a width. */
+  "--stat-group-columns"?: (string) | undefined;
   /** Space between figures. */
   "--stat-group-gap"?: (string) | undefined;
   /** Size of the figure. */
@@ -15278,7 +15309,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixSplitterVueProps,
     HelixSplitterVueEvents
   >;
-  /** Stats wrap onto a new line when space runs out, and each figure keeps its own width. Figures are read by comparing them, and equal columns would make a four-digit number and a two-digit one look like the same quantity. */
+  /** Stats wrap onto a new line when space runs out, and each figure keeps its own width. Figures are read by comparing them, and equal columns would make a four-digit number and a two-digit one look like the same quantity.  Set 'columns' where the stats are a set to be read across, such as three facts about one thing: they then share the row equally, their labels wrap within their own column, and the rule between them follows the rows. */
   "helix-stat-group": DefineCustomElement<
     HelixStatGroup,
     HelixStatGroupVueProps,