@fusion.dev/helix-core 0.146.0 → 0.148.0

package/dist/index.js

@@ -2,6 +2,7 @@ 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';
+export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, } from './controllers/copy-controller/copy-controller.js';
 export { CountdownController, } from './controllers/countdown-controller/countdown-controller.js';
@@ -16,9 +17,10 @@ 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, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
+export { focusItemOf, 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 { animationsFinished, animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
+export { OptionWindowController, } from './controllers/option-window-controller/option-window-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';
@@ -30,10 +32,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 +44,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,52 +52,69 @@ export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
 export { MixinViewport, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
+export { assignSlots } from './utils/assign-slots/assign-slots.js';
+export { drawAutofill, } from './utils/autofill-select/autofill-select.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 { centerInView } from './utils/center-in-view/center-in-view.js';
+export { ariaChord, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
+export { keyNames } from './utils/chord/key-names.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';
+export { columnStep } from './utils/column-step/column-step.js';
 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 { dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.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';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
-export { fillTemplate } from './utils/fill-template/fill-template.js';
-export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
+export { exportParts } from './utils/export-parts/export-parts.js';
+export { fillTemplate, labelWith } from './utils/fill-template/fill-template.js';
+export { FILTER_MARK, markMatches, rangeOf } from './utils/filter-marks/filter-marks.js';
+export { focusTarget } from './utils/focus-target/focus-target.js';
+export { deepActiveElement, deepContains, focusableElements, PRESSABLE, pressedOwnControl, } from './utils/focusable-elements/focusable-elements.js';
 export { afterLinkFollowed, followLink, } from './utils/follow-link/follow-link.js';
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
+export { gridMove, pageRows, } from './utils/grid-move/grid-move.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, formatPercent, 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';
 export { RUNTIME_LOG, RUNTIME_SLOT, reportRuntime, } from './utils/report-runtime/report-runtime.js';
 export { noteVersion, reportUsage, USAGE_SLOT, VERSIONS_SLOT, } from './utils/report-usage/report-usage.js';
 export { reportValues } from './utils/report-values/report-values.js';
-export { requestChange, } from './utils/request-change/request-change.js';
+export { requestChange, requestValue, } 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';
@@ -102,20 +122,23 @@ 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, scrollRoom, } 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 { slotFilled, slotNamed } 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 { toolbarAround, toolbarAxis } from './utils/toolbar-around/toolbar-around.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 { verdictFlags } from './utils/verdict-flags/verdict-flags.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

@@ -178,6 +178,11 @@ export declare class MixinChartSourceInterface {
      * hid.
      */
     showsColumn(cell: number): boolean;
+    /**
+     * The heading of the column at this place in a row, read from the first row
+     * that has a cell there, or `''` where none has.
+     */
+    columnName(cell: number): string;
     /**
      * The number of readings, which the pointer position maps onto.
      */
@@ -187,6 +192,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() {
@@ -69,6 +70,9 @@ export const MixinChartSource = (Base) => {
             const name = this.sourceRows[0]?.cells[cell]?.name;
             return name === undefined || this.showsSeries(name);
         }
+        columnName(cell) {
+            return this.sourceRows.find((row) => row.cells[cell])?.cells[cell]?.name ?? '';
+        }
         get readings() {
             return this.sourceRows.length;
         }

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/mixins/mixin-viewport/mixin-viewport.js

@@ -286,27 +286,28 @@ export const MixinViewport = (Base) => {
             if (!pan && !zoom && !fullscreen && more === nothing) {
                 return nothing;
             }
+            const [up, start, end, down] = ['up', 'start', 'end', 'down'].map((way) => this.panGlyph(way));
             return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
         ${pan
                 ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
-                  ${this.panGlyph('up')}
+                  <slot name="pan-up-icon">${up}</slot>
                 </button>
                 <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
-                  ${this.panGlyph('start')}
+                  <slot name="pan-start-icon">${start}</slot>
                 </button>
                 <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
-                  ${this.panGlyph('end')}
+                  <slot name="pan-end-icon">${end}</slot>
                 </button>
                 <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
-                  ${this.panGlyph('down')}
+                  <slot name="pan-down-icon">${down}</slot>
                 </button>`
                 : nothing}
         ${zoom
                 ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                  +
+                  <slot name="zoom-in-icon">+</slot>
                 </button>
                 <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                  −
+                  <slot name="zoom-out-icon">−</slot>
                 </button>`
                 : nothing}
         ${more}
@@ -318,7 +319,7 @@ export const MixinViewport = (Base) => {
                 type="button"
                 @click=${this.toggleFullscreen}
               >
-                ⤢
+                <slot name="fullscreen-icon">⤢</slot>
               </button>`
                 : nothing}
       </div>`;

package/dist/utils/assign-slots/assign-slots.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Sends each child to the slot it names, and every other child to the default
+ * slot, in a shadow root that assigns its slots by hand.
+ *
+ * **A root that assigns by hand routes nothing by itself**, its named slots
+ * included, so a header, a footer or an empty state slotted by name reaches
+ * nothing unless it is assigned here too. `place` says where a child goes when
+ * the host decides it, a row to its list or a card to the slot the layout drew
+ * for it, and a child it gives no slot to goes where its `slot` attribute says,
+ * as it would under the default assignment.
+ *
+ * **A slot already holding exactly what it would be given is left alone**, so
+ * calling this after every update fires no `slotchange` that nothing changed.
+ *
+ * Pair it with `ChildrenController`, which calls back when a child arrives
+ * after the first render, the case no `slotchange` reports.
+ */
+export declare const assignSlots: (root: ParentNode | null | undefined, children: Iterable<Element>, place?: (child: Element) => string | undefined) => void;

package/dist/utils/assign-slots/assign-slots.js

@@ -0,0 +1,14 @@
+export const assignSlots = (root, children, place = () => undefined) => {
+    const named = new Map();
+    for (const child of children) {
+        const name = place(child) ?? child.getAttribute('slot') ?? '';
+        named.set(name, [...(named.get(name) ?? []), child]);
+    }
+    for (const slot of root?.querySelectorAll?.('slot') ?? []) {
+        const wanted = named.get(slot.name) ?? [];
+        const had = slot.assignedNodes();
+        if (had.length !== wanted.length || had.some((one, at) => one !== wanted[at])) {
+            slot.assign?.(...wanted);
+        }
+    }
+};

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;