@fusion.dev/helix-headless 0.53.6 → 0.55.0

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

@@ -544,7 +544,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
     }
     renderCell(column, row, picked) {
-        const edge = edgeOf(column.align);
+        const edge = edgeOf(column.textAlign);
         return html `<span
       part="cell${picked ? ' cell-selected' : ''}"
       role="gridcell"

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

@@ -22,10 +22,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Key, Series Key
  * @documentation https://fusion.dev/helix/components/legend
  *
- * @csspart entry - One name and its swatch.
+ * @csspart entry - One name and its swatch. The swatch is drawn on the entry,
+ * which is `::part(entry)::before` from a consumer's sheet: the series is
+ * already on the entry as `--chart-series`, so a box would have carried nothing,
+ * and this tier ships no CSS.
  * @csspart list - The list itself.
  * @csspart name - One series name.
- * @csspart swatch - The color a series is drawn in.
  */
 export declare class HelixHeadlessLegend extends HelixElement {
     /**

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

@@ -33,7 +33,6 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role="listitem"
         >
-          <span aria-hidden="true" part="swatch"></span>
           <span part="name">${name}</span>
         </li>`)}
     </ul>`;

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

@@ -38,7 +38,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  *
- * @cssstate narrow - While the page is under `full-below`, so the panel is a band whether or not one was asked for.
+ * @cssstate narrow - While the page is under `band-below`, so the panel is a band whether or not one was asked for.
  * @cssstate open - While the panel is open, which is when the trigger reads as current.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
@@ -67,7 +67,7 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * become true long after hydration, and a viewport measured before the first
      * paint is the opposite case. See `MixinControllerOpen` on `open`.
      */
-    fullBelow: number;
+    bandBelow: number;
     /**
      * The section's name, which names the default trigger and the panel.
      */
@@ -85,18 +85,25 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * 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. `full` is the other shape navigations use: a band from edge to
+     * 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.
      *
-     * It changes where the panel goes as well as how it looks, 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.
+     * **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?: 'full';
+    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

@@ -12,7 +12,7 @@ let showing;
 let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
-        this.fullBelow = 640;
+        this.bandBelow = 640;
         this.label = '';
         this.openOn = 'hover';
         this.narrow = false;
@@ -84,16 +84,16 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     }
     static { HelixHeadlessMegamenu_1 = this; }
     get banded() {
-        return this.variant === 'full' || this.narrow;
+        return this.variant === 'band' || this.narrow;
     }
     watchWidth() {
         this.query?.removeEventListener('change', this.handleWidth);
         this.query = undefined;
-        if (!(this.fullBelow > 0) || typeof matchMedia !== 'function') {
+        if (!(this.bandBelow > 0) || typeof matchMedia !== 'function') {
             this.narrow = false;
             return;
         }
-        this.query = matchMedia(`(max-width: ${this.fullBelow - 0.02}px)`);
+        this.query = matchMedia(`(max-width: ${this.bandBelow - 0.02}px)`);
         this.query.addEventListener('change', this.handleWidth);
         this.handleWidth(this.query);
     }
@@ -186,7 +186,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     }
     updated(changed) {
         super.updated?.(changed);
-        if (changed.has('fullBelow')) {
+        if (changed.has('bandBelow')) {
             this.watchWidth();
         }
         this.toggleState('narrow', this.narrow);
@@ -222,8 +222,8 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     }
 };
 __decorate([
-    property({ attribute: 'full-below', type: Number })
-], HelixHeadlessMegamenu.prototype, "fullBelow", void 0);
+    property({ attribute: 'band-below', type: Number })
+], HelixHeadlessMegamenu.prototype, "bandBelow", void 0);
 __decorate([
     property()
 ], HelixHeadlessMegamenu.prototype, "label", void 0);

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

@@ -35,10 +35,12 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {HelixSelectEvent} helix-select - Fired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
  *
- * @csspart box - The circle.
+ * @csspart box - The circle. The dot inside it is drawn on the box itself,
+ * which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS,
+ * so a box it renders for one to paint is an empty child costing whatever the
+ * consumer's own layout charges for a child. `ListItem` measured that.
  * @csspart item - The button, which is the whole row.
  * @csspart label - The words beside it.
- * @csspart mark - The dot inside it.
  *
  * @cssstate selected - While it is the one chosen.
  */

package/dist/radio/root/radio-root.js

@@ -32,7 +32,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
-      <span part="box"><span part="mark" aria-hidden="true"></span></span>
+      <span part="box"></span>
       <slot name="icon"></slot>
       <span part="label"><slot></slot></span>
     </button>`;

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

@@ -21,6 +21,13 @@ import '../../button/index.js';
  * with two hidden in CSS: the accessibility tree would otherwise carry marks
  * that are not there.
  *
+ * **The two half lines either side of the mark are a sheet's, on `::before` and
+ * `::after` of the step.** Both are placed entirely from properties the list
+ * hands down, so there was nothing about them for a box to carry, and this tier
+ * ships no CSS: a box it rendered for one to paint would be an empty child
+ * costing whatever the consumer's own layout charges for a child. `ListItem`
+ * measured that.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -38,10 +45,8 @@ import '../../button/index.js';
  * @csspart description - The line under it.
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The inner control.
- * @csspart lead - The half line arriving from the step before.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.
  * @csspart marker - The shape carrying the number or the check.
- * @csspart trail - The half line running on to the next.
  */
 export declare class HelixHeadlessStep extends HelixElement {
     /**

package/dist/steps/step/step.js

@@ -49,9 +49,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     </${this.tag('button')}>`;
     }
     render() {
-        return html `<span part="lead" aria-hidden="true"></span>
-      <span part="trail" aria-hidden="true"></span>
-      <span part="marker" aria-hidden="true">
+        return html `<span part="marker" aria-hidden="true">
         ${this.renderMarker()}
       </span>
       <span part="body">

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

@@ -38,8 +38,11 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @csspart field - The row: the track and its label.
  * @csspart hint - Help under the control, while nothing is wrong.
  * @csspart label - The words beside it.
- * @csspart thumb - The part that moves.
- * @csspart track - The groove the thumb travels in.
+ * @csspart track - The groove. The thumb that travels in it is drawn on the
+ * groove itself, which is `::part(track)::after` from a consumer's sheet: this
+ * tier ships no CSS, so a box it renders for one to paint is an empty child
+ * costing whatever the consumer's own layout charges for a child. `ListItem`
+ * measured that.
  *
  * @cssstate checked - While it is on.
  * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.

package/dist/switch/root/switch-root.js

@@ -54,7 +54,6 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
           @change=${this.handleChange}
           @input=${this.stopInner}
         />
-        <span part="thumb" aria-hidden="true"></span>
       </span>
       <span part="label"><slot>${this.label}</slot></span>
     </label>

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

@@ -23,7 +23,7 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
 /**
  * The edge a column names, where it names one of the three.
  *
- * **`align` is a string anybody can write**, the union on the property being a
+ * **`text-align` is a string anybody can write**, the union on the property being a
  * compile-time claim and nothing else, and both tables put the value straight
  * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
  * cell it draws. One guard, here with the property, rather than one in each
@@ -46,7 +46,7 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  *
  * **It is also where every per-column fact goes**, which is the reason
  * `DataTable` needs no column config object. `field` names the key the cell
- * reads, `sortable` says a reader may reorder by it, `align` says which edge
+ * reads, `sortable` says a reader may reorder by it, `text-align` says which edge
  * the values line up against, and `cell` takes a function for anything the
  * field alone cannot express. The schema is markup and the data is a property:
  * a schema is small, declarative, and something a reader should be able to see
@@ -96,28 +96,6 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  * @cssstate sorted-descending - While the table is sorted by this column, largest first.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
-    /**
-     * Which edge the values line up against.
-     *
-     * `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.
-     * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-     * consumer wrote, so the table writes nothing onto them: it publishes the
-     * edge to each cell under this column as `--table-cell-align`, which
-     * `@fusion.dev/helix` reads. The heading is this element's own, and
-     * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-     * inline end, so in a right-to-left table it is the left.
-     *
-     * **Reflected, because the heading is drawn by a stylesheet and has no other
-     * way to learn it.** Set as a property, which is how React sets it, an
-     * unreflected `align` left no attribute to select on, so the heading stayed at
-     * the start over a column of digits set to the end. It is the author's
-     * declaration and nothing moves it afterwards, so an attribute cannot come to
-     * disagree with the element, which is the reason `open` records a custom
-     * state instead. No default, so an unset column writes nothing onto its host.
-     */
-    align?: 'center' | 'end' | 'start';
     /**
      * How to read the cell, where the field alone will not do.
      *
@@ -177,6 +155,36 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * onto its host.
      */
     sortable: boolean;
+    /**
+     * Which edge the values line up against.
+     *
+     * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+     * box-alignment question, where a thing sits in a container, and they are
+     * named for the properties they mirror; this is `text-align` down a column of
+     * values, and `Dialog` answers the same question under the same name. One
+     * word for both questions is how a consumer who learned it on a layout writes
+     * it here and gets no error, a value a component does not have leaving the
+     * default in place and looking deliberate.
+     *
+     * `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.
+     * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+     * consumer wrote, so the table writes nothing onto them: it publishes the
+     * edge to each cell under this column as `--table-cell-align`, which
+     * `@fusion.dev/helix` reads. The heading is this element's own, and
+     * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+     * inline end, so in a right-to-left table it is the left.
+     *
+     * **Reflected, because the heading is drawn by a stylesheet and has no other
+     * way to learn it.** Set as a property, which is how React sets it, an
+     * unreflected edge left no attribute to select on, so the heading stayed at
+     * the start over a column of digits set to the end. It is the author's
+     * declaration and nothing moves it afterwards, so an attribute cannot come to
+     * disagree with the element, which is the reason `open` records a custom
+     * state instead. No default, so an unset column writes nothing onto its host.
+     */
+    textAlign?: 'center' | 'end' | 'start';
     /**
      * The track this column takes, as CSS.
      *

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

@@ -137,7 +137,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('align') || changed.has('width')) {
+        if (changed.has('textAlign') || changed.has('width')) {
             this.tellHolder();
         }
     }
@@ -192,9 +192,6 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             : nothing}</span>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessTableColumn.prototype, "align", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTableColumn.prototype, "cell", void 0);
@@ -210,6 +207,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
+__decorate([
+    property({ attribute: 'text-align', reflect: true })
+], HelixHeadlessTableColumn.prototype, "textAlign", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "width", void 0);

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

@@ -124,7 +124,7 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     protected get slotted(): Element[];
     private assign;
     /**
-     * The rules handing each column's `align` to the cells under it. One sheet for
+     * The rules handing each column's `text-align` to the cells under it. One sheet for
      * every row this table holds, rewritten in place, so a column changing its
      * edge reaches every row in one write.
      */

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

@@ -120,7 +120,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             return;
         }
         const rules = this.tableColumns.flatMap((column, index) => {
-            const edge = edgeOf(column.align);
+            const edge = edgeOf(column.textAlign);
             return edge ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${edge}; }`] : [];
         });
         const text = ['::slotted(*) { --table-cell-align: initial; }', ...rules].join('\n');

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

@@ -31,11 +31,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * platform can answer, and it answers it at assignment time.
  * @slot time - When it happened, as a reader should see it written.
  *
- * @csspart connector - The line arriving at this entry.
  * @csspart content - What happened, and the time above it.
  * @csspart dot - The mark drawn where nothing was slotted for one.
  * @csspart marker - The mark on the line.
- * @csspart rail - The column holding the mark and the line.
+ * @csspart rail - The column holding the mark and the line. Both halves of the
+ * line are drawn on the rail, which is `::part(rail)::before` and `::after` from
+ * a consumer's sheet: this tier ships no CSS, so a box it renders for one to
+ * paint is an empty child costing whatever the consumer's own layout charges for
+ * a child. `ListItem` measured that.
  * @csspart time - When it happened.
  */
 export declare class HelixHeadlessTimelineItem extends HelixElement {

package/dist/timeline/item/timeline-item.js

@@ -31,10 +31,6 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     render() {
         const when = html `<slot name="time"></slot>`;
         return html `<div part="rail">
-        <div
-          part="connector"
-          aria-hidden="true"
-        ></div>
         ${this.renderMarker()}
       </div>
       ${this.datetime === ''

package/dist/toggle/group/toggle-group.d.ts

@@ -29,13 +29,16 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.
  * @event {Event} input - Announced once the value has moved.
  *
- * @csspart divider - The rule after an inline label, separating it from the items.
  * @csspart feedback - What is wrong with it.
  * @csspart hint - Help under the row, while nothing is wrong.
  * @csspart indicator - The moving marker behind the selected item.
  * @csspart label - The question, over the row.
  * @csspart row - The line the track sits on, with whatever flanks it.
- * @csspart track - The bar the items sit in.
+ * @csspart track - The bar the items sit in. The rule after an inline label,
+ * separating it from the items, is drawn on the bar, which is
+ * `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a
+ * box it renders for one to paint is an empty child costing whatever the
+ * consumer's own layout charges for a child. `ListItem` measured that.
  *
  * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */

package/dist/toggle/group/toggle-group.js

@@ -83,7 +83,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
       <div part="row">
         <slot name="start"></slot>
         <div part="track">
-        ${inside ? html `${label}<div part="divider" aria-hidden="true"></div>` : nothing}
+        ${inside ? label : nothing}
         <div part="indicator" aria-hidden="true"></div>
         <slot
           @slotchange=${() => {

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

@@ -69,7 +69,10 @@ import '../../menu/index.js';
  * @csspart forward - The control that goes on ten seconds.
  * @csspart fullscreen - The whole screen, and back.
  * @csspart loading - What is said while the picture waits for more of itself.
- * @csspart loading-mark - The part of that which spins.
+ * The part of that which spins is drawn on it, which is `::part(loading)::before`
+ * from a consumer's sheet: this tier ships no CSS, so a box it renders for one to
+ * paint is an empty child costing whatever the consumer's own layout charges for
+ * a child. `ListItem` measured that.
  * @csspart more - The button that opens it.
  * @csspart mute - Sound on and off.
  * @csspart next - Asks for the next item, where it was asked for.

package/dist/video/root/video-root.js

@@ -826,7 +826,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
               role="status"
               aria-live="polite"
             >
-              <span part="loading-mark" aria-hidden="true"></span>
               ${this.loadingLabel}
             </div>`
             : nothing}

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.53.6",
+  "version": "0.55.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.53.6",
-    "@fusion.dev/helix-icons": "0.53.6",
+    "@fusion.dev/helix-core": "0.55.0",
+    "@fusion.dev/helix-icons": "0.55.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.53.6",
-    "@fusion.dev/helix-testing": "0.53.6",
+    "@fusion.dev/helix-cem": "0.55.0",
+    "@fusion.dev/helix-testing": "0.55.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",