@fusion.dev/helix-headless 0.52.1 → 0.53.0

package/dist/announcement/root/announcement-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, hostAria, MixinDismissible, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, MixinDismissible, markRegion, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -20,10 +20,7 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
         this.markEmpty();
     }
     markEmpty() {
-        const region = this.partNamed('actions');
-        const empty = !slotFilled(this.renderRoot?.querySelector('slot[name="actions"]'));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'actions', ['actions']);
     }
     renderDismissIcon() {
         return html `<slot name="icon">

package/dist/area-chart/root/area-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, formatNumbers, HelixElement, linear, linePath, MixinChartSource, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, formatNumbers, 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;
 const percent = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0, style: 'percent' });
 let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSource(HelixElement) {
     constructor() {
@@ -73,9 +71,9 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         }
         const top = this.share ? 1 : Math.max(0, ...stack.totals);
         const domain = [0, top > 0 ? top : 1];
-        const y = linear(domain, [HEIGHT, 0]);
-        const slot = WIDTH / rows.length;
-        const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, WIDTH - slot / 2]);
+        const y = linear(domain, [PLOT_HEIGHT, 0]);
+        const slot = PLOT_WIDTH / rows.length;
+        const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
         return html `${this.renderPlot(stack, rows.length, x, y, domain)}
       ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}`;
     }
@@ -85,12 +83,12 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart 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"
       >
         ${order.map((depth) => this.renderLayer(stack.layers[depth] ?? [], depth, x, y))}
         ${this.renderGridlines(x, y, domain, count)}
-        <line part="baseline" x1="0" x2=${WIDTH} y1=${HEIGHT} y2=${HEIGHT} />
+        <line part="baseline" x1="0" x2=${PLOT_WIDTH} y1=${PLOT_HEIGHT} y2=${PLOT_HEIGHT} />
         ${this.renderGuide(x)}
       </svg>
       ${this.renderTooltip(stack, y)}
@@ -105,7 +103,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart 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 `<path
         d=${wash}
         data-series=${index}
@@ -124,12 +122,12 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart 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)
                 .filter((level) => level > domain[0])
-                .map((level) => svg `<line part="gridline" x1="0" x2=${WIDTH} y1=${y(level)} y2=${y(level)} />`)
+                .map((level) => svg `<line part="gridline" x1="0" x2=${PLOT_WIDTH} y1=${y(level)} y2=${y(level)} />`)
             : [];
         return svg `${down}${across}`;
     }
@@ -138,7 +136,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         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} />`;
     }
     renderLabels(readings) {
         return html `<div aria-hidden="true" part="labels">

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

@@ -4,11 +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, seriesNames, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-const HEIGHT = 100;
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     get scaled() {
         return new Set(seriesNames(this.secondary));
@@ -41,7 +40,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         };
         const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
         const domain = [Math.min(0, low), Math.max(0, high)];
-        const range = this.direction === 'horizontal' ? [0, HEIGHT] : [HEIGHT, 0];
+        const range = this.direction === 'horizontal' ? [0, PLOT_HEIGHT] : [PLOT_HEIGHT, 0];
         const y = linear(domain, range);
         const floor = y(0);
         const sideways = this.direction === 'horizontal';
@@ -103,7 +102,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       <svg part="svg"
         data-mirror
         preserveAspectRatio="none"
-        viewBox="0 0 100 ${HEIGHT}"
+        viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
       >
         ${svg `<defs>
@@ -208,7 +207,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];
         const sideways = this.direction === 'horizontal';
-        const scale = sideways ? linear(domain, [0, HEIGHT]) : linear(domain, [HEIGHT, 0]);
+        const scale = sideways ? linear(domain, [0, PLOT_HEIGHT]) : linear(domain, [PLOT_HEIGHT, 0]);
         const ends = values.map((one) => scale(one));
         const far = sideways ? Math.max(...ends) : Math.min(...ends);
         const slot = 100 / this.readings;

package/dist/blockquote/root/blockquote-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, slotFilled } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement {
@@ -13,10 +13,7 @@ let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement
         this.cite = '';
     }
     markEmpty() {
-        const footer = this.partNamed('attribution');
-        const empty = !slotFilled(this.renderRoot?.querySelector('slot[name="attribution"]'));
-        footer?.toggleAttribute('data-empty', empty);
-        footer?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'attribution', ['attribution']);
     }
     updated(changed) {
         super.updated(changed);

package/dist/chat/composer/chat-composer.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, HelixSendEvent, hostAria, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -56,10 +56,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
     }
     markEmpty() {
         for (const name of ['start', 'end']) {
-            const region = this.renderRoot?.querySelector(`[part="${name}"]`);
-            const empty = !slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
-            region?.toggleAttribute('data-empty', empty);
-            region?.toggleAttribute('hidden', empty);
+            markRegion(this.renderRoot, name, [name]);
         }
     }
     updated(changed) {

package/dist/chat/message/chat-message.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, HelixSendEvent, hostAria, relativeTime, requestChange, slotFilled, TONE_MARKS, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, relativeTime, requestChange, TONE_MARKS, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -85,16 +85,9 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
     </span>`;
     }
     markEmpty() {
-        for (const name of ['content', 'sources', 'actions']) {
-            const region = this.renderRoot?.querySelector(`[part="${name}"]`);
-            const slot = name === 'content'
-                ? this.renderRoot?.querySelector('slot:not([name])')
-                : this.renderRoot?.querySelector(`slot[name="${name}"]`);
-            const empty = !slotFilled(slot);
-            region?.toggleAttribute('data-empty', empty);
-            if (name !== 'content') {
-                region?.toggleAttribute('hidden', empty);
-            }
+        markRegion(this.renderRoot, 'content', [''], { hide: false });
+        for (const name of ['sources', 'actions']) {
+            markRegion(this.renderRoot, name, [name]);
         }
     }
     updated(changed) {

package/dist/chat/root/chat-root.js

@@ -208,7 +208,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return [...(this.children ?? [])].filter((child) => child.getAttribute('slot') === name);
     }
     countRegions() {
-        if (this.children === undefined || this.hydrating) {
+        if (!this.childrenKnown) {
             return;
         }
         const filled = new Set(REGIONS.filter((name) => this.given(name).length > 0));

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -81,7 +81,7 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
         this.internals.ariaRequired = this.required ? 'true' : null;
-        if (!this.seeded && this.children !== undefined && !this.hydrating) {
+        if (!this.seeded && this.childrenKnown) {
             this.seeded = true;
             if (this.value === '') {
                 this.seed();

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

@@ -118,7 +118,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             ? nothing
             : html `<input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="text"
           .value=${this.value}
           name=${this.name || nothing}

package/dist/combobox/root/combobox-root.js

@@ -295,7 +295,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             : nothing}
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="text"
           role="combobox"
           autocomplete=${this.autocomplete || nothing}

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

@@ -569,16 +569,6 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * assigned nodes are not a slot's DOM children. 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;
     /**
      * Tells each column which way it is ordered, if it is the one.

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, MixinCollection, markRegion, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -262,7 +262,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     get orderedColumns() {
         const columns = this.tableColumns;
-        const wanted = this.dragOrder ?? this.order.split(/[\s,]+/).filter(Boolean);
+        const wanted = this.dragOrder ?? writtenList(this.order);
         if (wanted.length === 0) {
             return columns;
         }
@@ -516,14 +516,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
     }
     markEmpty() {
-        this.markRegion('toolbar', ['toolbar']);
-        this.markRegion('footer', ['footer'], '[part="pagination"]');
-    }
-    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, 'toolbar', ['toolbar']);
+        markRegion(this.renderRoot, 'footer', ['footer'], { occupied: '[part="pagination"]' });
     }
     updated(changed) {
         super.updated(changed);

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

@@ -217,7 +217,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
             : nothing}
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="text"
           .value=${this.display}
           name=${this.name || nothing}

package/dist/divider/root/divider-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, slotFilled } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
@@ -13,10 +13,7 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
         this.announced = false;
     }
     markEmpty() {
-        const region = this.partNamed('content');
-        const empty = !slotFilled(this.renderRoot?.querySelector('slot'));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'content', ['']);
     }
     updated(changed) {
         super.updated(changed);

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

@@ -4,12 +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 { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, seriesIndex, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-const BOX = 100;
-const CENTER = BOX / 2;
+const CENTER = PLOT_WIDTH / 2;
 const EDGE = 40;
 const GAP = 9999;
 const THICKNESS = {
@@ -86,9 +85,9 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     get frame() {
         if (this.sweep !== 'half') {
-            return `0 0 ${BOX} ${BOX}`;
+            return `0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}`;
         }
-        return `0 ${CENTER - EDGE} ${BOX} ${EDGE + this.thickness / 2}`;
+        return `0 ${CENTER - EDGE} ${PLOT_WIDTH} ${EDGE + this.thickness / 2}`;
     }
     renderSegment(share, index) {
         const circumference = 2 * Math.PI * this.radius;
@@ -150,7 +149,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const edge = EDGE;
         const x = CENTER + Math.cos(angle) * edge;
         const top = this.sweep === 'half' ? CENTER - EDGE : 0;
-        const tall = this.sweep === 'half' ? EDGE + this.thickness / 2 : BOX;
+        const tall = this.sweep === 'half' ? EDGE + this.thickness / 2 : PLOT_HEIGHT;
         const y = ((CENTER + Math.sin(angle) * edge - top) / tall) * 100;
         const turned = this.sweep === 'half' && this.pointer.mirrored;
         const across = Math.cos(angle) > 0 !== turned;

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

@@ -111,6 +111,24 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     private readonly readPage;
     /** Moves focus onto the row itself. */
     focusItem(): void;
+    /**
+     * Whether this is the row the set is on, which in a drill-down is where focus
+     * is.
+     *
+     * A radio group's selection is an answer it holds; a page of rows has no
+     * answer, only the row a reader has walked to, so focus is the whole of what
+     * "the current one" can mean here. This is `Menu.Item`'s reading word for
+     * word, and the two are one pattern: a menu that drills and a drill-down are
+     * the same rows through the same controller.
+     *
+     * Asked of the document rather than of the shadow root. `focusItem` puts
+     * focus on the control inside this row and the platform retargets it, so from
+     * outside the shadow tree `activeElement` is this element already and nothing
+     * has to walk a tree. `ShadowRoot.activeElement` is also the reading that does
+     * not survive happy-dom, which climbs `getRootNode()` to the top and then
+     * dereferences what it ran out of.
+     */
+    get selected(): boolean;
     /** Announces that this row was chosen. */
     select(): void;
     protected render(): TemplateResult | typeof nothing;

package/dist/drilldown/item/drilldown-item.js

@@ -37,6 +37,9 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     focusItem() {
         this.partNamed('item')?.focus();
     }
+    get selected() {
+        return this.ownerDocument.activeElement === this;
+    }
     select() {
         if (this.disabled) {
             return;

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
@@ -73,6 +73,25 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     private readonly drilldown;
     /** The rows on the page showing, which is what the keys move over. */
     private get items();
+    /**
+     * Moving between rows, which is `Menu`'s arrangement and not a second one.
+     *
+     * The horizontal pair is reserved rather than released: in a drill-down they
+     * are the platform's own bindings for drilling, along the line to go in and
+     * back along it to come out, so they are spoken for here rather than
+     * unhandled. `handleKeydown` below owes them a binding, which is what
+     * reserving one means, and it has them.
+     *
+     * `selects` false, because arriving at a row must not follow it. Moving and
+     * choosing are one act in a radio group and two here, which is the same
+     * reading `Menu` takes over the same rows.
+     *
+     * The origin is the selection, which for these rows is where focus is. `focus`
+     * is the wrong reading however right it looks: it also carries a rule that a
+     * press which did not come from the set moves nothing, and Down on a page a
+     * reader has just tabbed to is how they get onto the first row at all.
+     */
+    protected readonly keys: KeyboardNavigationController;
     /**
      * Puts the region's one tab stop on the first row of the page showing.
      *

package/dist/drilldown/root/drilldown-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, DrilldownController, HelixElement, hostAria, inlineStep, MixinCollection, } from '@fusion.dev/helix-core';
+import { customElement, DrilldownController, HelixElement, hostAria, inlineStep, KeyboardNavigationController, MixinCollection, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -20,6 +20,11 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             root: () => [...this.children],
             slot: 'page',
         });
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            reserved: () => ['ArrowLeft', 'ArrowRight'],
+            selects: () => false,
+        });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
             if (item && !item.disabled) {
@@ -45,18 +50,6 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         this.handleKeydown = (event) => {
             const items = this.items;
             const current = items.findIndex((item) => item.matches(':focus-within'));
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                event.preventDefault();
-                const step = event.key === 'ArrowDown' ? 1 : -1;
-                const next = (current + step + items.length) % Math.max(items.length, 1);
-                items[current === -1 ? 0 : next]?.focusItem();
-                return;
-            }
-            if (event.key === 'Home' || event.key === 'End') {
-                event.preventDefault();
-                (event.key === 'Home' ? items[0] : items[items.length - 1])?.focusItem();
-                return;
-            }
             const along = inlineStep(this, event.key);
             if (along === -1 || event.key === 'Escape') {
                 if (this.back()) {

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

@@ -179,7 +179,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
       >
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="file"
           accept=${this.accept || nothing}
           capture=${this.capture ?? nothing}
@@ -191,7 +191,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
           @change=${this.handleChange}
           @input=${this.stopInner}
         />
-        <label part="trigger" for="control">
+        <label part="trigger" for=${this.controlId}>
           <slot name="trigger">${this.triggerLabel}</slot>
         </label>
       </div>

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

@@ -334,7 +334,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
       ${this.renderTokenRow(html `<slot name="tags" @slotchange=${this.handleTokens}></slot>`, this.over)}
       <input
         part="control"
-        id="control"
+        id=${this.controlId}
         type="text"
         .value=${this.value}
         name=${this.name || nothing}

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}