@fusion.dev/helix 0.22.0 → 0.24.0

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -0,0 +1,35 @@
+import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-inspector';
+import type { CSSResultGroup } from 'lit';
+import '../../copy-button/index.js';
+/**
+ * @summary A value read as a tree: collapse what you do not need, count what
+ * you collapsed, copy the part you do.
+ *
+ * @description
+ * Code Block's frame around a tree of entries. Each type takes its ink from the
+ * syntax set the code blocks already use, a key in one, a string in another and
+ * a number, a boolean and a null in theirs, and each row is one line with a long
+ * string ending in an ellipsis, so every row is one height and a windowed tree
+ * never has to measure them one by one.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category data
+ * @aliases JSON viewer, Object viewer, Inspector, Data explorer
+ * @documentation https://helix.fusion.dev/components/object-inspector
+ *
+ * @cssproperty --object-inspector-background-color - Ground under the tree.
+ * @cssproperty --object-inspector-block-size - Height of the scrolling box, when windowed.
+ * @cssproperty --object-inspector-border-color - The edge around the tree and its header.
+ * @cssproperty --object-inspector-header-background-color - The bar carrying the label.
+ * @cssproperty --object-inspector-radius - Corner radius of the tree.
+ */
+export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-object-inspector': HelixObjectInspector;
+    }
+}

package/dist/object-inspector/root/object-inspector-root.js

@@ -0,0 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-inspector';
+import { styles } from './object-inspector-root.css.js';
+import '../../copy-button/index.js';
+let HelixObjectInspector = class HelixObjectInspector extends HelixHeadlessObjectInspector {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixObjectInspector = __decorate([
+    customElement('helix-object-inspector')
+], HelixObjectInspector);
+export { HelixObjectInspector };

package/dist/sandbox/root/sandbox-root.d.ts

@@ -32,8 +32,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @slot status - A status bar, spanning both panes at the bottom.
  * @slot toolbar - A bar across the top, spanning both panes.
  *
+ * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited, by the source pane and heard here. Cancelable: refusing it takes the decision and nothing moves.
  * @event {HelixBeforePanelResizeEvent} helix-before-panel-resize - Fired before the panel's divider is let go, with its height in pixels. Cancelable: refusing it takes the decision and nothing moves.
  * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is let go, with the lead pane's share. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves in the source, by the source pane and heard here.
+ * @event {HelixConsoleEvent} helix-console - Relayed from the frame by the preview pane, one per console call.
+ * @event {HelixResizeEvent} helix-resize - How tall the frame's content is, from the preview pane, whenever it changes.
  *
  * @csspart body - The splitter holding the panes above the panel.
  * @csspart corner - The handle where the two dividers cross.

package/dist/sandbox/toolbar/sandbox-toolbar.css.js

@@ -2,14 +2,20 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
+--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-tag: var(--helix-size-tag-sm);
 
 align-items: center;
 background-color: var(--helix-color-background);
 
-block-size: var(--sandbox-toolbar-size, var(--helix-size-control-loose));
+block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));
 
 border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
 display: flex;

package/dist/scatter-chart/index.d.ts

@@ -0,0 +1 @@
+export * from './root/scatter-chart-root.js';

package/dist/scatter-chart/index.js

@@ -0,0 +1 @@
+export * from './root/scatter-chart-root.js';

package/dist/scatter-chart/root/scatter-chart-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -0,0 +1,138 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+column-gap: var(--helix-space-xs);
+container-type: inline-size;
+display: grid;
+grid-template-areas:
+"y-name ."
+"y-axis plot"
+". x-axis"
+". x-name";
+grid-template-columns: auto minmax(0, 1fr);
+position: relative;
+row-gap: var(--scatter-chart-gap, var(--helix-space-2xs));
+}
+
+[part="plot"] {
+block-size: var(--scatter-chart-block-size, 14em);
+cursor: crosshair;
+grid-area: plot;
+position: relative;
+}
+
+[part="plot"] svg {
+block-size: 100%;
+inline-size: 100%;
+overflow: visible;
+}
+
+[part="gridline"] {
+stroke: var(--scatter-chart-gridline-color, var(--helix-color-border));
+stroke-width: var(--helix-border-thin);
+vector-effect: non-scaling-stroke;
+}
+
+[part="point"] {
+background-color: var(--chart-series);
+block-size: var(--scatter-chart-point-size, 8px);
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thin)
+var(--scatter-chart-point-ring-color, var(--helix-color-background));
+inline-size: var(--scatter-chart-point-size, 8px);
+inset-block-start: var(--chart-point-y);
+inset-inline-start: var(--chart-point-x);
+opacity: var(--scatter-chart-point-opacity, 0.8);
+pointer-events: none;
+position: absolute;
+transition:
+inset-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
+inset-inline-start var(--helix-duration-normal) var(--helix-easing-decelerate),
+scale var(--helix-duration-fast) var(--helix-easing-decelerate);
+translate: -50% -50%;
+}
+
+[part="point"][data-active] {
+opacity: 1;
+scale: 1.5;
+}
+
+[part="x-axis"],
+[part="y-axis"] {
+display: grid;
+}
+
+[part="x-axis"] {
+grid-area: x-axis;
+}
+
+[part="y-axis"] {
+grid-area: y-axis;
+}
+
+[part="x-tick"],
+[part="y-tick"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+grid-area: 1 / 1;
+line-height: 1;
+position: relative;
+white-space: nowrap;
+}
+
+[part="x-tick"] {
+inset-inline-start: var(--chart-tick);
+justify-self: start;
+translate: -50% 0;
+}
+
+[part="y-tick"] {
+align-self: start;
+inset-block-start: var(--chart-tick);
+justify-self: end;
+translate: 0 -50%;
+}
+
+@container (inline-size < 30rem) {
+[part="x-tick"]:nth-last-child(even) {
+visibility: hidden;
+}
+}
+
+[part="x-name"],
+[part="y-name"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="x-name"] {
+grid-area: x-name;
+justify-self: end;
+}
+
+[part="y-name"] {
+grid-area: y-name;
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+@starting-style {
+[part="point"] {
+opacity: 0;
+}
+}
+
+@media print {
+:host {
+print-color-adjust: exact;
+}
+}`);

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -0,0 +1,38 @@
+import { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary Whether two measures move together, one point per row.
+ *
+ * @description
+ * The points take the series palette in order, so a table with one column
+ * measured up is series one and a table with three is the first three.
+ *
+ * Each point has a ring of the page around it and stops short of opaque, so a
+ * dense cluster reads as dense rather than as one blot, and two points that
+ * overlap each keep their edge.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
+ * @documentation https://helix.fusion.dev/components/scatter-chart
+ *
+ * @cssproperty --scatter-chart-block-size - Height of the drawing.
+ * @cssproperty --scatter-chart-gap - Space between the drawing and its axes.
+ * @cssproperty --scatter-chart-gridline-color - One rule across the plot, under `gridlines`.
+ * @cssproperty --scatter-chart-point-opacity - How much of its color a point shows, so a cluster reads darker where it is denser.
+ * @cssproperty --scatter-chart-point-ring-color - The ring around each point, which is the page's color unless the chart sits on something else.
+ * @cssproperty --scatter-chart-point-size - Diameter of a point.
+ */
+export declare class HelixScatterChart extends HelixHeadlessScatterChart {
+    /** The styled tier, so the tooltip this renders is the styled one. */
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-scatter-chart': HelixScatterChart;
+    }
+}

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-chart';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './scatter-chart-root.css.js';
+import '../../tooltip/index.js';
+let HelixScatterChart = class HelixScatterChart extends HelixHeadlessScatterChart {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+};
+HelixScatterChart = __decorate([
+    customElement('helix-scatter-chart')
+], HelixScatterChart);
+export { HelixScatterChart };

package/dist/shared/chart/tooltip.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/chart/tooltip.css.js

@@ -0,0 +1,141 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="mark"] {
+block-size: 1px;
+inline-size: 1px;
+pointer-events: none;
+position: absolute;
+}
+
+[part="tooltip-anchor"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+[part="tooltip-label"] {
+display: block;
+font-weight: var(--helix-weight-medium);
+margin-block-end: var(--helix-space-2xs);
+}
+
+[part="tooltip-cell"] {
+align-items: baseline;
+column-gap: var(--helix-space-sm);
+display: grid;
+grid-template-columns: 0.5em minmax(0, 1fr) auto;
+}
+
+[part="tooltip-name"] {
+grid-column: 2;
+
+opacity: 0.72;
+}
+
+[part="tooltip-value"] {
+font-variant-numeric: tabular-nums;
+grid-column: 3;
+}
+
+[part="tooltip-cell"][data-series]::before {
+block-size: 0.5em;
+border-radius: var(--helix-radii-full);
+content: "";
+grid-column: 1;
+inline-size: 0.5em;
+}
+
+[part="tooltip-cell"][data-series="1"]::before {
+background-color: var(--chart-series-1);
+}
+
+[part="tooltip-cell"][data-series="2"]::before {
+background-color: var(--chart-series-2);
+}
+
+[part="tooltip-cell"][data-series="3"]::before {
+background-color: var(--chart-series-3);
+}
+
+[part="tooltip-cell"][data-series="4"]::before {
+background-color: var(--chart-series-4);
+}
+
+[part="tooltip-cell"][data-series="5"]::before {
+background-color: var(--chart-series-5);
+}
+
+[part="tooltip-cell"][data-series="6"]::before {
+background-color: var(--chart-series-6);
+}
+
+[part="tooltip-cell"][data-series="7"]::before {
+background-color: var(--chart-series-7);
+}
+
+[part="tooltip-cell"][data-series="8"]::before {
+background-color: var(--chart-series-8);
+}
+
+[part="tooltip-cell"][data-series="9"]::before {
+background-color: var(--chart-series-9);
+}
+
+[part="tooltip-cell"][data-series="10"]::before {
+background-color: var(--chart-series-10);
+}
+
+[part="tooltip-cell"][data-series="11"]::before {
+background-color: var(--chart-series-11);
+}
+
+[part="tooltip-cell"][data-series="12"]::before {
+background-color: var(--chart-series-12);
+}
+
+[part="tooltip-cell"][data-series="13"]::before {
+background-color: var(--chart-series-13);
+}
+
+[part="tooltip-cell"][data-series="14"]::before {
+background-color: var(--chart-series-14);
+}
+
+[part="tooltip-cell"][data-series="15"]::before {
+background-color: var(--chart-series-15);
+}
+
+[part="tooltip-cell"][data-series="16"]::before {
+background-color: var(--chart-series-16);
+}
+
+[part="tooltip-cell"][data-series="17"]::before {
+background-color: var(--chart-series-17);
+}
+
+[part="tooltip-cell"][data-series="18"]::before {
+background-color: var(--chart-series-18);
+}
+
+[part="tooltip-cell"][data-series="19"]::before {
+background-color: var(--chart-series-19);
+}
+
+[part="tooltip-cell"][data-series="20"]::before {
+background-color: var(--chart-series-20);
+}
+
+[part="tooltip-cell"][data-series="21"]::before {
+background-color: var(--chart-series-21);
+}
+
+[part="tooltip-cell"][data-series="22"]::before {
+background-color: var(--chart-series-22);
+}
+
+[part="tooltip-cell"][data-series="23"]::before {
+background-color: var(--chart-series-23);
+}
+
+[part="tooltip-cell"][data-series="24"]::before {
+background-color: var(--chart-series-24);
+}`);

package/dist/skip-link/index.d.ts

@@ -0,0 +1 @@
+export { HelixSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/index.js

@@ -0,0 +1 @@
+export { HelixSkipLink } from './root/skip-link-root.js';

package/dist/skip-link/root/skip-link-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/skip-link/root/skip-link-root.css.js

@@ -0,0 +1,36 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+inset-block-start: var(--helix-space-sm);
+inset-inline-start: var(--helix-space-sm);
+position: fixed;
+z-index: var(--helix-layer-overlay);
+}
+
+[part="link"] {
+background-color: var(--helix-color-surface-inverse);
+border: var(--skip-link-border-width, var(--helix-border-floating)) solid
+var(--skip-link-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
+color: var(--helix-color-foreground-inverse);
+display: inline-block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-normal);
+padding-block: var(--helix-space-sm);
+padding-inline: var(--helix-space-md);
+text-decoration: none;
+}
+
+[part="link"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -0,0 +1,42 @@
+import { HelixHeadlessSkipLink } from '@fusion.dev/helix-headless/skip-link';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary The first stop on a page, which moves the reader past everything
+ * repeated on every page.
+ *
+ * @description
+ * Out of sight until the keyboard reaches it, then in the corner of the
+ * viewport and impossible to miss. The hiding is the base layer's visually
+ * hidden helper, so the link stays in the tab order and in the accessibility
+ * tree while nobody can see it; `display: none` would have taken it out of
+ * both. The reveal is this sheet's.
+ *
+ * **Fixed to the viewport rather than placed where it sits in the document**,
+ * because it is first in the document and the page may already be scrolled
+ * when focus arrives, by a restored position or an anchor in the address. A
+ * link revealed above the top of the screen is revealed to nobody.
+ *
+ * Put it first inside `<body>`, before the header, and give the content
+ * region the id its `href` names.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @documentation https://helix.fusion.dev/components/skip-link
+ *
+ * @cssproperty --skip-link-border-color - Color of the revealed link's edge.
+ * @cssproperty --skip-link-border-width - Width of the revealed link's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the link is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --skip-link-shadow - Lift under the revealed link. Follows
+ *   `--helix-shadow-floating`, since it sits over whatever the page has at its corner.
+ */
+export declare class HelixSkipLink extends HelixHeadlessSkipLink {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-skip-link': HelixSkipLink;
+    }
+}

package/dist/skip-link/root/skip-link-root.js

@@ -0,0 +1,17 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSkipLink } from '@fusion.dev/helix-headless/skip-link';
+import { styles } from './skip-link-root.css.js';
+let HelixSkipLink = class HelixSkipLink extends HelixHeadlessSkipLink {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixSkipLink = __decorate([
+    customElement('helix-skip-link')
+], HelixSkipLink);
+export { HelixSkipLink };

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

@@ -105,7 +105,11 @@ z-index: 1;
 
 [part="label"] {
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-space-control: var(--_step-inset);
 --helix-text-control: var(--helix-text-sm);
 --button-foreground-color: var(--helix-color-foreground-muted);

package/dist/table/column/table-column.css.js

@@ -17,4 +17,70 @@ font-weight: var(--helix-weight-semibold);
 min-block-size: var(--helix-size-control-loose);
 min-inline-size: 0;
 padding-inline-end: var(--helix-space-md);
+}
+
+[part="column"] {
+position: relative;
+}
+
+[part="sort"] {
+all: unset;
+align-items: center;
+box-sizing: border-box;
+cursor: pointer;
+display: inline-flex;
+flex: 1;
+gap: var(--helix-space-2xs);
+min-inline-size: 0;
+}
+
+[part="sort"]:focus-visible,
+[part="grip"]:focus-visible,
+[part="resizer"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="grip"] {
+all: unset;
+align-items: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: grab;
+display: inline-flex;
+flex: none;
+margin-inline-end: var(--helix-space-2xs);
+touch-action: none;
+}
+
+[part="grip"]:active {
+cursor: grabbing;
+}
+
+[part="grip-mark"] {
+block-size: 1em;
+inline-size: 1em;
+}
+
+[part="resizer"] {
+cursor: col-resize;
+inline-size: var(--helix-space-sm);
+inset-block: 0;
+inset-inline-end: 0;
+position: absolute;
+touch-action: none;
+}
+
+[part="resizer"]::after {
+border-inline-end: var(--helix-border-thin) solid transparent;
+content: "";
+inset-block: var(--helix-space-xs);
+inset-inline-end: 0;
+position: absolute;
+}
+
+[part="resizer"]:hover::after,
+[part="resizer"]:focus-visible::after {
+border-inline-end-color: var(--helix-color-foreground-muted);
 }`);

package/dist/tag/root/tag-root.d.ts

@@ -46,6 +46,16 @@ export declare class HelixTag extends HelixHeadlessTag {
      *
      * `tone` is semantic color, which is what these are and what `helix-text`
      * already calls them. `helix component`'s `axes` holds the vocabulary.
+     *
+     * **Not all seven are statuses, and `accent` is the one worth saying out
+     * loud**: it is the second emphasis, a rotation off the brand seed rather than
+     * a color of its own, so it stays in relation when somebody rethemes.
+     * `primary` is the seed itself. The four that are statuses are the four
+     * `HelixStatusTone` names, and those are the ones that would carry a glyph
+     * somewhere that draws one.
+     *
+     * `Badge` and `Announcement` take the same seven, all three being a mark that
+     * carries a meaning beside something else.
      */
     tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     static styles: CSSResultGroup;