@fusion.dev/helix-core 0.145.0 → 0.147.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,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, 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, 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';
@@ -40,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';
@@ -49,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';
@@ -57,6 +61,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,20 +72,30 @@ 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 { 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 { appleTouch, onApple } from './utils/platform/platform.js';
+export { applyOwnRule } from './utils/own-rule/own-rule.js';
+export { plainClick } from './utils/plain-click/plain-click.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';
@@ -91,19 +106,25 @@ 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';
+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';
 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, 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, 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

@@ -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.
      */
@@ -172,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() {
@@ -23,6 +24,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 +46,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 +66,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 +83,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,12 +7,15 @@ 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() {
             super(...arguments);
             this.dismissible = false;
             this.dismissLabel = 'Dismiss';
+            this.handOff = undefined;
+            this.forgetFocus = undefined;
         }
         dismissEvent() {
             const own = [...this.childNodes]
@@ -25,14 +28,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,8 +64,9 @@ export const MixinDismissible = (Base) => {
             }
             return [...after, ...before];
         }
-        keepFocus(neighbors) {
-            const settle = () => {
+        keepFocus(neighbors, beside) {
+            this.forgetFocus?.();
+            const settle = (late) => {
                 const active = document.activeElement;
                 if (this.isConnected || (active !== null && active !== document.body)) {
                     return;
@@ -64,9 +80,30 @@ export const MixinDismissible = (Base) => {
                         }
                     }
                 }
+                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-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-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
@@ -92,10 +94,12 @@ 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;
 }
 /**
  * Grafts a floating picker onto a text field, and the protocol between them.
@@ -154,4 +158,3 @@ export declare class MixinPickerFieldInterface {
  * `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

@@ -6,8 +6,10 @@ 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';
+import { verdictFlags } from '../../utils/verdict-flags/verdict-flags.js';
 export const MixinPickerField = (Base) => {
     class PickerFieldElement extends Base {
         constructor() {
@@ -91,7 +93,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 +138,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();
         }