@fusion.dev/helix-headless 0.52.1 → 0.53.0

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';
+import { 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.
      *
@@ -92,36 +89,6 @@ export declare class HelixHeadlessRadio extends HelixElement {
      * same reason.
      */
     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.
-     *
-     * 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.
-     */
-    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {
@@ -129,3 +96,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,19 +18,6 @@ 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);
-    }
     render() {
         return html `<button
       part="item"
@@ -50,18 +34,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.js

@@ -142,7 +142,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}

package/dist/sparkline/root/sparkline-root.js

@@ -4,13 +4,11 @@ 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, extent, HelixElement, linear, linePath, SourceController, } from '@fusion.dev/helix-core';
+import { customElement, extent, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, writtenList, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const BOX = { height: 32, width: 100 };
-const readValues = (input) => input
-    .split(/[\s,]+/)
-    .filter((one) => one !== '')
+const STRIP_HEIGHT = 32;
+const readValues = (input) => writtenList(input)
     .map(Number)
     .filter((one) => Number.isFinite(one));
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
@@ -34,17 +32,17 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     }
     render() {
         const points = this.points();
-        const x = linear([0, Math.max(points.length - 1, 1)], [0, BOX.width]);
+        const x = linear([0, Math.max(points.length - 1, 1)], [0, PLOT_WIDTH]);
         const [low, high] = extent(points.length > 0 ? points : [0]);
         const y = this.plot === 'bar'
-            ? linear([Math.min(0, low), Math.max(0, high)], [BOX.height, 0])
-            : linear([low, high], [BOX.height, 0]);
+            ? linear([Math.min(0, low), Math.max(0, high)], [STRIP_HEIGHT, 0])
+            : linear([low, high], [STRIP_HEIGHT, 0]);
         const coordinates = points.map((value, index) => [x(index), y(value)]);
         const path = this.plot === 'bar' ? '' : linePath(coordinates, this.curve ?? 'smooth');
         const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? `${path}L${BOX.width},${BOX.height}L0,${BOX.height}Z`
+            ? `${path}L${PLOT_WIDTH},${STRIP_HEIGHT}L0,${STRIP_HEIGHT}Z`
             : '';
-        const slot = BOX.width / Math.max(points.length, 1);
+        const slot = PLOT_WIDTH / Math.max(points.length, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
             ? points.map((value, index) => ({
@@ -56,7 +54,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             : [];
         const end = points.length < 2
             ? undefined
-            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / BOX.height) * 100}%`;
+            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / STRIP_HEIGHT) * 100}%`;
         return html `<svg
         aria-hidden=${this.label === '' ? 'true' : nothing}
         aria-label=${this.label === '' ? nothing : this.label}
@@ -65,7 +63,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         preserveAspectRatio="none"
         role=${this.label === '' ? nothing : 'img'}
         style=${end ?? nothing}
-        viewBox="0 0 ${BOX.width} ${BOX.height}"
+        viewBox="0 0 ${PLOT_WIDTH} ${STRIP_HEIGHT}"
       >
         ${svg `<defs>
             <linearGradient id="sparkline-wash" x1="0" x2="0" y1="0" y2="1">

package/dist/switch/root/switch-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 { AriaForwardController, customElement, HelixFormElement, MixinControllerChecked, MixinField, slotFilled, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -38,10 +38,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.sync();
     }
     markEmpty() {
-        const region = this.partNamed('label');
-        const empty = !slotFilled(this.renderRoot?.querySelector('[part="label"] slot'));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'label', ['']);
     }
     render() {
         return html `<label part="field">

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
+declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One tab in a tab list.
  *
@@ -24,39 +25,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is the tab selected.
  */
-export declare class HelixHeadlessTab extends HelixElement {
-    /**
-     * Whether the tab can be chosen.
-     */
-    disabled: boolean;
-    /**
-     * Whether this tab is the current one.
-     */
-    selected: boolean;
-    /**
-     * Identifies the tab, and pairs it with the panel of the same value.
-     */
-    value: string;
-    /** Moves focus to this tab, for the list's arrow keys. */
-    focusItem(): void;
-    /** Selects this tab and announces it. */
-    select(): void;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state, not a reflected `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, it 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.
-     *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tab selected>` in a consumer's
-     * markup means. What stops is the write back.
-     */
-    protected willUpdate(changed: PropertyValues): void;
+export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
+    protected itemPart: string;
     protected render(): TemplateResult;
 }
 declare global {
@@ -64,3 +34,4 @@ declare global {
         'helix-headless-tab': HelixHeadlessTab;
     }
 }
+export {};