@fusion.dev/helix-headless 0.229.0 → 0.230.0

package/dist/canvas/edge/canvas-edge.d.ts

@@ -64,6 +64,15 @@ export declare class HelixHeadlessCanvasEdge extends HelixElement {
      * the board can draw.
      */
     readOnly: boolean;
+    /**
+     * How the line is drawn: `dashed` or `dotted`. Unset is solid.
+     *
+     * **A stroke rather than an axis**, which is what the registry keeps it for:
+     * no other family draws a line whose stroke says something, and a dashed
+     * connection is the ordinary way to draw a weaker or an optional one. On the
+     * headless tier because the board that draws the line is.
+     */
+    stroke?: 'dashed' | 'dotted';
     /** The name of the card the connection ends at. */
     to: string;
     /** The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies. */
@@ -79,15 +88,6 @@ export declare class HelixHeadlessCanvasEdge extends HelixElement {
     tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     /** The side of the `to` card the connection arrives at, when the document sets one. */
     toSide?: CanvasSide | undefined;
-    /**
-     * How the line is drawn: `dashed` or `dotted`. Unset is solid.
-     *
-     * **A variant rather than an axis**, which is what the registry keeps it for:
-     * no other family draws a line whose stroke says something, and a dashed
-     * connection is the ordinary way to draw a weaker or an optional one. On the
-     * headless tier because the board that draws the line is.
-     */
-    variant?: 'dashed' | 'dotted';
     /**
      * Tells the board the connector changed, since the board is what draws it.
      *

package/dist/canvas/edge/canvas-edge.js

@@ -40,6 +40,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCanvasEdge.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvasEdge.prototype, "stroke", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvasEdge.prototype, "to", void 0);
@@ -52,9 +55,6 @@ __decorate([
 __decorate([
     property({ attribute: 'to-side' })
 ], HelixHeadlessCanvasEdge.prototype, "toSide", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessCanvasEdge.prototype, "variant", void 0);
 HelixHeadlessCanvasEdge = __decorate([
     customElement('helix-headless-canvas-edge')
 ], HelixHeadlessCanvasEdge);

package/dist/canvas/root/canvas-root.js

@@ -2277,7 +2277,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         d=${drawn.d}
         data-selected=${pickedKeys.has(key) ? '' : nothing}
         data-tone=${element?.tone ?? nothing}
-        data-variant=${element?.variant ?? nothing}
+        data-stroke=${element?.stroke ?? nothing}
         fill="none"
         marker-end=${ends.end ? `url(#${ARROW})` : nothing}
         marker-start=${ends.start ? `url(#${ARROW})` : nothing}

package/dist/code-block/root/code-block-root.d.ts

@@ -72,7 +72,7 @@ import { HighlighterController } from '../highlighter.js';
  * depend on color. Where a removed line is paired with the added line that
  * replaced it, the words each does not share with the other are the `changed`
  * part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,
- * and its copy button copies the new version of the file. `variant="split"`
+ * and its copy button copies the new version of the file. `layout="split"`
  * shows the old version beside the new, each removal opposite its replacement.
  * `context-lines` folds each long run of unchanged lines, keeping that many
  * beside each change, behind a button that shows them and hides them again,
@@ -311,6 +311,14 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `highlight` an empty string and names nothing.
      */
     language: string;
+    /**
+     * How a diff's two versions are arranged. It has no effect without `diff`.
+     *
+     * Absent is unified, each removal above its replacement, which fits any
+     * width. `split` sets the old version beside the new one. Optional rather
+     * than defaulted, so the host carries no attribute the consumer did not write.
+     */
+    layout?: 'split';
     /**
      * Whether the lines are numbered in a gutter beside the code.
      *
@@ -358,14 +366,6 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * diff with `context-lines`. `{count}` is how many.
      */
     showUnchangedLabel: string;
-    /**
-     * How a diff's two versions are arranged. It has no effect without `diff`.
-     *
-     * Absent is unified, each removal above its replacement, which fits any
-     * width. `split` sets the old version beside the new one. Optional rather
-     * than defaulted, so the host carries no attribute the consumer did not write.
-     */
-    variant?: 'split';
     /**
      * Whether long lines wrap. Without it they scroll.
      *

package/dist/code-block/root/code-block-root.js

@@ -504,7 +504,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             return html `<div part="file">
         ${this.renderHeader(name, now)}
         <div part="frame">
-          ${this.variant === 'split'
+          ${this.layout === 'split'
                 ? this.renderSplit(file, width, at)
                 : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk, h) => html `${this.renderHunk(hunk)}${this.runsOf(hunk).map((run) => run.folded
                     ? this.renderFold(run, `${at}:${h}:${run.start}`, (line) => this.renderLine(line, width))
@@ -575,6 +575,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCodeBlock.prototype, "language", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCodeBlock.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'line-numbers', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
@@ -591,9 +594,6 @@ __decorate([
     words,
     property({ attribute: 'show-unchanged-label' })
 ], HelixHeadlessCodeBlock.prototype, "showUnchangedLabel", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessCodeBlock.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "wrap", void 0);

package/dist/color-input/root/color-input-root.d.ts

@@ -60,7 +60,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @event {Event} input - Fired as the value changes.
  * @event {ToggleEvent} toggle - The panel opened or closed. The event carries `newState` and `oldState`.
  *
- * @csspart control - The text input that holds the value. Absent in the `swatch` variant.
+ * @csspart control - The text input that holds the value. Absent in the `swatch` trigger.
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart field - The box holding the text and the trigger.
  * @csspart hint - Help text under the field, shown while there is no feedback.
@@ -194,15 +194,11 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     swatches: string;
     /**
-     * What the swatch says in `variant="swatch"`, after the field's label, once
+     * What the swatch says in `trigger="swatch"`, after the field's label, once
      * there is a color. `{name}` is the color's name, such as "vibrant red", and
      * `{value}` the value as written.
      */
     swatchLabel: string;
-    /**
-     * Accessible name for the control that opens the panel.
-     */
-    triggerLabel: string;
     /**
      * Whether the field is a text box with a swatch on it, or only the swatch.
      *
@@ -220,7 +216,11 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * be read or pasted into without opening the panel, which is worse for a form
      * where the color is the answer rather than a setting.
      */
-    variant?: 'swatch';
+    trigger?: 'swatch';
+    /**
+     * Accessible name for the control that opens the panel.
+     */
+    triggerLabel: string;
     /**
      * Draws the panel's hue as a wheel around the square, in place of the hue
      * ramp. See Color Picker's `wheel`.

package/dist/color-input/root/color-input-root.js

@@ -68,7 +68,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         return this.control ?? this.partNamed('trigger');
     }
     renderSwatchValue() {
-        return this.variant === 'swatch'
+        return this.trigger === 'swatch'
             ? html `<span id="swatch-value" hidden>${this.swatchWords}</span>`
             : nothing;
     }
@@ -139,7 +139,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
       ?wheel=${this.wheel}
       ?channel-fields=${this.channelFields}
       ?no-format=${this.noFormat}
-      ?no-value=${this.variant !== 'swatch'}
+      ?no-value=${this.trigger !== 'swatch'}
       .colorWords=${this.colorWords}
       .format=${this.format ?? 'hex'}
       .value=${this.picked}
@@ -163,7 +163,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
              comment: it is inside a tagged template, so one would end the
              literal and the error lands on a line further down. -->
         <slot name="start"></slot>
-        ${this.variant === 'swatch'
+        ${this.trigger === 'swatch'
             ? nothing
             : html `<input
           part="control"
@@ -186,14 +186,14 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         <slot name="end"></slot>
         <button
           part="trigger"
-          id=${this.variant === 'swatch' ? 'control' : nothing}
+          id=${this.trigger === 'swatch' ? 'control' : nothing}
           type="button"
           aria-controls="surface"
           aria-disabled=${this.readOnly ? 'true' : nothing}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-haspopup="dialog"
-          aria-label=${this.variant === 'swatch' ? nothing : this.triggerLabel}
-          aria-labelledby=${this.variant === 'swatch'
+          aria-label=${this.trigger === 'swatch' ? nothing : this.triggerLabel}
+          aria-labelledby=${this.trigger === 'swatch'
             ? this.labeled
                 ? `${this.labelId} swatch-value`
                 : 'swatch-value'
@@ -257,13 +257,13 @@ __decorate([
     words,
     property({ attribute: 'swatch-label' })
 ], HelixHeadlessColorInput.prototype, "swatchLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessColorInput.prototype, "trigger", void 0);
 __decorate([
     words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessColorInput.prototype, "triggerLabel", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessColorInput.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessColorInput.prototype, "wheel", void 0);

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

@@ -94,7 +94,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @cssstate current - A link in the panel carries `aria-current="page"`, so the trigger can show the section you are in.
  * @cssstate from-end - The panel opened in place of one earlier in the bar, so it can enter from the end side.
  * @cssstate from-start - The panel opened in place of one later in the bar, so it can enter from the start side.
- * @cssstate narrow - The page is narrower than `band-below`, so the panel is shown as a band whatever its variant.
+ * @cssstate narrow - The page is narrower than `band-below`, so the panel is shown as a band whatever its layout.
  * @cssstate open - The panel is open, and the trigger is shown as current.
  * @cssstate to-end - The panel closed because one earlier in the bar opened, so it can leave toward the end.
  * @cssstate to-start - The panel closed because one later in the bar opened, so it can leave toward the start.
@@ -139,6 +139,29 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * The section's name, used for the default trigger and the panel.
      */
     label: string;
+    /**
+     * Whether the panel is a card under the trigger or a band across the page.
+     *
+     * The resting one is the card, hanging off the trigger and as wide as it
+     * needs to be. `band` is the other shape navigations use: a run from edge to
+     * edge under the header, with its contents held to the page's own measure, so
+     * a set of destinations too wide to sit under one word gets the whole width
+     * to lay out in.
+     *
+     * **A band and not a width, which is why the word is not `full`.** It changes
+     * where the panel goes as well as how wide it is, which is why this tier
+     * knows about it at all: a band spans the viewport, so there is nothing to
+     * measure it against and nothing to flip or shift to, and the placing pass is
+     * told not to run. Everything else the popover gives, the top layer and the
+     * dismissal, is exactly what such a band needs. `full` is the registry's word
+     * for a width, and `Button` and `Dialog` are the two families answering that
+     * question; borrowing it here would put a third meaning on it.
+     *
+     * `layout` and not an axis, for the reason the registry gives: a card under
+     * a word and a band under a header are two arrangements this family has, and
+     * no other family is being asked the same question.
+     */
+    layout?: 'band';
     /**
      * How long a pointer rests on the trigger before the panel opens, in
      * milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
@@ -162,29 +185,6 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * page under its bar.
      */
     placement: Placement;
-    /**
-     * Whether the panel is a card under the trigger or a band across the page.
-     *
-     * The resting one is the card, hanging off the trigger and as wide as it
-     * needs to be. `band` is the other shape navigations use: a run from edge to
-     * edge under the header, with its contents held to the page's own measure, so
-     * a set of destinations too wide to sit under one word gets the whole width
-     * to lay out in.
-     *
-     * **A band and not a width, which is why the word is not `full`.** It changes
-     * where the panel goes as well as how wide it is, which is why this tier
-     * knows about it at all: a band spans the viewport, so there is nothing to
-     * measure it against and nothing to flip or shift to, and the placing pass is
-     * told not to run. Everything else the popover gives, the top layer and the
-     * dismissal, is exactly what such a band needs. `full` is the registry's word
-     * for a width, and `Button` and `Dialog` are the two families answering that
-     * question; borrowing it here would put a third meaning on it.
-     *
-     * `variant` and not an axis, for the reason the registry gives: a card under
-     * a word and a band under a header are two arrangements this family has, and
-     * no other family is being asked the same question.
-     */
-    variant?: 'band';
     private narrow;
     private query;
     /** A band, whether because it was asked for or because there is no room. */

package/dist/megamenu/root/megamenu-root.js

@@ -133,7 +133,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     static { HelixHeadlessMegamenu_1 = this; }
     static { this.bar = new HandOver((megamenu, to) => megamenu.motion(to)); }
     get banded() {
-        return this.variant === 'band' || this.narrow;
+        return this.layout === 'band' || this.narrow;
     }
     watchWidth() {
         this.query?.removeEventListener('change', this.handleWidth);
@@ -336,6 +336,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMegamenu.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessMegamenu.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'open-delay', converter: timeConverter('open-delay', 120) })
 ], HelixHeadlessMegamenu.prototype, "openDelay", void 0);
@@ -345,9 +348,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMegamenu.prototype, "placement", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessMegamenu.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessMegamenu.prototype, "narrow", void 0);

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

@@ -88,12 +88,6 @@ export declare class HelixHeadlessNavigation extends HelixElement {
     protected readonly keys: KeyboardNavigationController;
     /** Carries a host `aria-label` and `aria-labelledby` to the `<nav>`. */
     protected readonly aria: AriaForwardController;
-    /**
-     * Stacks the destinations in a column, for a sidebar, where unset is a row
-     * for a header or a footer. The marker follows the current destination down
-     * the column as it does along the row.
-     */
-    orientation?: 'vertical';
     /**
      * How the destinations are drawn, with `Tabs`' three values and for the same
      * reasons.
@@ -115,7 +109,13 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      * Reflected and left unset by default, so the host carries nothing a
      * consumer's server markup does not already have.
      */
-    variant?: 'segmented' | 'underlined';
+    marker?: 'segmented' | 'underlined';
+    /**
+     * Stacks the destinations in a column, for a sidebar, where unset is a row
+     * for a header or a footer. The marker follows the current destination down
+     * the column as it does along the row.
+     */
+    orientation?: 'vertical';
     private current;
     /** The disclosures among the destinations that are open. */
     private readonly opened;

package/dist/navigation/root/navigation-root.js

@@ -153,10 +153,10 @@ __decorate([
 ], HelixHeadlessNavigation.prototype, "label", void 0);
 __decorate([
     property({ reflect: true })
-], HelixHeadlessNavigation.prototype, "orientation", void 0);
+], HelixHeadlessNavigation.prototype, "marker", void 0);
 __decorate([
     property({ reflect: true })
-], HelixHeadlessNavigation.prototype, "variant", void 0);
+], HelixHeadlessNavigation.prototype, "orientation", void 0);
 HelixHeadlessNavigation = __decorate([
     customElement('helix-headless-navigation')
 ], HelixHeadlessNavigation);

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

@@ -56,7 +56,7 @@ import { type Branch } from '../levels.js';
  * marked, so `a[aria-current]` and `a[data-depth="2"]` are the hooks for a
  * rule of yours.
  *
- * **The rail.** `variant="rail"` draws a slim column of ticks at the edge of a
+ * **The rail.** `marker="rail"` draws a slim column of ticks at the edge of a
  * long scroll, one per link, with the section in view drawn longer and a deeper
  * level shorter. Hovering or focusing the rail opens a surface holding the
  * links, each on one line, and Escape closes it. A tap opens it too, and it stays
@@ -82,9 +82,9 @@ import { type Branch } from '../levels.js';
  *   `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw
  *   and animate yourself.
  * @csspart nav - The navigation landmark.
- * @csspart surface - The box holding the heading and the navigation under `variant="rail"`, which opens over the ticks.
+ * @csspart surface - The box holding the heading and the navigation under `marker="rail"`, which opens over the ticks.
  * @csspart tick - One tick of the rail, for one link, with `data-current` while its section is in view. It carries the link's depth as `--outline-depth`.
- * @csspart ticks - The column of ticks under `variant="rail"`, hidden from assistive technology.
+ * @csspart ticks - The column of ticks under `marker="rail"`, hidden from assistive technology.
  *
  * @cssproperty --outline-depth - The depth of the link a tick stands for, from one, set on each tick.
  *
@@ -144,22 +144,23 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * Empty by default, which leaves the name to `fallbackLabel`.
      */
     label: string;
+    /**
+     * The rail form: a slim column of ticks, one per link, that opens on hover,
+     * focus, or a tap into a surface holding the links.
+     *
+     * A marker because no registered axis (emphasis, material, nesting,
+     * orientation, separation, shape, size, tone, width) has a value for it, and
+     * a rail is an arrangement of this family alone, as Megamenu's
+     * `marker="band"` is. It has no default: the outline without it is the list
+     * of links.
+     */
+    marker?: 'rail';
     /**
      * Which links are marked. `reading` marks the one section being read, the
      * last whose heading has passed the reading line. `visible` marks every
      * section with part of it on screen, and the mark runs across their links.
      */
     marks: 'reading' | 'visible';
-    /**
-     * How far below the top of the scroll container a heading counts as reached,
-     * in pixels. The scroll container is the window or the panel the sections
-     * scroll in.
-     *
-     * The reading line. A page with a sticky masthead sets this to its height, or
-     * a little more: without it the current section changes as a heading slides
-     * under the chrome rather than as it reaches the top of what can be seen.
-     */
-    offset: number;
     /**
      * The id of the section in view, or empty before anything is measured.
      *
@@ -180,16 +181,15 @@ export declare class HelixHeadlessOutline extends HelixElement {
     /** What `marked` reports, which only `markTo` writes. */
     private markedIds;
     /**
-     * The rail form: a slim column of ticks, one per link, that opens on hover,
-     * focus, or a tap into a surface holding the links.
+     * How far below the top of the scroll container a heading counts as reached,
+     * in pixels. The scroll container is the window or the panel the sections
+     * scroll in.
      *
-     * A variant because no registered axis (emphasis, material, nesting,
-     * orientation, separation, shape, size, tone, width) has a value for it, and
-     * a rail is an arrangement of this family alone, as Megamenu's
-     * `variant="band"` is. It has no default: the outline without it is the list
-     * of links.
+     * The reading line. A page with a sticky masthead sets this to its height, or
+     * a little more: without it the current section changes as a heading slides
+     * under the chrome rather than as it reaches the top of what can be seen.
      */
-    variant?: 'rail';
+    offset: number;
     /**
      * What `current` reports, which only `mark` writes.
      *

package/dist/outline/root/outline-root.js

@@ -19,8 +19,8 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.follow = false;
         this.label = '';
         this.marks = 'reading';
-        this.offset = 0;
         this.markedIds = [];
+        this.offset = 0;
         this.reading = '';
         this.frame = 0;
         this.handleScroll = () => {
@@ -319,7 +319,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         }
     }
     get rail() {
-        return this.variant === 'rail';
+        return this.marker === 'rail';
     }
     setOpen(on) {
         if (!on) {
@@ -418,7 +418,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('variant') && !this.rail) {
+        if (changed.has('marker') && !this.rail) {
             this.setOpen(false);
         }
         this.assign();
@@ -469,15 +469,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessOutline.prototype, "marker", void 0);
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "marks", void 0);
 __decorate([
     property({ converter: numberConverter('offset', 0, 'pixels') })
 ], HelixHeadlessOutline.prototype, "offset", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessOutline.prototype, "variant", void 0);
 HelixHeadlessOutline = __decorate([
     customElement('helix-headless-outline')
 ], HelixHeadlessOutline);

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

@@ -25,7 +25,7 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/radio
  *
  * @slot - The radio's label.
- * @slot icon - An icon shown beside the label. With `variant="chip"`, the icon
+ * @slot icon - An icon shown beside the label. With `chip`, the icon
  * replaces the visible label, and the label becomes the name read by screen
  * readers. The icon has its own slot so the chip can hide the label and show
  * the icon.

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -159,38 +159,6 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * height.
      */
     growAgain: boolean;
-    /**
-     * Draws no box: no edges, grid, numbers, or names, and in a `row` no
-     * floor, so the readings stand alone and fill the plot, as a picture on a
-     * product's own page does. The
-     * table, the summary, the tooltip, and the keys still carry every value,
-     * and a renderer draws no box either.
-     */
-    noBox: boolean;
-    /**
-     * What the readout says for a place with no value. `{category}` and
-     * `{series}` name the place.
-     */
-    openLabel: string;
-    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
-    plotLabel: string;
-    /**
-     * Stacks a category's series into one column, each block standing on the
-     * ones before it, so the column is as tall as the category's total, as a
-     * flat `Bar Chart` stacks them.
-     *
-     * Absent stands the series one behind another in depth. Stacked, every
-     * series stands in the front row, so none hides another, and the parts of
-     * one total read together. A negative reading hangs below zero on the
-     * negatives before it. The scale fits the stacks.
-     */
-    stacked: boolean;
-    /**
-     * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
-     * are the number of bars, series, and categories, written in the locale,
-     * and `{low}` and `{high}` the lowest and the highest value.
-     */
-    summaryLabel: string;
     /**
      * How the bars stand.
      *
@@ -224,7 +192,39 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * can give it the latest of a longer table. It is read when the plot's
      * size changes.
      */
-    variant?: 'diagonal' | 'row';
+    layout?: 'diagonal' | 'row';
+    /**
+     * Draws no box: no edges, grid, numbers, or names, and in a `row` no
+     * floor, so the readings stand alone and fill the plot, as a picture on a
+     * product's own page does. The
+     * table, the summary, the tooltip, and the keys still carry every value,
+     * and a renderer draws no box either.
+     */
+    noBox: boolean;
+    /**
+     * What the readout says for a place with no value. `{category}` and
+     * `{series}` name the place.
+     */
+    openLabel: string;
+    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+    plotLabel: string;
+    /**
+     * Stacks a category's series into one column, each block standing on the
+     * ones before it, so the column is as tall as the category's total, as a
+     * flat `Bar Chart` stacks them.
+     *
+     * Absent stands the series one behind another in depth. Stacked, every
+     * series stands in the front row, so none hides another, and the parts of
+     * one total read together. A negative reading hangs below zero on the
+     * negatives before it. The scale fits the stacks.
+     */
+    stacked: boolean;
+    /**
+     * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
+     * are the number of bars, series, and categories, written in the locale,
+     * and `{low}` and `{high}` the lowest and the highest value.
+     */
+    summaryLabel: string;
     /** Whether a renderer has drawn the bars, which hides the chart's own drawing. */
     private rendered;
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -197,7 +197,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     get fits() {
         const box = this.partNamed('fallback');
-        if (!box || !this.variant || typeof getComputedStyle !== 'function') {
+        if (!box || !this.layout || typeof getComputedStyle !== 'function') {
             return undefined;
         }
         const style = getComputedStyle(box);
@@ -331,7 +331,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(read, at) {
-        const layout = this.variant ?? 'grid';
+        const layout = this.layout ?? 'grid';
         const lined = layout === 'grid' ? undefined : layout;
         const bare = this.noBox || lined !== undefined;
         const view = boxView(read.axes, this.camera, [], bare);
@@ -489,6 +489,9 @@ __decorate([
 __decorate([
     property({ attribute: 'grow-again', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "growAgain", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSpatialBarChart.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'no-box', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "noBox", void 0);
@@ -507,9 +510,6 @@ __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "summaryLabel", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessSpatialBarChart.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "rendered", void 0);