@fusion.dev/helix-core 0.146.0 → 0.147.0

package/dist/index.js

@@ -30,10 +30,10 @@ export { SwipeController, } from './controllers/swipe-controller/swipe-controlle
 export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
-export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
+export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
 export { MixinCollection, } from './mixins/mixin-collection/mixin-collection.js';
 export { MixinControllerActive, } from './mixins/mixin-controller-active/mixin-controller-active.js';
 export { MixinControllerChecked, } from './mixins/mixin-controller-checked/mixin-controller-checked.js';
@@ -42,6 +42,7 @@ export { MixinControllerValue, } from './mixins/mixin-controller-value/mixin-con
 export { MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.js';
 export { MixinField } from './mixins/mixin-field/mixin-field.js';
 export { MixinPickerEditing, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
+export { MixinPickerFeedback, } from './mixins/mixin-picker-feedback/mixin-picker-feedback.js';
 export { MixinPickerField, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinSegmentedField, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
 export { MixinSelectableItem, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
@@ -51,7 +52,8 @@ export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { addDays, addMonths, barredBy, localToday, monthOf, monthOut, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
-export { ariaChord, chordParts, matchesChord, printableChord, } from './utils/chord/chord.js';
+export { ariaChord, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
+export { clamp } from './utils/clamp/clamp.js';
 export { clockLocale, dayPeriod, isTwelveHour, nearestTime, offeredTimes, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
 export { colorName, hueName } from './utils/color-name/color-name.js';
@@ -72,22 +74,28 @@ export { formatNumbers } from './utils/format-numbers/format-numbers.js';
 export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
 export { headingLevel } from './utils/heading-level/heading-level.js';
 export { hostAria } from './utils/host-aria/host-aria.js';
+export { hostWords } from './utils/host-words/host-words.js';
 export { defaultButton, submitImplicitly, submits, submitsOnEnter, } from './utils/implicit-submit/implicit-submit.js';
 export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
 export { inlineStep } from './utils/inline-step/inline-step.js';
 export { isRtl } from './utils/is-rtl/is-rtl.js';
 export { keyClaimed } from './utils/key-claimed/key-claimed.js';
 export { linePath } from './utils/line-path/line-path.js';
+export { endInSight } from './utils/load-more/load-more.js';
+export { localeOf } from './utils/locale-of/locale-of.js';
 export { markRegion } from './utils/mark-region/mark-region.js';
 export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
-export { formatNumber, parseNumber } from './utils/number-format/number-format.js';
+export { nameText } from './utils/name-text/name-text.js';
+export { nearest } from './utils/nearest/nearest.js';
+export { formatNumber, parseNumber, readingText } from './utils/number-format/number-format.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
+export { applyOwnRule } from './utils/own-rule/own-rule.js';
 export { plainClick } from './utils/plain-click/plain-click.js';
-export { appleTouch, onApple } from './utils/platform/platform.js';
+export { appleTouch, onAndroid, onApple } from './utils/platform/platform.js';
 export { pressType } from './utils/press-type/press-type.js';
 export { rangeAdd } from './utils/range-add/range-add.js';
 export { readColor, rgbOf } from './utils/read-color/read-color.js';
-export { byRow, readRows, readSeries, seriesKey, unbroken, } from './utils/read-series/read-series.js';
+export { byRow, extremesOf, readRows, readSeries, seriesKey, unbroken, } from './utils/read-series/read-series.js';
 export { linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
 export { relativeTime, } from './utils/relative-time/relative-time.js';
 export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
@@ -102,9 +110,10 @@ export { valueAt } from './utils/row-data/row-data.js';
 export { arranged, cycle, filter, format, ordered, parse, sort, window_, } from './utils/row-order/row-order.js';
 export { extent, linear } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
-export { scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
+export { scrollItemIntoView, scrollingAncestor, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
 export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scroll-lock.js';
 export { slotFilled } from './utils/slot-filled/slot-filled.js';
+export { SlottedGlyph } from './utils/slotted-glyph/slotted-glyph.js';
 export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';
 export { edgeOffset, FLING, parseSnapPoints, settleSwipe, snapTravel, swipeAxis, swipeEdge, swipeStep, towardEdge, } from './utils/swipe/swipe.js';
@@ -112,10 +121,10 @@ export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
 export { subscribe } from './utils/ticker/ticker.js';
 export { TONE_MARKS, toneMark, } from './utils/tone-marks/tone-marks.js';
 export { treeArrow } from './utils/tree-arrow/tree-arrow.js';
-export { Typeahead, typeaheadBy, typesCharacter, } from './utils/typeahead/typeahead.js';
+export { Typeahead, typeaheadBy, typeaheadByWords, typesCharacter, } from './utils/typeahead/typeahead.js';
 export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
 export { watchTheme } from './utils/watch-theme/watch-theme.js';
 export { wordsConverter } from './utils/words-converter/words-converter.js';
 export { writeClock, writeTime } from './utils/write-time/write-time.js';
-export { commaList, pressedValue, prunedValue, toggleEvery, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
+export { anchorAt, commaList, everyState, inRowOrder, pressedValue, prunedValue, toggleEvery, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
 export { VERSION } from './version.js';

package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts

@@ -187,6 +187,13 @@ export declare class MixinChartSourceInterface {
      */
     pointer: ChartPointerController;
 }
+/**
+ * The words a chart says a reading's place in by default, such as "2 of 12":
+ * every chart's `position-label`, and Sparkline's, which is no chart source.
+ * The property keeps the words written out, which is what its reference page
+ * shows as the default; a spec holds the two together.
+ */
+export declare const POSITION_LABEL = "{position} of {count}";
 /**
  * The half of a chart that is about finding its numbers rather than drawing.
  *

package/dist/mixins/mixin-chart-source/mixin-chart-source.js

@@ -14,6 +14,7 @@ export const seriesIndex = (depth) => (depth % PALETTE) + 1;
 export const PLOT_WIDTH = 100;
 export const PLOT_HEIGHT = 100;
 export const seriesNames = (list) => writtenList(list).map(seriesKey);
+export const POSITION_LABEL = '{position} of {count}';
 export const MixinChartSource = (Base) => {
     class ChartSourceElement extends Base {
         constructor() {

package/dist/mixins/mixin-dismissible/mixin-dismissible.js

@@ -14,6 +14,8 @@ export const MixinDismissible = (Base) => {
             super(...arguments);
             this.dismissible = false;
             this.dismissLabel = 'Dismiss';
+            this.handOff = undefined;
+            this.forgetFocus = undefined;
         }
         dismissEvent() {
             const own = [...this.childNodes]
@@ -63,7 +65,8 @@ export const MixinDismissible = (Base) => {
             return [...after, ...before];
         }
         keepFocus(neighbors, beside) {
-            const settle = () => {
+            this.forgetFocus?.();
+            const settle = (late) => {
                 const active = document.activeElement;
                 if (this.isConnected || (active !== null && active !== document.body)) {
                     return;
@@ -77,12 +80,30 @@ export const MixinDismissible = (Base) => {
                         }
                     }
                 }
-                if (beside?.isConnected) {
+                if (late && beside?.isConnected) {
                     beside.focus();
                 }
             };
-            settle();
-            requestAnimationFrame(settle);
+            settle(false);
+            requestAnimationFrame(() => settle(true));
+            if (this.isConnected) {
+                const forget = () => {
+                    this.handOff = undefined;
+                    this.forgetFocus = undefined;
+                    document.removeEventListener('focusin', forget, true);
+                };
+                this.handOff = settle;
+                this.forgetFocus = forget;
+                document.addEventListener('focusin', forget, true);
+            }
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            const settle = this.handOff;
+            if (settle) {
+                this.forgetFocus?.();
+                requestAnimationFrame(() => settle(true));
+            }
         }
     }
     __decorate([

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.d.ts

@@ -0,0 +1,42 @@
+import { nothing, type TemplateResult } from 'lit';
+import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+type Constructor<T> = new (...args: any[]) => T;
+export declare class MixinPickerFeedbackInterface {
+    /**
+     * A message under the picker, such as what is wrong with the answer.
+     *
+     * While set, the picker is invalid and does not submit, as a field's
+     * `feedback` is, it is marked invalid to a reader and to CSS, and the
+     * controls a reader answers with are described by it.
+     */
+    feedback: string;
+    /**
+     * Whether the answer fails validation, marked on the controls a reader
+     * answers with and as `:state(invalid)`.
+     *
+     * A flag a field that wraps the picker sets, since that field owns the
+     * label, the hint and the message; on its own, `feedback` both marks the
+     * picker and says why.
+     */
+    invalid: boolean;
+    /** Whether a reader is told the answer is wrong: `invalid`, or `feedback`. */
+    protected get marked(): boolean;
+    /** The `feedback` line, or nothing while there is none. */
+    protected renderPickerFeedback(): TemplateResult | typeof nothing;
+}
+/**
+ * `feedback` and `invalid` for a picker that stands on its own as a form
+ * control: Color Picker, Date Picker and Time Picker.
+ *
+ * **One mark for both.** `invalid` is the flag a wrapping field sets, and
+ * `feedback` is the message a picker on its own shows; either one marks the
+ * picker invalid on its internals (`aria-invalid` on the host) and as
+ * `:state(invalid)`, and each picker marks the controls it draws by `marked`.
+ * Measured on Color Picker before this: `feedback` set `customError` in its
+ * validity while every control reported `invalid: false`.
+ *
+ * The message is the validity's too, as a field's `feedback` is, through
+ * `HelixFormElement`'s `validityFeedback`, so a form with one does not submit.
+ */
+export declare const MixinPickerFeedback: <T extends Constructor<HelixFormElement>>(Base: T) => Constructor<MixinPickerFeedbackInterface> & T;
+export {};

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { hostAria } from '../../utils/host-aria/host-aria.js';
+export const MixinPickerFeedback = (Base) => {
+    class PickerFeedbackElement extends Base {
+        constructor() {
+            super(...arguments);
+            this.feedback = '';
+            this.invalid = false;
+        }
+        get marked() {
+            return this.invalid || this.feedback !== '';
+        }
+        get validityFeedback() {
+            return this.feedback;
+        }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            this.internals.ariaInvalid = this.marked ? 'true' : null;
+            this.toggleState('invalid', this.marked);
+        }
+        updated(changed) {
+            super.updated(changed);
+            const line = this.partNamed('feedback');
+            hostAria(this.internals, { describedBy: line ? [line] : [] });
+        }
+        renderPickerFeedback() {
+            return this.feedback === ''
+                ? nothing
+                : html `<p part="feedback" id="feedback">${this.feedback}</p>`;
+        }
+    }
+    __decorate([
+        property()
+    ], PickerFeedbackElement.prototype, "feedback", void 0);
+    __decorate([
+        property({ reflect: true, type: Boolean })
+    ], PickerFeedbackElement.prototype, "invalid", void 0);
+    return PickerFeedbackElement;
+};

package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts

@@ -1,8 +1,10 @@
 import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
 import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import { type PickerVerdict } from '../../utils/verdict-flags/verdict-flags.js';
 import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
 import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
 import type { MixinFieldInterface } from '../mixin-field/mixin-field.js';
+export type { PickerVerdict } from '../../utils/verdict-flags/verdict-flags.js';
 type Constructor<T> = new (...args: any[]) => T;
 /**
  * What this is applied over: a form field that opens, holds a value and has a
@@ -99,16 +101,6 @@ export declare class MixinPickerFieldInterface {
      */
     protected validate(): PickerVerdict;
 }
-/**
- * What a picker field finds wrong: a message, reported as `badInput`, or the
- * validity flag to set and its message. Empty means nothing is wrong.
- */
-export type PickerVerdict = string | readonly [flag: keyof ValidityStateFlags, message: string];
-/**
- * A verdict as the flags and the message `setValidity` takes, or `null` where
- * there is nothing wrong.
- */
-export declare const verdictFlags: (verdict: PickerVerdict) => [flags: ValidityStateFlags, message: string] | null;
 /**
  * Grafts a floating picker onto a text field, and the protocol between them.
  *
@@ -166,4 +158,3 @@ export declare const verdictFlags: (verdict: PickerVerdict) => [flags: ValidityS
  * `sync`, which is not a protocol.
  */
 export declare const MixinPickerField: <T extends Constructor<PickerBase>>(Base: T) => Constructor<MixinPickerFieldInterface> & T;
-export {};

package/dist/mixins/mixin-picker-field/mixin-picker-field.js

@@ -9,12 +9,7 @@ import { PopoverController } from '../../controllers/popover-controller/popover-
 import { submitImplicitly } from '../../utils/implicit-submit/implicit-submit.js';
 import { reportValues } from '../../utils/report-values/report-values.js';
 import { tabStops } from '../../utils/tab-stops/tab-stops.js';
-export const verdictFlags = (verdict) => {
-    if (typeof verdict === 'string') {
-        return verdict === '' ? null : [{ badInput: true }, verdict];
-    }
-    return [{ [verdict[0]]: true }, verdict[1]];
-};
+import { verdictFlags } from '../../utils/verdict-flags/verdict-flags.js';
 export const MixinPickerField = (Base) => {
     class PickerFieldElement extends Base {
         constructor() {

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts

@@ -4,7 +4,7 @@ import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segmen
 import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
 import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
 import type { MixinFieldInterface } from '../mixin-field/mixin-field.js';
-import { type MixinPickerFieldInterface } from '../mixin-picker-field/mixin-picker-field.js';
+import type { MixinPickerFieldInterface } from '../mixin-picker-field/mixin-picker-field.js';
 type Constructor<T> = new (...args: any[]) => T;
 /** What this is applied over: a picker field, which `MixinPickerField` makes. */
 type SegmentedBase = HelixFormElement & MixinControllerOpenInterface & MixinControllerValueInterface & MixinFieldInterface & MixinPickerFieldInterface;

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js

@@ -8,7 +8,8 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { isPartial, isTwelveHourLayout, segmentKey, segmentLayout, segmentName, segmentRange, segmentsOf, segmentsValue, segmentText, segmentValueText, shownValue, } from '../../utils/date-segments/date-segments.js';
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
-import { verdictFlags, } from '../mixin-picker-field/mixin-picker-field.js';
+import { appleTouch } from '../../utils/platform/platform.js';
+import { verdictFlags } from '../../utils/verdict-flags/verdict-flags.js';
 export const MixinSegmentedField = (Base) => {
     class SegmentedFieldElement extends Base {
         constructor() {
@@ -18,6 +19,7 @@ export const MixinSegmentedField = (Base) => {
             this.parts = {};
             this.typed = '';
             this.own = false;
+            this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
             this.entered = undefined;
             this.handleSegmentKeydown = (event) => {
                 const element = event.currentTarget;
@@ -213,20 +215,22 @@ export const MixinSegmentedField = (Base) => {
                 const empty = shown === undefined;
                 const id = `${this.controlId}-${kind}`;
                 const editable = !this.isDisabled && !this.readOnly;
+                const spin = !this.touchApple;
                 return html `<span
             part="segment${empty ? ' segment-placeholder' : ''}"
             id=${id}
             data-segment=${kind}
-            role="spinbutton"
+            role=${spin ? 'spinbutton' : 'textbox'}
             tabindex=${this.isDisabled ? '-1' : '0'}
             inputmode=${kind === 'dayPeriod' ? nothing : 'numeric'}
             enterkeyhint=${editable ? 'next' : nothing}
             aria-label=${this.labeled ? `${segmentName(kind, locale)},` : segmentName(kind, locale)}
             aria-labelledby=${this.labeled ? `${id} ${this.labelId}` : nothing}
-            aria-valuemin=${min}
-            aria-valuemax=${max}
-            aria-valuenow=${shown ?? nothing}
-            aria-valuetext=${empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)}
+            aria-invalid=${this.invalidity ?? nothing}
+            aria-valuemin=${spin ? min : nothing}
+            aria-valuemax=${spin ? max : nothing}
+            aria-valuenow=${spin ? (shown ?? nothing) : nothing}
+            aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)) : nothing}
             aria-disabled=${this.isDisabled ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}

package/dist/utils/audit-name/audit-name.d.ts

@@ -1,7 +1,12 @@
 /**
  * Whether an element has an accessible name, by the routes a page names a
- * control: its own `aria-label`, `aria-labelledby` or `title`, a `<label>`, a
- * `placeholder`, and its content where its role is named by its content.
+ * control: its own `aria-label`, `aria-labelledby` or `title`, a `<label>`,
+ * and its content where its role is named by its content.
+ *
+ * **A `placeholder` counts for no route.** A browser names a control by it
+ * where nothing else does, and it is gone from the screen once a person
+ * types, so a field named by it alone loses its label as it is filled.
+ * React Aria's fields warn on the same terms.
  *
  * **An estimate, cheap on purpose.** It answers whether any route holds words,
  * which is what the warning is about, and leaves the order the routes win in

package/dist/utils/audit-name/audit-name.js

@@ -23,7 +23,7 @@ const NAMED_BY_CONTENT = new Set([
     'tab',
 ]);
 export const hasName = (element, shown) => {
-    for (const attribute of ['aria-label', 'title', 'placeholder']) {
+    for (const attribute of ['aria-label', 'title']) {
         if (element.getAttribute(attribute)?.trim()) {
             return true;
         }
@@ -40,9 +40,15 @@ export const hasName = (element, shown) => {
     if ([...(labels ?? [])].some((label) => nameText(label).trim() !== '')) {
         return true;
     }
-    const role = element.getAttribute('role') ?? (element.localName === 'button' ? 'button' : '');
+    const role = element.getAttribute('role') ?? implicitRole(element);
     return NAMED_BY_CONTENT.has(role) && nameText(element, shown).trim() !== '';
 };
+const implicitRole = (element) => {
+    if (element.localName === 'button' || element.localName === 'summary') {
+        return 'button';
+    }
+    return element.localName === 'a' && element.hasAttribute('href') ? 'link' : '';
+};
 const audited = new WeakSet();
 const waiting = new Map();
 const readWaiting = () => {
@@ -69,9 +75,12 @@ export const auditName = (host, control, fix, also, shown) => {
         if (also?.() || hasName(host) || (inner !== null && hasName(inner, value))) {
             return;
         }
+        const placeholder = [host, inner].some((one) => one?.getAttribute('placeholder')?.trim());
         reportRuntime({
             kind: 'missing-name',
-            message: `<${host.localName}> has no accessible name, so a screen reader announces it by its role alone. ${fix}`,
+            message: placeholder
+                ? `<${host.localName}> is named only by its placeholder, which is gone once a person types. ${fix}`
+                : `<${host.localName}> has no accessible name, so a screen reader announces it by its role alone. ${fix}`,
             tag: host.localName,
         });
     });

package/dist/utils/audit-source/audit-source-off.d.ts

@@ -0,0 +1,10 @@
+import type { auditSource as audit } from './audit-source.js';
+/**
+ * The missing-table warning in a production build: nothing.
+ *
+ * `#audit-source` resolves here unless the bundler or runtime asks for the
+ * `development` condition, so a production build carries none of the audit's
+ * code. The signature is the audit's, so a call site reads the same in both
+ * builds. See `audit-source.ts`.
+ */
+export declare const auditSource: typeof audit;

package/dist/utils/audit-source/audit-source-off.js

@@ -0,0 +1 @@
+export const auditSource = () => { };

package/dist/utils/audit-source/audit-source.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Reports a chart, a legend or a sparkline whose `for` names no table once the
+ * page has loaded, the one mistake that leaves it drawing nothing and saying
+ * nothing.
+ *
+ * **Read a task after `load`**, so a table later in the markup, or one a
+ * script writes as the page starts, counts. A table a framework renders later
+ * than that is reported, and the chart still draws it when it arrives.
+ *
+ * **In a development build only**, as `missing-name` is: every chart would pay
+ * for a sentence meant for the person writing the page. Core imports it as
+ * `#audit-source`, which `package.json` resolves here under the `development`
+ * condition and to `audit-source-off.ts`, which does nothing, everywhere else.
+ *
+ * `table` answers what `for` resolves to now: the table, or null.
+ */
+export declare const auditSource: (host: HTMLElement & {
+    for: string;
+}, table: () => Element | null) => void;

package/dist/utils/audit-source/audit-source.js

@@ -0,0 +1,27 @@
+import { reportRuntime } from '../report-runtime/report-runtime.js';
+const audited = new WeakSet();
+export const auditSource = (host, table) => {
+    if (host.for === '' || audited.has(host) || typeof document === 'undefined') {
+        return;
+    }
+    audited.add(host);
+    const read = () => {
+        setTimeout(() => {
+            if (host.isConnected && host.for !== '' && !table()) {
+                reportRuntime({
+                    kind: 'missing-table',
+                    message: `<${host.localName} for="${host.for}"> names no table, so it draws nothing. ` +
+                        'Point `for` at the id of a <table>, an element with role="table" or "grid", or a ' +
+                        'helix-table, in the same tree.',
+                    tag: host.localName,
+                });
+            }
+        }, 0);
+    };
+    if (document.readyState === 'complete') {
+        read();
+    }
+    else {
+        window.addEventListener('load', read, { once: true });
+    }
+};

package/dist/utils/call-listener/call-listener.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What the three diagnostics slots share: a listener on `globalThis` under a
+ * registered symbol, called where there is one, whose failure is printed once.
+ *
+ * `reportRuntime`, `reportUsage` and `reportRender` each wrote this out, with
+ * a flag and a sentence of its own, and every element carries all three. Kept
+ * as one function, the sentence is one template and the flags one set.
+ */
+/**
+ * Calls the function in `slot` with `args`, and answers what it returned.
+ *
+ * **A listener that throws never breaks the caller.** The error is printed
+ * once per `kind`, saying what happened instead (`after`), and the answer is
+ * `undefined`, as it is where nothing listens.
+ */
+export declare const callListener: (slot: symbol, kind: string, after: string, ...args: unknown[]) => unknown;

package/dist/utils/call-listener/call-listener.js

@@ -0,0 +1,17 @@
+const told = new Set();
+export const callListener = (slot, kind, after, ...args) => {
+    const listener = globalThis[slot];
+    if (typeof listener !== 'function') {
+        return undefined;
+    }
+    try {
+        return listener(...args);
+    }
+    catch (error) {
+        if (!told.has(kind)) {
+            told.add(kind);
+            console.error(`helix: a ${kind} listener threw, and ${after}. Later failures are not printed.`, error);
+        }
+        return undefined;
+    }
+};

package/dist/utils/chord/chord.d.ts

@@ -41,3 +41,17 @@ export interface ChordPress {
  * should go to whatever did want it.
  */
 export declare const matchesChord: (press: ChordPress, keys: string, apple: boolean) => boolean;
+/**
+ * Whether a key press is Control+A, or Command+A on an Apple keyboard: the
+ * press that selects every item of a multiple selection.
+ *
+ * List, Tree, Listbox, Data Table and Virtual List each wrote the test. Either
+ * modifier counts on any platform, as they did, and Alt held is another
+ * shortcut.
+ */
+export declare const selectsAll: (press: {
+    readonly altKey: boolean;
+    readonly ctrlKey: boolean;
+    readonly key: string;
+    readonly metaKey: boolean;
+}) => boolean;

package/dist/utils/chord/chord.js

@@ -51,3 +51,4 @@ export const matchesChord = (press, keys, apple) => {
         (ctrl ? press.ctrlKey : !press.ctrlKey) &&
         (meta ? press.metaKey : !press.metaKey));
 };
+export const selectsAll = (press) => (press.ctrlKey || press.metaKey) && !press.altKey && press.key.toLowerCase() === 'a';

package/dist/utils/clamp/clamp.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `value` held between `low` and `high`.
+ *
+ * Written four times before: Lightbox's zoom, Scroll Area's scrollbar, Color
+ * Picker's channels and core's color reading.
+ */
+export declare const clamp: (value: number, low: number, high: number) => number;

package/dist/utils/clamp/clamp.js

@@ -0,0 +1 @@
+export const clamp = (value, low, high) => Math.min(Math.max(value, low), high);

package/dist/utils/css-color/css-color.js

@@ -1,4 +1,4 @@
-const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+import { clamp } from '../clamp/clamp.js';
 const toAlpha = (token) => {
     if (token === undefined) {
         return 100;

package/dist/utils/elapsed-time/elapsed-time.d.ts

@@ -1,4 +1,4 @@
-import type { Relative } from '../relative-time/relative-time.js';
+import { type Relative } from '../relative-time/relative-time.js';
 /**
  * A formatter for one locale, kept.
  *

package/dist/utils/elapsed-time/elapsed-time.js

@@ -1,10 +1,7 @@
+import { UNITS as TIME_UNITS } from '../relative-time/relative-time.js';
 const held = new Map();
 const dated = new Map();
-const UNITS = [
-    { ms: 60_000, unit: 'minute' },
-    { ms: 3_600_000, unit: 'hour' },
-    { ms: 86_400_000, unit: 'day' },
-];
+const UNITS = TIME_UNITS.slice(1, 4);
 const HORIZON = 604_800_000;
 const compact = (locale) => {
     let found = held.get(locale);

package/dist/utils/host-words/host-words.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The words that name a host, for a part inside its shadow root that must
+ * carry the same name: the list a Select or a Time Picker opens.
+ *
+ * **Words rather than a reference**, because the part is inside the host's
+ * shadow root, and neither an IDREF on the page nor the host's labels reach
+ * it. Read in the order a browser names the host: its `aria-labelledby`, its
+ * `aria-label`, then `own`, the name the component draws itself (its `label`),
+ * then a `<label>` for it. Each element's words are read as a name reads
+ * them, so hidden text is left out and runs of white space are one space.
+ *
+ * Empty where nothing names the host, which leaves the fallback to the caller.
+ */
+export declare const hostWords: (host: HTMLElement & {
+    labels?: NodeList | null;
+}, own?: string) => string;

package/dist/utils/host-words/host-words.js

@@ -0,0 +1,13 @@
+import { elementById } from '../element-by-id/element-by-id.js';
+import { nameText } from '../name-text/name-text.js';
+const wordsOf = (named) => named
+    .map((one) => (one ? nameText(one).replace(/\s+/g, ' ').trim() : ''))
+    .filter(Boolean)
+    .join(' ');
+export const hostWords = (host, own = '') => {
+    const ids = (host.getAttribute('aria-labelledby') ?? '').split(/\s+/).filter(Boolean);
+    return (wordsOf(ids.map((id) => elementById(host, id))) ||
+        host.getAttribute('aria-label')?.trim() ||
+        own ||
+        wordsOf([...(host.labels ?? [])]));
+};