@fusion.dev/helix-headless 0.37.0 → 0.39.0

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

@@ -28,7 +28,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * here is the dependency the tiers exist to prevent.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Contribution graph, Uptime strip, Calendar heatmap, Activity graph
  * @documentation https://fusion.dev/helix/components/heatmap
@@ -40,7 +40,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, carrying that number.
  *
  * @csspart cell - One reading.
- * @csspart empty - Shown when the table has no readings in it.
+ * @csspart empty - Shown when the table has no readings in it, and not before the table can be read at all: on a server, and while hydrating what one sent, there is no document to resolve `for` in and nothing is known yet.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
  * @csspart mark - The invisible point the tooltip is anchored to.
@@ -86,6 +86,9 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
      * Shown when the table has no readings in it.
+     *
+     * Never shown while the table cannot be read at all, which is a server render
+     * and the hydrating one after it: see `sourceKnown`.
      */
     emptyText: string;
     /**
@@ -201,6 +204,23 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * collision that type-checks in one direction and reads wrong in both.
      */
     private get points();
+    /**
+     * Whether this render can tell a table with no readings from one it has not
+     * resolved yet.
+     *
+     * **Unknown is not empty, which is what an empty state must never say.**
+     * `for` names an id and resolving an id wants a document, so a server has
+     * none and a hydrating render must not look either. Without this the server
+     * drew "No readings" over a table holding ninety days of them, a crawler read
+     * that sentence, and the strip flipped to a full one on hydration: the fault
+     * `MixinCollection` names for a slotted collection, arriving through the one
+     * channel that mixin cannot see.
+     *
+     * The same shape as `childrenKnown`, asked of a document rather than of a
+     * tree. An id that resolves to nothing in a browser is still known, and still
+     * empty: a `for` naming no table should say so rather than sit blank.
+     */
+    private get sourceKnown();
     /**
      * `rows` as a usable count, which is not always what the attribute says.
      *

package/dist/heatmap/root/heatmap-root.js

@@ -38,6 +38,16 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     get points() {
         return this.series[0]?.points ?? [];
     }
+    get sourceKnown() {
+        if (this.for === '') {
+            return true;
+        }
+        if (this.hydrating) {
+            return false;
+        }
+        const root = this.getRootNode();
+        return typeof root.getElementById === 'function';
+    }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);
     }
@@ -145,7 +155,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             })}
         ${this.renderTooltip()}
       </div>
-      ${cells.length === 0 ? html `<p part="empty">${this.emptyText}</p>` : nothing}
+      ${cells.length === 0 && this.sourceKnown ? html `<p part="empty">${this.emptyText}</p>` : nothing}
       <div part="footer">
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>

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

@@ -21,7 +21,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * expects to sweep along a row and see each section.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Mega menu, Flyout, Nav panel
  * @documentation https://fusion.dev/helix/components/megamenu
@@ -38,6 +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 open - While the panel is open, which is when the trigger reads as current.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
@@ -55,8 +56,16 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * a band is not a question of paint: a band is not placed against the trigger,
      * so the controller has to be told not to measure, and that decision is here
      * whatever the stylesheet says. Writing the width in both places would be one
-     * number in two languages, drifting the first time either moved. This sets
-     * `data-narrow` on the host and the stylesheet arranges itself off that.
+     * number in two languages, drifting the first time either moved. This records
+     * `:state(narrow)` on the host and the stylesheet arranges itself off that.
+     *
+     * **A custom state and never `data-narrow`, which is what it was.** The width
+     * is read in `connectedCallback`, so on a phone this is true on the very first
+     * update: an attribute written there is markup a consumer's server never sent,
+     * which React reports as a mismatch and answers by rebuilding the subtree. The
+     * narrow exception the server specs describe covers a mirror that can only
+     * become true long after hydration, and a viewport measured before the first
+     * paint is the opposite case. See `MixinControllerOpen` on `open`.
      */
     fullBelow: number;
     /**

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

@@ -189,7 +189,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         if (changed.has('fullBelow')) {
             this.watchWidth();
         }
-        this.toggleAttribute('data-narrow', this.narrow);
+        this.toggleState('narrow', this.narrow);
         this.tellTrigger();
         if (this.open) {
             this.band();

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -54,7 +54,7 @@ interface Row {
  * gives it and a headless consumer has to.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category data
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
@@ -120,6 +120,13 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      *
      * Negative for the reason Code Block's is: a boolean attribute defaulting to
      * true could never be turned off from markup.
+     *
+     * **It does not reflect, where Code Block's does**, and the difference is what
+     * the two sheets need. Code Block reserves the button's width with
+     * `:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+     * who set the property. This button is positioned out of the flow and takes no
+     * room, so nothing selects on it, and reflection exists so that a selector can
+     * reach a value.
      */
     noCopy: boolean;
     /**
@@ -179,6 +186,16 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private readonly handleKeydown;
     private handleRowClick;
     private renderValue;
+    /**
+     * One entry, named for its state where it holds one.
+     *
+     * **`row-active` and no attribute beside it.** Which row the keys are on is
+     * drawn by a sheet and by nothing else: the accessibility tree hears it from
+     * `aria-activedescendant` on the tree, which points at this row's id, so an
+     * attribute would be a second spelling with no reader. The name is the one a
+     * consumer can reach, nothing being able to follow `::part()` with an
+     * attribute selector.
+     */
     private renderRow;
     /** The copy button, behind the seam Code Block's uses, so each tier renders its own. */
     protected renderCopyButton(row: Row | undefined): TemplateResult;

package/dist/object-inspector/root/object-inspector-root.js

@@ -262,7 +262,6 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
       role="treeitem"
       id=${`row-${index}`}
       data-index=${index}
-      ?data-active=${active}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
       aria-setsize=${row.siblings}
@@ -331,7 +330,7 @@ __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "label", void 0);
 __decorate([
-    property({ attribute: 'no-copy', reflect: true, type: Boolean })
+    property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
 __decorate([
     property({ attribute: false })

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

@@ -24,7 +24,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The links, as anchors with fragment hrefs.
  *
- * @event {HelixBeforeActivateEvent} helix-before-activate - The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixActivateEvent} helix-activate - The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take.
  *
  * @csspart indicator - The mark that travels to the section being read.
  * @csspart nav - The navigation landmark.

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

@@ -4,7 +4,7 @@ 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 { customElement, HelixBeforeActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
+import { customElement, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
@@ -116,7 +116,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const next = active?.target.id ?? '';
         if (next !== this.reading) {
             this.reading = next;
-            this.dispatchEvent(new HelixBeforeActivateEvent({ value: next }));
+            this.dispatchEvent(new HelixActivateEvent({ value: next }));
         }
     }
     get atEnd() {

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

@@ -20,6 +20,16 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  * into a table tells a reader the software is broken rather than the row is.
  */
 export declare const at: (row: Readonly<Record<string, unknown>>, path: string) => unknown;
+/**
+ * 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
+ * compile-time claim and nothing else, and both tables put the value straight
+ * into CSS: `helix-table` into a rule in each row's shadow root, `helix-data-table`
+ * into the cell it draws. One guard, here with the property, rather than one in
+ * each table and only one of them written.
+ */
+export declare const edgeOf: (align: string | undefined) => string | undefined;
 /**
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *

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

@@ -26,6 +26,8 @@ export const at = (row, path) => {
     }
     return cursor;
 };
+const EDGES = new Set(['center', 'end', 'start']);
+export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import type { HelixHeadlessTableColumn } from '../column/table-column.js';
+import { type HelixHeadlessTableColumn } from '../column/table-column.js';
 declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
  * @summary Tabular data laid out on a grid.

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, MixinCollection } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-const EDGES = new Set(['center', 'end', 'start']);
+import { edgeOf } from '../column/table-column.js';
 const tracksOf = (list, wanted) => {
     const words = [];
     let depth = 0;
@@ -119,9 +119,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
             return;
         }
-        const rules = this.tableColumns.flatMap((column, index) => column.align && EDGES.has(column.align)
-            ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${column.align}; }`]
-            : []);
+        const rules = this.tableColumns.flatMap((column, index) => {
+            const edge = edgeOf(column.align);
+            return edge ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${edge}; }`] : [];
+        });
         const text = ['::slotted(*) { --table-cell-align: initial; }', ...rules].join('\n');
         this.alignment ??= new CSSStyleSheet();
         if (text !== this.aligned) {

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

@@ -38,7 +38,7 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * been used.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Hint, Popup label
  * @documentation https://fusion.dev/helix/components/tooltip

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