@fusion.dev/helix-headless 0.39.0 → 0.41.0

package/dist/accordion/item/accordion-item.d.ts

@@ -15,7 +15,7 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * `display` has overridden the first.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Collapsible, Expander, Disclosure
  * @documentation https://fusion.dev/helix/components/accordion
  *

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

@@ -25,7 +25,7 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * to hear.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category layout
  * @aliases Collapse, Expander group
  * @documentation https://fusion.dev/helix/components/accordion

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

@@ -34,12 +34,28 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * else draws every part in proportion to nothing. `LineChart` measures from its
  * own range because a line claims a position; a band claims an amount.
  *
+ * **And so it is not a streamgraph**, which is the near neighbor to name.
+ * A streamgraph moves its baseline to center the bands and reads as a river; it
+ * is a real form and it is the one thing the rule above refuses, so this
+ * carries no alias for it. What it has instead is `share`, which answers the
+ * question a streamgraph is usually reached for, how the composition changed,
+ * without giving up a floor a reader can measure against.
+ *
  * **Straight between readings unless asked otherwise.** A band's top edge is a
  * sum, and a curve fitted through one sum can pass under the curve fitted
  * through the sum beneath it, so a smoothed stack can draw a part as less than
  * nothing between two readings. Straight segments between ordered points stay
  * ordered. `curve="smooth"` is there for a stack that is read as a shape.
  *
+ * `curve="step"` falls on the safe side of that argument rather than being
+ * unanswered by it, and it is worth saying which side because a reader cannot
+ * tell from the argument alone. A step takes no value the readings do not have:
+ * it holds one, jumps at the midpoint, and holds the next. So two stepped edges
+ * that are ordered at every reading are ordered everywhere between them, which
+ * is what `straight` is chosen for. It is the curve for a quantity that changes
+ * at a moment rather than across an interval, a headcount or a price, where a
+ * sloped edge claims a gradual change nothing measured.
+ *
  * **`share` draws each reading as a hundred percent**, so the bands are the
  * parts' shares and the top edge is flat. It answers "which part grew" where
  * the default answers "did the whole grow".
@@ -56,9 +72,9 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * nothing, and a band that folded under its neighbor would say it was.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
- * @aliases Stacked Area Chart, Composition Chart, Stream Chart
+ * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
  * @csspart area - One part's band.
@@ -92,9 +108,13 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
     /**
      * How a band's edge gets from one reading to the next.
      *
-     * Absent is `straight`, for the reason the class doc gives, and absent rather
-     * than defaulted because a reflecting property with a default writes its
-     * attribute onto every host, including the ones nobody configured.
+     * Three values, and the class doc argues for each: `straight` is absent and
+     * is the default, `smooth` is for a stack read as a shape and is the one that
+     * can draw a part as less than nothing, `step` is for a quantity that changes
+     * at a moment and is ordered the way `straight` is.
+     *
+     * Absent rather than defaulted because a reflecting property with a default
+     * writes its attribute onto every host, including the ones nobody configured.
      */
     curve?: Curve;
     /**

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

@@ -26,8 +26,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     }
     get stack() {
         const rows = this.sourceRows;
-        const width = Math.max(0, ...rows.map((row) => row.cells.length));
-        const columns = Array.from({ length: width }, (_, column) => column).filter((column) => rows.some((row) => row.cells[column]?.value !== undefined));
+        const columns = this.plottedColumns;
         const values = columns.map((column) => rows.map((row) => {
             const value = row.cells[column]?.value ?? 0;
             if (value < 0) {
@@ -185,7 +184,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
             y: `${y(stack.layers.at(-1)?.[at] ?? 0)}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

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

@@ -28,7 +28,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * computed and CSS cannot.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Column Chart, Categorical Chart
  * @documentation https://fusion.dev/helix/components/bar-chart
@@ -65,7 +65,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
  *
- * @cssproperty --bar-chart-axis - The color of a single-series axis, taken from that series.
+ * @cssproperty --bar-chart-axis - How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead.
  * @cssproperty --bar-chart-secondary - The color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138.
  * @cssproperty --chart-bar-wash - The gradient a bar would take, named per bar so the
  *   styled tier can point `fill` at it. Drawn whatever the treatment and used only where
@@ -105,30 +105,40 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
     /**
      * Which series are drawn as a line instead of as columns, by name.
      *
-     * Space separated, matched against the column headings the table gives, so a
-     * chart says `lines="Margin"` rather than counting columns. Names because
-     * they are what the table already carries and what the legend already shows:
-     * an index is a fourth place the column order is written down and the first
-     * one to go stale when somebody moves a column.
+     * Separated by whitespace or commas and matched against the column headings
+     * the table gives, so a chart says `lines="Margin"` rather than counting
+     * columns. Names because they are what the table already carries and what the
+     * legend already shows: an index is a fourth place the column order is
+     * written down and the first one to go stale when somebody moves a column.
      *
-     * **A combination chart is one scale, and that is the honest half of it.**
-     * Both marks are measured against the same domain, so a line here says
-     * something comparable to the columns beside it. The usual reason to reach
-     * for a combination chart is the other thing, a count against a percentage on
-     * a second axis, and that is deliberately not this: two scales on one frame
-     * let the author put any two shapes in any relation by choosing the ranges,
-     * and the reader has no way to see it happening.
+     * **This says which mark a series takes and nothing about which scale it is
+     * measured on.** Named here alone, a line shares the columns' domain, so it
+     * says something comparable to the columns beside it.
      *
-     * A line among columns still measures from zero, because the columns do and
-     * they share the axis.
+     * The other half of a combination chart, a count against a percentage on a
+     * scale of its own, is `secondary`, which is a separate property because it
+     * is a separate question and because the two compose: `with-a-second-axis`
+     * ships naming one series in both. The argument for why a second scale is opt
+     * in, and why setting it labels both axes, is written there.
+     *
+     * A line among columns measures from zero, because the columns do and they
+     * share the axis. So does a line on the second scale, which is that scale's
+     * own rule rather than this one's.
      */
     lines?: string;
     /**
      * Which series are measured against a scale of their own, by name.
      *
-     * Space separated and matched the way `lines` is, against the column headings
-     * the table gives. Opt in: absent, every series shares one domain, which is
-     * what makes a chart comparable and is the right default.
+     * Separated and matched the way `lines` is, against the column headings the
+     * table gives. Opt in: absent, every series shares one domain, which is what
+     * makes a chart comparable and is the right default.
+     *
+     * **The scale, and `lines` is the mark.** The two are separate properties
+     * because they answer separate questions and a series usually wants both:
+     * a percentage beside a count is drawn as a line *and* measured on its own
+     * axis, which is what `with-a-second-axis` writes out. Neither implies the
+     * other, so a series can be a line on the shared scale and a column can have
+     * a scale to itself.
      *
      * **Two scales on one frame let an author put any two shapes in any relation
      * by choosing the ranges, and a reader cannot see it happening.** That is not

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

@@ -4,23 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, seriesIndex, seriesNames, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 const HEIGHT = 100;
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     get scaled() {
-        return new Set((this.secondary ?? '')
-            .split(/\s+/)
-            .map((name) => name.trim().toLowerCase())
-            .filter(Boolean));
+        return new Set(seriesNames(this.secondary));
     }
     get lined() {
-        return new Set((this.lines ?? '')
-            .split(/\s+/)
-            .map((name) => name.trim().toLowerCase())
-            .filter(Boolean));
+        return new Set(seriesNames(this.lines));
     }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
@@ -223,7 +217,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             placement: sideways ? (this.pointer.mirrored ? 'left' : 'right') : 'top',
             x: sideways ? `${far}%` : `${across}%`,
             y: sideways ? `${across}%` : `${far}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

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

@@ -17,7 +17,7 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * dropped. Those rows are skipped and the total is of what is left.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Pie Chart, Ring Chart, Share Chart
  * @documentation https://fusion.dev/helix/components/donut-chart
@@ -84,6 +84,14 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * `getComputedStyle`, which is client-only: a server would draw a different
      * ring than the client. A plot's proportions are markup for the same reason
      * `curve` is.
+     *
+     * **And so it does not reflect**, which is the same argument read forward. No
+     * selector on either tier asks about it and none can want to: everything the
+     * thickness decides is arithmetic done here and published as
+     * `--donut-chart-stroke`, which is a number a rule can do sums with where the
+     * word is not. Reflected, it wrote a value onto every host a script had set
+     * it on for nothing to read. `sweep` beside it is the converse and reflects,
+     * because three rules select on it.
      */
     hole?: 'large' | 'none' | 'small';
     /**

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

@@ -165,11 +165,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
                     : 'top',
             x: `${x}%`,
             y: `${y}%`,
-        });
+        }, () => seriesIndex(at));
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixHeadlessDonutChart.prototype, "hole", void 0);
 __decorate([
     property({ reflect: true })

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

@@ -11,7 +11,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `entries` picks which way to read that table. `series` is one entry per data
  * column, named by the header row, which is a line or a bar chart.
  * `categories` is one entry per body row, which is a donut: its slices are the
- * rows and it has no axis to write their names along.
+ * rows and it has no axis to write their names along. `measures` drops the
+ * first data column, which is a scatter.
  *
  * **The table is resolved on the client and there is no server pass.**
  *
@@ -32,8 +33,21 @@ export declare class HelixHeadlessLegend extends HelixElement {
      *
      * Absent is `series`, one entry per data column. `categories` reads one entry
      * per body row instead, for a donut, whose slices are the rows.
+     *
+     * **`measures` is `series` without the first column, and it is for a
+     * scatter.** That chart reads its first numeric column as the measure
+     * *across*, so its first plotted series is the table's second and everything
+     * a legend beside it named was one color out: the across column wearing the
+     * color of the first series drawn, and each real series wearing the next
+     * one's. The across gets no entry rather than a shifted one, because it is an
+     * axis and a scatter already writes its name at the end of the scale under
+     * the plot.
+     *
+     * A legend cannot ask the chart which of these it is, `for` naming the table
+     * they share and not each other, so the consumer says it. That is the same
+     * shape `categories` already has.
      */
-    entries?: 'categories' | 'series';
+    entries?: 'categories' | 'measures' | 'series';
     /**
      * The id of the table to take the names from.
      *

package/dist/legend/root/legend-root.js

@@ -20,9 +20,10 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     }
     names() {
         const series = this.source.series;
-        return this.entries === 'categories'
-            ? (series[0]?.points.map((point) => point.label) ?? [])
-            : series.map((one) => one.name);
+        if (this.entries === 'categories') {
+            return series[0]?.points.map((point) => point.label) ?? [];
+        }
+        return (this.entries === 'measures' ? series.slice(1) : series).map((one) => one.name);
     }
     render() {
         return html `<ul part="list" role="list">

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

@@ -36,7 +36,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * A reader who wants the numbers gets the numbers, not a described picture.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
@@ -68,6 +68,9 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --chart-terminus-x - Where a series' last reading sits horizontally, as a percentage. Written by the component.
+ * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
     /**
@@ -141,9 +144,20 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * the question a sparkline's single mark answers too.
      *
      * `none` lets the lines stop on their own, which suits a chart read for its
-     * shape rather than for where it finished. The shapes come from
+     * shape rather than for where it finished. `square` is the same mark with its
+     * corners, for a drawing whose neighbors are square, the columns of a table
+     * beside it for instance. `ring` lets the ground through, for a chart drawn
+     * over something busy. `triangle` points along the axis and reads as "and
+     * onward" rather than as a second claim about the data.
+     *
+     * The shapes come from
      * `helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
-     * the set is identical wherever one appears.
+     * the set is identical wherever one appears. **Which is why every value is
+     * named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
+     * undocumented until the cohort before this one; this family reads the same
+     * four out of the same sheet and had left two of them unwritten, so the
+     * finding arrived twice. A shared vocabulary wants naming at each door into
+     * it, because a reader arrives at one door and not at the set.
      *
      * `ring` is the one that asks something of the drawing. It leaves a hole and a
      * line ends at the reading, which is the hole's center, so the `<svg>` is

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

@@ -170,7 +170,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
             y: `${tops.length > 0 ? Math.min(...tops) : 0}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

package/dist/menu/item/menu-item.d.ts

@@ -21,7 +21,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * upgrades is a hydration mismatch waiting to happen.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *

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

@@ -23,7 +23,7 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * upgrades is a hydration mismatch waiting to happen.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Dropdown, Action menu
  * @documentation https://fusion.dev/helix/components/menu

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

@@ -21,7 +21,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * marker in the right place.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Nav, NavList, Tabs
  * @documentation https://fusion.dev/helix/components/navigation

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

@@ -34,7 +34,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * slot can only offer one place: at one end of one row, in one order.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Pager, Page nav
  * @documentation https://fusion.dev/helix/components/pagination

package/dist/pagination/size/pagination-size.d.ts

@@ -33,7 +33,7 @@ import '../../select/index.js';
  * position should survive it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Page size, Rows per page
  * @documentation https://fusion.dev/helix/components/pagination
  *

package/dist/pagination/summary/pagination-summary.d.ts

@@ -19,7 +19,7 @@ import { type TemplateResult } from 'lit';
  * does not call it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
  */

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

@@ -58,7 +58,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * and the bubble is told the page's direction, both being words.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
  * @documentation https://fusion.dev/helix/components/scatter-chart
@@ -121,6 +121,22 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
     private nearest;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * The palette slot a cell of a row is drawn in, which here is shifted by one.
+     *
+     * **A scatter's first plotted series is the table's *second* numeric
+     * column**, the first having been split off as the measure across. So the
+     * mixin's answer, which is right for a chart whose columns are its series in
+     * order, is one too high on every column here and names a color for the
+     * across, which is drawn in none. Left at that, the bubble painted the across
+     * column in series one, the color the points themselves are drawn in, and
+     * gave the series actually plotted series two.
+     *
+     * The across gets no dot at all rather than a shifted one. It is an axis and
+     * not a series: it has a scale under the plot with its name at the end of it,
+     * which is where a reader is told what it is.
+     */
+    seriesOf(cell: number): number | undefined;
     /** Whether the levels across are ruled. */
     protected get rulesX(): boolean;
     /** Whether the levels up are ruled. */

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

@@ -89,6 +89,10 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         this.removeEventListener('pointermove', this.handleMove);
         this.removeEventListener('pointerleave', this.handleLeave);
     }
+    seriesOf(cell) {
+        const depth = this.plottedColumns.indexOf(cell);
+        return depth < 1 ? undefined : seriesIndex(depth - 1);
+    }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
     }
@@ -97,8 +101,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     get field() {
         const rows = this.sourceRows;
-        const width = Math.max(0, ...rows.map((row) => row.cells.length));
-        const columns = Array.from({ length: width }, (_, column) => column).filter((column) => rows.some((row) => row.cells[column]?.value !== undefined));
+        const columns = this.plottedColumns;
         const [across, ...ups] = columns;
         const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
@@ -193,7 +196,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,
-        });
+        }, (cell) => this.seriesOf(cell));
     }
 };
 __decorate([

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

@@ -17,7 +17,7 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * count.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps

package/dist/steps/step/step.d.ts

@@ -22,12 +22,12 @@ import '../../button/index.js';
  * that are not there.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Stage
  * @documentation https://fusion.dev/helix/components/steps
  *
  * @slot - The step's name.
- * @slot content - What the stage holds, shown while it is the current one.
+ * @slot content - What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.
  * @slot description - A line under the name, for what the stage is for.
  * @slot marker - Replaces the number, or the check a complete step shows.
  *

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

@@ -21,8 +21,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @aliases TabList, Segmented control
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The tabs.
- * @slot panels - The panels.
+ * @slot - The tabs, which are this element's own children.
+ * @slot panels - The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
  *
  * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current tab moves, and cancelable. The only way to refuse one.

package/dist/tabs/root/tabs-root.js

@@ -41,7 +41,8 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     }
     sync() {
         const tabs = this.tabs;
-        const value = this.resolveActive(tabs)?.value ?? '';
+        const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
+        const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
         for (const tab of tabs) {
             tab.selected = tab.value === value;
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.39.0",
-    "@fusion.dev/helix-icons": "0.39.0",
+    "@fusion.dev/helix-core": "0.41.0",
+    "@fusion.dev/helix-icons": "0.41.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.39.0",
-    "@fusion.dev/helix-testing": "0.39.0",
+    "@fusion.dev/helix-cem": "0.41.0",
+    "@fusion.dev/helix-testing": "0.41.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",