@fusion.dev/helix-headless 0.52.1 → 0.53.1

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

@@ -29,9 +29,9 @@ export interface Reading {
  * painting it as the lowest bucket claims a reading that does not exist.
  */
 export declare const toneOf: (reading: Reading, thresholds: readonly number[], tones: readonly string[]) => string | undefined;
-/** A comma or space separated list of numbers, in the order written. */
+/** A consumer's list of numbers, in the order written, with the rest dropped. */
 export declare const numbers: (source: string) => number[];
-/** A comma or space separated list of names, in the order written. */
+/** A consumer's list of names, in the order written. */
 export declare const words: (source: string) => string[];
 /**
  * How many readings fit across a given width, and which ones they are.

package/dist/heatmap/root/buckets.js

@@ -1,3 +1,4 @@
+import { writtenList } from '@fusion.dev/helix-core';
 export const toneOf = (reading, thresholds, tones) => {
     if (reading.tone) {
         return reading.tone;
@@ -13,12 +14,10 @@ export const toneOf = (reading, thresholds, tones) => {
     }
     return chosen;
 };
-export const numbers = (source) => source
-    .split(/[\s,]+/)
-    .filter((one) => one !== '')
+export const numbers = (source) => writtenList(source)
     .map(Number)
     .filter((one) => Number.isFinite(one));
-export const words = (source) => source.split(/[\s,]+/).filter((one) => one !== '');
+export const words = (source) => writtenList(source);
 export const fits = (total, width, minimum, gap, rows = 1) => {
     if (!Number.isFinite(width) || width <= 0 || minimum <= 0) {
         return total;

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

@@ -277,16 +277,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * than the fill, and is false either way. Both verified in a browser.
      */
     private markEmpty;
-    /**
-     * One region, hidden when its slot holds nothing and nothing of ours fills it.
-     *
-     * `hidden` beside the `data-empty` mirror: `data-empty` is the hook the styled
-     * sheet reads, and this tier ships no sheet, so an empty region left in the box
-     * tree would be a gap a headless consumer cannot close without knowing to look
-     * for it. The styled rule stays too, because that sheet sets `display` on these
-     * parts and therefore outranks the UA's `[hidden]` one.
-     */
-    private markRegion;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

package/dist/heatmap/root/heatmap-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 { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, hostAria, MixinChartSource, slotFilled, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, hostAria, MixinChartSource, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -102,13 +102,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         hostAria(this.internals, { label: this.label || 'Heatmap', role: 'img' });
     }
     markEmpty() {
-        this.markRegion('footer', ['start', 'summary', 'end']);
-    }
-    markRegion(part, slots, occupied) {
-        const region = this.renderRoot?.querySelector(`[part="${part}"]`);
-        const empty = !slots.some((name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`))) && !(occupied && this.renderRoot?.querySelector(occupied));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'footer', ['start', 'summary', 'end']);
     }
     updated(changed) {
         super.updated(changed);

package/dist/input/root/input-root.js

@@ -125,7 +125,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
       <slot name="start"></slot>
       <input
         part="control"
-        id="control"
+        id=${this.controlId}
         .value=${this.value}
         type=${this.effectiveType}
         name=${this.name || nothing}

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

@@ -4,12 +4,10 @@ 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, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-const WIDTH = 100;
-const HEIGHT = 100;
 let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
@@ -36,8 +34,8 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return [
                 {
                     index: seriesIndex(depth),
-                    x: (x(one.points.length - 1) / WIDTH) * 100,
-                    y: (y(last.value) / HEIGHT) * 100,
+                    x: (x(one.points.length - 1) / PLOT_WIDTH) * 100,
+                    y: (y(last.value) / PLOT_HEIGHT) * 100,
                 },
             ];
         });
@@ -49,9 +47,9 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
         const domain = this.range(series);
-        const y = linear(domain, [HEIGHT, 0]);
-        const slot = WIDTH / readings.length;
-        const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, WIDTH - slot / 2]);
+        const y = linear(domain, [PLOT_HEIGHT, 0]);
+        const slot = PLOT_WIDTH / readings.length;
+        const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
         return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}`;
     }
     renderPlot(series, x, y, domain) {
@@ -71,13 +69,13 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       <svg part="svg"
         data-mirror
         preserveAspectRatio="none"
-        viewBox="0 0 ${WIDTH} ${HEIGHT}"
+        viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
       >
         ${this.renderGridlines(x, y, domain, series[0]?.points.length ?? 0)}
         ${floor === undefined
             ? nothing
-            : svg `<line part="baseline" x1="0" x2=${WIDTH} y1=${floor} y2=${floor} />`}
+            : svg `<line part="baseline" x1="0" x2=${PLOT_WIDTH} y1=${floor} y2=${floor} />`}
         ${this.renderBand(series[0]?.points.length ?? 0)}
         ${this.renderGuide(x)}
         ${series.map((one, depth) => this.renderSeries(one, depth, x, y))}
@@ -91,10 +89,10 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return nothing;
         }
         const down = this.rulesCategory
-            ? Array.from({ length: count }, (_, index) => svg `<line part="gridline" x1=${x(index)} x2=${x(index)} y1="0" y2=${HEIGHT} />`)
+            ? Array.from({ length: count }, (_, index) => svg `<line part="gridline" x1=${x(index)} x2=${x(index)} y1="0" y2=${PLOT_HEIGHT} />`)
             : [];
         const across = this.rulesValue
-            ? ticks(domain).map((level) => svg `<line part="gridline" x1="0" x2=${WIDTH} y1=${y(level)} y2=${y(level)} />`)
+            ? ticks(domain).map((level) => svg `<line part="gridline" x1="0" x2=${PLOT_WIDTH} y1=${y(level)} y2=${y(level)} />`)
             : [];
         return svg `${down}${across}`;
     }
@@ -103,15 +101,15 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         if (at < 0 || count === 0) {
             return nothing;
         }
-        const slot = WIDTH / count;
-        return svg `<rect height=${HEIGHT} part="band" width=${slot} x=${at * slot} y="0" />`;
+        const slot = PLOT_WIDTH / count;
+        return svg `<rect height=${PLOT_HEIGHT} part="band" width=${slot} x=${at * slot} y="0" />`;
     }
     renderGuide(x) {
         const at = this.pointer.at;
         if (at < 0) {
             return nothing;
         }
-        return svg `<line part="guide" x1=${x(at)} x2=${x(at)} y1="0" y2=${HEIGHT} />`;
+        return svg `<line part="guide" x1=${x(at)} x2=${x(at)} y1="0" y2=${PLOT_HEIGHT} />`;
     }
     renderTermini(ends) {
         if (ends.length === 0) {
@@ -132,7 +130,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const index = seriesIndex(depth);
         const first = points[0];
         const last = points.at(-1);
-        const wash = `${path}L${last[0]},${HEIGHT}L${first[0]},${HEIGHT}Z`;
+        const wash = `${path}L${last[0]},${PLOT_HEIGHT}L${first[0]},${PLOT_HEIGHT}Z`;
         return svg `${this.area
             ? svg `<path
             d=${wash}
@@ -160,7 +158,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
         }
         const domain = this.range(series);
-        const scale = linear(domain, [HEIGHT, 0]);
+        const scale = linear(domain, [PLOT_HEIGHT, 0]);
         const tops = series
             .map((one) => one.points[at]?.value)
             .filter((one) => one !== undefined)

package/dist/listbox/root/listbox-root.js

@@ -305,7 +305,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'listbox' });
         this.internals.ariaMultiSelectable = this.multiple ? 'true' : null;
-        if (this.children !== undefined && !this.hydrating) {
+        if (this.childrenKnown) {
             this.place();
         }
     }

package/dist/menu/item/menu-item.js

@@ -58,10 +58,10 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (this.children === undefined || this.hydrating) {
+        if (!this.childrenKnown) {
             return;
         }
-        const named = (name) => [...this.children].some((child) => child.slot === name);
+        const named = (name) => this.knownChildren.some((child) => child.slot === name);
         this.submenu = named('submenu');
         this.start = named('start');
     }

package/dist/notifications/notification/notification.d.ts

@@ -1,6 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../format-date/index.js';
+declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary One thing that happened, which a reader may not have seen yet.
  *
@@ -66,7 +67,7 @@ import '../../format-date/index.js';
  * @cssstate controls - While it can be dismissed, so the time makes way for the control under a pointer.
  * @cssstate read - While it has been read.
  */
-export declare class HelixHeadlessNotification extends HelixElement {
+export declare class HelixHeadlessNotification extends HelixHeadlessNotification_base {
     /**
      * When it happened, as anything `Date` parses.
      *
@@ -97,14 +98,6 @@ export declare class HelixHeadlessNotification extends HelixElement {
      * State to open with, where nothing declared one.
      */
     defaultRead: boolean;
-    /**
-     * Whether a reader may remove it.
-     */
-    dismissible: boolean;
-    /**
-     * Accessible name for the dismiss control.
-     */
-    dismissLabel: string;
     /**
      * Locale for the timestamp.
      *
@@ -212,3 +205,4 @@ declare global {
         'helix-headless-notification': HelixHeadlessNotification;
     }
 }
+export {};

package/dist/notifications/notification/notification.js

@@ -4,20 +4,18 @@ 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, HelixDismissEvent, HelixElement, HelixReadEvent, hostAria, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../format-date/index.js';
-let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixElement {
+let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.at = '';
         this.defaultRead = false;
-        this.dismissible = false;
-        this.dismissLabel = 'Dismiss';
         this.locale = '';
         this.isNotification = true;
         this.readState = undefined;
@@ -26,7 +24,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixEle
         };
         this.handleDismiss = (event) => {
             event.stopPropagation();
-            if (this.dispatchEvent(new HelixDismissEvent({ label: this.textContent?.trim() ?? '' }))) {
+            if (this.dismiss()) {
                 this.remove();
             }
         };
@@ -128,12 +126,6 @@ __decorate([
 __decorate([
     property({ attribute: 'default-read', type: Boolean })
 ], HelixHeadlessNotification.prototype, "defaultRead", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessNotification.prototype, "dismissible", void 0);
-__decorate([
-    property({ attribute: 'dismiss-label' })
-], HelixHeadlessNotification.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);

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

@@ -201,16 +201,6 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * which React reports on hydration and does not patch up.
      */
     private markEmpty;
-    /**
-     * One region, hidden when its slot holds nothing and nothing of ours fills it.
-     *
-     * `hidden` beside the `data-empty` mirror: `data-empty` is the hook the styled
-     * sheet reads, and this tier ships no sheet, so an empty region left in the box
-     * tree would be a gap a headless consumer cannot close without knowing to look
-     * for it. The styled rule stays too, because that sheet sets `display` on these
-     * parts and therefore outranks the UA's `[hidden]` one.
-     */
-    private markRegion;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     private readonly handleMarkAll;

package/dist/notifications/root/notifications-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, HelixElement, HelixReadEvent, hostAria, MixinCollection, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinCollection(HelixElement) {
@@ -107,14 +107,8 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));
     }
     markEmpty() {
-        this.markRegion('header', ['header'], '[part="mark-all"]');
-        this.markRegion('footer', ['footer']);
-    }
-    markRegion(part, slots, occupied) {
-        const region = this.renderRoot?.querySelector(`[part="${part}"]`);
-        const empty = !slots.some((name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`))) && !(occupied && this.renderRoot?.querySelector(occupied));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'header', ['header'], { occupied: '[part="mark-all"]' });
+        markRegion(this.renderRoot, 'footer', ['footer']);
     }
     updated(changed) {
         super.updated(changed);

package/dist/number-input/root/number-input-root.js

@@ -177,7 +177,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return html `<label
       part="label"
-      for="control"
+      for=${this.controlId}
       ?data-hidden=${hidden !== null}
       @pointercancel=${this.handleScrubEnd}
       @pointerdown=${this.handleScrubDown}
@@ -254,7 +254,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         ${''}
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           .value=${this.value}
           type="text"
           role="spinbutton"

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One choice in a radio group.
  *
@@ -41,11 +42,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is the one chosen.
  */
-export declare class HelixHeadlessRadio extends HelixElement {
-    /**
-     * Whether this choice can be made.
-     */
-    disabled: boolean;
+export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
     /**
      * Whether the markup declared this one chosen, which is what a reset returns to.
      *
@@ -93,35 +90,15 @@ export declare class HelixHeadlessRadio extends HelixElement {
      */
     focusable: boolean;
     /**
-     * Whether this is the current choice.
-     *
-     * Written by the group.
-     */
-    selected: boolean;
-    /**
-     * Identifies this choice to the group, and is what the form submits.
-     */
-    value: string;
-    /** Moves focus to this choice, for the group's arrow keys. */
-    focusItem(): void;
-    /** Makes this choice and announces it. */
-    select(): void;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state rather than the `selected` attribute.** The parent writes
-     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
-     * answering for its set. Reflected, that puts 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.
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * choice's.
      *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-radio selected>` in a consumer's
-     * markup means. There is no write back.
+     * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
+     * false, which is what keeps the hydrating render the server's. Nothing else
+     * would ask: the group writes an already-false `focusable` onto every choice
+     * but one, which changes nothing and so re-renders nothing.
      */
-    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {
@@ -129,3 +106,4 @@ declare global {
         'helix-headless-radio': HelixHeadlessRadio;
     }
 }
+export {};

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

@@ -4,16 +4,13 @@ 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, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-let HelixHeadlessRadio = class HelixHeadlessRadio extends HelixElement {
+let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         this.focusable = false;
-        this.selected = false;
-        this.value = '';
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -21,18 +18,9 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends HelixElement {
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
-    focusItem() {
-        this.partNamed('item')?.focus();
-    }
-    select() {
-        if (this.disabled) {
-            return;
-        }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.toggleState('selected', this.selected);
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
         return html `<button
@@ -41,7 +29,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends HelixElement {
       role="radio"
       aria-checked=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || this.focusable ? '0' : '-1'}
+      tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <span part="box"><span part="mark" aria-hidden="true"></span></span>
@@ -50,18 +38,9 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends HelixElement {
     </button>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessRadio.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessRadio.prototype, "focusable", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessRadio.prototype, "selected", void 0);
-__decorate([
-    property()
-], HelixHeadlessRadio.prototype, "value", void 0);
 HelixHeadlessRadio = __decorate([
     customElement('helix-headless-radio')
 ], HelixHeadlessRadio);

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

@@ -4,12 +4,10 @@ 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, formatNumbers, HelixElement, linear, MixinChartSource, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-const WIDTH = 100;
-const HEIGHT = 100;
 const REACH = 24;
 const coefficient = new Intl.NumberFormat(undefined, {
     maximumFractionDigits: 2,
@@ -62,7 +60,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             let found;
             let best = REACH ** 2;
             for (const point of this.drawn) {
-                const distance = ((point.x / WIDTH) * box.width - across) ** 2 + ((point.y / HEIGHT) * box.height - up) ** 2;
+                const distance = ((point.x / PLOT_WIDTH) * box.width - across) ** 2 +
+                    ((point.y / PLOT_HEIGHT) * box.height - up) ** 2;
                 if (distance <= best) {
                     best = distance;
                     found = point;
@@ -112,8 +111,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const all = pairs.flat();
         const x = nice(extent(all.length > 0 ? all.map(([one]) => one) : [0]));
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
-        const along = linear(x, [0, WIDTH]);
-        const up = linear(y, [HEIGHT, 0]);
+        const along = linear(x, [0, PLOT_WIDTH]);
+        const up = linear(y, [PLOT_HEIGHT, 0]);
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
             points: pairs.flatMap((series, depth) => series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))),
@@ -132,8 +131,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
       </div>`;
         }
         const format = formatNumbers('');
-        const along = linear(field.x, [0, WIDTH]);
-        const up = linear(field.y, [HEIGHT, 0]);
+        const along = linear(field.x, [0, PLOT_WIDTH]);
+        const up = linear(field.y, [PLOT_HEIGHT, 0]);
         return html `<div dir="ltr" part="plane">
         ${this.renderPlot(field, along, up)}
         <div aria-hidden="true" part="x-axis">
@@ -152,14 +151,14 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         return html `<div aria-hidden="true" id=${CHART_PLOT} part="plot">
       <svg part="svg"
         preserveAspectRatio="none"
-        viewBox="0 0 ${WIDTH} ${HEIGHT}"
+        viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
       >
         ${this.rulesX
-            ? ticks(field.x).map((level) => svg `<line part="gridline" x1=${along(level)} x2=${along(level)} y1="0" y2=${HEIGHT} />`)
+            ? ticks(field.x).map((level) => svg `<line part="gridline" x1=${along(level)} x2=${along(level)} y1="0" y2=${PLOT_HEIGHT} />`)
             : nothing}
         ${this.rulesY
-            ? ticks(field.y).map((level) => svg `<line part="gridline" x1="0" x2=${WIDTH} y1=${up(level)} y2=${up(level)} />`)
+            ? ticks(field.y).map((level) => svg `<line part="gridline" x1="0" x2=${PLOT_WIDTH} y1=${up(level)} y2=${up(level)} />`)
             : nothing}
       </svg>
       ${field.points.map((point) => {

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

@@ -134,6 +134,30 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * `slotchange`, which a declarative shadow root fires before anything listens,
      * so a hydrated select kept "Choose" for good. Nothing on a server or while
      * hydrating what one sent, which drew the placeholder too.
+     *
+     * **And the placeholder is a statement, so a render that cannot read the
+     * words does not make it.** "Choose" means nothing is chosen. `value` is an
+     * attribute and a server has it, the words are the children's and a server
+     * has none, so a `<helix-select default-value="two">` served "Choose" over an
+     * answer the consumer had already given: false to a reader, and false to a
+     * crawler, on every select in the library's own examples. Where a value is
+     * declared and the word for it cannot be read, the trigger says nothing and
+     * keeps its box, which is the answer this library reaches for everywhere it
+     * cannot tell empty from unknown. `firstUpdated` asks for the render that
+     * fills it in.
+     *
+     * The placeholder still stands where there is genuinely no value, which is
+     * what it is for and the one case a server can be sure of.
+     *
+     * **`nothing` and never `''`, which is the difference between a word that
+     * arrives and one that never does.** Lit's hydration primes a child part with
+     * whatever the render computed, and `''` is a primitive, so `_commitText`
+     * takes the branch that assumes the server left a text node to overwrite.
+     * There is none, the write lands on the closing part marker's comment data,
+     * and the trigger stays empty for the life of the page: measured by
+     * `check:spec:dsd`, which caught all nine of these and showed a blank select
+     * beside a client's "Option Two". `nothing` primes the sentinel instead, so
+     * the commit creates the text node it needs.
      */
     private get display();
     /** Closes the list and puts focus back where it came from. */

package/dist/select/root/select-root.js

@@ -74,7 +74,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         const words = optionsAmong(this.knownChildren)
             .filter((option) => chosen.has(option.value))
             .map((option) => option.text);
-        return words.length > 0 ? words.join(', ') : this.placeholder;
+        if (words.length > 0) {
+            return words.join(', ');
+        }
+        return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
     }
     close() {
         if (!this.open) {
@@ -142,7 +145,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return html `${this.renderLabel()}
       <button
         part="trigger"
-        id="control"
+        id=${this.controlId}
         type="button"
         aria-haspopup="listbox"
         aria-expanded=${this.open ? 'true' : 'false'}

package/dist/slider/root/slider-root.js

@@ -146,7 +146,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             ? nothing
             : html `<input
               part="control"
-              id="control"
+              id=${this.controlId}
               type="range"
               style="--slider-fraction: ${this.fraction}"
               min=${this.min}