@fusion.dev/helix-headless 0.58.1 → 0.59.0

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

@@ -4,11 +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, HelixResizeEvent, hostAria, MixinChartSource, markRegion, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, hostAria, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { fits, numbers, toneOf, words } from './buckets.js';
+import { fits, toneOf } from './buckets.js';
 let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
@@ -45,8 +45,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         if (this.hydrating) {
             return false;
         }
-        const root = this.getRootNode();
-        return typeof root.getElementById === 'function';
+        return searchableById(this);
     }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);
@@ -124,8 +123,8 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.announced = showing;
     }
     render() {
-        const bounds = numbers(this.thresholds);
-        const palette = words(this.tones);
+        const bounds = writtenNumbers(this.thresholds);
+        const palette = writtenList(this.tones);
         const cells = this.drawn;
         return html `<div
         part="strip"

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

@@ -53,8 +53,8 @@ export declare class HelixHeadlessLegend extends HelixElement {
     /**
      * The id of the table to take the names from.
      *
-     * Resolved through `getRootNode()`, so a legend inside another component's
-     * shadow root names a table in that root rather than in the document.
+     * Names a table in the same tree, so a legend inside another component's
+     * shadow root reads a table in that root rather than one in the document.
      *
      * **In React this arrives as a property and not as an attribute**, the way
      * `Tooltip.for` does, so it does not reflect and nothing styles on it.

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

@@ -84,7 +84,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private observer;
     /** The links, in document order. Empty on the server, which has no tree. */
     private get links();
-    /** What each link points at, paired with the link, skipping anything missing. */
+    /**
+     * What each link points at, paired with the link, skipping anything missing.
+     *
+     * The fragment is decoded first because these are `href`s and not ids. The
+     * lookup is the tree's alone: this intercepts no press, so it has no
+     * navigation to agree with, and a section it cannot see is one it is not
+     * describing.
+     */
     private get sections();
     /**
      * Works out which section is being read, and marks its link.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
@@ -82,10 +82,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             element.getAttribute('href')?.startsWith('#') === true);
     }
     get sections() {
-        const root = this.getRootNode();
         return this.links.flatMap((link) => {
             const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '');
-            const target = id ? root.getElementById?.(id) : null;
+            const target = elementById(this, id);
             return target && target.getClientRects().length > 0 ? [{ link, target }] : [];
         });
     }

package/dist/scatter-chart/root/scatter-chart-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, extent, formatNumbers, HelixElement, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, 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';
@@ -190,7 +190,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
         }
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
-            dir: getComputedStyle(this).direction === 'rtl' ? 'rtl' : 'ltr',
+            dir: isRtl(this) ? 'rtl' : 'ltr',
             fixed: true,
             placement: 'top',
             x: `${point.x}%`,

package/dist/skip-link/root/skip-link-root.d.ts

@@ -60,7 +60,17 @@ export declare class HelixHeadlessSkipLink extends HelixElement {
      * appearing beside it.
      */
     label: string;
-    /** The element `href` names, looked up in the tree this link sits in. */
+    /**
+     * The element `href` names, looked up the way the browser would.
+     *
+     * `orDocument`, which no other caller of `elementById` passes and which that
+     * option is written for: a press handled here has to land where following the
+     * anchor would, and the platform resolves a fragment against the document
+     * whatever tree the anchor is in. A skip link inside an app shell's shadow
+     * root pointing at the page's `#main` is the arrangement that needs it.
+     *
+     * The fragment is decoded first because this is an `href` and not an id.
+     */
     private get target();
     /**
      * Focuses the target, lending it a `tabindex` only if it needs one.

package/dist/skip-link/root/skip-link-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 } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -38,9 +38,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         if (!this.href.startsWith('#') || this.href.length < 2) {
             return null;
         }
-        const id = decodeURIComponent(this.href.slice(1));
-        const root = this.getRootNode();
-        return (root.getElementById?.(id) ?? document.getElementById(id));
+        return elementById(this, decodeURIComponent(this.href.slice(1)), { orDocument: true });
     }
     render() {
         return html `<a part="link" href=${this.href} @click=${this.skip}><slot>${this.label}</slot></a>`;

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

@@ -4,13 +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 { customElement, extent, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, writtenList, } from '@fusion.dev/helix-core';
+import { customElement, extent, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 const STRIP_HEIGHT = 32;
-const readValues = (input) => writtenList(input)
-    .map(Number)
-    .filter((one) => Number.isFinite(one));
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     constructor() {
         super(...arguments);
@@ -28,7 +25,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const series = this.source.series;
         return series.length > 0
             ? (series[0]?.points.map((point) => point.value) ?? [])
-            : readValues(this.values);
+            : writtenNumbers(this.values);
     }
     render() {
         const points = this.points();

package/dist/splitter/root/splitter-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 HelixHeadlessSplitter_1;
-import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, requestChange, } from '@fusion.dev/helix-core';
+import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const STACK_BELOW = 512;
@@ -51,7 +51,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             }
             const along = this.vertical ? event.clientY : event.clientX;
             const raw = ((along - origin.start) / origin.length) * 100;
-            const rtl = !this.vertical && getComputedStyle(this).direction === 'rtl';
+            const rtl = !this.vertical && isRtl(this);
             this.move(rtl ? 100 - raw : raw);
         };
         this.handlePointerUp = (event) => {
@@ -129,7 +129,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             if (!origin) {
                 return;
             }
-            const rtl = getComputedStyle(this).direction === 'rtl';
+            const rtl = isRtl(this);
             const along = (box, at, inline) => {
                 if (box.length === 0) {
                     return undefined;

package/dist/table/column/table-column.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 HelixHeadlessTableColumn_1;
-import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { dotsThreeVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -160,7 +160,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         });
     }
     get forward() {
-        return getComputedStyle(this).direction === 'rtl' ? -1 : 1;
+        return isRtl(this) ? -1 : 1;
     }
     render() {
         const name = this.name;

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

@@ -4,34 +4,12 @@ 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, MixinCollection } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinCollection, splitValues } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { edgeOf } from '../column/table-column.js';
 const tracksOf = (list, wanted) => {
-    const words = [];
-    let depth = 0;
-    let word = '';
-    for (const char of list.trim()) {
-        if (char === '(' || char === '[') {
-            depth += 1;
-        }
-        else if (char === ')' || char === ']') {
-            depth -= 1;
-        }
-        if (depth === 0 && /\s/.test(char)) {
-            if (word) {
-                words.push(word);
-            }
-            word = '';
-        }
-        else {
-            word += char;
-        }
-    }
-    if (word) {
-        words.push(word);
-    }
+    const words = splitValues(list, ' ');
     const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
     const tracks = [];
     let names = '';

package/dist/textarea/root/textarea-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, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -60,7 +60,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         }
         const data = new FormData();
         data.append(this.name, this.value);
-        data.append(this.dirName, getComputedStyle(control).direction === 'rtl' ? 'rtl' : 'ltr');
+        data.append(this.dirName, isRtl(control) ? 'rtl' : 'ltr');
         return data;
     }
     get selectionDirection() {

package/dist/time-input/root/time-input-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, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -13,7 +13,6 @@ import { html } from 'lit/static-html.js';
 import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
-import { isTime, toMinutes, writeTime } from '../../time-picker/root/time-picker-root.js';
 let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))))) {
     constructor() {
         super(...arguments);
@@ -34,7 +33,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                 return;
             }
             const held = this.held;
-            if (event.key === 'Enter' && isTime(this.draft)) {
+            if (event.key === 'Enter' && isTimeValue(this.draft)) {
                 event.preventDefault();
                 if (!held.includes(this.draft)) {
                     this.requestValue([...held, this.draft].sort().join(','));
@@ -61,7 +60,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                 .split(',')
                 .map((one) => one.trim())
                 .filter(Boolean);
-            const whole = held.length > 0 && held.every(isTime);
+            const whole = held.length > 0 && held.every(isTimeValue);
             this.requestValue(whole ? held.join(',') : typed);
             this.restore();
         };
@@ -83,7 +82,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             .filter(Boolean);
     }
     written(at) {
-        return this.timeStyle === 'iso' || !isTime(at) ? at : writeTime(at, this.locale);
+        return this.timeStyle === 'iso' || !isTimeValue(at) ? at : writeTime(at, this.locale);
     }
     get display() {
         if (this.mode === 'multiple') {
@@ -105,21 +104,21 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
     }
     get picked() {
         const held = this.held;
-        return held.length > 0 && held.every(isTime) ? held.join(',') : '';
+        return held.length > 0 && held.every(isTimeValue) ? held.join(',') : '';
     }
     validate() {
         const held = this.held;
-        const floor = toMinutes(this.min) ?? 0;
-        const ceiling = toMinutes(this.max) ?? 1439;
-        if (held.length > 0 && !held.every(isTime)) {
+        const floor = valueAsMinutes(this.min) ?? 0;
+        const ceiling = valueAsMinutes(this.max) ?? 1439;
+        if (held.length > 0 && !held.every(isTimeValue)) {
             return this.mode === undefined
                 ? 'Enter a time as HH:mm.'
                 : 'Enter times as HH:mm, separated by commas.';
         }
-        if (held.some((one) => (toMinutes(one) ?? 0) < floor)) {
+        if (held.some((one) => (valueAsMinutes(one) ?? 0) < floor)) {
             return `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
         }
-        if (held.some((one) => (toMinutes(one) ?? 0) > ceiling)) {
+        if (held.some((one) => (valueAsMinutes(one) ?? 0) > ceiling)) {
             return `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
         }
         if (this.mode === 'range' && held.length > 2) {

package/dist/time-picker/root/time-picker-root.d.ts

@@ -2,33 +2,6 @@ import { HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
-/**
- * Whether a string is a time the rest of this component can reason about.
- *
- * **Narrower than core's `valueAsTime` on purpose, and the difference is
- * seconds.** That one takes them because `<input type="time">` does, at a step
- * below a minute. This library has no such step: `step` here is minutes and is
- * floored at one, so nothing it offers or writes ever carries a second, and
- * `toMinutes` below would drop one silently if this let it through. Widening
- * this to the platform's shape would let a value in that the rest of the family
- * cannot hold.
- */
-export declare const isTime: (value: string) => boolean;
-/** Minutes since midnight, or `null` where it is not a time. */
-export declare const toMinutes: (value: string) => number | null;
-/** Minutes since midnight back to `HH:mm`, which is the value shape throughout. */
-export declare const fromMinutes: (minutes: number) => string;
-/**
- * A time written the way the reader's locale writes one.
- *
- * `Intl` decides between a twelve and a twenty-four hour clock, because that is
- * a property of the locale rather than of this component: `en-US` gets
- * `2:30 PM` and `en-GB` gets `14:30` without either being configured. There is
- * no flag to force one, deliberately. A product that needs to override its
- * reader's own convention has a locale problem rather than a component one, and
- * the value is 24 hour regardless.
- */
-export declare const writeTime: (value: string, locale?: string) => string;
 declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary Picks a time, from a list of them.

package/dist/time-picker/root/time-picker-root.js

@@ -4,35 +4,12 @@ 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 { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, } from '@fusion.dev/helix-core';
+import { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
-export const isTime = (value) => /^([01]\d|2[0-3]):[0-5]\d$/.test(value);
-export const toMinutes = (value) => {
-    if (!isTime(value)) {
-        return null;
-    }
-    const [hours = '0', minutes = '0'] = value.split(':');
-    return Number(hours) * 60 + Number(minutes);
-};
-export const fromMinutes = (minutes) => {
-    const whole = ((Math.round(minutes) % 1440) + 1440) % 1440;
-    return `${String(Math.floor(whole / 60)).padStart(2, '0')}:${String(whole % 60).padStart(2, '0')}`;
-};
-export const writeTime = (value, locale) => {
-    const minutes = toMinutes(value);
-    if (minutes === null) {
-        return value;
-    }
-    const at = new Date(Date.UTC(2000, 0, 1, Math.floor(minutes / 60), minutes % 60));
-    return new Intl.DateTimeFormat(locale || undefined, {
-        timeStyle: 'short',
-        timeZone: 'UTC',
-    }).format(at);
-};
 const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
     true;
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
@@ -92,7 +69,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
                 const half = hour % 12;
                 next = (half + (to === 'PM' ? 12 : 0)) * 60 + minute;
             }
-            const whole = fromMinutes(next);
+            const whole = minutesAsValue(next);
             if (this.barred(whole)) {
                 return;
             }
@@ -102,8 +79,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.listRevealed = false;
     }
     get times() {
-        const from = toMinutes(this.min) ?? 0;
-        const to = toMinutes(this.max) ?? 1439;
+        const from = valueAsMinutes(this.min) ?? 0;
+        const to = valueAsMinutes(this.max) ?? 1439;
         const step = Math.max(1, Math.round(this.step));
         const found = [];
         for (let at = from; at <= to; at += step) {
@@ -121,11 +98,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     wholeHourBarred(shown, half) {
         const whole = half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
         const within = this.times.filter((at) => Math.floor(at / 60) === whole);
-        return within.length > 0 && within.every((at) => this.barred(fromMinutes(at)));
+        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
     }
     halfBarred(half) {
         const within = this.times.filter((at) => (half === 'PM') === at >= 720);
-        return within.length > 0 && within.every((at) => this.barred(fromMinutes(at)));
+        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
     }
     get held() {
         return this.value
@@ -141,7 +118,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return from !== undefined && to !== undefined && at > from && at < to;
     }
     get parts() {
-        const at = toMinutes(this.value) ?? toMinutes(this.min) ?? 0;
+        const at = valueAsMinutes(this.value) ?? valueAsMinutes(this.min) ?? 0;
         const hour = Math.floor(at / 60);
         return { hour, meridiem: hour < 12 ? 'AM' : 'PM', minute: at % 60 };
     }
@@ -262,7 +239,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             : this.hours;
         return html `<div part="columns" data-unset=${this.value === '' ? '' : nothing}>
       ${this.renderColumn('hour', 'Hour', hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
-      ${this.renderColumn('minute', 'Minute', this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(fromMinutes(hour * 60 + Number(one))))}
+      ${this.renderColumn('minute', 'Minute', this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
       ${twelve
             ? this.renderColumn('meridiem', 'Before or after noon', ['AM', 'PM'], (one) => one, meridiem, (one) => this.halfBarred(one))
             : nothing}
@@ -283,7 +260,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       @input=${this.handleListInput}
     >
       ${this.times.map((minutes) => {
-            const at = fromMinutes(minutes);
+            const at = minutesAsValue(minutes);
             const between = this.between(at);
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"

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

@@ -100,8 +100,8 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * the element it names, and points its bubble there. Leave it unset and the
      * default slot is the trigger, which is the older form.
      *
-     * Resolved through `getRootNode()`, so a tooltip inside another component's
-     * shadow root names an element in that root rather than in the document.
+     * Names an element in the same tree, so a tooltip inside another component's
+     * shadow root points at one in that root rather than one in the document.
      *
      * **In React this arrives as a property and not as an attribute**, which is
      * worth knowing before someone reads the DOM and thinks it did not take.
@@ -199,14 +199,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * until a chart did.
      */
     reposition(): void;
-    /**
-     * The element `for` names, or null.
-     *
-     * `getRootNode()` rather than `document`, which is what makes this work inside
-     * another component: an id is unique to a tree, and a tooltip in a shadow root
-     * names an element in that root. Client only, since the server has no tree to
-     * search.
-     */
+    /** The element `for` names, or null. */
     private get named();
     private readonly bubbleLayer;
     /**

package/dist/tooltip/root/tooltip-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 { anchorElement, customElement, HelixElement, hostAria, MixinControllerOpen, PopoverController, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, elementById, HelixElement, hostAria, MixinControllerOpen, PopoverController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
@@ -90,20 +90,10 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         this.bubbleLayer.reposition();
     }
     get named() {
-        if (this.for === '') {
-            return null;
-        }
-        const root = this.getRootNode();
-        return root.getElementById?.(this.for) ?? null;
+        return this.for === '' ? null : elementById(this, this.for);
     }
     get enclosure() {
-        if (this.within === '') {
-            return null;
-        }
-        const root = this.getRootNode();
-        return root instanceof Document || root instanceof ShadowRoot
-            ? root.getElementById(this.within)
-            : null;
+        return this.within === '' ? null : elementById(this, this.within);
     }
     get bubble() {
         return this.partNamed('tooltip');

package/dist/tour/stop/tour-stop.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, HelixTourAskEvent, hostAria, PopoverController, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, HelixTourAskEvent, hostAria, PopoverController, } from '@fusion.dev/helix-core';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
@@ -41,8 +41,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         });
     }
     get target() {
-        const scope = this.getRootNode();
-        return this.for === '' ? null : (scope.getElementById?.(this.for) ?? null);
+        return this.for === '' ? null : elementById(this, this.for);
     }
     willUpdate(changed) {
         super.willUpdate(changed);

package/dist/video/root/video-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 { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -332,9 +332,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.dispatchEvent(back ? new HelixPreviousEvent() : new HelixNextEvent());
     }
     cycleSpeed() {
-        const speeds = writtenList(this.speeds)
-            .map(Number)
-            .filter((one) => one > 0);
+        const speeds = writtenNumbers(this.speeds).filter((one) => one > 0);
         const video = this.video;
         if (!video || speeds.length === 0) {
             return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.58.1",
+  "version": "0.59.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.58.1",
-    "@fusion.dev/helix-icons": "0.58.1",
+    "@fusion.dev/helix-core": "0.59.0",
+    "@fusion.dev/helix-icons": "0.59.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.58.1",
-    "@fusion.dev/helix-testing": "0.58.1",
+    "@fusion.dev/helix-cem": "0.59.0",
+    "@fusion.dev/helix-testing": "0.59.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",