@fusion.dev/helix-core 0.142.1 → 0.144.0

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

@@ -13,6 +13,12 @@ export const MixinControllerChecked = (Base) => {
             super(...arguments);
             this.defaultChecked = false;
             this.checkedState = undefined;
+            this.readOnly = false;
+            this.holdReadOnly = (event) => {
+                if (this.readOnly) {
+                    event.preventDefault();
+                }
+            };
         }
         get checked() {
             return this.checkedState ?? this.defaultChecked;
@@ -63,5 +69,8 @@ export const MixinControllerChecked = (Base) => {
     __decorate([
         property({ attribute: 'default-checked', type: Boolean })
     ], CheckedElement.prototype, "defaultChecked", void 0);
+    __decorate([
+        property({ attribute: 'readonly', reflect: true, type: Boolean })
+    ], CheckedElement.prototype, "readOnly", void 0);
     return CheckedElement;
 };

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

@@ -13,6 +13,7 @@ export const MixinControllerOpen = (Base) => {
             super(...arguments);
             this.defaultOpen = false;
             this.openState = undefined;
+            this.announcedOpen = undefined;
         }
         get open() {
             return this.openState ?? this.defaultOpen;
@@ -26,6 +27,15 @@ export const MixinControllerOpen = (Base) => {
             super.willUpdate(changed);
             this.toggleState('open', this.open);
         }
+        updated(changed) {
+            super.updated(changed);
+            if (this.announcedOpen === undefined) {
+                this.announcedOpen = this.open;
+            }
+            else if (this.announcedOpen !== this.open) {
+                this.announceToggle(this.open);
+            }
+        }
         requestOpen(next) {
             if (this.open === next) {
                 return true;
@@ -46,11 +56,17 @@ export const MixinControllerOpen = (Base) => {
             return applied;
         }
         announceToggle(open) {
-            const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
-            Object.assign(event, {
+            this.announcedOpen = open;
+            const states = {
                 newState: open ? 'open' : 'closed',
                 oldState: open ? 'closed' : 'open',
-            });
+            };
+            if (typeof ToggleEvent === 'function') {
+                this.dispatchEvent(new ToggleEvent('toggle', states));
+                return;
+            }
+            const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
+            Object.assign(event, states);
             this.dispatchEvent(event);
         }
         toggleOpen() {

package/dist/mixins/mixin-dismissible/mixin-dismissible.d.ts

@@ -13,6 +13,8 @@ export declare class DismissibleElement {
     dismiss(): boolean;
     /** The event, built but not dispatched, for a caller that owns the timing. */
     protected dismissEvent(): HelixDismissEvent;
+    /** Where focus lands when a neighbor that held it is removed: the dismiss control. */
+    protected get returnFocusTo(): HTMLElement | null;
 }
 /**
  * Grafts `dismissible`, its label, and the event that says so.

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

@@ -6,6 +6,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';
 export const MixinDismissible = (Base) => {
     class Dismissible extends Base {
         constructor() {
@@ -20,11 +21,53 @@ export const MixinDismissible = (Base) => {
                 .join('');
             return new HelixDismissEvent({ label: own.trim() });
         }
+        get returnFocusTo() {
+            return this.shadowRoot?.querySelector('[part~="dismiss"]') ?? null;
+        }
         dismiss() {
+            const neighbors = deepContains(this, deepActiveElement()) ? this.neighbors() : [];
             const event = this.dismissEvent();
             this.dispatchEvent(event);
+            if (neighbors.length > 0 && !event.defaultPrevented) {
+                this.keepFocus(neighbors);
+            }
             return !event.defaultPrevented;
         }
+        neighbors() {
+            const same = (node) => node instanceof HTMLElement && node.localName === this.localName;
+            const after = [];
+            for (let node = this.nextElementSibling; node; node = node.nextElementSibling) {
+                if (same(node)) {
+                    after.push(node);
+                }
+            }
+            const before = [];
+            for (let node = this.previousElementSibling; node; node = node.previousElementSibling) {
+                if (same(node)) {
+                    before.push(node);
+                }
+            }
+            return [...after, ...before];
+        }
+        keepFocus(neighbors) {
+            const settle = () => {
+                const active = document.activeElement;
+                if (this.isConnected || (active !== null && active !== document.body)) {
+                    return;
+                }
+                for (const neighbor of neighbors) {
+                    const control = neighbor.isConnected && neighbor.returnFocusTo;
+                    if (control) {
+                        control.focus();
+                        if (deepContains(neighbor, deepActiveElement())) {
+                            return;
+                        }
+                    }
+                }
+            };
+            settle();
+            requestAnimationFrame(settle);
+        }
     }
     __decorate([
         property({ reflect: true, type: Boolean })

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

@@ -20,6 +20,8 @@ export declare class MixinFieldInterface {
     protected labelId: string;
     /** Whether a label is drawn at all, in either shape. */
     protected get labeled(): boolean;
+    /** The element in the shadow root a reader lands on and hears the name of. */
+    protected get namedControl(): HTMLElement | null;
     /**
      * Help text shown under the control. A validation message replaces it.
      *

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

@@ -6,6 +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 { hostAria } from '../../utils/host-aria/host-aria.js';
 const HINT_ID = 'helix-hint';
 const FEEDBACK_ID = 'helix-feedback';
@@ -16,6 +17,19 @@ export const MixinField = (Base) => {
             this.controlId = 'control';
             this.labelId = 'label';
             this.namedBy = null;
+            this.filledSlots = new Set();
+            this.noteSlotted = (event) => {
+                const slot = event.target;
+                if (slot.name !== 'label' && slot.name !== 'hint') {
+                    return;
+                }
+                const filled = slot.assignedNodes().length > 0;
+                if (filled !== this.filledSlots.has(slot.name)) {
+                    const next = new Set(this.filledSlots);
+                    next[filled ? 'add' : 'delete'](slot.name);
+                    this.filledSlots = next;
+                }
+            };
             this.feedback = '';
             this.hint = '';
             this.label = '';
@@ -23,8 +37,21 @@ export const MixinField = (Base) => {
             this.touched = false;
             this.shownFeedback = '';
         }
+        get namedControl() {
+            return (this.renderRoot?.querySelector(`#${this.controlId}`) ??
+                this.renderRoot?.querySelector('input, button, select, textarea') ??
+                null);
+        }
         get labeled() {
-            return this.label !== '' || Boolean(this.getAttribute('aria-label'));
+            return (this.label !== '' ||
+                Boolean(this.getAttribute('aria-label')) ||
+                this.filledSlots.has('label'));
+        }
+        bareSlot(name) {
+            return name === 'label' ? html `<slot name="label"></slot>` : html `<slot name="hint"></slot>`;
+        }
+        get validityFeedback() {
+            return this.validates ? this.feedback : '';
         }
         get validates() {
             return this.constructor.formAssociated === true;
@@ -42,15 +69,15 @@ export const MixinField = (Base) => {
             if (this.resolvedFeedback !== '') {
                 return FEEDBACK_ID;
             }
-            return this.hint === '' ? undefined : HINT_ID;
+            return this.hint === '' && !this.filledSlots.has('hint') ? undefined : HINT_ID;
         }
         get invalidity() {
             return this.resolvedFeedback === '' ? undefined : 'true';
         }
         renderGroupLabel() {
             const hidden = this.label === '' ? this.getAttribute('aria-label') : null;
-            if (this.label === '' && !hidden) {
-                return nothing;
+            if (this.label === '' && !hidden && !this.filledSlots.has('label')) {
+                return this.bareSlot('label');
             }
             return html `<span part="label" id=${this.labelId} ?data-hidden=${hidden !== null}
         ><slot name="label">${this.label || hidden}</slot></span
@@ -58,8 +85,8 @@ export const MixinField = (Base) => {
         }
         renderLabel() {
             const hidden = this.label === '' ? this.getAttribute('aria-label') : null;
-            if (this.label === '' && !hidden) {
-                return nothing;
+            if (this.label === '' && !hidden && !this.filledSlots.has('label')) {
+                return this.bareSlot('label');
             }
             return html `<label
         part="label"
@@ -70,10 +97,15 @@ export const MixinField = (Base) => {
       >`;
         }
         renderHint() {
-            if (this.hint === '' || this.resolvedFeedback !== '') {
+            if (this.resolvedFeedback !== '') {
                 return nothing;
             }
-            return html `<p part="hint" id=${HINT_ID}><slot name="hint">${this.hint}</slot></p>`;
+            if (this.hint === '' && !this.filledSlots.has('hint')) {
+                return this.bareSlot('hint');
+            }
+            return html `<p part="hint" id=${HINT_ID}
+        ><slot name="hint">${this.hint}</slot></p
+      >`;
         }
         renderFeedback() {
             const message = this.resolvedFeedback;
@@ -133,11 +165,17 @@ export const MixinField = (Base) => {
             };
             this.addEventListener('invalid', touch);
             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() !== ''));
         }
     }
     __decorate([
         property({ attribute: 'aria-label' })
     ], FieldElement.prototype, "namedBy", void 0);
+    __decorate([
+        state()
+    ], FieldElement.prototype, "filledSlots", void 0);
     __decorate([
         property()
     ], FieldElement.prototype, "feedback", void 0);

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

@@ -19,7 +19,10 @@ export declare class MixinPickerEditingInterface {
     protected editing: boolean;
     /** The caret has left, so the field renders again. */
     protected readonly handleBlur: () => void;
-    /** Focusing the field opens the picker, and only from outside the element. */
+    /**
+     * A press that focuses the field opens the picker, and only from outside the
+     * element. Focus that arrives by Tab or from a script opens nothing.
+     */
     protected readonly handleFocus: (event: FocusEvent) => void;
     /**
      * Whether the value is locked. A read-only control still submits its value.
@@ -30,10 +33,15 @@ export declare class MixinPickerEditingInterface {
      * returns `false`.
      */
     requestValue(next: string): boolean;
+    /**
+     * Requests the panel open or closed. While `readOnly` is set, it does not
+     * open, and it returns `false`.
+     */
+    requestOpen(next: boolean): boolean;
 }
 /**
- * Grafts the typing half of a picker field: it opens on arrival, holds the
- * value while the caret is in it, and refuses while read-only.
+ * Grafts the typing half of a picker field: a press into it opens the picker,
+ * it holds the value while the caret is in it, and it refuses while read-only.
  *
  * **Over `MixinPickerField` and not part of it, because Color Input takes the
  * one and not the other.** Date Input and Time Input show a rendering while
@@ -41,11 +49,18 @@ export declare class MixinPickerEditingInterface {
  * while somebody is, because `Intl` formats and does not parse and a document
  * being edited must not be a rendering of something else. That split needs to
  * know when the caret is in the field, which is `editing`; and a reader who
- * reaches such a field is choosing, so arriving opens the picker. A color has
- * neither: `#ff0000` is what is typed and what is shown, and a reader who has
- * the hex pastes it and never opens anything. `readOnly` is the third thing
- * Color Input does not have, and a mixin cannot give it one without changing
- * its API.
+ * presses into such a field is choosing, so the press opens the picker. A color
+ * has neither: `#ff0000` is what is typed and what is shown, and a reader who
+ * has the hex pastes it and never opens anything.
+ *
+ * **Tab into the field opens nothing.** It did, and a reader moving through a
+ * form with a screen reader heard a dialog appear at every date and every
+ * time they passed. React Aria's DatePicker opens on its button alone and the
+ * APG date picker combobox opens on its button or Down; here the trigger and
+ * ArrowDown open it from the keyboard, and a press into the text opens it for
+ * a pointer, which is where the reader has already shown what they came for. `readOnly` comes along here for
+ * the two that take this mixin; Color Input declares its own, the same
+ * property refusing the same two requests.
  */
 export declare const MixinPickerEditing: <T extends Constructor<EditingBase>>(Base: T) => Constructor<MixinPickerEditingInterface> & T;
 export {};

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

@@ -14,10 +14,16 @@ export const MixinPickerEditing = (Base) => {
             this.handleBlur = () => {
                 this.editing = false;
             };
+            this.pressing = false;
+            this.handlePress = (event) => {
+                this.pressing = event.type === 'pointerdown' && event.composedPath()[0] === this.control;
+            };
             this.handleFocus = (event) => {
                 this.editing = !this.returning;
+                const pressed = this.pressing;
+                this.pressing = false;
                 const from = event.relatedTarget;
-                if (this.open || this.isDisabled || this.returning) {
+                if (!pressed || this.open || this.isDisabled || this.returning) {
                     return;
                 }
                 if (from instanceof Node && this.renderRoot?.contains?.(from)) {
@@ -32,6 +38,24 @@ export const MixinPickerEditing = (Base) => {
             }
             return super.requestValue(next);
         }
+        requestOpen(next) {
+            if (next && this.readOnly) {
+                return false;
+            }
+            return super.requestOpen(next);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener('pointerdown', this.handlePress);
+            this.addEventListener('pointercancel', this.handlePress);
+            this.addEventListener('click', this.handlePress);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener('pointerdown', this.handlePress);
+            this.removeEventListener('pointercancel', this.handlePress);
+            this.removeEventListener('click', this.handlePress);
+        }
     }
     __decorate([
         property({ attribute: 'readonly', reflect: true, type: Boolean })

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

@@ -45,7 +45,22 @@ export declare class MixinPickerFieldInterface {
     protected get display(): string;
     /** Puts the caret in the field, as clicking its label does. */
     focus(options?: FocusOptions): void;
-    /** Escape shuts the panel without moving the value. */
+    /**
+     * The text control's own `change`, which a reader's edit ends with, said
+     * under the host's name.
+     */
+    protected readonly handleCommit: (event: Event) => void;
+    /**
+     * The trigger's press: opens the panel with focus in the picker, or closes
+     * it.
+     */
+    protected readonly handleTriggerClick: () => void;
+    /** Enter in the text submits the form, as it does in a native text field. */
+    protected readonly handleKeypress: (event: KeyboardEvent) => void;
+    /**
+     * Escape shuts the panel without moving the value, Tab out of the text shuts
+     * a panel the reader is passing, and ArrowDown in the text moves into it.
+     */
     protected readonly handleKeydown: (event: KeyboardEvent) => void;
     /** The overlay, placed against the field rather than the trigger. */
     protected readonly panel: PopoverController;
@@ -56,6 +71,14 @@ export declare class MixinPickerFieldInterface {
      * Nothing, unless a family fits what its panel holds to the room it has.
      */
     protected placed(room: number | undefined): void;
+    /**
+     * Takes a value the reader picked in the panel, and says it is settled.
+     *
+     * Returns whether it was taken. A family whose typing announces `input`
+     * alone sends `change` from here for a pick, since a pick is a finished
+     * choice.
+     */
+    protected requestPicked(next: string): boolean;
     /** Puts the field back where the answer differs from what was typed. */
     protected restore(): void;
     /** Puts the caret back in the field without the field reopening the panel. */
@@ -102,10 +125,11 @@ export declare class MixinPickerFieldInterface {
  * same way, and for the same reason: a mixin reads a part out of whatever host
  * applies it.
  *
- * **Opening on focus, `readOnly` and the idle rendering are not here.** They
- * are `MixinPickerEditing`'s, because Color Input has none of the three: a hex
- * is pasted and read at a glance, so its field neither renders nor opens on
- * arrival, and giving it `readOnly` would be a property its API does not have.
+ * **Opening on a press into the text, `readOnly` and the idle rendering are
+ * not here.** They are `MixinPickerEditing`'s, because Color Input takes
+ * neither of the first and last: a hex is pasted and read at a glance, so its
+ * field neither renders nor opens when pressed. Color Input declares its own
+ * `readOnly`.
  *
  * **Three things the two typed families share stay with them.** `renderTrigger`
  * differs only by its icon and would still be the wrong thing to lift: a part a

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

@@ -7,6 +7,7 @@ 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 { reportValues } from '../../utils/report-values/report-values.js';
+import { tabStops } from '../../utils/tab-stops/tab-stops.js';
 export const MixinPickerField = (Base) => {
     class PickerFieldElement extends Base {
         constructor() {
@@ -29,7 +30,73 @@ export const MixinPickerField = (Base) => {
                     event.stopPropagation();
                     this.requestOpen(false);
                     this.returnFocus();
+                    return;
                 }
+                const fromText = event.composedPath()[0] === this.control;
+                if (event.key === 'Tab' && this.open && fromText) {
+                    this.requestOpen(false);
+                    return;
+                }
+                if (event.key === 'ArrowDown' && fromText && !this.isDisabled) {
+                    event.preventDefault();
+                    if (this.open) {
+                        this.partNamed('picker')?.focus();
+                    }
+                    else {
+                        this.fromTrigger = true;
+                        if (!this.requestOpen(true)) {
+                            this.fromTrigger = false;
+                        }
+                    }
+                }
+            };
+            this.handleSurfaceKeydown = (event) => {
+                const surface = this.partNamed('surface');
+                if ((event.key !== 'Escape' && event.key !== 'Tab') ||
+                    !this.open ||
+                    event.defaultPrevented ||
+                    !surface ||
+                    !event.composedPath().includes(surface)) {
+                    return;
+                }
+                if (event.key === 'Tab') {
+                    const stops = tabStops(surface);
+                    const at = event.composedPath()[0];
+                    const edge = event.shiftKey ? stops[0] : stops.at(-1);
+                    if (edge !== undefined && at === edge) {
+                        event.preventDefault();
+                        (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
+                    }
+                    return;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                this.requestOpen(false);
+                this.returnFocus();
+            };
+            this.handleFocusOut = (event) => {
+                const to = event.relatedTarget;
+                if (!this.open || !(to instanceof Node)) {
+                    return;
+                }
+                if (this.contains(to) || this.renderRoot?.contains?.(to)) {
+                    return;
+                }
+                this.requestOpen(false);
+            };
+            this.handleCommit = (event) => {
+                event.stopPropagation();
+                this.announceChange();
+            };
+            this.fromTrigger = false;
+            this.handleKeypress = (event) => {
+                if (event.key === 'Enter' && !event.defaultPrevented) {
+                    this.submitImplicitly();
+                }
+            };
+            this.handleTriggerClick = () => {
+                this.fromTrigger = !this.open;
+                this.toggleOpen();
             };
             this.returning = false;
         }
@@ -78,9 +145,29 @@ export const MixinPickerField = (Base) => {
             }
             this.refreshFeedback();
         }
+        get blocksImplicitSubmission() {
+            return this.control !== null;
+        }
+        requestPicked(next) {
+            const taken = this.requestValue(next);
+            if (taken && this.announcesInput) {
+                this.announceChange();
+            }
+            return taken;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener('keydown', this.handleSurfaceKeydown);
+            this.addEventListener('focusout', this.handleFocusOut);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener('keydown', this.handleSurfaceKeydown);
+            this.removeEventListener('focusout', this.handleFocusOut);
+        }
         returnFocus() {
             this.returning = true;
-            this.control?.focus();
+            this.anchor?.focus();
             this.returning = false;
         }
         focus(options) {
@@ -92,6 +179,12 @@ export const MixinPickerField = (Base) => {
         }
         updated(changed) {
             super.updated(changed);
+            if (changed.has('open')) {
+                if (this.open && this.fromTrigger) {
+                    this.partNamed('picker')?.focus();
+                }
+                this.fromTrigger = false;
+            }
             this.sync();
         }
     }

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

@@ -0,0 +1,67 @@
+import { type TemplateResult } from 'lit';
+import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segments/date-segments.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';
+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;
+/**
+ * The public surface `MixinSegmentedField` adds.
+ *
+ * Declared separately because TypeScript cannot emit declarations for an
+ * anonymous class that has private members (TS4094).
+ */
+export declare class MixinSegmentedFieldInterface {
+    /** What a screen reader hears for a segment with nothing in it. */
+    emptySegmentLabel: string;
+    /**
+     * Whether the field is a row of segments, one for each part of the date or
+     * time, in place of a line of text.
+     */
+    segmented: boolean;
+    /** Whether the segments are drawn: `segmented`, where the family can hold them. */
+    protected get segmentsShown(): boolean;
+    /** The row of segments, the group a description is carried to, or `null` while none is drawn. */
+    protected get segmentGroup(): HTMLElement | null;
+    /** Whether this family can show segments in its current shape. */
+    protected get segmentable(): boolean;
+    /** A date or a time. */
+    protected get segmentedKind(): SegmentedKind;
+    /** The locale the segments are laid out and named in. */
+    protected get segmentLocale(): string;
+    /** The clock and the seconds a time is laid out with. */
+    protected get segmentOptions(): SegmentOptions;
+    /** The row of segments, in the locale's order, with what it writes between them. */
+    protected renderSegments(): TemplateResult;
+}
+/**
+ * Grafts the segmented field React Aria's DateField and TimeField are, and Web
+ * Awesome's time input has, onto a picker field: one `spinbutton` for each part
+ * of the date or the time, in the order the locale writes them.
+ *
+ * **Typing into a text field asks the reader to know the format.** Date Input
+ * and Time Input read ISO, `2026-08-04` and `14:30`, because `Intl` formats and
+ * does not parse, and a reader in Germany who types `4.8.2026` is refused. A
+ * segment needs no format: the month is a month, set with digits or the arrow
+ * keys, and the layout puts it where the locale does, so the field reads
+ * `04.08.2026` in German and `08/04/2026` in English with nothing to parse.
+ *
+ * **What a segment does with a key**, which is React Aria's: digits fill it and
+ * move on once it cannot take another, Up and Down step it and wrap, Home and
+ * End go to its ends, Backspace and Delete empty it, Left and Right move between
+ * segments along the line of text, and Alt+Down opens the picker. Each segment
+ * is a tab stop, as each is in React Aria.
+ *
+ * **The value is whole or empty.** A date with no year is no date, so the value
+ * stays empty while any segment is, and the field reports `badInput` as a
+ * native date input does with a half-typed date. The arithmetic is
+ * `date-segments`, so this draws and listens and nothing else.
+ *
+ * **Opt-in, with `segmented`**, because the text field is what every example and
+ * every form already holds, and a row of segments draws differently.
+ */
+export declare const MixinSegmentedField: <T extends Constructor<SegmentedBase>>(Base: T) => Constructor<MixinSegmentedFieldInterface> & T;
+export {};