@fusion.dev/helix 0.111.0 → 0.111.2

package/custom-elements.json

@@ -26439,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",
@@ -99150,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",
@@ -99191,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",
@@ -99723,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",
@@ -110819,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",
@@ -127978,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",
@@ -128338,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": {
@@ -130918,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.111.0",
+  "version": "0.111.2",
   "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.111.0",
-    "@fusion.dev/helix-headless": "0.111.0",
-    "@fusion.dev/helix-styles": "0.111.0"
+    "@fusion.dev/helix-core": "0.111.2",
+    "@fusion.dev/helix-headless": "0.111.2",
+    "@fusion.dev/helix-styles": "0.111.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.111.0",
-    "@fusion.dev/helix-testing": "0.111.0",
+    "@fusion.dev/helix-cem": "0.111.2",
+    "@fusion.dev/helix-testing": "0.111.2",
     "@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

@@ -16644,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.
 
@@ -16751,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.
 
@@ -20992,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. */
@@ -20999,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. */
@@ -39493,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.
@@ -39557,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
@@ -43491,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.
@@ -43528,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
@@ -61516,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.
@@ -61580,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
@@ -65607,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.
@@ -65644,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
@@ -71162,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/vue.d.ts

@@ -8572,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.
 
@@ -10758,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. */
@@ -14406,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. */
@@ -15296,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,