bits-ui 1.8.0 → 2.2.0

package/dist/bits/utilities/portal/types.d.ts

@@ -3,7 +3,7 @@ export type PortalProps = {
     /**
      * Where to portal the content to.
      *
-     * @defaultValue document.body
+     * @default document.body
      */
     to?: HTMLElement | string | DocumentFragment;
     /**

package/dist/bits/utilities/presence-layer/presence-layer.svelte

@@ -3,11 +3,11 @@
 	import type { PresenceLayerImplProps } from "./types.js";
 	import { usePresence } from "./use-presence.svelte.js";
 
-	let { present, forceMount, presence, id }: PresenceLayerImplProps = $props();
+	let { present, forceMount, presence, ref }: PresenceLayerImplProps = $props();
 
 	const isPresent = usePresence(
 		box.with(() => present),
-		box.with(() => id)
+		ref
 	);
 </script>
 

package/dist/bits/utilities/presence-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { ReadableBox } from "svelte-toolbelt";
 export type PresenceLayerProps = {
     /**
      * Whether to force mount the component.
@@ -6,7 +7,6 @@ export type PresenceLayerProps = {
     forceMount?: boolean;
 };
 export type PresenceLayerImplProps = PresenceLayerProps & {
-    id: string;
     /**
      * The presence status.
      */
@@ -16,4 +16,5 @@ export type PresenceLayerImplProps = PresenceLayerProps & {
             current: boolean;
         };
     }]>;
+    ref: ReadableBox<HTMLElement | null>;
 };

package/dist/bits/utilities/presence-layer/use-presence.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type ReadableBox } from "svelte-toolbelt";
-export declare function usePresence(present: ReadableBox<boolean>, id: ReadableBox<string>): {
+export declare function usePresence(present: ReadableBox<boolean>, ref: ReadableBox<HTMLElement | null>): {
     readonly current: boolean;
 };

package/dist/bits/utilities/presence-layer/use-presence.svelte.js

@@ -1,20 +1,12 @@
-import { afterTick, executeCallbacks } from "svelte-toolbelt";
+import { executeCallbacks } from "svelte-toolbelt";
 import { Previous, watch } from "runed";
 import { on } from "svelte/events";
 import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
-export function usePresence(present, id) {
+export function usePresence(present, ref) {
     let styles = $state({});
     let prevAnimationNameState = $state("none");
     const initialState = present.current ? "mounted" : "unmounted";
-    let node = $state(null);
     const prevPresent = new Previous(() => present.current);
-    watch([() => id.current, () => present.current], ([id, present]) => {
-        if (!id || !present)
-            return;
-        afterTick(() => {
-            node = document.getElementById(id);
-        });
-    });
     const { state, dispatch } = useStateMachine(initialState, {
         mounted: {
             UNMOUNT: "unmounted",
@@ -28,18 +20,15 @@ export function usePresence(present, id) {
             MOUNT: "mounted",
         },
     });
-    watch(() => present.current, (currPresent) => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
+    watch(() => present.current, () => {
+        if (!ref.current)
             return;
-        const hasPresentChanged = currPresent !== prevPresent.current;
+        const hasPresentChanged = present.current !== prevPresent.current;
         if (!hasPresentChanged)
             return;
         const prevAnimationName = prevAnimationNameState;
-        const currAnimationName = getAnimationName(node);
-        if (currPresent) {
+        const currAnimationName = getAnimationName(ref.current);
+        if (present.current) {
             dispatch("MOUNT");
         }
         else if (currAnimationName === "none" || styles.display === "none") {
@@ -69,38 +58,32 @@ export function usePresence(present, id) {
      * make sure we only trigger ANIMATION_END for the currently active animation.
      */
     function handleAnimationEnd(event) {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        const currAnimationName = getAnimationName(node);
+        const currAnimationName = getAnimationName(ref.current);
         const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
-        if (event.target === node && isCurrentAnimation) {
+        if (event.target === ref.current && isCurrentAnimation) {
             dispatch("ANIMATION_END");
         }
     }
     function handleAnimationStart(event) {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        if (event.target === node) {
-            prevAnimationNameState = getAnimationName(node);
+        if (event.target === ref.current) {
+            prevAnimationNameState = getAnimationName(ref.current);
         }
     }
     watch(() => state.current, () => {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        const currAnimationName = getAnimationName(node);
+        const currAnimationName = getAnimationName(ref.current);
         prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
     });
-    watch(() => node, (node) => {
-        if (!node)
+    watch(() => ref.current, () => {
+        if (!ref.current)
             return;
-        styles = getComputedStyle(node);
-        return executeCallbacks(on(node, "animationstart", handleAnimationStart), on(node, "animationcancel", handleAnimationEnd), on(node, "animationend", handleAnimationEnd));
+        styles = getComputedStyle(ref.current);
+        return executeCallbacks(on(ref.current, "animationstart", handleAnimationStart), on(ref.current, "animationcancel", handleAnimationEnd), on(ref.current, "animationend", handleAnimationEnd));
     });
     const isPresentDerived = $derived(["mounted", "unmountSuspended"].includes(state.current));
     return {

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte

@@ -11,6 +11,7 @@
 		id,
 		children,
 		enabled,
+		ref,
 	}: TextSelectionLayerImplProps = $props();
 
 	useTextSelectionLayer({
@@ -18,6 +19,7 @@
 		onPointerDown: box.with(() => onPointerDown),
 		onPointerUp: box.with(() => onPointerUp),
 		enabled: box.with(() => enabled && preventOverflowTextSelection),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/text-selection-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { ReadableBox } from "svelte-toolbelt";
 export type PointerHandler = (e: PointerEvent) => void;
 export type TextSelectionLayerProps = {
     /**
@@ -28,4 +29,5 @@ export type TextSelectionLayerImplProps = {
      * Callback fired when pointerup event triggers.
      */
     onPointerUp?: PointerHandler;
+    ref: ReadableBox<HTMLElement | null>;
 } & TextSelectionLayerProps;

package/dist/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.d.ts

@@ -1,9 +1,13 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { TextSelectionLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection">>>;
+type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection" | "ref">> & {
+    ref: HTMLElement | null;
+}>;
 export declare class TextSelectionLayerState {
     #private;
     readonly opts: TextSelectionLayerStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: TextSelectionLayerStateProps);
 }
 export declare function useTextSelectionLayer(props: TextSelectionLayerStateProps): TextSelectionLayerState;

package/dist/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.js

@@ -1,21 +1,16 @@
-import { box, composeHandlers, executeCallbacks, useRefById, } from "svelte-toolbelt";
+import { DOMContext, composeHandlers, contains, executeCallbacks, } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { noop } from "../../../internal/noop.js";
 import { isHTMLElement } from "../../../internal/is.js";
-import { isOrContainsTarget } from "../../../internal/elements.js";
 globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     opts;
+    domContext;
     #unsubSelectionLock = noop;
-    #ref = box(null);
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: opts.id,
-            ref: this.#ref,
-            deps: () => this.opts.enabled.current,
-        });
+        this.domContext = new DOMContext(opts.ref);
         let unsubEvents = noop;
         watch(() => this.opts.enabled.current, (isEnabled) => {
             if (isEnabled) {
@@ -31,10 +26,10 @@ export class TextSelectionLayerState {
         });
     }
     #addEventListeners() {
-        return executeCallbacks(on(document, "pointerdown", this.#pointerdown), on(document, "pointerup", composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)));
+        return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.#pointerdown), on(this.domContext.getDocument(), "pointerup", composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)));
     }
     #pointerdown = (e) => {
-        const node = this.#ref.current;
+        const node = this.opts.ref.current;
         const target = e.target;
         if (!isHTMLElement(node) || !isHTMLElement(target) || !this.opts.enabled.current)
             return;
@@ -43,12 +38,12 @@ export class TextSelectionLayerState {
          * pointerdown occurred inside the node. You are still allowed to select text
          * outside the node provided pointerdown occurs outside the node.
          */
-        if (!isHighestLayer(this) || !isOrContainsTarget(node, target))
+        if (!isHighestLayer(this) || !contains(node, target))
             return;
         this.opts.onPointerDown.current(e);
         if (e.defaultPrevented)
             return;
-        this.#unsubSelectionLock = preventTextSelectionOverflow(node);
+        this.#unsubSelectionLock = preventTextSelectionOverflow(node, this.domContext.getDocument().body);
     };
     #resetSelectionLock = () => {
         this.#unsubSelectionLock();
@@ -59,8 +54,7 @@ export function useTextSelectionLayer(props) {
     return new TextSelectionLayerState(props);
 }
 const getUserSelect = (node) => node.style.userSelect || node.style.webkitUserSelect;
-function preventTextSelectionOverflow(node) {
-    const body = document.body;
+function preventTextSelectionOverflow(node, body) {
     const originalBodyUserSelect = getUserSelect(body);
     const originalNodeUserSelect = getUserSelect(node);
     setUserSelect(body, "none");

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/internal/box-auto-reset.svelte.d.ts

@@ -1,8 +1,14 @@
 import { type WritableBox } from "svelte-toolbelt";
+type BoxAutoResetOptions<T> = {
+    afterMs?: number;
+    onChange?: (value: T) => void;
+    getWindow: () => Window & typeof globalThis;
+};
 /**
  * Creates a box which will be reset to the default value after some time.
  *
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export declare function boxAutoReset<T>(defaultValue: T, afterMs?: number, onChange?: (value: T) => void): WritableBox<T>;
+export declare function boxAutoReset<T>(defaultValue: T, options: BoxAutoResetOptions<T>): WritableBox<T>;
+export {};

package/dist/internal/box-auto-reset.svelte.js

@@ -1,31 +1,36 @@
 import { box } from "svelte-toolbelt";
 import { noop } from "./noop.js";
+const defaultOptions = {
+    afterMs: 10000,
+    onChange: noop,
+};
 /**
  * Creates a box which will be reset to the default value after some time.
  *
  * @param defaultValue The value which will be set.
  * @param afterMs      A zero-or-greater delay in milliseconds.
  */
-export function boxAutoReset(defaultValue, afterMs = 10000, onChange = noop) {
+export function boxAutoReset(defaultValue, options) {
+    const { afterMs, onChange, getWindow } = { ...defaultOptions, ...options };
     let timeout = null;
     let value = $state(defaultValue);
     function resetAfter() {
-        return window.setTimeout(() => {
+        return getWindow().setTimeout(() => {
             value = defaultValue;
-            onChange(defaultValue);
+            onChange?.(defaultValue);
         }, afterMs);
     }
     $effect(() => {
         return () => {
             if (timeout)
-                clearTimeout(timeout);
+                getWindow().clearTimeout(timeout);
         };
     });
     return box.with(() => value, (v) => {
         value = v;
-        onChange(v);
+        onChange?.(v);
         if (timeout)
-            clearTimeout(timeout);
+            getWindow().clearTimeout(timeout);
         timeout = resetAfter();
     });
 }

package/dist/internal/create-id.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a unique ID for a given uid and optional prefix.
+ *
+ * @param uid - the uid generated by $props.id()
+ * @param prefix - optional prefix to use for the id (defaults to "bits")
+ */
+export declare function createId(uid: string): string;
+export declare function createId(prefix: string, uid: string): string;

package/dist/internal/create-id.js

@@ -0,0 +1,5 @@
+export function createId(prefixOrUid, uid) {
+    if (uid === undefined)
+        return `bits-${prefixOrUid}`;
+    return `bits-${prefixOrUid}-${uid}`;
+}

package/dist/internal/date-time/announcer.d.ts

@@ -2,6 +2,6 @@ export type Announcer = ReturnType<typeof getAnnouncer>;
 /**
  * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
  */
-export declare function getAnnouncer(): {
+export declare function getAnnouncer(doc: Document | null): {
     announce: (value: string | null | number, kind?: "assertive" | "polite", timeout?: number) => NodeJS.Timeout | undefined;
 };

package/dist/internal/date-time/announcer.js

@@ -5,40 +5,40 @@ import { isBrowser, isHTMLElement } from "../is.js";
  * Within the date components, we use this to announce when the values of the individual segments
  * change, as without it we get inconsistent behavior across screen readers.
  */
-function initAnnouncer() {
-    if (!isBrowser)
+function initAnnouncer(doc) {
+    if (!isBrowser || !doc)
         return null;
-    let el = document.querySelector("[data-bits-announcer]");
-    if (!isHTMLElement(el)) {
-        const div = document.createElement("div");
-        div.style.cssText = srOnlyStylesString;
-        div.setAttribute("data-bits-announcer", "");
-        div.appendChild(createLog("assertive"));
-        div.appendChild(createLog("polite"));
-        el = div;
-        document.body.insertBefore(el, document.body.firstChild);
-    }
+    let el = doc.querySelector("[data-bits-announcer]");
     /**
      * Creates a log element for assertive or polite announcements.
      */
-    function createLog(kind) {
-        const log = document.createElement("div");
+    const createLog = (kind) => {
+        const log = doc.createElement("div");
         log.role = "log";
         log.ariaLive = kind;
         log.setAttribute("aria-relevant", "additions");
         return log;
+    };
+    if (!isHTMLElement(el)) {
+        const div = doc.createElement("div");
+        div.style.cssText = srOnlyStylesString;
+        div.setAttribute("data-bits-announcer", "");
+        div.appendChild(createLog("assertive"));
+        div.appendChild(createLog("polite"));
+        el = div;
+        doc.body.insertBefore(el, doc.body.firstChild);
     }
     /**
      * Retrieves the log element for assertive or polite announcements.
      */
-    function getLog(kind) {
+    const getLog = (kind) => {
         if (!isHTMLElement(el))
             return null;
         const log = el.querySelector(`[aria-live="${kind}"]`);
         if (!isHTMLElement(log))
             return null;
         return log;
-    }
+    };
     return {
         getLog,
     };
@@ -46,16 +46,16 @@ function initAnnouncer() {
 /**
  * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
  */
-export function getAnnouncer() {
-    const announcer = initAnnouncer();
+export function getAnnouncer(doc) {
+    const announcer = initAnnouncer(doc);
     /**
      * Announces a message to screen readers using the specified kind of announcement.
      */
     function announce(value, kind = "assertive", timeout = 7500) {
-        if (!announcer || !isBrowser)
+        if (!announcer || !isBrowser || !doc)
             return;
         const log = announcer.getLog(kind);
-        const content = document.createElement("div");
+        const content = doc.createElement("div");
         if (typeof value === "number") {
             value = value.toString();
         }

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -1,5 +1,5 @@
 import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationalized/date";
-import { afterTick, styleToString } from "svelte-toolbelt";
+import { afterTick, getDocument, styleToString, } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
 import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
@@ -331,7 +331,8 @@ export function useMonthViewOptionsSync(props) {
  * Returns a function that removes the heading element.
  */
 export function createAccessibleHeading({ calendarNode, label, accessibleHeadingId, }) {
-    const div = document.createElement("div");
+    const doc = getDocument(calendarNode);
+    const div = doc.createElement("div");
     div.style.cssText = styleToString({
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -344,7 +345,7 @@ export function createAccessibleHeading({ calendarNode, label, accessibleHeading
         whiteSpace: "nowrap",
         width: "1px",
     });
-    const h2 = document.createElement("div");
+    const h2 = doc.createElement("div");
     h2.textContent = label;
     h2.id = accessibleHeadingId;
     h2.role = "heading";
@@ -352,7 +353,7 @@ export function createAccessibleHeading({ calendarNode, label, accessibleHeading
     calendarNode.insertBefore(div, calendarNode.firstChild);
     div.appendChild(h2);
     return () => {
-        const h2 = document.getElementById(accessibleHeadingId);
+        const h2 = doc.getElementById(accessibleHeadingId);
         if (!h2)
             return;
         div.parentElement?.removeChild(div);
@@ -442,7 +443,8 @@ export function getCalendarElementProps({ fullCalendarLabel, id, isInvalid, disa
     };
 }
 export function pickerOpenFocus(e) {
-    const nodeToFocus = document.querySelector("[data-bits-day][data-focused]");
+    const doc = getDocument(e.target);
+    const nodeToFocus = doc.querySelector("[data-bits-day][data-focused]");
     if (nodeToFocus) {
         e.preventDefault();
         nodeToFocus?.focus();

package/dist/internal/date-time/field/helpers.d.ts

@@ -61,6 +61,12 @@ export declare function isAcceptableSegmentKey(key: string): boolean;
  * @param fieldNode - The id of the date field associated with the segment
  */
 export declare function isFirstSegment(id: string, fieldNode: HTMLElement | null): boolean;
+type SetDescriptionProps = {
+    id: string;
+    formatter: Formatter;
+    value: DateValue;
+    doc: Document;
+};
 /**
  * Creates or updates a description element for a date field
  * which enables screen readers to read the date field's value.
@@ -69,11 +75,12 @@ export declare function isFirstSegment(id: string, fieldNode: HTMLElement | null
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export declare function setDescription(id: string, formatter: Formatter, value: DateValue): void;
+export declare function setDescription(props: SetDescriptionProps): void;
 /**
  * Removes the description element for the date field with
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export declare function removeDescriptionElement(id: string): void;
+export declare function removeDescriptionElement(id: string, doc: Document): void;
+export declare function getDefaultHourCycle(locale: string): 12 | 24;
 export {};

package/dist/internal/date-time/field/helpers.js

@@ -1,7 +1,7 @@
 import { styleToString } from "svelte-toolbelt";
 import { getPlaceholder } from "../placeholders.js";
 import { hasTime, isZonedDateTime } from "../utils.js";
-import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS, } from "./parts.js";
+import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "./parts.js";
 import { getSegments } from "./segments.js";
 import { isBrowser, isNull, isNumberString } from "../../is.js";
 import { useId } from "../../use-id.js";
@@ -289,7 +289,7 @@ export function isDateAndTimeSegmentObj(obj) {
         return false;
     }
     return Object.entries(obj).every(([key, value]) => {
-        const validKey = TIME_SEGMENT_PARTS.includes(key) ||
+        const validKey = EDITABLE_TIME_SEGMENT_PARTS.includes(key) ||
             DATE_SEGMENT_PARTS.includes(key);
         const validValue = key === "dayPeriod"
             ? value === "AM" || value === "PM" || value === null
@@ -345,19 +345,20 @@ export function isFirstSegment(id, fieldNode) {
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export function setDescription(id, formatter, value) {
+export function setDescription(props) {
+    const { id, formatter, value, doc } = props;
     if (!isBrowser)
         return;
     const valueString = formatter.selectedDate(value);
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el) {
-        const div = document.createElement("div");
+        const div = doc.createElement("div");
         div.style.cssText = styleToString({
             display: "none",
         });
         div.id = id;
         div.innerText = `Selected Date: ${valueString}`;
-        document.body.appendChild(div);
+        doc.body.appendChild(div);
     }
     else {
         el.innerText = `Selected Date: ${valueString}`;
@@ -368,11 +369,17 @@ export function setDescription(id, formatter, value) {
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export function removeDescriptionElement(id) {
+export function removeDescriptionElement(id, doc) {
     if (!isBrowser)
         return;
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el)
         return;
-    document.body.removeChild(el);
+    doc.body.removeChild(el);
+}
+export function getDefaultHourCycle(locale) {
+    const formatter = new Intl.DateTimeFormat(locale, { hour: "numeric" });
+    const parts = formatter.formatToParts(new Date("2023-01-01T13:00:00"));
+    const hourPart = parts.find((part) => part.type === "hour");
+    return hourPart?.value === "1" ? 12 : 24;
 }

package/dist/internal/date-time/field/parts.d.ts

@@ -1,6 +1,8 @@
 export declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
-export declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
+export declare const EDITABLE_TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
 export declare const NON_EDITABLE_SEGMENT_PARTS: readonly ["literal", "timeZoneName"];
 export declare const EDITABLE_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod"];
 export declare const ALL_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod", "literal", "timeZoneName"];
+export declare const ALL_TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod", "literal", "timeZoneName"];
 export declare const ALL_EXCEPT_LITERAL_PARTS: ("day" | "month" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName")[];
+export declare const ALL_TIME_EXCEPT_LITERAL_PARTS: ("hour" | "minute" | "second" | "dayPeriod" | "timeZoneName")[];

package/dist/internal/date-time/field/parts.js

@@ -1,9 +1,17 @@
 export const DATE_SEGMENT_PARTS = ["day", "month", "year"];
-export const TIME_SEGMENT_PARTS = ["hour", "minute", "second", "dayPeriod"];
+export const EDITABLE_TIME_SEGMENT_PARTS = ["hour", "minute", "second", "dayPeriod"];
 export const NON_EDITABLE_SEGMENT_PARTS = ["literal", "timeZoneName"];
-export const EDITABLE_SEGMENT_PARTS = [...DATE_SEGMENT_PARTS, ...TIME_SEGMENT_PARTS];
+export const EDITABLE_SEGMENT_PARTS = [
+    ...DATE_SEGMENT_PARTS,
+    ...EDITABLE_TIME_SEGMENT_PARTS,
+];
 export const ALL_SEGMENT_PARTS = [
     ...EDITABLE_SEGMENT_PARTS,
     ...NON_EDITABLE_SEGMENT_PARTS,
 ];
+export const ALL_TIME_SEGMENT_PARTS = [
+    ...EDITABLE_TIME_SEGMENT_PARTS,
+    ...NON_EDITABLE_SEGMENT_PARTS,
+];
 export const ALL_EXCEPT_LITERAL_PARTS = ALL_SEGMENT_PARTS.filter((part) => part !== "literal");
+export const ALL_TIME_EXCEPT_LITERAL_PARTS = ALL_TIME_SEGMENT_PARTS.filter((part) => part !== "literal");

package/dist/internal/date-time/field/segments.d.ts

@@ -5,6 +5,7 @@
  * @param fieldNode - The ID of the field we're navigating within
  */
 export declare function handleSegmentNavigation(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function handleTimeSegmentNavigation(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
 /**
  * Retrieves the next segment in the list of segments relative to the provided node.
  *
@@ -29,11 +30,17 @@ export declare function getPrevNextSegments(startingNode: HTMLElement, fieldNode
     next: HTMLElement | null | undefined;
     prev: HTMLElement | null | undefined;
 };
+export declare function getPrevNextTimeSegments(startingNode: HTMLElement, fieldNode: HTMLElement | null): {
+    next: HTMLElement | null | undefined;
+    prev: HTMLElement | null | undefined;
+};
 /**
  * Shifts the focus to the next segment in the list of segments
  * within the field identified by the provided ID.
  */
 export declare function moveToNextSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function moveToNextTimeSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function moveToPrevTimeSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
 /**
  * Shifts the focus to the previous segment in the list of segments
  * within the field identified by the provided ID. If this is the first
@@ -45,6 +52,8 @@ export declare function isSegmentNavigationKey(key: string): boolean;
  * Retrieves all the interactive segments within the field identified by the provided ID.
  */
 export declare function getSegments(fieldNode: HTMLElement | null): HTMLElement[];
+export declare function getTimeSegments(fieldNode: HTMLElement | null): HTMLElement[];
+export declare function getFirstTimeSegment(fieldNode: HTMLElement | null): HTMLElement | undefined;
 /**
  * Get the first interactive segment within the field identified by the provided ID.
  */