@fusion.dev/helix-core 0.145.0 → 0.146.0

package/dist/index.js

@@ -1,3 +1,4 @@
+export { auditName } from '#audit-name';
 export { AriaForwardController, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, } from './controllers/arrival-controller/arrival-controller.js';
 export { ChartPointerController, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
@@ -15,12 +16,13 @@ export { FullscreenController } from './controllers/fullscreen-controller/fullsc
 export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
 export { IdleController } from './controllers/idle-controller/idle-controller.js';
 export { IndicatorController, } from './controllers/indicator-controller/indicator-controller.js';
-export { KeyboardNavigationController, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { KeyboardNavigationController, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
 export { MediaSessionController, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
 export { animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
 export { PopoverController, } from './controllers/popover-controller/popover-controller.js';
+export { RelativeClockController, } from './controllers/relative-clock-controller/relative-clock-controller.js';
 export { RemotePlaybackController, } from './controllers/remote-playback-controller/remote-playback-controller.js';
 export { SourceController, } from './controllers/source-controller/source-controller.js';
 export { drawStatus, StatusController, } from './controllers/status-controller/status-controller.js';
@@ -28,7 +30,7 @@ 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, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTypingEvent, } from './events/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 { 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';
@@ -57,6 +59,7 @@ export { countLabel } from './utils/count-label/count-label.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
+export { segmentName } from './utils/date-segments/date-segments.js';
 export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
@@ -67,7 +70,9 @@ export { deepActiveElement, deepContains, focusableElements, } from './utils/foc
 export { afterLinkFollowed, followLink, } from './utils/follow-link/follow-link.js';
 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 { 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';
@@ -77,7 +82,9 @@ 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 { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
+export { plainClick } from './utils/plain-click/plain-click.js';
 export { appleTouch, 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';
@@ -91,6 +98,8 @@ export { requestChange, } from './utils/request-change/request-change.js';
 export { resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
 export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
 export { rovingStop } from './utils/roving-stop/roving-stop.js';
+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';
@@ -102,8 +111,11 @@ export { edgeOffset, FLING, parseSnapPoints, settleSwipe, snapTravel, swipeAxis,
 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 { 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, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
+export { commaList, 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

@@ -136,13 +136,22 @@ export declare class MixinChartSourceInterface {
      * writes them, whatever this says.
      */
     locale: string;
+    /**
+     * Where a reading the keys moved to stands among the readings, said after
+     * it. `{position}` and `{count}` are replaced with the numbers, written in
+     * `locale`.
+     *
+     * Set it to the words of the page's language, such as `{position} von
+     * {count}`, or to nothing to say no position.
+     */
+    positionLabel: string;
     /**
      * The table's columns, one series each. Empty when there is no table.
      */
     get series(): Series[];
     /**
-     * The chart's name: `label` when it is set, and the table's caption
-     * otherwise.
+     * The chart's name: an `aria-label` written on the chart, then `label`,
+     * then the table's caption.
      */
     get named(): string;
     /**
@@ -163,6 +172,12 @@ export declare class MixinChartSourceInterface {
      * reading the same table hid it.
      */
     showsSeries(name: string): boolean;
+    /**
+     * Whether the series read from the cell at this place in a row is drawn,
+     * by its column's heading. The keys and the readout pass over one a legend
+     * hid.
+     */
+    showsColumn(cell: number): boolean;
     /**
      * The number of readings, which the pointer position maps onto.
      */

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

@@ -23,6 +23,17 @@ export const MixinChartSource = (Base) => {
             this.for = '';
             this.label = '';
             this.locale = '';
+            this.positionLabel = '{position} of {count}';
+        }
+        static get observedAttributes() {
+            const inherited = Reflect.get(Base, 'observedAttributes', this);
+            return [...(inherited ?? []), 'aria-label'];
+        }
+        attributeChangedCallback(name, old, value) {
+            super.attributeChangedCallback(name, old, value);
+            if (name === 'aria-label') {
+                this.requestUpdate();
+            }
         }
         willUpdate(changed) {
             super.willUpdate(changed);
@@ -34,7 +45,10 @@ export const MixinChartSource = (Base) => {
             return this.source.series;
         }
         get named() {
-            return this.label || this.source.element?.querySelector('caption')?.textContent?.trim() || '';
+            return (this.getAttribute?.('aria-label') ||
+                this.label ||
+                this.source.element?.querySelector('caption')?.textContent?.trim() ||
+                '');
         }
         get sourceRows() {
             return this.source.rows;
@@ -51,6 +65,10 @@ export const MixinChartSource = (Base) => {
         showsSeries(name) {
             return !this.source.hidden.has(seriesKey(name));
         }
+        showsColumn(cell) {
+            const name = this.sourceRows[0]?.cells[cell]?.name;
+            return name === undefined || this.showsSeries(name);
+        }
         get readings() {
             return this.sourceRows.length;
         }
@@ -64,5 +82,8 @@ export const MixinChartSource = (Base) => {
     __decorate([
         property()
     ], ChartSourceElement.prototype, "locale", void 0);
+    __decorate([
+        property({ attribute: 'position-label' })
+    ], ChartSourceElement.prototype, "positionLabel", void 0);
     return ChartSourceElement;
 };

package/dist/mixins/mixin-controller-active/mixin-controller-active.js

@@ -27,6 +27,7 @@ export const MixinControllerActive = (Base) => {
             if (next === this.active) {
                 return true;
             }
+            const before = this.active;
             const applied = requestChange({
                 apply: (value) => {
                     const previous = this.active;
@@ -38,12 +39,12 @@ export const MixinControllerActive = (Base) => {
                 next,
             });
             if (applied) {
-                this.announceActivated(next);
+                this.announceActivated(next, before);
             }
             return applied;
         }
-        announceActivated(value) {
-            this.dispatchEvent(new HelixActivateEvent({ value }));
+        announceActivated(value, previous) {
+            this.dispatchEvent(new HelixActivateEvent({ previous, value }));
         }
         resolveActive(items) {
             return resolveActiveItem(this.active, items);

package/dist/mixins/mixin-controller-checked/mixin-controller-checked.d.ts

@@ -17,7 +17,9 @@ export declare class MixinControllerCheckedInterface {
      */
     checked: boolean;
     /**
-     * Whether the control starts checked. A form reset returns it to this state.
+     * Whether the control starts checked. A form reset returns it to this state,
+     * and to the `checked` attribute where this one is not written, as a native
+     * checkbox resets to the `checked` it declares.
      */
     defaultChecked: boolean;
     /**
@@ -40,7 +42,8 @@ export declare class MixinControllerCheckedInterface {
     /** Requests the opposite of the current state. */
     toggleChecked(): boolean;
     /**
-     * Drops the recorded state, so the control reads `defaultChecked` again.
+     * Returns the control to what its markup declared: `defaultChecked` where
+     * `default-checked` is written, and the `checked` attribute where it is not.
      *
      * A form reset has to return a control to what its markup declared, and
      * assigning `checked` cannot do it: any assignment records a state, and the

package/dist/mixins/mixin-controller-checked/mixin-controller-checked.js

@@ -59,7 +59,8 @@ export const MixinControllerChecked = (Base) => {
         }
         resetChecked() {
             const previous = this.checked;
-            this.checkedState = undefined;
+            this.checkedState =
+                this.hasAttribute('default-checked') || !this.hasAttribute('checked') ? undefined : true;
             this.requestUpdate('checked', previous);
         }
     }

package/dist/mixins/mixin-controller-value/mixin-controller-value.d.ts

@@ -8,7 +8,9 @@ type Constructor<T> = new (...args: any[]) => T;
  */
 export declare class MixinControllerValueInterface {
     /**
-     * The value the control starts with. A form reset returns it to this value.
+     * The value the control starts with. A form reset returns it to this value,
+     * and to the `value` attribute where this one is not written, as a native
+     * control resets to the `value` it declares.
      *
      * Separate from `value`, which is where the control is now, and gone from the
      * reader's view the moment they change anything.
@@ -37,7 +39,7 @@ export declare class MixinControllerValueInterface {
     protected readonly announcesInput: boolean;
     /** Requests a new value, and returns whether the change was applied. */
     requestValue(next: string): boolean;
-    /** Returns the control to its `defaultValue`. */
+    /** Returns the control to its `defaultValue`, or to its `value` attribute where there is none. */
     formResetCallback(): void;
     /** Restores the value when the browser brings a form back. */
     formStateRestoreCallback(state: string | File | FormData | null): void;

package/dist/mixins/mixin-controller-value/mixin-controller-value.js

@@ -48,15 +48,20 @@ export const MixinControllerValue = (Base) => {
             }
             return applied;
         }
+        get declared() {
+            return this.hasAttribute('default-value')
+                ? undefined
+                : (this.getAttribute('value') ?? undefined);
+        }
         formResetCallback() {
             super.formResetCallback();
             const previous = this.value;
-            this.valueState = undefined;
+            this.valueState = this.declared;
             this.requestUpdate('value', previous);
         }
         formStateRestoreCallback(state) {
             const previous = this.value;
-            this.valueState = typeof state === 'string' ? state : undefined;
+            this.valueState = typeof state === 'string' ? state : this.declared;
             this.requestUpdate('value', previous);
         }
     }

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from 'lit/decorators.js';
 import { HelixDismissEvent } from '../../events/events.js';
 import { deepActiveElement, deepContains, } from '../../utils/focusable-elements/focusable-elements.js';
+import { tabStops } from '../../utils/tab-stops/tab-stops.js';
 export const MixinDismissible = (Base) => {
     class Dismissible extends Base {
         constructor() {
@@ -25,14 +26,26 @@ export const MixinDismissible = (Base) => {
             return this.shadowRoot?.querySelector('[part~="dismiss"]') ?? null;
         }
         dismiss() {
-            const neighbors = deepContains(this, deepActiveElement()) ? this.neighbors() : [];
+            const inside = deepContains(this, deepActiveElement());
+            const neighbors = inside ? this.neighbors() : [];
+            const beside = inside && neighbors.length === 0 ? this.stopBeside() : undefined;
             const event = this.dismissEvent();
             this.dispatchEvent(event);
-            if (neighbors.length > 0 && !event.defaultPrevented) {
-                this.keepFocus(neighbors);
+            if ((neighbors.length > 0 || beside) && !event.defaultPrevented) {
+                this.keepFocus(neighbors, beside);
             }
             return !event.defaultPrevented;
         }
+        stopBeside() {
+            const stops = tabStops(document.body);
+            const own = stops.flatMap((stop, at) => (deepContains(this, stop) ? [at] : []));
+            const first = own[0];
+            const last = own.at(-1);
+            if (first === undefined || last === undefined) {
+                return undefined;
+            }
+            return stops[last + 1] ?? stops[first - 1];
+        }
         neighbors() {
             const same = (node) => node instanceof HTMLElement && node.localName === this.localName;
             const after = [];
@@ -49,7 +62,7 @@ export const MixinDismissible = (Base) => {
             }
             return [...after, ...before];
         }
-        keepFocus(neighbors) {
+        keepFocus(neighbors, beside) {
             const settle = () => {
                 const active = document.activeElement;
                 if (this.isConnected || (active !== null && active !== document.body)) {
@@ -64,6 +77,9 @@ export const MixinDismissible = (Base) => {
                         }
                     }
                 }
+                if (beside?.isConnected) {
+                    beside.focus();
+                }
             };
             settle();
             requestAnimationFrame(settle);

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { auditName } from '../../utils/audit-name/audit-name.js';
+import { auditName } from '#audit-name';
 import { hostAria } from '../../utils/host-aria/host-aria.js';
 const HINT_ID = 'helix-hint';
 const FEEDBACK_ID = 'helix-feedback';
@@ -167,7 +167,7 @@ export const MixinField = (Base) => {
             this.addEventListener('change', touch);
             this.renderRoot.addEventListener('slotchange', this.noteSlotted);
             auditName(this, () => this.namedControl, 'Give it a `label`, an `aria-label`, words in its label, or a `<label for>` that names it.', () => this.labeled ||
-                [...this.children].some((child) => child.slot === 'label' && (child.textContent ?? '').trim() !== ''));
+                [...this.children].some((child) => child.slot === 'label' && (child.textContent ?? '').trim() !== ''), () => this.partNamed('value'));
         }
     }
     __decorate([

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

@@ -92,11 +92,23 @@ export declare class MixinPickerFieldInterface {
      *
      * The one check the platform cannot make: the control is `type="text"` and
      * has no idea what a date, a time or a color is, so the family says what one
-     * looks like and `sync` reports it as `badInput`. Empty means the platform's
-     * own verdict stands.
+     * looks like. A message alone is reported as `badInput`; a flag and a
+     * message, such as `['rangeUnderflow', 'Choose a date on or after…']`, sets
+     * that flag, as a native date input does for its `min`. Empty means the
+     * platform's own verdict stands.
      */
-    protected validate(): string;
+    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.
  *

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

@@ -6,8 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property } from 'lit/decorators.js';
 import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
+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]];
+};
 export const MixinPickerField = (Base) => {
     class PickerFieldElement extends Base {
         constructor() {
@@ -91,7 +98,7 @@ export const MixinPickerField = (Base) => {
             this.fromTrigger = false;
             this.handleKeypress = (event) => {
                 if (event.key === 'Enter' && !event.defaultPrevented) {
-                    this.submitImplicitly();
+                    submitImplicitly(this.form);
                 }
             };
             this.handleTriggerClick = () => {
@@ -136,12 +143,12 @@ export const MixinPickerField = (Base) => {
             if (!control) {
                 return;
             }
-            const message = this.validate();
-            if (message === '') {
+            const fault = verdictFlags(this.validate());
+            if (fault === null) {
                 this.copyValidity(control);
             }
             else {
-                this.internals.setValidity({ badInput: true }, message, control);
+                this.internals.setValidity(fault[0], fault[1], control);
             }
             this.refreshFeedback();
         }

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,6 +8,7 @@ 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';
 export const MixinSegmentedField = (Base) => {
     class SegmentedFieldElement extends Base {
         constructor() {
@@ -169,7 +170,7 @@ export const MixinSegmentedField = (Base) => {
             }
             const anchor = this.anchor ?? undefined;
             const partial = isPartial(this.segmentedKind, this.parts, this.layout);
-            const message = this.validate();
+            const fault = verdictFlags(this.validate());
             if (partial) {
                 this.internals.setValidity({ badInput: true }, this.badInputMessage ||
                     (this.segmentedKind === 'date' ? 'Enter a whole date.' : 'Enter a whole time.'), anchor);
@@ -178,8 +179,8 @@ export const MixinSegmentedField = (Base) => {
                 this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage ||
                     (this.segmentedKind === 'date' ? 'Enter a date.' : 'Enter a time.'), anchor);
             }
-            else if (message !== '') {
-                this.internals.setValidity({ badInput: true }, message, anchor);
+            else if (fault !== null) {
+                this.internals.setValidity(fault[0], fault[1], anchor);
             }
             else {
                 this.internals.setValidity({});
@@ -210,13 +211,18 @@ export const MixinSegmentedField = (Base) => {
                 const { max, min } = segmentRange(kind, this.parts, twelve);
                 const text = segmentText(kind, this.parts, twelve, locale);
                 const empty = shown === undefined;
+                const id = `${this.controlId}-${kind}`;
+                const editable = !this.isDisabled && !this.readOnly;
                 return html `<span
             part="segment${empty ? ' segment-placeholder' : ''}"
+            id=${id}
             data-segment=${kind}
             role="spinbutton"
             tabindex=${this.isDisabled ? '-1' : '0'}
             inputmode=${kind === 'dayPeriod' ? nothing : 'numeric'}
-            aria-label=${segmentName(kind, locale)}
+            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}

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

@@ -0,0 +1,10 @@
+import type { auditName as audit } from './audit-name.js';
+/**
+ * The missing-name warning in a production build: nothing.
+ *
+ * `#audit-name` 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-name.ts`.
+ */
+export declare const auditName: typeof audit;

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

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

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

@@ -6,8 +6,13 @@
  * **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
  * to the browser.
+ *
+ * **What the control shows as its value is no name**, so the words in
+ * `shown` count for no route. A Select with no label names its trigger by the
+ * part that shows the choice, and while nothing is chosen that part shows the
+ * placeholder, "Choose", which says nothing about what is being chosen.
  */
-export declare const hasName: (element: HTMLElement) => boolean;
+export declare const hasName: (element: HTMLElement, shown?: Element | null) => boolean;
 /**
  * Warns once, through the runtime channel, when a control has no accessible
  * name: none on the host, and none on the control inside it.
@@ -18,11 +23,19 @@ export declare const hasName: (element: HTMLElement) => boolean;
  * that task, and an element is read once in its life, so a name taken away
  * later is not reported.
  *
- * **In every build.** Every runtime warning in the library reports through the
- * same channel whatever the build, and a project that wants the console quiet
- * tells `@fusion.dev/helix-diagnostics` with `core.warnings: false`.
+ * **In a development build only.** Every field and Button calls it, so in
+ * production it would cost each of them about 450 bytes gzip for a sentence
+ * meant for the person writing the page. Core imports it as `#audit-name`,
+ * which `package.json` resolves here under the `development` condition (Vite
+ * and webpack in development, `bun --conditions development`,
+ * `node --conditions=development`) and to `audit-name-off.ts`, which does
+ * nothing, everywhere else. Like every runtime warning it reports through the
+ * one channel, and a project that wants the console quiet tells
+ * `@fusion.dev/helix-diagnostics` with `core.warnings: false`.
  *
  * `also` answers for a name the component gave through its internals, which no
- * attribute shows. `fix` is the sentence that says how to name it.
+ * attribute shows. `fix` is the sentence that says how to name it. `shown` is
+ * the part where the control shows its value or its placeholder, whose words
+ * are no name.
  */
-export declare const auditName: (host: HTMLElement, control: () => HTMLElement | null, fix: string, also?: () => boolean) => void;
+export declare const auditName: (host: HTMLElement, control: () => HTMLElement | null, fix: string, also?: () => boolean, shown?: () => Element | null) => void;

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

@@ -1,31 +1,13 @@
+import { nameText } from '../name-text/name-text.js';
 import { reportRuntime } from '../report-runtime/report-runtime.js';
-const nameText = (node) => {
-    if (node instanceof HTMLSlotElement) {
-        return node.assignedNodes({ flatten: true }).map(nameText).join('');
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent ?? '';
-    }
-    if (!(node instanceof Element)) {
-        return '';
-    }
-    if ((node instanceof HTMLElement && node.hidden) || node.getAttribute('aria-hidden') === 'true') {
-        return '';
-    }
-    const said = node.getAttribute('aria-label') ?? node.getAttribute('alt');
-    if (said?.trim()) {
-        return said;
-    }
-    return [...node.childNodes].map(nameText).join('');
-};
-const namesWithWords = (ids, from) => {
+const namesWithWords = (ids, from, shown) => {
     const root = from.getRootNode();
     return (ids ?? '')
         .split(/\s+/)
         .filter(Boolean)
         .some((id) => {
         const found = root.getElementById?.(id);
-        return found ? nameText(found).trim() !== '' : false;
+        return found ? nameText(found, shown).trim() !== '' : false;
     });
 };
 const NAMED_BY_CONTENT = new Set([
@@ -40,18 +22,18 @@ const NAMED_BY_CONTENT = new Set([
     'switch',
     'tab',
 ]);
-export const hasName = (element) => {
+export const hasName = (element, shown) => {
     for (const attribute of ['aria-label', 'title', 'placeholder']) {
         if (element.getAttribute(attribute)?.trim()) {
             return true;
         }
     }
-    if (namesWithWords(element.getAttribute('aria-labelledby'), element)) {
+    if (namesWithWords(element.getAttribute('aria-labelledby'), element, shown)) {
         return true;
     }
     const referenced = element
         .ariaLabelledByElements;
-    if ((referenced ?? []).some((one) => nameText(one).trim() !== '')) {
+    if ((referenced ?? []).some((one) => nameText(one, shown).trim() !== '')) {
         return true;
     }
     const labels = element.labels;
@@ -59,7 +41,7 @@ export const hasName = (element) => {
         return true;
     }
     const role = element.getAttribute('role') ?? (element.localName === 'button' ? 'button' : '');
-    return NAMED_BY_CONTENT.has(role) && nameText(element).trim() !== '';
+    return NAMED_BY_CONTENT.has(role) && nameText(element, shown).trim() !== '';
 };
 const audited = new WeakSet();
 const waiting = new Map();
@@ -70,7 +52,7 @@ const readWaiting = () => {
         check();
     }
 };
-export const auditName = (host, control, fix, also) => {
+export const auditName = (host, control, fix, also, shown) => {
     if (audited.has(host) || waiting.has(host)) {
         return;
     }
@@ -83,7 +65,8 @@ export const auditName = (host, control, fix, also) => {
         }
         audited.add(host);
         const inner = control();
-        if (also?.() || hasName(host) || (inner !== null && hasName(inner))) {
+        const value = shown?.();
+        if (also?.() || hasName(host) || (inner !== null && hasName(inner, value))) {
             return;
         }
         reportRuntime({