bits-ui 1.5.2 → 1.6.0

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

@@ -13,6 +13,60 @@ import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils
 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";
+const SEGMENT_CONFIGS = {
+    day: {
+        min: 1,
+        max: (root) => {
+            const segmentMonthValue = root.segmentValues.month;
+            const placeholder = root.value.current ?? root.placeholder.current;
+            return segmentMonthValue
+                ? getDaysInMonth(placeholder.set({ month: Number.parseInt(segmentMonthValue) }))
+                : getDaysInMonth(placeholder);
+        },
+        cycle: 1,
+        padZero: true,
+    },
+    month: {
+        min: 1,
+        max: 12,
+        cycle: 1,
+        padZero: true,
+        getAnnouncement: (month, root) => `${month} - ${root.formatter.fullMonth(toDate(root.placeholder.current.set({ month })))}`,
+    },
+    year: {
+        min: 1,
+        max: 9999,
+        cycle: 1,
+        padZero: false,
+    },
+    hour: {
+        min: (root) => (root.hourCycle.current === 12 ? 1 : 0),
+        max: (root) => {
+            if (root.hourCycle.current === 24)
+                return 23;
+            if ("dayPeriod" in root.segmentValues && root.segmentValues.dayPeriod !== null)
+                return 12;
+            return 23;
+        },
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+    minute: {
+        min: 0,
+        max: 59,
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+    second: {
+        min: 0,
+        max: 59,
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+};
 export class DateFieldRootState {
     value;
     placeholder;
@@ -579,498 +633,277 @@ class DateFieldLabelState {
         onclick: this.onclick,
     }));
 }
-class DateFieldDaySegmentState {
+// Base class for numeric segments
+class BaseNumericSegmentState {
     opts;
     root;
-    #announcer;
-    constructor(opts, root) {
+    announcer;
+    part;
+    config;
+    constructor(opts, root, part, config) {
         this.opts = opts;
         this.root = root;
-        this.#announcer = this.root.announcer;
+        this.part = part;
+        this.config = config;
+        this.announcer = root.announcer;
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
         useRefById(opts);
     }
+    #getMax() {
+        return typeof this.config.max === "function" ? this.config.max(this.root) : this.config.max;
+    }
+    #getMin() {
+        return typeof this.config.min === "function" ? this.config.min(this.root) : this.config.min;
+    }
+    #getAnnouncement(value) {
+        if (this.config.getAnnouncement) {
+            return this.config.getAnnouncement(value, this.root);
+        }
+        return value;
+    }
+    #formatValue(value, forDisplay = true) {
+        const str = String(value);
+        if (forDisplay && this.config.padZero && str.length === 1) {
+            return `0${value}`;
+        }
+        return str;
+    }
     onkeydown(e) {
-        const placeholder = this.root.placeholder.current;
+        const placeholder = this.root.value.current ?? this.root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.root.disabled.current)
             return;
+        // Special check for time segments
+        if ((this.part === "hour" || this.part === "minute" || this.part === "second") &&
+            !(this.part in placeholder))
+            return;
         if (e.key !== kbd.TAB)
             e.preventDefault();
         if (!isAcceptableSegmentKey(e.key))
             return;
-        const segmentMonthValue = this.root.segmentValues.month;
-        const daysInMonth = segmentMonthValue
-            ? getDaysInMonth(placeholder.set({ month: Number.parseInt(segmentMonthValue) }))
-            : getDaysInMonth(placeholder);
         if (isArrowUp(e.key)) {
-            this.root.updateSegment("day", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.day;
-                    this.#announcer.announce(next);
-                    if (next < 10)
-                        return `0${next}`;
-                    return `${next}`;
-                }
-                const next = placeholder.set({ day: Number.parseInt(prev) }).cycle("day", 1).day;
-                this.#announcer.announce(next);
-                if (next < 10)
-                    return `0${next}`;
-                return `${next}`;
-            });
+            this.#handleArrowUp(placeholder);
             return;
         }
         if (isArrowDown(e.key)) {
-            this.root.updateSegment("day", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.day;
-                    this.#announcer.announce(next);
-                    if (next < 10)
-                        return `0${next}`;
-                    return `${next}`;
-                }
-                const next = placeholder.set({ day: Number.parseInt(prev) }).cycle("day", -1).day;
-                this.#announcer.announce(next);
-                if (next < 10)
-                    return `0${next}`;
-                return `${next}`;
-            });
+            this.#handleArrowDown(placeholder);
             return;
         }
-        const fieldNode = this.root.getFieldNode();
         if (isNumberString(e.key)) {
-            const num = Number.parseInt(e.key);
-            let moveToNext = false;
-            this.root.updateSegment("day", (prev) => {
-                const max = daysInMonth;
-                const maxStart = Math.floor(max / 10);
-                const numIsZero = num === 0;
-                /**
-                 * If the user has left the segment, we want to reset the
-                 * `prev` value so that we can start the segment over again
-                 * when the user types a number.
-                 */
-                if (this.root.states.day.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.day.hasLeftFocus = false;
-                }
-                /**
-                 * We are starting over in the segment if prev is null, which could
-                 * happen in one of two scenarios:
-                 * - the user has left the segment and then comes back to it
-                 * - the segment was empty and the user begins typing a number
-                 */
-                if (prev === null) {
-                    /**
-                     * If the user types a 0 as the first number, we want
-                     * to keep track of that so that when they type the next
-                     * number, we can move to the next segment.
-                     */
-                    if (numIsZero) {
-                        this.root.states.day.lastKeyZero = true;
-                        this.#announcer.announce("0");
-                        return "0";
-                    }
-                    ///////////////////////////
-                    /**
-                     * If the last key was a 0, or if the first number is
-                     * greater than the max start digit (0-3 in most cases), then
-                     * we want to move to the next segment, since it's not possible
-                     * to continue typing a valid number in this segment.
-                     */
-                    if (this.root.states.day.lastKeyZero || num > maxStart) {
-                        moveToNext = true;
-                    }
-                    this.root.states.day.lastKeyZero = false;
-                    /**
-                     * If we're moving to the next segment and the number is less than
-                     * two digits, we want to announce the number and return it with a
-                     * leading zero to follow the placeholder format of `MM/DD/YYYY`.
-                     */
-                    if (moveToNext && String(num).length === 1) {
-                        this.#announcer.announce(num);
-                        return `0${num}`;
-                    }
-                    /**
-                     * If none of the above conditions are met, then we can just
-                     * return the number as the segment value and continue typing
-                     * in this segment.
-                     */
-                    return `${num}`;
-                }
-                /**
-                 * If the number of digits is 2, or if the total with the existing digit
-                 * and the pressed digit is greater than the maximum value for this
-                 * month, then we will reset the segment as if the user had pressed the
-                 * backspace key and then typed the number.
-                 */
-                const total = Number.parseInt(prev + num.toString());
-                if (this.root.states.day.lastKeyZero) {
-                    /**
-                     * If the new number is not 0, then we reset the lastKeyZero state and
-                     * move to the next segment, returning the new number with a leading 0.
-                     */
-                    if (num !== 0) {
-                        moveToNext = true;
-                        this.root.states.day.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.
-                     */
-                    return prev;
-                }
-                /**
-                 * If the total is greater than the max day value possible for this month, then
-                 * we want to move to the next segment, trimming the first digit from the total,
-                 * replacing it with a 0.
-                 */
-                if (total > max) {
-                    moveToNext = true;
-                    return `0${num}`;
-                }
-                /**
-                 * If the total has two digits and is less than or equal to the max day value,
-                 * we will move to the next segment and return the total as the segment value.
-                 */
-                moveToNext = true;
-                return `${total}`;
-            });
-            if (moveToNext) {
-                moveToNextSegment(e, fieldNode);
-            }
+            this.#handleNumberKey(e);
+            return;
         }
         if (isBackspace(e.key)) {
-            let moveToPrev = false;
-            this.root.updateSegment("day", (prev) => {
-                this.root.states.day.hasLeftFocus = false;
-                if (prev === null) {
-                    moveToPrev = true;
-                    return null;
-                }
-                if (prev.length === 2 && prev.startsWith("0")) {
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1)
-                    return null;
-                return str.slice(0, -1);
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, fieldNode);
-            }
+            this.#handleBackspace(e);
+            return;
         }
         if (isSegmentNavigationKey(e.key)) {
-            handleSegmentNavigation(e, fieldNode);
+            handleSegmentNavigation(e, this.root.getFieldNode());
         }
     }
-    onfocusout(_) {
-        this.root.states.day.hasLeftFocus = true;
-        this.root.updateSegment("month", (prev) => {
-            if (prev && prev.length === 1) {
-                return `0${prev}`;
+    #handleArrowUp(placeholder) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
+        }
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                const next = placeholder[this.part];
+                this.announcer.announce(this.#getAnnouncement(next));
+                return this.#formatValue(next);
             }
-            return prev;
+            const current = placeholder.set({
+                [this.part]: Number.parseInt(prev),
+            });
+            // @ts-expect-error this is a part
+            const next = current.cycle(this.part, this.config.cycle)[this.part];
+            this.announcer.announce(this.#getAnnouncement(next));
+            return this.#formatValue(next);
         });
     }
-    props = $derived.by(() => {
-        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.opts.id.current,
-            "aria-label": "day,",
-            "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.opts.id.current),
-        };
-    });
-}
-class DateFieldMonthSegmentState {
-    opts;
-    root;
-    #announcer;
-    constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.#announcer = this.root.announcer;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
-    }
-    #getAnnouncement(month) {
-        return `${month} - ${this.root.formatter.fullMonth(toDate(this.root.placeholder.current.set({ month })))}`;
+    #handleArrowDown(placeholder) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
+        }
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                const next = placeholder[this.part];
+                this.announcer.announce(this.#getAnnouncement(next));
+                return this.#formatValue(next);
+            }
+            const current = placeholder.set({
+                [this.part]: Number.parseInt(prev),
+            });
+            // @ts-expect-error this is a part
+            const next = current.cycle(this.part, -this.config.cycle)[this.part];
+            this.announcer.announce(this.#getAnnouncement(next));
+            return this.#formatValue(next);
+        });
     }
-    onkeydown(e) {
-        if (e.ctrlKey || e.metaKey || this.root.disabled.current)
-            return;
-        if (e.key !== kbd.TAB)
-            e.preventDefault();
-        if (!isAcceptableSegmentKey(e.key))
-            return;
-        const max = 12;
-        if (isArrowUp(e.key)) {
-            this.root.updateSegment("month", (prev) => {
-                if (prev === null) {
-                    const next = this.root.placeholder.current.month;
-                    this.#announcer.announce(this.#getAnnouncement(next));
-                    if (String(next).length === 1) {
-                        return `0${next}`;
+    #handleNumberKey(e) {
+        const num = Number.parseInt(e.key);
+        let moveToNext = false;
+        const max = this.#getMax();
+        const maxStart = Math.floor(max / 10);
+        const numIsZero = num === 0;
+        const stateKey = this.part;
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            // Check if user has left focus
+            if (stateKey in this.root.states && this.root.states[stateKey].hasLeftFocus) {
+                prev = null;
+                this.root.states[stateKey].hasLeftFocus = false;
+            }
+            // Starting fresh
+            if (prev === null) {
+                if (numIsZero) {
+                    if (stateKey in this.root.states) {
+                        this.root.states[stateKey].lastKeyZero = true;
                     }
-                    return `${next}`;
-                }
-                const next = this.root.placeholder.current
-                    .set({ month: Number.parseInt(prev) })
-                    .cycle("month", 1).month;
-                this.#announcer.announce(this.#getAnnouncement(next));
-                if (String(next).length === 1) {
-                    return `0${next}`;
+                    this.announcer.announce("0");
+                    return "0";
                 }
-                return `${next}`;
-            });
-            return;
-        }
-        if (isArrowDown(e.key)) {
-            this.root.updateSegment("month", (prev) => {
-                if (prev === null) {
-                    const next = this.root.placeholder.current.month;
-                    this.#announcer.announce(this.#getAnnouncement(next));
-                    if (String(next).length === 1) {
-                        return `0${next}`;
-                    }
-                    return `${next}`;
+                if (stateKey in this.root.states &&
+                    (this.root.states[stateKey].lastKeyZero || num > maxStart)) {
+                    moveToNext = true;
                 }
-                const next = this.root.placeholder.current
-                    .set({ month: Number.parseInt(prev) })
-                    .cycle("month", -1).month;
-                this.#announcer.announce(this.#getAnnouncement(next));
-                if (String(next).length === 1) {
-                    return `0${next}`;
+                if (stateKey in this.root.states) {
+                    this.root.states[stateKey].lastKeyZero = false;
                 }
-                return `${next}`;
-            });
-            return;
-        }
-        if (isNumberString(e.key)) {
-            const num = Number.parseInt(e.key);
-            let moveToNext = false;
-            this.root.updateSegment("month", (prev) => {
-                const maxStart = Math.floor(max / 10);
-                const numIsZero = num === 0;
-                /**
-                 * If the user has left the segment, we want to reset the
-                 * `prev` value so that we can start the segment over again
-                 * when the user types a number.
-                 */
-                if (this.root.states.month.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.month.hasLeftFocus = false;
+                if (moveToNext && String(num).length === 1) {
+                    this.announcer.announce(num);
+                    return `0${num}`;
                 }
-                /**
-                 * We are starting over in the segment if prev is null, which could
-                 * happen in one of two scenarios:
-                 * - the user has left the segment and then comes back to it
-                 * - the segment was empty and the user begins typing a number
-                 */
-                if (prev === null) {
-                    /**
-                     * If the user types a 0 as the first number, we want
-                     * to keep track of that so that when they type the next
-                     * number, we can move to the next segment.
-                     */
-                    if (numIsZero) {
-                        this.root.states.month.lastKeyZero = true;
-                        this.#announcer.announce("0");
-                        return "0";
-                    }
-                    ///////////////////////////
-                    /**
-                     * If the last key was a 0, or if the first number is
-                     * greater than the max start digit (0-3 in most cases), then
-                     * we want to move to the next segment, since it's not possible
-                     * to continue typing a valid number in this segment.
-                     */
-                    if (this.root.states.month.lastKeyZero || num > maxStart) {
-                        moveToNext = true;
-                    }
-                    this.root.states.month.lastKeyZero = false;
-                    /**
-                     * If we're moving to the next segment and the number is less than
-                     * two digits, we want to announce the number and return it with a
-                     * leading zero to follow the placeholder format of `MM/DD/YYYY`.
-                     */
-                    if (moveToNext && String(num).length === 1) {
-                        this.#announcer.announce(num);
-                        return `0${num}`;
-                    }
-                    /**
-                     * If none of the above conditions are met, then we can just
-                     * return the number as the segment value and continue typing
-                     * in this segment.
-                     */
-                    return `${num}`;
+                return `${num}`;
+            }
+            // Handle special cases for segments with lastKeyZero tracking
+            if (stateKey in this.root.states && this.root.states[stateKey].lastKeyZero) {
+                if (num !== 0) {
+                    moveToNext = true;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return `0${num}`;
                 }
-                /**
-                 * If the number of digits is 2, or if the total with the existing digit
-                 * and the pressed digit is greater than the maximum value for this
-                 * month, then we will reset the segment as if the user had pressed the
-                 * backspace key and then typed the number.
-                 */
-                const total = Number.parseInt(prev + num.toString());
-                if (this.root.states.month.lastKeyZero) {
-                    /**
-                     * If the new number is not 0, then we reset the lastKeyZero state and
-                     * move to the next segment, returning the new number with a leading 0.
-                     */
-                    if (num !== 0) {
-                        moveToNext = true;
-                        this.root.states.month.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.
-                     */
-                    return prev;
+                // Special handling for hour segment with 24-hour cycle
+                if (this.part === "hour" && num === 0 && this.root.hourCycle.current === 24) {
+                    moveToNext = true;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return `00`;
                 }
-                /**
-                 * If the total is greater than the max day value possible for this month, then
-                 * we want to move to the next segment, trimming the first digit from the total,
-                 * replacing it with a 0.
-                 */
-                if (total > max) {
+                // Special handling for minute/second segments
+                if ((this.part === "minute" || this.part === "second") && num === 0) {
                     moveToNext = true;
-                    return `0${num}`;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return "00";
                 }
-                /**
-                 * If the total has two digits and is less than or equal to the max day value,
-                 * we will move to the next segment and return the total as the segment value.
-                 */
+                return prev;
+            }
+            const total = Number.parseInt(prev + num.toString());
+            if (total > max) {
                 moveToNext = true;
-                return `${total}`;
-            });
-            if (moveToNext) {
-                moveToNextSegment(e, this.root.getFieldNode());
+                return `0${num}`;
             }
+            moveToNext = true;
+            return `${total}`;
+        });
+        if (moveToNext) {
+            moveToNextSegment(e, this.root.getFieldNode());
         }
-        if (isBackspace(e.key)) {
-            this.root.states.month.hasLeftFocus = false;
-            let moveToPrev = false;
-            this.root.updateSegment("month", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(null);
-                    moveToPrev = true;
-                    return null;
-                }
-                if (prev.length === 2 && prev.startsWith("0")) {
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1) {
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const next = Number.parseInt(str.slice(0, -1));
-                this.#announcer.announce(this.#getAnnouncement(next));
-                return `${next}`;
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, this.root.getFieldNode());
-            }
+    }
+    #handleBackspace(e) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
         }
-        if (isSegmentNavigationKey(e.key)) {
-            handleSegmentNavigation(e, this.root.getFieldNode());
+        let moveToPrev = false;
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                moveToPrev = true;
+                this.announcer.announce(null);
+                return null;
+            }
+            if (prev.length === 2 && prev.startsWith("0")) {
+                this.announcer.announce(null);
+                return null;
+            }
+            const str = prev.toString();
+            if (str.length === 1) {
+                this.announcer.announce(null);
+                return null;
+            }
+            const next = Number.parseInt(str.slice(0, -1));
+            this.announcer.announce(this.#getAnnouncement(next));
+            return `${next}`;
+        });
+        if (moveToPrev) {
+            moveToPrevSegment(e, this.root.getFieldNode());
         }
     }
     onfocusout(_) {
-        this.root.states.month.hasLeftFocus = true;
-        this.root.updateSegment("month", (prev) => {
-            if (prev && prev.length === 1) {
-                return `0${prev}`;
-            }
-            return prev;
-        });
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = true;
+        }
+        // Pad with zero if needed
+        if (this.config.padZero) {
+            // @ts-expect-error this is a part
+            this.root.updateSegment(this.part, (prev) => {
+                if (prev && prev.length === 1) {
+                    return `0${prev}`;
+                }
+                return prev;
+            });
+        }
+    }
+    getSegmentProps() {
+        const segmentValues = this.root.segmentValues;
+        const placeholder = this.root.placeholder.current;
+        const isEmpty = segmentValues[this.part] === null;
+        let date = placeholder;
+        if (segmentValues[this.part]) {
+            date = placeholder.set({
+                [this.part]: Number.parseInt(segmentValues[this.part]),
+            });
+        }
+        const valueNow = date[this.part];
+        const valueMin = this.#getMin();
+        const valueMax = this.#getMax();
+        let valueText = isEmpty ? "Empty" : `${valueNow}`;
+        // Special handling for hour segment with dayPeriod
+        if (this.part === "hour" && "dayPeriod" in segmentValues && segmentValues.dayPeriod) {
+            valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
+        }
+        return {
+            "aria-label": `${this.part}, `,
+            "aria-valuemin": valueMin,
+            "aria-valuemax": valueMax,
+            "aria-valuenow": valueNow,
+            "aria-valuetext": valueText,
+        };
     }
     props = $derived.by(() => {
-        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.opts.id.current,
-            "aria-label": "month, ",
-            contenteditable: "true",
-            "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))}`,
+            ...this.getSegmentProps(),
             onkeydown: this.onkeydown,
             onfocusout: this.onfocusout,
             onclick: this.root.handleSegmentClick,
-            ...this.root.getBaseSegmentAttrs("month", this.opts.id.current),
+            ...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
         };
     });
 }
-class DateFieldYearSegmentState {
-    opts;
-    root;
-    #announcer;
-    /**
-     * When typing a year, a user may want to type `0090` to represent `90`.
-     * So we track the keys they've pressed in this specific interaction to
-     * determine once they've pressed four to move to the next segment.
-     *
-     * On `focusout` this is reset to an empty array.
-     */
+// Year segment needs special handling
+class DateFieldYearSegmentState extends BaseNumericSegmentState {
     #pressedKeys = [];
-    /**
-     * When a user re-enters a completed segment and backspaces, if they have
-     * leading zeroes on the year, they won't automatically be sent to the next
-     * segment even if they complete all 4 digits. This is because the leading zeroes
-     * get stripped out for the digit count.
-     *
-     * This lets us keep track of how many times the user has backspaced in a row
-     * to determine how many additional key presses should move them to the next segment.
-     *
-     * For example, if the user has `0098` in the year segment and backspaces once,
-     * the segment will contain `009` and if the user types `7`, the segment should
-     * contain `0097` and move to the next segment.
-     *
-     * If the segment contains `0100` and the user backspaces twice, the segment will
-     * contain `01` and if the user types `2`, the segment should contain `012` and
-     * it should _not_ move to the next segment until the user types another digit.
-     */
     #backspaceCount = 0;
     constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.#announcer = this.root.announcer;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
-    }
-    #resetBackspaceCount() {
-        this.#backspaceCount = 0;
-    }
-    #incrementBackspaceCount() {
-        this.#backspaceCount++;
+        super(opts, root, "year", SEGMENT_CONFIGS.year);
     }
     onkeydown(e) {
-        const placeholder = this.root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.root.disabled.current)
             return;
         if (e.key !== kbd.TAB)
@@ -1079,114 +912,97 @@ class DateFieldYearSegmentState {
             return;
         if (isArrowUp(e.key)) {
             this.#resetBackspaceCount();
-            this.root.updateSegment("year", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.year;
-                    this.#announcer.announce(next);
-                    return `${next}`;
-                }
-                const next = placeholder.set({ year: Number.parseInt(prev) }).cycle("year", 1).year;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
+            super.onkeydown(e);
             return;
         }
         if (isArrowDown(e.key)) {
             this.#resetBackspaceCount();
-            this.root.updateSegment("year", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.year;
-                    this.#announcer.announce(next);
-                    return `${next}`;
-                }
-                const next = placeholder
-                    .set({ year: Number.parseInt(prev) })
-                    .cycle("year", -1).year;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
+            super.onkeydown(e);
             return;
         }
         if (isNumberString(e.key)) {
-            this.#pressedKeys.push(e.key);
-            let moveToNext = false;
-            const num = Number.parseInt(e.key);
-            this.root.updateSegment("year", (prev) => {
-                if (this.root.states.year.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.year.hasLeftFocus = false;
-                }
-                if (prev === null) {
-                    this.#announcer.announce(num);
-                    return `000${num}`;
-                }
-                const str = prev.toString() + num.toString();
-                const mergedInt = Number.parseInt(str);
-                const mergedIntDigits = String(mergedInt).length;
-                if (mergedIntDigits < 4) {
-                    /**
-                     * If the user has backspaced and hasn't typed enough digits to make up
-                     * for the amount of backspaces, then we want to keep them in the segment
-                     * and not prepend any zeroes to the number.
-                     */
-                    if (this.#backspaceCount > 0 &&
-                        this.#pressedKeys.length <= this.#backspaceCount &&
-                        str.length <= 4) {
-                        this.#announcer.announce(mergedInt);
-                        return str;
-                    }
-                    /**
-                     * If the mergedInt is less than 4 digits and we haven't backspaced,
-                     * then we want to prepend zeroes to the number to keep the format
-                     * of `YYYY`
-                     */
-                    this.#announcer.announce(mergedInt);
-                    return prependYearZeros(mergedInt);
-                }
-                this.#announcer.announce(mergedInt);
-                moveToNext = true;
-                const mergedIntStr = `${mergedInt}`;
-                if (mergedIntStr.length > 4) {
-                    return mergedIntStr.slice(0, 4);
-                }
-                return mergedIntStr;
-            });
-            if (this.#pressedKeys.length === 4 ||
-                this.#pressedKeys.length === this.#backspaceCount) {
-                moveToNext = true;
-            }
-            if (moveToNext) {
-                moveToNextSegment(e, this.root.getFieldNode());
-            }
+            this.#handleYearNumberKey(e);
+            return;
         }
         if (isBackspace(e.key)) {
-            this.#pressedKeys = [];
-            this.#incrementBackspaceCount();
-            let moveToPrev = false;
-            this.root.updateSegment("year", (prev) => {
-                this.root.states.year.hasLeftFocus = false;
-                if (prev === null) {
-                    moveToPrev = true;
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1) {
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const next = str.slice(0, -1);
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, this.root.getFieldNode());
-            }
+            this.#handleYearBackspace(e);
+            return;
         }
         if (isSegmentNavigationKey(e.key)) {
             handleSegmentNavigation(e, this.root.getFieldNode());
         }
     }
+    #resetBackspaceCount() {
+        this.#backspaceCount = 0;
+    }
+    #incrementBackspaceCount() {
+        this.#backspaceCount++;
+    }
+    #handleYearNumberKey(e) {
+        this.#pressedKeys.push(e.key);
+        let moveToNext = false;
+        const num = Number.parseInt(e.key);
+        this.root.updateSegment("year", (prev) => {
+            if (this.root.states.year.hasLeftFocus) {
+                prev = null;
+                this.root.states.year.hasLeftFocus = false;
+            }
+            if (prev === null) {
+                this.announcer.announce(num);
+                return `000${num}`;
+            }
+            const str = prev.toString() + num.toString();
+            const mergedInt = Number.parseInt(str);
+            const mergedIntDigits = String(mergedInt).length;
+            if (mergedIntDigits < 4) {
+                if (this.#backspaceCount > 0 &&
+                    this.#pressedKeys.length <= this.#backspaceCount &&
+                    str.length <= 4) {
+                    this.announcer.announce(mergedInt);
+                    return str;
+                }
+                this.announcer.announce(mergedInt);
+                return prependYearZeros(mergedInt);
+            }
+            this.announcer.announce(mergedInt);
+            moveToNext = true;
+            const mergedIntStr = `${mergedInt}`;
+            if (mergedIntStr.length > 4) {
+                return mergedIntStr.slice(0, 4);
+            }
+            return mergedIntStr;
+        });
+        if (this.#pressedKeys.length === 4 || this.#pressedKeys.length === this.#backspaceCount) {
+            moveToNext = true;
+        }
+        if (moveToNext) {
+            moveToNextSegment(e, this.root.getFieldNode());
+        }
+    }
+    #handleYearBackspace(e) {
+        this.#pressedKeys = [];
+        this.#incrementBackspaceCount();
+        let moveToPrev = false;
+        this.root.updateSegment("year", (prev) => {
+            this.root.states.year.hasLeftFocus = false;
+            if (prev === null) {
+                moveToPrev = true;
+                this.announcer.announce(null);
+                return null;
+            }
+            const str = prev.toString();
+            if (str.length === 1) {
+                this.announcer.announce(null);
+                return null;
+            }
+            const next = str.slice(0, -1);
+            this.announcer.announce(next);
+            return `${next}`;
+        });
+        if (moveToPrev) {
+            moveToPrevSegment(e, this.root.getFieldNode());
+        }
+    }
     onfocusout(_) {
         this.root.states.year.hasLeftFocus = true;
         this.#pressedKeys = [];
@@ -1198,703 +1014,56 @@ class DateFieldYearSegmentState {
             return prev;
         });
     }
-    props = $derived.by(() => {
-        const segmentValues = this.root.segmentValues;
-        const placeholder = this.root.placeholder.current;
-        const isEmpty = segmentValues.year === null;
-        const date = segmentValues.year
-            ? placeholder.set({ year: Number.parseInt(segmentValues.year) })
-            : placeholder;
-        const valueMin = 1;
-        const valueMax = 9999;
-        const valueNow = date.year;
-        const valueText = isEmpty ? "Empty" : `${valueNow}`;
-        return {
-            ...this.root.sharedSegmentAttrs,
-            id: this.opts.id.current,
-            "aria-label": "year, ",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.onkeydown,
-            onclick: this.root.handleSegmentClick,
-            onfocusout: this.onfocusout,
-            ...this.root.getBaseSegmentAttrs("year", this.opts.id.current),
-        };
-    });
 }
-class DateFieldHourSegmentState {
-    opts;
-    root;
-    #announcer;
+// Create segment states using the base class
+class DateFieldDaySegmentState extends BaseNumericSegmentState {
     constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.#announcer = this.root.announcer;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
-    }
-    onkeydown(e) {
-        const placeholder = this.root.placeholder.current;
-        if (e.ctrlKey || e.metaKey || this.root.disabled.current || !("hour" in placeholder))
-            return;
-        if (e.key !== kbd.TAB)
-            e.preventDefault();
-        if (!isAcceptableSegmentKey(e.key))
-            return;
-        const hourCycle = this.root.hourCycle.current;
-        if (isArrowUp(e.key)) {
-            this.root.updateSegment("hour", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.cycle("hour", 1, { hourCycle }).hour;
-                    this.#announcer.announce(next);
-                    return `${next}`;
-                }
-                const next = placeholder
-                    .set({ hour: Number.parseInt(prev) })
-                    .cycle("hour", 1, { hourCycle }).hour;
-                if (next === 0 &&
-                    "dayPeriod" in this.root.segmentValues &&
-                    this.root.segmentValues.dayPeriod !== null &&
-                    this.root.hourCycle.current !== 24) {
-                    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}`;
-            });
-            return;
-        }
-        if (isArrowDown(e.key)) {
-            this.root.updateSegment("hour", (prev) => {
-                if (prev === null) {
-                    const next = placeholder.cycle("hour", -1, { hourCycle }).hour;
-                    this.#announcer.announce(next);
-                    return `${next}`;
-                }
-                const next = placeholder
-                    .set({ hour: Number.parseInt(prev) })
-                    .cycle("hour", -1, { hourCycle }).hour;
-                if (next === 0 &&
-                    "dayPeriod" in this.root.segmentValues &&
-                    this.root.segmentValues.dayPeriod !== null &&
-                    this.root.hourCycle.current !== 24) {
-                    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}`;
-            });
-            return;
-        }
-        if (isNumberString(e.key)) {
-            const num = Number.parseInt(e.key);
-            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;
-            this.root.updateSegment("hour", (prev) => {
-                /**
-                 * If the user has left the segment, we want to reset the
-                 * `prev` value so that we can start the segment over again
-                 * when the user types a number.
-                 */
-                if (this.root.states.hour.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.hour.hasLeftFocus = false;
-                }
-                /**
-                 * We are starting over in the segment if prev is null, which could
-                 * happen in one of two scenarios:
-                 * - the user has left the segment and then comes back to it
-                 * - the segment was empty and the user begins typing a number
-                 */
-                if (prev === null) {
-                    /**
-                     * If the user types a 0 as the first number, we want
-                     * to keep track of that so that when they type the next
-                     * number, we can move to the next segment.
-                     */
-                    if (numIsZero) {
-                        this.root.states.hour.lastKeyZero = true;
-                        this.#announcer.announce("0");
-                        return "0";
-                    }
-                    ///////////////////////////
-                    /**
-                     * If the last key was a 0, or if the first number is
-                     * greater than the max start digit (0-3 in most cases), then
-                     * we want to move to the next segment, since it's not possible
-                     * to continue typing a valid number in this segment.
-                     */
-                    if (this.root.states.hour.lastKeyZero || num > maxStart) {
-                        moveToNext = true;
-                    }
-                    this.root.states.hour.lastKeyZero = false;
-                    /**
-                     * If we're moving to the next segment and the number is less than
-                     * two digits, we want to announce the number and return it with a
-                     * leading zero to follow the placeholder format of `MM/DD/YYYY`.
-                     */
-                    if (moveToNext && String(num).length === 1) {
-                        this.#announcer.announce(num);
-                        return `0${num}`;
-                    }
-                    /**
-                     * If none of the above conditions are met, then we can just
-                     * return the number as the segment value and continue typing
-                     * in this segment.
-                     */
-                    return `${num}`;
-                }
-                /**
-                 * If the number of digits is 2, or if the total with the existing digit
-                 * and the pressed digit is greater than the maximum value for this
-                 * hour, then we will reset the segment as if the user had pressed the
-                 * backspace key and then typed the number.
-                 */
-                const total = Number.parseInt(prev + num.toString());
-                if (this.root.states.hour.lastKeyZero) {
-                    /**
-                     * If the new number is not 0, then we reset the lastKeyZero state and
-                     * move to the next segment, returning the new number with a leading 0.
-                     */
-                    if (num !== 0) {
-                        moveToNext = true;
-                        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.
-                     */
-                    return prev;
-                }
-                /**
-                 * If the total is greater than the max day value possible for this month, then
-                 * we want to move to the next segment, trimming the first digit from the total,
-                 * replacing it with a 0.
-                 */
-                if (total > max) {
-                    moveToNext = true;
-                    return `0${num}`;
-                }
-                /**
-                 * If the total has two digits and is less than or equal to the max day value,
-                 * we will move to the next segment and return the total as the segment value.
-                 */
-                moveToNext = true;
-                return `${total}`;
-            });
-            if (moveToNext) {
-                moveToNextSegment(e, this.root.getFieldNode());
-            }
-        }
-        if (isBackspace(e.key)) {
-            this.root.states.hour.hasLeftFocus = false;
-            let moveToPrev = false;
-            this.root.updateSegment("hour", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(null);
-                    moveToPrev = true;
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1) {
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const next = Number.parseInt(str.slice(0, -1));
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, this.root.getFieldNode());
-            }
-        }
-        if (isSegmentNavigationKey(e.key)) {
-            handleSegmentNavigation(e, this.root.getFieldNode());
-        }
+        super(opts, root, "day", SEGMENT_CONFIGS.day);
     }
-    onfocusout(_) {
-        this.root.states.hour.hasLeftFocus = true;
+}
+class DateFieldMonthSegmentState extends BaseNumericSegmentState {
+    constructor(opts, root) {
+        super(opts, root, "month", SEGMENT_CONFIGS.month);
     }
-    props = $derived.by(() => {
-        const segmentValues = this.root.segmentValues;
-        const hourCycle = this.root.hourCycle.current;
-        const placeholder = this.root.placeholder.current;
-        if (!("hour" in segmentValues) || !("hour" in placeholder))
-            return {};
-        const isEmpty = segmentValues.hour === null;
-        const date = segmentValues.hour
-            ? placeholder.set({ hour: Number.parseInt(segmentValues.hour) })
-            : placeholder;
-        const valueMin = hourCycle === 12 ? 1 : 0;
-        const valueMax = hourCycle === 12 ? 12 : 23;
-        const valueNow = date.hour;
-        const valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod ?? ""}`;
-        return {
-            ...this.root.sharedSegmentAttrs,
-            id: this.opts.id.current,
-            "aria-label": "hour, ",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.onkeydown,
-            onfocusout: this.onfocusout,
-            onclick: this.root.handleSegmentClick,
-            ...this.root.getBaseSegmentAttrs("hour", this.opts.id.current),
-        };
-    });
 }
-class DateFieldMinuteSegmentState {
-    opts;
-    root;
-    #announcer;
+class DateFieldHourSegmentState extends BaseNumericSegmentState {
     constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.#announcer = this.root.announcer;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
+        super(opts, root, "hour", SEGMENT_CONFIGS.hour);
     }
+    // Override to handle special hour logic
     onkeydown(e) {
-        const placeholder = this.root.placeholder.current;
-        if (e.ctrlKey || e.metaKey || this.root.disabled.current || !("minute" in placeholder))
-            return;
-        if (e.key !== kbd.TAB)
-            e.preventDefault();
-        if (!isAcceptableSegmentKey(e.key))
-            return;
-        const min = 0;
-        const max = 59;
-        if (isArrowUp(e.key)) {
-            this.root.updateSegment("minute", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(min);
-                    return `${min}`;
-                }
-                const next = placeholder
-                    .set({ minute: Number.parseInt(prev) })
-                    .cycle("minute", 1).minute;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            return;
-        }
-        if (isArrowDown(e.key)) {
-            this.root.updateSegment("minute", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(max);
-                    return `${max}`;
-                }
-                const next = placeholder
-                    .set({ minute: Number.parseInt(prev) })
-                    .cycle("minute", -1).minute;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            return;
-        }
+        // Add special handling for hour display with dayPeriod
         if (isNumberString(e.key)) {
-            const num = Number.parseInt(e.key);
-            let moveToNext = false;
-            const numIsZero = num === 0;
-            this.root.updateSegment("minute", (prev) => {
-                const maxStart = Math.floor(max / 10);
-                /**
-                 * If the user has left the segment, we want to reset the
-                 * `prev` value so that we can start the segment over again
-                 * when the user types a number.
-                 */
-                if (this.root.states.minute.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.minute.hasLeftFocus = false;
-                }
-                /**
-                 * We are starting over in the segment if prev is null, which could
-                 * happen in one of two scenarios:
-                 * - the user has left the segment and then comes back to it
-                 * - the segment was empty and the user begins typing a number
-                 */
-                if (prev === null) {
-                    /**
-                     * If the user types a 0 as the first number, we want
-                     * to keep track of that so that when they type the next
-                     * number, we can move to the next segment.
-                     */
-                    if (numIsZero) {
-                        this.root.states.minute.lastKeyZero = true;
-                        this.#announcer.announce("0");
-                        return "0";
+            const oldUpdateSegment = this.root.updateSegment.bind(this.root);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.root.updateSegment = (part, cb) => {
+                const result = oldUpdateSegment(part, cb);
+                // After updating hour, check if we need to display "12" instead of "0"
+                if (part === "hour" && "hour" in this.root.segmentValues) {
+                    const hourValue = this.root.segmentValues.hour;
+                    if (hourValue === "0" &&
+                        this.root.dayPeriodNode &&
+                        this.root.hourCycle.current !== 24) {
+                        this.root.segmentValues.hour = "12";
                     }
-                    ///////////////////////////
-                    /**
-                     * If the last key was a 0, or if the first number is
-                     * greater than the max start digit (0-3 in most cases), then
-                     * we want to move to the next segment, since it's not possible
-                     * to continue typing a valid number in this segment.
-                     */
-                    if (this.root.states.minute.lastKeyZero || num > maxStart) {
-                        moveToNext = true;
-                    }
-                    this.root.states.minute.lastKeyZero = false;
-                    /**
-                     * If we're moving to the next segment and the number is less than
-                     * two digits, we want to announce the number and return it with a
-                     * leading zero to follow the placeholder format of `MM/DD/YYYY`.
-                     */
-                    if (moveToNext && String(num).length === 1) {
-                        this.#announcer.announce(num);
-                        return `0${num}`;
-                    }
-                    /**
-                     * If none of the above conditions are met, then we can just
-                     * return the number as the segment value and continue typing
-                     * in this segment.
-                     */
-                    return `${num}`;
                 }
-                /**
-                 * If the number of digits is 2, or if the total with the existing digit
-                 * and the pressed digit is greater than the maximum value for this
-                 * minute, then we will reset the segment as if the user had pressed the
-                 * backspace key and then typed the number.
-                 */
-                const total = Number.parseInt(prev + num.toString());
-                if (this.root.states.minute.lastKeyZero) {
-                    /**
-                     * If the new number is not 0, then we reset the lastKeyZero state and
-                     * move to the next segment, returning the new number with a leading 0.
-                     */
-                    if (num !== 0) {
-                        moveToNext = true;
-                        this.root.states.minute.lastKeyZero = false;
-                        return `0${num}`;
-                    }
-                    /**
-                     * If the new number is 0, then we simply return `00` since that is
-                     * an acceptable minute value.
-                     */
-                    moveToNext = true;
-                    this.root.states.minute.lastKeyZero = false;
-                    return "00";
-                }
-                /**
-                 * If the total is greater than the max day value possible for this month, then
-                 * we want to move to the next segment, trimming the first digit from the total,
-                 * replacing it with a 0.
-                 */
-                if (total > max) {
-                    moveToNext = true;
-                    return `0${num}`;
-                }
-                /**
-                 * If the total has two digits and is less than or equal to the max day value,
-                 * we will move to the next segment and return the total as the segment value.
-                 */
-                moveToNext = true;
-                return `${total}`;
-            });
-            if (moveToNext) {
-                moveToNextSegment(e, this.root.getFieldNode());
-            }
-            return;
-        }
-        if (isBackspace(e.key)) {
-            this.root.states.minute.hasLeftFocus = false;
-            let moveToPrev = false;
-            this.root.updateSegment("minute", (prev) => {
-                if (prev === null) {
-                    moveToPrev = true;
-                    this.#announcer.announce("Empty");
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1) {
-                    this.#announcer.announce("Empty");
-                    return null;
-                }
-                const next = Number.parseInt(str.slice(0, -1));
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, this.root.getFieldNode());
-            }
-            return;
-        }
-        if (isSegmentNavigationKey(e.key)) {
-            handleSegmentNavigation(e, this.root.getFieldNode());
+                return result;
+            };
         }
+        super.onkeydown(e);
+        // Restore original updateSegment
+        this.root.updateSegment = this.root.updateSegment.bind(this.root);
     }
-    onfocusout(_) {
-        this.root.states.minute.hasLeftFocus = true;
-    }
-    props = $derived.by(() => {
-        const segmentValues = this.root.segmentValues;
-        const placeholder = this.root.placeholder.current;
-        if (!("minute" in segmentValues) || !("minute" in placeholder))
-            return {};
-        const isEmpty = segmentValues.minute === null;
-        const date = segmentValues.minute
-            ? placeholder.set({ minute: Number.parseInt(segmentValues.minute) })
-            : placeholder;
-        const valueNow = date.minute;
-        const valueMin = 0;
-        const valueMax = 59;
-        const valueText = isEmpty ? "Empty" : `${valueNow}`;
-        return {
-            ...this.root.sharedSegmentAttrs,
-            id: this.opts.id.current,
-            "aria-label": "minute, ",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.onkeydown,
-            onfocusout: this.onfocusout,
-            onclick: this.root.handleSegmentClick,
-            ...this.root.getBaseSegmentAttrs("minute", this.opts.id.current),
-        };
-    });
 }
-class DateFieldSecondSegmentState {
-    opts;
-    root;
-    #announcer;
+class DateFieldMinuteSegmentState extends BaseNumericSegmentState {
     constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.#announcer = this.root.announcer;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocusout = this.onfocusout.bind(this);
-        useRefById(opts);
+        super(opts, root, "minute", SEGMENT_CONFIGS.minute);
     }
-    onkeydown(e) {
-        const placeholder = this.root.placeholder.current;
-        if (e.ctrlKey || e.metaKey || this.root.disabled.current || !("second" in placeholder))
-            return;
-        if (e.key !== kbd.TAB)
-            e.preventDefault();
-        if (!isAcceptableSegmentKey(e.key))
-            return;
-        const min = 0;
-        const max = 59;
-        if (isArrowUp(e.key)) {
-            this.root.updateSegment("second", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(min);
-                    return `${min}`;
-                }
-                const next = placeholder
-                    .set({ second: Number.parseInt(prev) })
-                    .cycle("second", 1).second;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            return;
-        }
-        if (isArrowDown(e.key)) {
-            this.root.updateSegment("second", (prev) => {
-                if (prev === null) {
-                    this.#announcer.announce(max);
-                    return `${max}`;
-                }
-                const next = placeholder
-                    .set({ second: Number.parseInt(prev) })
-                    .cycle("second", -1).second;
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            return;
-        }
-        if (isNumberString(e.key)) {
-            const num = Number.parseInt(e.key);
-            const numIsZero = num === 0;
-            let moveToNext = false;
-            this.root.updateSegment("second", (prev) => {
-                const maxStart = Math.floor(max / 10);
-                /**
-                 * If the user has left the segment, we want to reset the
-                 * `prev` value so that we can start the segment over again
-                 * when the user types a number.
-                 */
-                if (this.root.states.second.hasLeftFocus) {
-                    prev = null;
-                    this.root.states.second.hasLeftFocus = false;
-                }
-                /**
-                 * We are starting over in the segment if prev is null, which could
-                 * happen in one of two scenarios:
-                 * - the user has left the segment and then comes back to it
-                 * - the segment was empty and the user begins typing a number
-                 */
-                if (prev === null) {
-                    /**
-                     * If the user types a 0 as the first number, we want
-                     * to keep track of that so that when they type the next
-                     * number, we can move to the next segment.
-                     */
-                    if (numIsZero) {
-                        this.root.states.second.lastKeyZero = true;
-                        this.#announcer.announce("0");
-                        return "0";
-                    }
-                    ///////////////////////////
-                    /**
-                     * If the last key was a 0, or if the first number is
-                     * greater than the max start digit (0-3 in most cases), then
-                     * we want to move to the next segment, since it's not possible
-                     * to continue typing a valid number in this segment.
-                     */
-                    if (this.root.states.second.lastKeyZero || num > maxStart) {
-                        moveToNext = true;
-                    }
-                    this.root.states.second.lastKeyZero = false;
-                    /**
-                     * If we're moving to the next segment and the number is less than
-                     * two digits, we want to announce the number and return it with a
-                     * leading zero to follow the placeholder format of `MM/DD/YYYY`.
-                     */
-                    if (moveToNext && String(num).length === 1) {
-                        this.#announcer.announce(num);
-                        return `0${num}`;
-                    }
-                    /**
-                     * If none of the above conditions are met, then we can just
-                     * return the number as the segment value and continue typing
-                     * in this segment.
-                     */
-                    return `${num}`;
-                }
-                /**
-                 * If the number of digits is 2, or if the total with the existing digit
-                 * and the pressed digit is greater than the maximum value for this
-                 * second, then we will reset the segment as if the user had pressed the
-                 * backspace key and then typed the number.
-                 */
-                const total = Number.parseInt(prev + num.toString());
-                if (this.root.states.second.lastKeyZero) {
-                    /**
-                     * If the new number is not 0, then we reset the lastKeyZero state and
-                     * move to the next segment, returning the new number with a leading 0.
-                     */
-                    if (num !== 0) {
-                        moveToNext = true;
-                        this.root.states.second.lastKeyZero = false;
-                        return `0${num}`;
-                    }
-                    /**
-                     * If the new number is 0, then we simply return `00` since that is
-                     * an acceptable second value.
-                     */
-                    moveToNext = true;
-                    this.root.states.second.lastKeyZero = false;
-                    return "00";
-                }
-                /**
-                 * If the total is greater than the max day value possible for this month, then
-                 * we want to move to the next segment, trimming the first digit from the total,
-                 * replacing it with a 0.
-                 */
-                if (total > max) {
-                    moveToNext = true;
-                    return `0${num}`;
-                }
-                /**
-                 * If the total has two digits and is less than or equal to the max day value,
-                 * we will move to the next segment and return the total as the segment value.
-                 */
-                moveToNext = true;
-                return `${total}`;
-            });
-            if (moveToNext) {
-                moveToNextSegment(e, this.root.getFieldNode());
-            }
-        }
-        if (isBackspace(e.key)) {
-            this.root.states.second.hasLeftFocus = false;
-            let moveToPrev = false;
-            this.root.updateSegment("second", (prev) => {
-                if (prev === null) {
-                    moveToPrev = true;
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const str = prev.toString();
-                if (str.length === 1) {
-                    this.#announcer.announce(null);
-                    return null;
-                }
-                const next = Number.parseInt(str.slice(0, -1));
-                this.#announcer.announce(next);
-                return `${next}`;
-            });
-            if (moveToPrev) {
-                moveToPrevSegment(e, this.root.getFieldNode());
-            }
-        }
-        if (isSegmentNavigationKey(e.key)) {
-            handleSegmentNavigation(e, this.root.getFieldNode());
-        }
-    }
-    onfocusout(_) {
-        this.root.states.second.hasLeftFocus = true;
+}
+class DateFieldSecondSegmentState extends BaseNumericSegmentState {
+    constructor(opts, root) {
+        super(opts, root, "second", SEGMENT_CONFIGS.second);
     }
-    props = $derived.by(() => {
-        const segmentValues = this.root.segmentValues;
-        const placeholder = this.root.placeholder.current;
-        if (!("second" in segmentValues) || !("second" in placeholder))
-            return {};
-        const isEmpty = segmentValues.second === null;
-        const date = segmentValues.second
-            ? placeholder.set({ second: Number.parseInt(segmentValues.second) })
-            : placeholder;
-        const valueNow = date.second;
-        const valueMin = 0;
-        const valueMax = 59;
-        const valueText = isEmpty ? "Empty" : `${valueNow}`;
-        return {
-            ...this.root.sharedSegmentAttrs,
-            id: this.opts.id.current,
-            "aria-label": "second, ",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
-            onkeydown: this.onkeydown,
-            onfocusout: this.onfocusout,
-            onclick: this.root.handleSegmentClick,
-            ...this.root.getBaseSegmentAttrs("second", this.opts.id.current),
-        };
-    });
 }
 class DateFieldDayPeriodSegmentState {
     opts;