@fusion.dev/helix-headless 0.58.0 → 0.59.0

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

@@ -21,15 +21,6 @@ const KEYS = new Set([
     'PageUp',
     ' ',
 ]);
-const toUtc = (iso) => {
-    const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    if (!parts) {
-        return null;
-    }
-    const date = new Date(Date.UTC(Number(parts[1]), Number(parts[2]) - 1, Number(parts[3])));
-    return Number.isNaN(date.getTime()) ? null : date;
-};
-const toIso = (date) => date.toISOString().slice(0, 10);
 const localToday = () => {
     const now = new Date();
     const month = `${now.getMonth() + 1}`.padStart(2, '0');
@@ -104,7 +95,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.step = 1;
     }
     get month() {
-        return this.monthState ?? (this.defaultMonth || toIso(this.derivedMonth).slice(0, 7));
+        return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
     }
     set month(next) {
         const previous = this.month;
@@ -137,12 +128,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return this.derivedMonth;
     }
     get derivedMonth() {
-        const from = toUtc(this.selected[0] ?? '') ?? new Date();
+        const from = asDate(this.selected[0] ?? '') ?? new Date();
         return new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), 1));
     }
     get anchor() {
         const shown = this.shown;
-        for (const candidate of [toUtc(this.focused), toUtc(this.selected[0] ?? '')]) {
+        for (const candidate of [asDate(this.focused), asDate(this.selected[0] ?? '')]) {
             if (candidate && sameMonth(candidate, shown)) {
                 return candidate;
             }
@@ -155,7 +146,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
     }
     barred(date) {
-        const iso = toIso(date);
+        const iso = fromDate(date);
         if (this.min !== '' && iso < this.min) {
             return true;
         }
@@ -195,7 +186,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         });
     }
     moveTo(date) {
-        this.focused = toIso(date);
+        this.focused = fromDate(date);
         this.show(date);
         this.updateComplete.then(() => {
             this.renderRoot.querySelector('[part~="cell"][tabindex="0"]')?.focus();
@@ -208,7 +199,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.barred(date)) {
             return;
         }
-        const iso = toIso(date);
+        const iso = fromDate(date);
         const held = this.selected;
         let next;
         if (this.mode === 'range') {
@@ -309,7 +300,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     renderMonth(month, index) {
         const { full, heading, weekday } = this.formats;
         const weeks = this.weeksOf(month);
-        const anchor = toIso(this.anchor);
+        const anchor = fromDate(this.anchor);
         const today = localToday();
         const range = this.range;
         const first = index === 0;
@@ -349,7 +340,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         </div>
         ${weeks.map((week) => html `<div part="week" role="row">
             ${week.map((date) => {
-            const iso = toIso(date);
+            const iso = fromDate(date);
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
             const outside = !sameMonth(date, month);

package/dist/heatmap/index.d.ts

@@ -1,2 +1,2 @@
-export { fits, numbers, type Reading, toneOf, words } from './root/buckets.js';
+export { fits, type Reading, toneOf } from './root/buckets.js';
 export { HelixHeadlessHeatmap } from './root/heatmap-root.js';

package/dist/heatmap/index.js

@@ -1,2 +1,2 @@
-export { fits, numbers, toneOf, words } from './root/buckets.js';
+export { fits, toneOf } from './root/buckets.js';
 export { HelixHeadlessHeatmap } from './root/heatmap-root.js';

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

@@ -29,10 +29,6 @@ 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 consumer's list of numbers, in the order written, with the rest dropped. */
-export declare const numbers: (source: string) => number[];
-/** 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,4 +1,3 @@
-import { writtenList } from '@fusion.dev/helix-core';
 export const toneOf = (reading, thresholds, tones) => {
     if (reading.tone) {
         return reading.tone;
@@ -14,10 +13,6 @@ export const toneOf = (reading, thresholds, tones) => {
     }
     return chosen;
 };
-export const numbers = (source) => writtenList(source)
-    .map(Number)
-    .filter((one) => Number.isFinite(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

@@ -211,9 +211,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * `MixinCollection` names for a slotted collection, arriving through the one
      * channel that mixin cannot see.
      *
-     * The same shape as `childrenKnown`, asked of a document rather than of a
-     * tree. An id that resolves to nothing in a browser is still known, and still
-     * empty: a `for` naming no table should say so rather than sit blank.
+     * The same shape as `childrenKnown`, asked of a tree that can answer about
+     * ids rather than of one that holds children. An id that resolves to nothing
+     * in a browser is still known, and still empty: a `for` naming no table
+     * should say so rather than sit blank, which is why this asks
+     * `searchableById` and not `elementById`.
      */
     private get sourceKnown();
     /**

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,23 +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. */
-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;
     /**