@fusion.dev/helix-headless 0.228.0 → 0.229.1

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

@@ -116,29 +116,6 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * Off by default, so every announcement on a page shows at once.
      */
     queued: boolean;
-    /**
-     * The band's color.
-     *
-     * Paint only: unlike `Callout`, no value here draws a mark, changes the label,
-     * or moves the live region off polite. `neutral` is the resting value, said
-     * out loud so a consumer can put a band back to it from markup.
-     *
-     * **The set is `Tag`'s and `Badge`'s, and now actually is.** This doc claimed
-     * to match `Tag` while differing from it in both directions: it carried
-     * `surface`, which `Tag` does not, and lacked `accent`, which `Tag` has. Three
-     * components saying what a thing means, in three vocabularies, one of which
-     * described itself as a fourth.
-     *
-     * `accent` is the second emphasis, the second color a theme names, and the
-     * brand itself until one is named. `primary` is the brand.
-     *
-     * **`surface` was never a color and has moved to `separation`**, which is the
-     * axis that owns where a box sits relative to the page. It said the band rode
-     * the surface step instead of the sunken one, which is an elevation, and a
-     * band can be `info` and elevated at once: two values true together are two
-     * axes, which is the test the registry answers to.
-     */
-    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     /** Whether a queued announcement before this one is still there. */
     private waiting;
     /** Watches the parent for the announcements before this one leaving. */

package/dist/announcement/root/announcement-root.js

@@ -213,9 +213,6 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessAnnouncement.prototype, "queued", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessAnnouncement.prototype, "tone", void 0);
 __decorate([
     state()
 ], HelixHeadlessAnnouncement.prototype, "waiting", void 0);

package/dist/button-group/root/button-group-root.d.ts

@@ -103,9 +103,8 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
      * Unset is a row and stays unset, so a reflected default cannot appear on a
      * host whose server output never had it.
      *
-     * **A property and not an `auto`, which the splitter and the carousel earned
-     * and this has not.** Turning those two changes what they *do*: a drag axis,
-     * arrow keys, how many slides a page holds. A group of buttons turning is
+     * **A property and not an `auto`, which the splitter earned and this has not.**
+     * Turning a splitter changes what it *does*: a drag axis and arrow keys. A group of buttons turning is
      * paint, so there is no state to resolve and nothing to observe; what it needs
      * is for a consumer who knows the column is narrow to be able to say so.
      *

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/node/canvas-node.d.ts

@@ -55,8 +55,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart node - The box the content sits in.
  * @csspart outline - The drawn outline of a `diamond` card, a shape a box cannot draw.
  *
+ * @cssstate active - The card that receives focus when you tab into the board.
  * @cssstate candidate - While a connection is being drawn and this card is somewhere it could arrive.
- * @cssstate current - The card that receives focus when you tab into the board.
  * @cssstate placed - Placed on the board.
  * @cssstate selected - The card is selected.
  * @cssstate target - A connection being drawn would end here if you released it.

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

@@ -48,7 +48,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('candidate', this.candidate);
-        this.toggleState('current', this.current);
+        this.toggleState('active', this.current);
         this.toggleState('selected', this.selected);
         this.toggleState('target', this.target);
     }

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/filter-input/chip/filter-chip.js

@@ -33,7 +33,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
       ${operator
             ? html `<span part="operator"><slot name="operator">${this.operatorLabel}</slot></span>`
             : nothing}
-      ${values ? html `<span part="values"><slot></slot></span>` : nothing}
+      <span part="values" ?hidden=${!values}><slot></slot></span>
       ${this.dismissible
             ? html `<button
               part="dismiss"

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

@@ -40,6 +40,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {Event} load - The image loaded. Relayed from the inner image, whose own event stays inside the shadow root.
  *
  * @csspart fallback - The fallback, shown when the image fails to load.
+ * @csspart fallback-mark - The mark drawn where a failed image has no `fallback` slot.
  * @csspart image - The image itself.
  * @csspart placeholder - The placeholder, shown until the image loads.
  *
@@ -239,6 +240,8 @@ export declare class HelixHeadlessImage extends HelixElement {
     get naturalHeight(): number;
     /** The image's intrinsic width in pixels. Zero until the image loads. */
     get naturalWidth(): number;
+    /** What a failed image shows, a mark where the `fallback` slot is empty. */
+    protected renderFallback(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/image/root/image-root.js

@@ -124,6 +124,14 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     get naturalWidth() {
         return this.image?.naturalWidth ?? 0;
     }
+    renderFallback() {
+        return html `<span
+      part="fallback"
+      aria-hidden=${this.status === 'error' ? nothing : 'true'}
+      ?hidden=${this.status !== 'error'}
+      ><slot name="fallback"><span part="fallback-mark"></span></slot
+    ></span>`;
+    }
     render() {
         return html `<img
         part="image"
@@ -145,12 +153,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         ?hidden=${this.status !== 'loading' || this.waiting}
         ><slot name="placeholder"></slot
       ></span>
-      <span
-        part="fallback"
-        aria-hidden=${this.status === 'error' ? nothing : 'true'}
-        ?hidden=${this.status !== 'error'}
-        ><slot name="fallback"></slot
-      ></span>`;
+      ${this.renderFallback()}`;
     }
 };
 __decorate([

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

@@ -146,7 +146,7 @@ export declare class HelixHeadlessList extends HelixElement {
     emptyLabel?: string;
     /**
      * The text of the row shown while the list has no rows, where the `empty`
-     * slot is empty. Empty, the default, shows no row.
+     * slot is empty. An empty string shows no row.
      */
     emptyText: string;
     /**

package/dist/list/root/list-root.js

@@ -11,7 +11,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         super(...arguments);
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
-        this.emptyText = '';
+        this.emptyText = 'No items';
         this.label = '';
         this.loading = false;
         this.loadingText = 'Loading more';
@@ -461,6 +461,7 @@ __decorate([
     property({ attribute: 'empty-label' })
 ], HelixHeadlessList.prototype, "emptyLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessList.prototype, "emptyText", void 0);
 __decorate([

package/dist/map/marker/map-marker.d.ts

@@ -30,10 +30,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart marker - The button, holding the point and the name.
  * @csspart point - The dot on the place, holding the icon if there is one.
  *
+ * @cssstate active - Holds the map's tab stop.
  * @cssstate behind - On the far side of a globe, out of sight until the globe turns it into view.
  * @cssstate cluster - Shows several markers as one count.
  * @cssstate clustered - Hidden inside another marker's cluster.
- * @cssstate current - Holds the map's tab stop.
  * @cssstate fanned - Spread out from a location it shares with other markers, after their cluster was pressed.
  * @cssstate icon - Has content in the icon slot.
  * @cssstate passed - Marked as passed.

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

@@ -44,7 +44,7 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
         this.toggleState('behind', this.behind);
         this.toggleState('cluster', this.gathered.length > 1);
         this.toggleState('clustered', this.gatheredBy !== undefined);
-        this.toggleState('current', this.current);
+        this.toggleState('active', this.current);
         this.toggleState('fanned', this.fanned);
         this.toggleState('passed', this.passed);
         this.toggleState('start', this.side === 'start');

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/meter/segment/meter-segment.d.ts

@@ -40,11 +40,6 @@ export declare class HelixHeadlessMeterSegment extends HelixElement {
      * Not announced: see the note on a meter's children above.
      */
     label: string;
-    /**
-     * What the segment means, as it does on a callout. Takes the tone's color in
-     * place of the next color in the series.
-     */
-    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     /**
      * How much of the meter's range the segment takes, in the units of the meter's
      * `min` and `max`.

package/dist/meter/segment/meter-segment.js

@@ -35,9 +35,6 @@ let HelixHeadlessMeterSegment = class HelixHeadlessMeterSegment extends HelixEle
 __decorate([
     property()
 ], HelixHeadlessMeterSegment.prototype, "label", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessMeterSegment.prototype, "tone", void 0);
 __decorate([
     property({ converter: numberConverter('value', 0) })
 ], HelixHeadlessMeterSegment.prototype, "value", 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/option/root/option-root.d.ts

@@ -52,7 +52,7 @@ export { isOption, optionsAmong } from '../among.js';
  * @cssstate disabled - While the option cannot be chosen.
  * @cssstate has-indicator - An icon is slotted into `indicator`.
  * @cssstate hovered - While a mouse or a pen is over the option. A touch sets no hover, as React Aria's `data-hovered` does not.
- * @cssstate pressed - While a pointer presses the option, from the press to the release.
+ * @cssstate pressing - While a pointer presses the option, from the press to the release.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {

package/dist/option/root/option-root.js

@@ -25,13 +25,13 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         };
         this.handlePointerLeave = () => {
             this.toggleState('hovered', false);
-            this.toggleState('pressed', false);
+            this.toggleState('pressing', false);
         };
         this.handlePointerDown = (event) => {
-            this.toggleState('pressed', event.button === 0 && !this.disabled);
+            this.toggleState('pressing', event.button === 0 && !this.disabled);
         };
         this.handlePointerUp = () => {
-            this.toggleState('pressed', false);
+            this.toggleState('pressing', false);
         };
     }
     get defaultSelected() {