@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

package/dist/table/column/table-column.d.ts

@@ -14,20 +14,12 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *
  * @description
- * A column is a heading and a width, declared together, because they are two
- * facts about one thing and keeping them apart is what went wrong before.
- *
- * **This replaces a `columns` string on the table.** That property took a CSS
- * track list, so the headings lived in a row of cells and the widths lived in
- * an attribute, and nothing tied the two together: a table with three headings
- * and a two-track list rendered without complaint. Worse, handing it the
- * headings instead of a track list produced invalid CSS, which the grid
- * silently ignored, so the whole table collapsed into one column and every cell
- * stacked. That happened, in this library's own example, and the failure said
- * nothing at all.
- *
- * Now the column is the source of both. Add one and the table has another
- * track; remove one and it does not.
+ * **The column is the source of both its heading and its track.** Add one and
+ * the table has another track; remove one and it does not. Declaring the widths
+ * separately, as a CSS track list on the table, leaves nothing tying the two
+ * together: a table with three headings and a two-track list renders without
+ * complaint, and a track list that is accidentally the headings is invalid CSS
+ * the grid silently ignores, collapsing the whole table into one column.
  *
  * **It is also where every per-column fact goes**, which is the reason
  * `helix-data-table` needs no column config object. `field` names the key the
@@ -56,34 +48,32 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
     /**
-     * The track this column takes, as CSS.
-     *
-     * A single track value, so anything valid in `grid-template-columns` works:
-     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
-     * left over equally, as `minmax(max-content, 1fr)`.
+     * Which edge the values line up against.
      *
-     * **The floor was `0` and that is what broke a narrow table.** A zero floor
-     * lets a track shrink under its own content, so at 375 the columns were
-     * squeezed to 75px and `eu-central-1` wrapped across lines, which reads as
-     * corrupt data rather than as a table that ran out of room. The zero was
-     * chosen to stop one long value pushing the table past its container, and
-     * that was the right worry with nowhere for the overflow to go.
+     * `end` is what a column of numbers wants, so digits of the same magnitude sit
+     * above each other. Left unset the cell inherits the table's own alignment,
+     * which is `start` for text in either writing direction.
+     */
+    align: 'center' | 'end' | 'start' | '';
+    /**
+     * How to read the cell, where the field alone will not do.
      *
-     * Somewhere now exists: `@fusion.dev/helix` scrolls the table's own box. So a
-     * long value pushes past the container as the old comment feared, and the
-     * table scrolls instead of the value being destroyed. Measured at 375: tracks
-     * of 192, 89 and 102 against a 343 box, so the table scrolls 384 and the page
-     * does not move.
+     * A property and not an attribute, because it is a function. Set it from a Lit
+     * template with `.cell=${...}`, or assign it in script. A column with neither
+     * this nor a `field` renders an empty cell rather than the whole row stringified,
+     * which is the failure mode of guessing.
+     */
+    cell: CellReader | undefined;
+    /**
+     * How to read the value that gets sorted and filtered, where it is not the cell.
      *
-     * **`max-content` and not `min-content`, because a hyphen is a wrap
-     * opportunity.** A `min-content` floor still broke `eu-central-1` at its
-     * hyphens, which is the whole of the reported fault. The cost is that a
-     * column of prose asks for its longest paragraph on one line, so a column
-     * holding sentences rather than values wants `width="minmax(0, 1fr)"` to opt
-     * back into wrapping. A headless consumer owns the overflow either way, that
-     * being paint, and gets the honest track list.
+     * **The one that is easy to leave out and expensive to add later.** A cell
+     * showing `2.4 MB` sorts as a string unless something says the underlying value
+     * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
+     * while every value in it is right. Left unset this is the field, which is the
+     * correct default: the raw value is what an API sorted by.
      */
-    width: string;
+    compare: CellReader | undefined;
     /**
      * The key this column reads out of a row.
      *
@@ -109,38 +99,42 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      */
     sortable: boolean;
     /**
-     * Which edge the values line up against.
+     * The track this column takes, as CSS.
      *
-     * `end` is what a column of numbers wants, so digits of the same magnitude sit
-     * above each other. Left unset the cell inherits the table's own alignment,
-     * which is `start` for text in either writing direction.
-     */
-    align: 'center' | 'end' | 'start' | '';
-    /**
-     * How to read the cell, where the field alone will not do.
+     * A single track value, so anything valid in `grid-template-columns` works:
+     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
+     * left over equally, as `minmax(max-content, 1fr)`.
      *
-     * A property and not an attribute, because it is a function. Set it from a Lit
-     * template with `.cell=${...}`, or assign it in script. A column with neither
-     * this nor a `field` renders an empty cell rather than the whole row stringified,
-     * which is the failure mode of guessing.
-     */
-    cell: CellReader | undefined;
-    /**
-     * How to read the value that gets sorted and filtered, where it is not the cell.
+     * **The floor is `max-content`, never `0` and never `min-content`.** A zero
+     * floor lets a track shrink under its own content: at 375 the columns squeeze
+     * to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
+     * rather than as a table that ran out of room. A `min-content` floor still
+     * breaks it, a hyphen being a wrap opportunity.
      *
-     * **The one that is easy to leave out and expensive to add later.** A cell
-     * showing `2.4 MB` sorts as a string unless something says the underlying value
-     * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
-     * while every value in it is right. Left unset this is the field, which is the
-     * correct default: the raw value is what an API sorted by.
+     * The overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's
+     * own box, so a long value pushes past the container and the table scrolls
+     * instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
+     * 102 against a 343 box, so the table scrolls 384 and the page does not move.
+     *
+     * The cost is that a column of prose asks for its longest paragraph on one
+     * line, so a column holding sentences rather than values wants
+     * `width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
+     * the overflow either way, that being paint, and gets the honest track list.
      */
-    compare: CellReader | undefined;
+    width: string;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
      * protected. Not a consumer's to read or set.
      */
     readonly isTableColumn = true;
+    /**
+     * @internal Which way this column is currently ordered, written by the table
+     * that owns the sort. Not a consumer's to set: the sort lives on the table,
+     * and a column that disagreed with it would announce an order the rows are
+     * not in.
+     */
+    sorted: 'ascending' | 'descending' | undefined;
     /** The track this column contributes, resolved. */
     get track(): string;
     /** Whether a reader can actually reorder by this column. */

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 /**
  * A dot path resolved against a row.
  *
@@ -36,20 +36,12 @@ const at = (row, path) => {
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *
  * @description
- * A column is a heading and a width, declared together, because they are two
- * facts about one thing and keeping them apart is what went wrong before.
- *
- * **This replaces a `columns` string on the table.** That property took a CSS
- * track list, so the headings lived in a row of cells and the widths lived in
- * an attribute, and nothing tied the two together: a table with three headings
- * and a two-track list rendered without complaint. Worse, handing it the
- * headings instead of a track list produced invalid CSS, which the grid
- * silently ignored, so the whole table collapsed into one column and every cell
- * stacked. That happened, in this library's own example, and the failure said
- * nothing at all.
- *
- * Now the column is the source of both. Add one and the table has another
- * track; remove one and it does not.
+ * **The column is the source of both its heading and its track.** Add one and
+ * the table has another track; remove one and it does not. Declaring the widths
+ * separately, as a CSS track list on the table, leaves nothing tying the two
+ * together: a table with three headings and a two-track list renders without
+ * complaint, and a track list that is accidentally the headings is invalid CSS
+ * the grid silently ignores, collapsing the whole table into one column.
  *
  * **It is also where every per-column fact goes**, which is the reason
  * `helix-data-table` needs no column config object. `field` names the key the
@@ -80,34 +72,32 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     constructor() {
         super(...arguments);
         /**
-         * The track this column takes, as CSS.
-         *
-         * A single track value, so anything valid in `grid-template-columns` works:
-         * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
-         * left over equally, as `minmax(max-content, 1fr)`.
+         * Which edge the values line up against.
          *
-         * **The floor was `0` and that is what broke a narrow table.** A zero floor
-         * lets a track shrink under its own content, so at 375 the columns were
-         * squeezed to 75px and `eu-central-1` wrapped across lines, which reads as
-         * corrupt data rather than as a table that ran out of room. The zero was
-         * chosen to stop one long value pushing the table past its container, and
-         * that was the right worry with nowhere for the overflow to go.
+         * `end` is what a column of numbers wants, so digits of the same magnitude sit
+         * above each other. Left unset the cell inherits the table's own alignment,
+         * which is `start` for text in either writing direction.
+         */
+        this.align = '';
+        /**
+         * How to read the cell, where the field alone will not do.
          *
-         * Somewhere now exists: `@fusion.dev/helix` scrolls the table's own box. So a
-         * long value pushes past the container as the old comment feared, and the
-         * table scrolls instead of the value being destroyed. Measured at 375: tracks
-         * of 192, 89 and 102 against a 343 box, so the table scrolls 384 and the page
-         * does not move.
+         * A property and not an attribute, because it is a function. Set it from a Lit
+         * template with `.cell=${...}`, or assign it in script. A column with neither
+         * this nor a `field` renders an empty cell rather than the whole row stringified,
+         * which is the failure mode of guessing.
+         */
+        this.cell = undefined;
+        /**
+         * How to read the value that gets sorted and filtered, where it is not the cell.
          *
-         * **`max-content` and not `min-content`, because a hyphen is a wrap
-         * opportunity.** A `min-content` floor still broke `eu-central-1` at its
-         * hyphens, which is the whole of the reported fault. The cost is that a
-         * column of prose asks for its longest paragraph on one line, so a column
-         * holding sentences rather than values wants `width="minmax(0, 1fr)"` to opt
-         * back into wrapping. A headless consumer owns the overflow either way, that
-         * being paint, and gets the honest track list.
+         * **The one that is easy to leave out and expensive to add later.** A cell
+         * showing `2.4 MB` sorts as a string unless something says the underlying value
+         * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
+         * while every value in it is right. Left unset this is the field, which is the
+         * correct default: the raw value is what an API sorted by.
          */
-        this.width = '';
+        this.compare = undefined;
         /**
          * The key this column reads out of a row.
          *
@@ -133,38 +123,42 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
          */
         this.sortable = false;
         /**
-         * Which edge the values line up against.
+         * The track this column takes, as CSS.
          *
-         * `end` is what a column of numbers wants, so digits of the same magnitude sit
-         * above each other. Left unset the cell inherits the table's own alignment,
-         * which is `start` for text in either writing direction.
-         */
-        this.align = '';
-        /**
-         * How to read the cell, where the field alone will not do.
+         * A single track value, so anything valid in `grid-template-columns` works:
+         * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
+         * left over equally, as `minmax(max-content, 1fr)`.
          *
-         * A property and not an attribute, because it is a function. Set it from a Lit
-         * template with `.cell=${...}`, or assign it in script. A column with neither
-         * this nor a `field` renders an empty cell rather than the whole row stringified,
-         * which is the failure mode of guessing.
-         */
-        this.cell = undefined;
-        /**
-         * How to read the value that gets sorted and filtered, where it is not the cell.
+         * **The floor is `max-content`, never `0` and never `min-content`.** A zero
+         * floor lets a track shrink under its own content: at 375 the columns squeeze
+         * to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
+         * rather than as a table that ran out of room. A `min-content` floor still
+         * breaks it, a hyphen being a wrap opportunity.
          *
-         * **The one that is easy to leave out and expensive to add later.** A cell
-         * showing `2.4 MB` sorts as a string unless something says the underlying value
-         * is a number, so `12 kB` sorts above `2.4 MB` and the column looks broken
-         * while every value in it is right. Left unset this is the field, which is the
-         * correct default: the raw value is what an API sorted by.
+         * The overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's
+         * own box, so a long value pushes past the container and the table scrolls
+         * instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
+         * 102 against a 343 box, so the table scrolls 384 and the page does not move.
+         *
+         * The cost is that a column of prose asks for its longest paragraph on one
+         * line, so a column holding sentences rather than values wants
+         * `width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
+         * the overflow either way, that being paint, and gets the honest track list.
          */
-        this.compare = undefined;
+        this.width = '';
         /**
          * @internal Read by a parent to identify its children across the light DOM,
          * which is cheaper than `instanceof` and is why this is public rather than
          * protected. Not a consumer's to read or set.
          */
         this.isTableColumn = true;
+        /**
+         * @internal Which way this column is currently ordered, written by the table
+         * that owns the sort. Not a consumer's to set: the sort lives on the table,
+         * and a column that disagreed with it would announce an order the rows are
+         * not in.
+         */
+        this.sorted = undefined;
     }
     /** The track this column contributes, resolved. */
     get track() {
@@ -192,7 +186,37 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        /* **`aria-sort` is not decoration.** A `columnheader` a reader can reorder
+           by has to say which way it is ordered and which headers are orderable at
+           all, or the whole affordance exists only for a reader who can see the rows
+           move. `none` on the sortable ones that are not currently the sort is the
+           part that carries the second half: it is what tells a screen reader this
+           column can be sorted, where an absent attribute says nothing.
+    
+           Off the internals rather than the attribute, for the same reason the role
+           is: it is this element's own semantics rather than markup a consumer
+           wrote, and an attribute here is one more thing hydration can disagree
+           about. */
         hostAria(this.internals, { role: 'columnheader' });
+        /* Set here rather than through `hostAria`, which carries the four semantics
+           every family needs and not this one. */
+        this.internals.ariaSort = this.canSort ? (this.sorted ?? 'none') : null;
+        /* And the same fact as a custom state, because ARIA is not a style hook.
+           Whoever draws this column draws the caret, and had nothing to draw it
+           from: no state and no part told the sorted column from the rest, so the
+           only way to it was listening for `helix-sort` and reading the order back a
+           microtask later, which is a lot of machinery for one glyph. */
+        for (const [name, on] of [
+            ['sorted-ascending', this.sorted === 'ascending'],
+            ['sorted-descending', this.sorted === 'descending'],
+        ]) {
+            /* Through `toggleState`, which carries the feature test, the way
+               `pagination-root.ts` does in this same hook. Safari below 17.4 and
+               Firefox below 126 have no `CustomStateSet`, and there
+               `internals.states.delete` is a `TypeError` thrown from `willUpdate`:
+               the column would fail to render rather than render without a caret. */
+            this.toggleState(name, on);
+        }
     }
     render() {
         return html `<span part="column"><slot></slot></span>`;
@@ -200,7 +224,13 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
 };
 __decorate([
     property()
-], HelixHeadlessTableColumn.prototype, "width", void 0);
+], HelixHeadlessTableColumn.prototype, "align", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTableColumn.prototype, "cell", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTableColumn.prototype, "compare", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
@@ -209,13 +239,10 @@ __decorate([
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
 __decorate([
     property()
-], HelixHeadlessTableColumn.prototype, "align", void 0);
-__decorate([
-    property({ attribute: false })
-], HelixHeadlessTableColumn.prototype, "cell", void 0);
+], HelixHeadlessTableColumn.prototype, "width", void 0);
 __decorate([
-    property({ attribute: false })
-], HelixHeadlessTableColumn.prototype, "compare", void 0);
+    state()
+], HelixHeadlessTableColumn.prototype, "sorted", void 0);
 HelixHeadlessTableColumn = __decorate([
     customElement('helix-headless-table-column')
 ], HelixHeadlessTableColumn);

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

@@ -69,12 +69,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
      * Nothing is assigned by name, so the columns can be put in a row.
      *
-     * `role="columnheader"` was landing directly under `role="table"` with no
-     * owning `row`, which is invalid: the table pattern is `table > row >
-     * columnheader`, and a header cell with no row is a cell belonging to
-     * nothing. The columns are ordinary children the consumer writes with no
-     * `slot`, so the only way to put a wrapper around them without changing what
-     * a consumer writes is to assign them here.
+     * The table pattern is `table > row > columnheader`, and a header cell
+     * landing directly under `role="table"` with no owning row is invalid: it is
+     * a cell belonging to nothing. The columns are ordinary children the consumer
+     * writes with no `slot`, so the only way to put a wrapper around them without
+     * changing what a consumer writes is to assign them here.
      *
      * Manual rather than a `slot` attribute this element would set on the
      * consumer's own markup, which is the change a React consumer's hydration

package/dist/table/root/table-root.js

@@ -71,10 +71,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     get tableColumns() {
         /* `?? []` is the server. Lit's element shim carries attributes and not a
            tree, so `children` is undefined there, and this getter is reached from
-           `template`, which is read during `render`: spreading it threw and the
-           whole SSR suite died on an unhandled error. The same fault the menu item
-           had, in code written after it was fixed there, which is the argument for
-           the SSR specs existing at all. */
+           `template`, which is read during `render`: spreading it throws and takes
+           the whole SSR render down with it. */
         return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     /**
@@ -95,12 +93,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     /**
      * Nothing is assigned by name, so the columns can be put in a row.
      *
-     * `role="columnheader"` was landing directly under `role="table"` with no
-     * owning `row`, which is invalid: the table pattern is `table > row >
-     * columnheader`, and a header cell with no row is a cell belonging to
-     * nothing. The columns are ordinary children the consumer writes with no
-     * `slot`, so the only way to put a wrapper around them without changing what
-     * a consumer writes is to assign them here.
+     * The table pattern is `table > row > columnheader`, and a header cell
+     * landing directly under `role="table"` with no owning row is invalid: it is
+     * a cell belonging to nothing. The columns are ordinary children the consumer
+     * writes with no `slot`, so the only way to put a wrapper around them without
+     * changing what a consumer writes is to assign them here.
      *
      * Manual rather than a `slot` attribute this element would set on the
      * consumer's own markup, which is the change a React consumer's hydration

package/dist/tabs/panel/tab-panel.d.ts

@@ -18,14 +18,6 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart panel - The panel container.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
-    /**
-     * Pairs the panel with the tab of the same value.
-     */
-    value: string;
-    /**
-     * Whether this panel is the visible one.
-     */
-    selected: boolean;
     /**
      * The name of the panel, which is the text of the tab that opens it.
      *
@@ -33,29 +25,33 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * because it is coordination between elements rather than anything a consumer
      * writes: the tab already says it.
      *
-     * A string where the markup wanted a reference. `aria-labelledby` named
-     * `tab-${value}`, an id inside the *tab's* own shadow root, and an IDREF
-     * resolves only in the tree it is written in, so the panel had no accessible
-     * name at all. An element reference cannot reach there either, a sibling
-     * shadow tree being neither the same tree nor an ancestor of it. A name is
-     * the one form that crosses, and `aria-label` on a `tabpanel` is how the
-     * pattern names one anyway.
+     * A string and not a reference: an IDREF resolves only in the tree it is
+     * written in, and an element reference cannot reach a sibling shadow tree
+     * either, so `aria-labelledby` to the tab's own id leaves the panel with no
+     * accessible name. `aria-label` on a `tabpanel` is how the pattern names one
+     * anyway.
      */
     label: string;
+    /**
+     * Whether this panel is the visible one.
+     */
+    selected: boolean;
+    /**
+     * Pairs the panel with the tab of the same value.
+     */
+    value: string;
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put the element's own
-     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
-     * which React reconciles and reports as a mismatch, and which a serialized
-     * element pasted back declares as a choice nobody made. `ElementInternals`
-     * holds it instead, where it is not in the DOM at all.
+     * **A custom state, never a reflected `selected` attribute.** The parent
+     * writes this, so reflecting it would put the element's own bookkeeping onto
+     * markup a consumer wrote and their server never sent, which React reports as
+     * a hydration mismatch and which a serialized element pasted back declares as
+     * a choice nobody made. `ElementInternals` holds it instead.
      *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tab-panel selected>` in a consumer's
-     * markup means. What stops is the write back. See 302 and 304.
+     * The attribute still seeds the property, which is what
+     * `<helix-tab-panel selected>` in a consumer's markup means. Only the write
+     * back is gone.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/tabs/panel/tab-panel.js

@@ -27,14 +27,6 @@ import { property } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Pairs the panel with the tab of the same value.
-         */
-        this.value = '';
-        /**
-         * Whether this panel is the visible one.
-         */
-        this.selected = false;
         /**
          * The name of the panel, which is the text of the tab that opens it.
          *
@@ -42,30 +34,34 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
          * because it is coordination between elements rather than anything a consumer
          * writes: the tab already says it.
          *
-         * A string where the markup wanted a reference. `aria-labelledby` named
-         * `tab-${value}`, an id inside the *tab's* own shadow root, and an IDREF
-         * resolves only in the tree it is written in, so the panel had no accessible
-         * name at all. An element reference cannot reach there either, a sibling
-         * shadow tree being neither the same tree nor an ancestor of it. A name is
-         * the one form that crosses, and `aria-label` on a `tabpanel` is how the
-         * pattern names one anyway.
+         * A string and not a reference: an IDREF resolves only in the tree it is
+         * written in, and an element reference cannot reach a sibling shadow tree
+         * either, so `aria-labelledby` to the tab's own id leaves the panel with no
+         * accessible name. `aria-label` on a `tabpanel` is how the pattern names one
+         * anyway.
          */
         this.label = '';
+        /**
+         * Whether this panel is the visible one.
+         */
+        this.selected = false;
+        /**
+         * Pairs the panel with the tab of the same value.
+         */
+        this.value = '';
     }
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put the element's own
-     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
-     * which React reconciles and reports as a mismatch, and which a serialized
-     * element pasted back declares as a choice nobody made. `ElementInternals`
-     * holds it instead, where it is not in the DOM at all.
+     * **A custom state, never a reflected `selected` attribute.** The parent
+     * writes this, so reflecting it would put the element's own bookkeeping onto
+     * markup a consumer wrote and their server never sent, which React reports as
+     * a hydration mismatch and which a serialized element pasted back declares as
+     * a choice nobody made. `ElementInternals` holds it instead.
      *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tab-panel selected>` in a consumer's
-     * markup means. What stops is the write back. See 302 and 304.
+     * The attribute still seeds the property, which is what
+     * `<helix-tab-panel selected>` in a consumer's markup means. Only the write
+     * back is gone.
      */
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -84,14 +80,14 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     }
 };
 __decorate([
-    property()
-], HelixHeadlessTabPanel.prototype, "value", void 0);
+    property({ attribute: false })
+], HelixHeadlessTabPanel.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTabPanel.prototype, "selected", void 0);
 __decorate([
-    property({ attribute: false })
-], HelixHeadlessTabPanel.prototype, "label", void 0);
+    property()
+], HelixHeadlessTabPanel.prototype, "value", void 0);
 HelixHeadlessTabPanel = __decorate([
     customElement('helix-headless-tab-panel')
 ], HelixHeadlessTabPanel);