bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/date-field/date-field.svelte.js

@@ -1,18 +1,16 @@
-import { box } from "svelte-toolbelt";
+import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { getAnnouncer } from "../../shared/date/announcer.js";
-import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../shared/date/field/helpers.js";
-import { createFormatter } from "../../shared/date/formatter.js";
-import { getDaysInMonth, isBefore, toDate } from "../../shared/date/utils.js";
+import { Context } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
-import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../shared/date/field.js";
-import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../shared/date/field/parts.js";
-import { createContext } from "../../internal/createContext.js";
-import { useId } from "../../internal/useId.js";
-import { onDestroyEffect } from "../../internal/onDestroyEffect.svelte.js";
+import { useId } from "../../internal/use-id.js";
+import { createFormatter } from "../../internal/date-time/formatter.js";
+import { getAnnouncer } from "../../internal/date-time/announcer.js";
+import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../internal/date-time/field/helpers.js";
+import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
+import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
 export const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
 const DATE_FIELD_LABEL_ATTR = "data-date-field-label";
 export class DateFieldRootState {
@@ -74,6 +72,10 @@ export class DateFieldRootState {
         this.initialSegments = initializeSegmentValues(this.inferredGranularity);
         this.segmentValues = this.initialSegments;
         this.announcer = getAnnouncer();
+        this.getFieldNode = this.getFieldNode.bind(this);
+        this.updateSegment = this.updateSegment.bind(this);
+        this.handleSegmentClick = this.handleSegmentClick.bind(this);
+        this.getBaseSegmentAttrs = this.getBaseSegmentAttrs.bind(this);
         $effect(() => {
             untrack(() => {
                 this.initialSegments = initializeSegmentValues(this.inferredGranularity);
@@ -118,7 +120,12 @@ export class DateFieldRootState {
             if (this.value.current) {
                 this.syncSegmentValues(this.value.current);
             }
-            this.clearUpdating();
+            this.#clearUpdating();
+        });
+        $effect(() => {
+            if (this.value.current === undefined) {
+                this.segmentValues = initializeSegmentValues(this.inferredGranularity);
+            }
         });
         $effect(() => {
             this.validationStatus;
@@ -129,9 +136,9 @@ export class DateFieldRootState {
             });
         });
     }
-    setName = (name) => {
+    setName(name) {
         this.name = name;
-    };
+    }
     /**
      * Sets the field node for the `DateFieldRootState` instance. We use this method so we can
      * keep `#fieldNode` private to prevent accidental usage of the incorrect field node.
@@ -175,7 +182,7 @@ export class DateFieldRootState {
         /** Otherwise we return the rangeRoot's label node. */
         return this.rangeRoot.labelNode;
     }
-    clearUpdating() {
+    #clearUpdating() {
         this.states.day.updating = null;
         this.states.month.updating = null;
         this.states.year.updating = null;
@@ -264,7 +271,7 @@ export class DateFieldRootState {
             });
             const mergedSegmentValues = [...dateValues, ...timeValues];
             this.segmentValues = Object.fromEntries(mergedSegmentValues);
-            this.clearUpdating();
+            this.#clearUpdating();
             return;
         }
         this.segmentValues = Object.fromEntries(dateValues);
@@ -330,10 +337,10 @@ export class DateFieldRootState {
             caretColor: "transparent",
         },
     };
-    getLabelledBy = (segmentId) => {
+    #getLabelledBy(segmentId) {
         return `${segmentId} ${this.getLabelNode()?.id ?? ""}`;
-    };
-    updateSegment = (part, cb) => {
+    }
+    updateSegment(part, cb) {
         const disabled = this.disabled.current;
         const readonly = this.readonly.current;
         const readonlySegmentsSet = this.readonlySegmentsSet;
@@ -381,7 +388,7 @@ export class DateFieldRootState {
                 const next = castCb(pVal);
                 this.states.hour.updating = next;
                 if (next !== null && prev.dayPeriod !== null) {
-                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })));
+                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })), this.hourCycle.current);
                     if (dayPeriod === "AM" || dayPeriod === "PM") {
                         prev.dayPeriod = dayPeriod;
                     }
@@ -452,13 +459,13 @@ export class DateFieldRootState {
             this.setValue(undefined);
             this.segmentValues = newSegmentValues;
         }
-    };
-    handleSegmentClick = (e) => {
+    }
+    handleSegmentClick(e) {
         if (this.disabled.current) {
             e.preventDefault();
         }
-    };
-    getBaseSegmentAttrs = (part, segmentId) => {
+    }
+    getBaseSegmentAttrs(part, segmentId) {
         const inReadonlySegments = this.readonlySegmentsSet.has(part);
         const defaultAttrs = {
             "aria-invalid": getAriaInvalid(this.isInvalid),
@@ -482,30 +489,14 @@ export class DateFieldRootState {
             this.disabled.current);
         return {
             ...defaultAttrs,
-            "aria-labelledby": this.getLabelledBy(segmentId),
+            "aria-labelledby": this.#getLabelledBy(segmentId),
             contenteditable: contenteditable ? "true" : undefined,
             "aria-describedby": describedBy,
             tabindex: this.disabled.current ? undefined : 0,
         };
-    };
-    createInput(props) {
-        return new DateFieldInputState(props, this);
-    }
-    createLabel(props) {
-        return new DateFieldLabelState(props, this);
-    }
-    createHiddenInput() {
-        return new DateFieldHiddenInputState(this);
-    }
-    createSegment(part, props) {
-        return segmentPartToInstance({
-            part,
-            segmentProps: props,
-            root: this,
-        });
     }
 }
-class DateFieldInputState {
+export class DateFieldInputState {
     #id;
     #ref;
     #name;
@@ -569,6 +560,7 @@ class DateFieldLabelState {
         this.#id = props.id;
         this.#ref = props.ref;
         this.#root = root;
+        this.onclick = this.onclick.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -577,20 +569,20 @@ class DateFieldLabelState {
             },
         });
     }
-    #onclick = () => {
+    onclick(_) {
         if (this.#root.disabled.current)
             return;
         const firstSegment = getFirstSegment(this.#root.getFieldNode());
         if (!firstSegment)
             return;
         firstSegment.focus();
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-invalid": getDataInvalid(this.#root.isInvalid),
         "data-disabled": getDataDisabled(this.#root.disabled.current),
         [DATE_FIELD_LABEL_ATTR]: "",
-        onclick: this.#onclick,
+        onclick: this.onclick,
     }));
 }
 class DateFieldDaySegmentState {
@@ -605,12 +597,14 @@ class DateFieldDaySegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
             return;
@@ -783,8 +777,8 @@ class DateFieldDaySegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, fieldNode);
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.day.hasLeftFocus = true;
         this.#updateSegment("month", (prev) => {
             if (prev && prev.length === 1) {
@@ -792,28 +786,23 @@ class DateFieldDaySegmentState {
             }
             return prev;
         });
-    };
+    }
     props = $derived.by(() => {
-        const segmentValues = this.#root.segmentValues;
-        const isEmpty = segmentValues.day === null;
-        const placeholder = this.#root.placeholder.current;
-        const date = segmentValues.day
-            ? placeholder.set({ day: Number.parseInt(segmentValues.day) })
-            : placeholder;
-        const valueNow = date.day;
-        const valueMin = 1;
-        const valueMax = getDaysInMonth(toDate(date));
-        const valueText = isEmpty ? "Empty" : `${valueNow}`;
+        const date = this.#root.segmentValues.day
+            ? this.#root.placeholder.current.set({
+                day: Number.parseInt(this.#root.segmentValues.day),
+            })
+            : this.#root.placeholder.current;
         return {
             ...this.#root.sharedSegmentAttrs,
             id: this.#id.current,
             "aria-label": "day,",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
-            onfocusout: this.#onfocusout,
+            "aria-valuemin": 1,
+            "aria-valuemax": getDaysInMonth(toDate(date)),
+            "aria-valuenow": date.day,
+            "aria-valuetext": this.#root.segmentValues.day === null ? "Empty" : `${date.day}`,
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("day", this.#id.current),
         };
@@ -831,16 +820,17 @@ class DateFieldMonthSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    getAnnouncement = (month) => {
+    #getAnnouncement(month) {
         return `${month} - ${this.#root.formatter.fullMonth(toDate(this.#root.placeholder.current.set({ month })))}`;
-    };
-    #onkeydown = (e) => {
-        const placeholder = this.#root.placeholder.current;
+    }
+    onkeydown(e) {
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
             return;
         if (e.key !== kbd.TAB)
@@ -851,17 +841,17 @@ class DateFieldMonthSegmentState {
         if (isArrowUp(e.key)) {
             this.#updateSegment("month", (prev) => {
                 if (prev === null) {
-                    const next = placeholder.month;
-                    this.#announcer.announce(this.getAnnouncement(next));
+                    const next = this.#root.placeholder.current.month;
+                    this.#announcer.announce(this.#getAnnouncement(next));
                     if (String(next).length === 1) {
                         return `0${next}`;
                     }
                     return `${next}`;
                 }
-                const next = placeholder
+                const next = this.#root.placeholder.current
                     .set({ month: Number.parseInt(prev) })
                     .cycle("month", 1).month;
-                this.#announcer.announce(this.getAnnouncement(next));
+                this.#announcer.announce(this.#getAnnouncement(next));
                 if (String(next).length === 1) {
                     return `0${next}`;
                 }
@@ -872,17 +862,17 @@ class DateFieldMonthSegmentState {
         if (isArrowDown(e.key)) {
             this.#updateSegment("month", (prev) => {
                 if (prev === null) {
-                    const next = placeholder.month;
-                    this.#announcer.announce(this.getAnnouncement(next));
+                    const next = this.#root.placeholder.current.month;
+                    this.#announcer.announce(this.#getAnnouncement(next));
                     if (String(next).length === 1) {
                         return `0${next}`;
                     }
                     return `${next}`;
                 }
-                const next = placeholder
+                const next = this.#root.placeholder.current
                     .set({ month: Number.parseInt(prev) })
                     .cycle("month", -1).month;
-                this.#announcer.announce(this.getAnnouncement(next));
+                this.#announcer.announce(this.#getAnnouncement(next));
                 if (String(next).length === 1) {
                     return `0${next}`;
                 }
@@ -1011,7 +1001,7 @@ class DateFieldMonthSegmentState {
                     return null;
                 }
                 const next = Number.parseInt(str.slice(0, -1));
-                this.#announcer.announce(this.getAnnouncement(next));
+                this.#announcer.announce(this.#getAnnouncement(next));
                 return `${next}`;
             });
             if (moveToPrev) {
@@ -1021,8 +1011,8 @@ class DateFieldMonthSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.month.hasLeftFocus = true;
         this.#updateSegment("month", (prev) => {
             if (prev && prev.length === 1) {
@@ -1030,31 +1020,26 @@ class DateFieldMonthSegmentState {
             }
             return prev;
         });
-    };
+    }
     props = $derived.by(() => {
-        const segmentValues = this.#root.segmentValues;
-        const placeholder = this.#root.placeholder.current;
-        const isEmpty = segmentValues.month === null;
-        const date = segmentValues.month
-            ? placeholder.set({ month: Number.parseInt(segmentValues.month) })
-            : placeholder;
-        const valueNow = date.month;
-        const valueMin = 1;
-        const valueMax = 12;
-        const valueText = isEmpty
-            ? "Empty"
-            : `${valueNow} - ${this.#root.formatter.fullMonth(toDate(date))}`;
+        const date = this.#root.segmentValues.month
+            ? this.#root.placeholder.current.set({
+                month: Number.parseInt(this.#root.segmentValues.month),
+            })
+            : this.#root.placeholder.current;
         return {
             ...this.#root.sharedSegmentAttrs,
             id: this.#id.current,
             "aria-label": "month, ",
             contenteditable: "true",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
-            onfocusout: this.#onfocusout,
+            "aria-valuemin": 1,
+            "aria-valuemax": 12,
+            "aria-valuenow": date.month,
+            "aria-valuetext": this.#root.segmentValues.month === null
+                ? "Empty"
+                : `${date.month} - ${this.#root.formatter.fullMonth(toDate(date))}`,
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("month", this.#id.current),
         };
@@ -1098,6 +1083,8 @@ class DateFieldYearSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -1109,7 +1096,7 @@ class DateFieldYearSegmentState {
     #incrementBackspaceCount() {
         this.#backspaceCount++;
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
             return;
@@ -1226,8 +1213,8 @@ class DateFieldYearSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.year.hasLeftFocus = true;
         this.#pressedKeys = [];
         this.#resetBackspaceCount();
@@ -1237,7 +1224,7 @@ class DateFieldYearSegmentState {
             }
             return prev;
         });
-    };
+    }
     props = $derived.by(() => {
         const segmentValues = this.#root.segmentValues;
         const placeholder = this.#root.placeholder.current;
@@ -1257,9 +1244,9 @@ class DateFieldYearSegmentState {
             "aria-valuemax": valueMax,
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
+            onkeydown: this.onkeydown,
             onclick: this.#root.handleSegmentClick,
-            onfocusout: this.#onfocusout,
+            onfocusout: this.onfocusout,
             ...this.#root.getBaseSegmentAttrs("year", this.#id.current),
         };
     });
@@ -1276,12 +1263,14 @@ class DateFieldHourSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current || !("hour" in placeholder))
             return;
@@ -1307,6 +1296,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1329,6 +1322,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1336,10 +1333,12 @@ class DateFieldHourSegmentState {
         }
         if (isNumberString(e.key)) {
             const num = Number.parseInt(e.key);
-            const max = "dayPeriod" in this.#root.segmentValues &&
-                this.#root.segmentValues.dayPeriod !== null
-                ? 12
-                : 23;
+            const max = this.#root.hourCycle.current === 24
+                ? 23
+                : "dayPeriod" in this.#root.segmentValues &&
+                    this.#root.segmentValues.dayPeriod !== null
+                    ? 12
+                    : 23;
             const maxStart = Math.floor(max / 10);
             let moveToNext = false;
             const numIsZero = num === 0;
@@ -1414,6 +1413,15 @@ class DateFieldHourSegmentState {
                         this.#root.states.hour.lastKeyZero = false;
                         return `0${num}`;
                     }
+                    /**
+                     * If the new number is 0 and the hour cycle is set to 24, then we move
+                     * to the next segment, returning the new number with a leading 0.
+                     */
+                    if (num === 0 && this.#root.hourCycle.current === 24) {
+                        moveToNext = true;
+                        this.#root.states.hour.lastKeyZero = false;
+                        return `0${num}`;
+                    }
                     /**
                      * If the new number is 0, then we simply return the previous value, since
                      * they didn't actually type a new number.
@@ -1465,10 +1473,10 @@ class DateFieldHourSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.hour.hasLeftFocus = true;
-    };
+    }
     props = $derived.by(() => {
         const segmentValues = this.#root.segmentValues;
         const hourCycle = this.#root.hourCycle.current;
@@ -1491,8 +1499,8 @@ class DateFieldHourSegmentState {
             "aria-valuemax": valueMax,
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
-            onfocusout: this.#onfocusout,
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("hour", this.#id.current),
         };
@@ -1510,12 +1518,14 @@ class DateFieldMinuteSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current || !("minute" in placeholder))
             return;
@@ -1684,10 +1694,10 @@ class DateFieldMinuteSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.minute.hasLeftFocus = true;
-    };
+    }
     props = $derived.by(() => {
         const segmentValues = this.#root.segmentValues;
         const placeholder = this.#root.placeholder.current;
@@ -1709,8 +1719,8 @@ class DateFieldMinuteSegmentState {
             "aria-valuemax": valueMax,
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
-            onfocusout: this.#onfocusout,
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("minute", this.#id.current),
         };
@@ -1728,12 +1738,14 @@ class DateFieldSecondSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current || !("second" in placeholder))
             return;
@@ -1900,10 +1912,10 @@ class DateFieldSecondSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
-    #onfocusout = () => {
+    }
+    onfocusout(_) {
         this.#root.states.second.hasLeftFocus = true;
-    };
+    }
     props = $derived.by(() => {
         const segmentValues = this.#root.segmentValues;
         const placeholder = this.#root.placeholder.current;
@@ -1925,8 +1937,8 @@ class DateFieldSecondSegmentState {
             "aria-valuemax": valueMax,
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
-            onfocusout: this.#onfocusout,
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("second", this.#id.current),
         };
@@ -1944,6 +1956,7 @@ class DateFieldDayPeriodSegmentState {
         this.#root = root;
         this.#announcer = this.#root.announcer;
         this.#updateSegment = this.#root.updateSegment;
+        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -1952,7 +1965,7 @@ class DateFieldDayPeriodSegmentState {
             },
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
             return;
         if (e.key !== kbd.TAB)
@@ -1990,7 +2003,7 @@ class DateFieldDayPeriodSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
+    }
     props = $derived.by(() => {
         const segmentValues = this.#root.segmentValues;
         if (!("dayPeriod" in segmentValues))
@@ -2008,7 +2021,7 @@ class DateFieldDayPeriodSegmentState {
             "aria-valuemax": valueMax,
             "aria-valuenow": valueNow,
             "aria-valuetext": valueText,
-            onkeydown: this.#onkeydown,
+            onkeydown: this.onkeydown,
             onclick: this.#root.handleSegmentClick,
             ...this.#root.getBaseSegmentAttrs("dayPeriod", this.#id.current),
         };
@@ -2041,12 +2054,13 @@ class DateFieldTimeZoneSegmentState {
         this.#id = props.id;
         this.#ref = props.ref;
         this.#root = root;
+        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
         if (e.key !== kbd.TAB)
             e.preventDefault();
         if (this.#root.disabled.current)
@@ -2054,7 +2068,7 @@ class DateFieldTimeZoneSegmentState {
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.#root.getFieldNode());
         }
-    };
+    }
     props = $derived.by(() => ({
         role: "textbox",
         id: this.#id.current,
@@ -2062,7 +2076,7 @@ class DateFieldTimeZoneSegmentState {
         style: {
             caretColor: "transparent",
         },
-        onkeydown: this.#onkeydown,
+        onkeydown: this.onkeydown,
         tabindex: 0,
         ...this.#root.getBaseSegmentAttrs("timeZoneName", this.#id.current),
         "data-readonly": getDataReadonly(true),
@@ -2085,43 +2099,46 @@ function isArrowDown(key) {
 function isBackspace(key) {
     return key === kbd.BACKSPACE;
 }
-const [setDateFieldRootContext, getDateFieldRootContext] = createContext("DateField.Root");
+const DateFieldRootContext = new Context("DateField.Root");
 export function useDateFieldRoot(props, rangeRoot) {
-    return setDateFieldRootContext(new DateFieldRootState(props, rangeRoot));
+    return DateFieldRootContext.set(new DateFieldRootState(props, rangeRoot));
 }
 export function useDateFieldInput(props) {
-    return getDateFieldRootContext().createInput(props);
+    return new DateFieldInputState(props, DateFieldRootContext.get());
 }
 export function useDateFieldHiddenInput() {
-    return getDateFieldRootContext().createHiddenInput();
+    return new DateFieldHiddenInputState(DateFieldRootContext.get());
 }
 export function useDateFieldSegment(part, props) {
-    return getDateFieldRootContext().createSegment(part, props);
+    return segmentPartToInstance({
+        part,
+        segmentProps: props,
+        root: DateFieldRootContext.get(),
+    });
 }
 export function useDateFieldLabel(props) {
-    return getDateFieldRootContext().createLabel(props);
+    return new DateFieldLabelState(props, DateFieldRootContext.get());
 }
 function segmentPartToInstance(props) {
-    const { part, root, segmentProps } = props;
-    switch (part) {
+    switch (props.part) {
         case "day":
-            return new DateFieldDaySegmentState(segmentProps, root);
+            return new DateFieldDaySegmentState(props.segmentProps, props.root);
         case "month":
-            return new DateFieldMonthSegmentState(segmentProps, root);
+            return new DateFieldMonthSegmentState(props.segmentProps, props.root);
         case "year":
-            return new DateFieldYearSegmentState(segmentProps, root);
+            return new DateFieldYearSegmentState(props.segmentProps, props.root);
         case "hour":
-            return new DateFieldHourSegmentState(segmentProps, root);
+            return new DateFieldHourSegmentState(props.segmentProps, props.root);
         case "minute":
-            return new DateFieldMinuteSegmentState(segmentProps, root);
+            return new DateFieldMinuteSegmentState(props.segmentProps, props.root);
         case "second":
-            return new DateFieldSecondSegmentState(segmentProps, root);
+            return new DateFieldSecondSegmentState(props.segmentProps, props.root);
         case "dayPeriod":
-            return new DateFieldDayPeriodSegmentState(segmentProps, root);
+            return new DateFieldDayPeriodSegmentState(props.segmentProps, props.root);
         case "literal":
-            return new DateFieldDayLiteralSegmentState(segmentProps, root);
+            return new DateFieldDayLiteralSegmentState(props.segmentProps, props.root);
         case "timeZoneName":
-            return new DateFieldTimeZoneSegmentState(segmentProps, root);
+            return new DateFieldTimeZoneSegmentState(props.segmentProps, props.root);
     }
 }
 function prependYearZeros(year) {