@carbon/utilities 0.24.0 → 0.25.0

package/es/date-picker/index.d.ts

@@ -147,7 +147,14 @@ declare global {
       }): PlainYearMonth;
       compare(one: PlainYearMonth, two: PlainYearMonth): number;
     }
-    const PlainYearMonth: PlainYearMonthConstructor;
+    /**
+     * Usages of `var` and `namespace`, instead of const, are intentional. TS 6
+     * ships built-in types for the Temporal API in `lib.esnext.temporal.d.ts`
+     * using these forms. Declaration merging only works when the shapes match.
+     * Matching them prevents collisions and tsc errors for TS 6 consumers,
+     * and for TS 5 consumers nothing changes, they still get these types
+     */
+    var PlainYearMonth: PlainYearMonthConstructor;
     interface PlainDateConstructor {
       from(item: string | {
         year: number;
@@ -156,11 +163,10 @@ declare global {
       }): PlainDate;
       compare(one: PlainDate, two: PlainDate): number;
     }
-    const PlainDate: PlainDateConstructor;
-    interface Now {
-      plainDateISO(): PlainDate;
+    var PlainDate: PlainDateConstructor;
+    namespace Now {
+      function plainDateISO(): PlainDate;
     }
-    const Now: Now;
   }
 }
 /**
@@ -946,48 +952,5 @@ declare function parseDateString(dateString: string, format: string): Temporal.P
  * @returns True if Temporal API is available
  */
 declare function isTemporalAvailable(): boolean;
-/**
- * Get a fallback date handler if Temporal is not available
- * This provides a migration path for browsers without Temporal support
- */
-declare function getDateHandler(): {
-  type: "temporal";
-  toISOString: typeof plainDateToISOString;
-  fromISOString: typeof parseISOToPlainDate;
-  compare: typeof comparePlainDates;
-  format: typeof formatPlainDate;
-  isInRange: typeof isDateInRange;
-} | {
-  type: "date";
-  /**
-   *
-   * @param {Temporal.PlainDate} date - The date to convert
-   */
-  toISOString: (date: Date) => string;
-  /**
-   *
-   * @param {string} str - The ISO string to parse
-   */
-  fromISOString: (str: string) => Date | null;
-  /**
-   *
-   * @param {Temporal.PlainDate} d1 - First date
-   * @param {Temporal.PlainDate} d2 - Second date
-   */
-  compare: (d1: Date, d2: Date) => number;
-  /**
-   *
-   * @param {Temporal.PlainDate} date - The date to format
-   * @param {string} format - The format string
-   */
-  format: (date: Date, format: string) => string;
-  /**
-   *
-   * @param {Temporal.PlainDate} date - The date to check
-   * @param {Temporal.PlainDate | null} min - Minimum date
-   * @param {Temporal.PlainDate | null} max - Maximum date
-   */
-  isInRange: (date: Date, min: Date | null, max: Date | null) => boolean;
-};
 //#endregion
-export { type CalendarDay, type ClickOutsideConfig, ClickOutsideHandler, type DatePickerContext, DatePickerEvent, type DatePickerEvent$1 as DatePickerEventType, type DatePickerMode, DatePickerState, DatePickerStateMachine, type DateSelectPayload, type FocusRestoreTarget, type InputFocusPayload, type InputType, type KeyboardEventInfo, type KeyboardEventResult, type KeyboardPayload, type SideEffect, type StateAction, type StateConfig, type StateGuard, type StateTransition, type TransitionListener, type TransitionMap, type ValidationErrorPayload, type ValueChangePayload, actions, addDays, addMonths, areDatesEqual, checkGuard, comparePlainDates, dateToPlainDate, daysBetween, effects, executeAction, executeEffect, formatPlainDate, generateCalendarGrid, getAction, getDateHandler, getEffect, getFullDateLabel, getGuard, getMonthEnd, getMonthStart, getMonthYearLabel, getToday, getWeekdayLabels, guards, isDateInRange, isFuture, isPast, isSingleMode, isTemporalAvailable, isToday, mapKeyboardToStateMachineEvent, parseDateString, parseDateToPlainDate, parseISOToPlainDate, plainDateToDate, plainDateToISOString };
+export { type CalendarDay, type ClickOutsideConfig, ClickOutsideHandler, type DatePickerContext, DatePickerEvent, type DatePickerEvent$1 as DatePickerEventType, type DatePickerMode, DatePickerState, DatePickerStateMachine, type DateSelectPayload, type FocusRestoreTarget, type InputFocusPayload, type InputType, type KeyboardEventInfo, type KeyboardEventResult, type KeyboardPayload, type SideEffect, type StateAction, type StateConfig, type StateGuard, type StateTransition, type TransitionListener, type TransitionMap, type ValidationErrorPayload, type ValueChangePayload, actions, addDays, addMonths, areDatesEqual, checkGuard, comparePlainDates, dateToPlainDate, daysBetween, effects, executeAction, executeEffect, formatPlainDate, generateCalendarGrid, getAction, getEffect, getFullDateLabel, getGuard, getMonthEnd, getMonthStart, getMonthYearLabel, getToday, getWeekdayLabels, guards, isDateInRange, isFuture, isPast, isSingleMode, isTemporalAvailable, isToday, mapKeyboardToStateMachineEvent, parseDateString, parseDateToPlainDate, parseISOToPlainDate, plainDateToDate, plainDateToISOString };

package/es/date-picker/index.js

@@ -1,3 +1,4 @@
+import "temporal-polyfill/global";
 //#region src/date-picker/primitives/states.ts
 /**
 * Copyright IBM Corp. 2026
@@ -357,64 +358,6 @@ function parseDateString(dateString, format) {
 function isTemporalAvailable() {
 	return typeof Temporal !== "undefined" && typeof Temporal.PlainDate !== "undefined";
 }
-/**
-* Get a fallback date handler if Temporal is not available
-* This provides a migration path for browsers without Temporal support
-*/
-function getDateHandler() {
-	if (isTemporalAvailable()) return {
-		type: "temporal",
-		toISOString: plainDateToISOString,
-		fromISOString: parseISOToPlainDate,
-		compare: comparePlainDates,
-		format: formatPlainDate,
-		isInRange: isDateInRange
-	};
-	return {
-		type: "date",
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to convert
-		*/
-		toISOString: (date) => date.toISOString().split("T")[0],
-		/**
-		*
-		* @param {string} str - The ISO string to parse
-		*/
-		fromISOString: (str) => {
-			const date = new Date(str);
-			return isNaN(date.getTime()) ? null : date;
-		},
-		/**
-		*
-		* @param {Temporal.PlainDate} d1 - First date
-		* @param {Temporal.PlainDate} d2 - Second date
-		*/
-		compare: (d1, d2) => d1.getTime() - d2.getTime(),
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to format
-		* @param {string} format - The format string
-		*/
-		format: (date, format) => {
-			const year = date.getFullYear().toString();
-			const month = (date.getMonth() + 1).toString().padStart(2, "0");
-			const day = date.getDate().toString().padStart(2, "0");
-			return format.replace("Y", year).replace("m", month).replace("d", day);
-		},
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to check
-		* @param {Temporal.PlainDate | null} min - Minimum date
-		* @param {Temporal.PlainDate | null} max - Maximum date
-		*/
-		isInRange: (date, min, max) => {
-			if (min && date < min) return false;
-			if (max && date > max) return false;
-			return true;
-		}
-	};
-}
 //#endregion
 //#region src/date-picker/primitives/guards.ts
 /**
@@ -2012,4 +1955,4 @@ function getWeekdayLabels(locale = "en", weekStartsOn = 0) {
 	return labels;
 }
 //#endregion
-export { ClickOutsideHandler, DatePickerEvent, DatePickerState, DatePickerStateMachine, actions, addDays, addMonths, areDatesEqual, checkGuard, comparePlainDates, dateToPlainDate, daysBetween, effects, executeAction, executeEffect, formatPlainDate, generateCalendarGrid, getAction, getDateHandler, getEffect, getFullDateLabel, getGuard, getMonthEnd, getMonthStart, getMonthYearLabel, getToday, getWeekdayLabels, guards, isDateInRange, isFuture, isPast, isSingleMode, isTemporalAvailable, isToday, mapKeyboardToStateMachineEvent, parseDateString, parseDateToPlainDate, parseISOToPlainDate, plainDateToDate, plainDateToISOString };
+export { ClickOutsideHandler, DatePickerEvent, DatePickerState, DatePickerStateMachine, actions, addDays, addMonths, areDatesEqual, checkGuard, comparePlainDates, dateToPlainDate, daysBetween, effects, executeAction, executeEffect, formatPlainDate, generateCalendarGrid, getAction, getEffect, getFullDateLabel, getGuard, getMonthEnd, getMonthStart, getMonthYearLabel, getToday, getWeekdayLabels, guards, isDateInRange, isFuture, isPast, isSingleMode, isTemporalAvailable, isToday, mapKeyboardToStateMachineEvent, parseDateString, parseDateToPlainDate, parseISOToPlainDate, plainDateToDate, plainDateToISOString };

package/es/makeDraggable/index.d.ts

@@ -31,7 +31,12 @@ interface DraggableProps {
 }
 /**
  * Makes a given element draggable using a handle element.
- *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+ * @param {object} draggable - Configuration object for draggable behavior
+ * @param {HTMLElement} draggable.el - The element to make draggable
+ * @param {HTMLElement} [draggable.dragHandle] - Optional handle element for dragging
+ * @param {boolean} [draggable.focusableDragHandle] - Whether the drag handle should be focusable
+ * @param {number} [draggable.dragStep] - Step size for keyboard dragging (default: 10)
+ * @param {number} [draggable.shiftDragStep] - Step size for keyboard dragging with Shift key (default: 50)
  */
 declare const makeDraggable: ({
   el,

package/es/makeDraggable/index.js

@@ -1,7 +1,12 @@
 //#region src/makeDraggable/makeDraggable.ts
 /**
 * Makes a given element draggable using a handle element.
-*@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+* @param {object} draggable - Configuration object for draggable behavior
+* @param {HTMLElement} draggable.el - The element to make draggable
+* @param {HTMLElement} [draggable.dragHandle] - Optional handle element for dragging
+* @param {boolean} [draggable.focusableDragHandle] - Whether the drag handle should be focusable
+* @param {number} [draggable.dragStep] - Step size for keyboard dragging (default: 10)
+* @param {number} [draggable.shiftDragStep] - Step size for keyboard dragging with Shift key (default: 50)
 */
 const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep }) => {
 	if (dragHandle) {
@@ -60,7 +65,8 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.dispatchEvent(new CustomEvent(type, eventInit));
 	};
 	const onKeyDown = (e) => {
-		if (e.key === "Enter") {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
 			isDragging = !isDragging;
 			if (isDragging) {
 				syncTransformState();
@@ -71,24 +77,42 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
 		switch (e.key) {
 			case "Enter":
-			case " ":
-				e.preventDefault();
-				break;
+			case " ": break;
 			case "ArrowLeft":
+				e.preventDefault();
 				currentX -= distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "left",
+					distance
+				});
 				break;
 			case "ArrowRight":
+				e.preventDefault();
 				currentX += distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "right",
+					distance
+				});
 				break;
 			case "ArrowUp":
+				e.preventDefault();
 				currentY -= distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "up",
+					distance
+				});
 				break;
 			case "ArrowDown":
+				e.preventDefault();
 				currentY += distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "down",
+					distance
+				});
 				break;
 		}
 	};

package/es/overflowHandler/index.d.ts

@@ -8,15 +8,16 @@
 /**
  * Calculates the size (width or height) of a given HTML element.
  *
- * This function performs an expensive calculation by temporarily changing the
- * display style of the element if it is not currently visible. It then uses
- * `getBoundingClientRect` to retrieve the size of the element.
+ * Temporarily sets `display` if the element is not currently visible so hidden
+ * items can still be measured. Adds margin and an optional `gap`.
  *
- * @param el - The HTML element whose size is to be calculated.
+ * @param el - The HTML element whose size is to be calculated. Returns 0 if
+ *   `null` or `undefined` is passed.
  * @param dimension - The dimension to measure ('width' or 'height').
- * @returns The size of the element in pixels. Returns 0 if the element is not provided.
+ * @param gap - Optional gap (in px) to add to each item's size, representing the `column-gap` (width) or `row-gap` (height) of the parent container.
+ * @returns The size of the element in pixels, or 0 if no element is provided.
  */
-declare function getSize(el: HTMLElement | undefined, dimension: 'width' | 'height'): number;
+declare function getSize(el: HTMLElement | null | undefined, dimension: 'width' | 'height', gap?: number): number;
 /**
  * Options for updating the overflow handler.
  * Determines which items should be visible and which should be hidden
@@ -43,6 +44,10 @@ interface UpdateOverflowHandlerOptions {
   onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
   /** An array of previously hidden items to compare against the new hidden items. */
   previousHiddenItems?: HTMLElement[];
+  /** Pixels to reserve from the container's available space, causing overflow to trigger earlier. */
+  offsetValue?: number;
+  /** The gap (in px) between items, representing `column-gap` (width) or `row-gap` (height) of the container. */
+  gap?: number;
 }
 /**
  * Updates the overflow handler by determining which items should be visible and which should be hidden.
@@ -60,7 +65,9 @@ declare function updateOverflowHandler({
   maxVisibleItems,
   dimension,
   onChange,
-  previousHiddenItems
+  previousHiddenItems,
+  offsetValue,
+  gap
 }: UpdateOverflowHandlerOptions): HTMLElement[];
 /**
  * Options for initializing an overflow handler.
@@ -84,6 +91,16 @@ interface OverflowHandlerOptions {
    * The dimension to consider for overflow calculations. Defaults to 'width'.
    */
   dimension?: 'width' | 'height';
+  /**
+   * Pixels to reserve from the container's available space, causing overflow to
+   * trigger earlier. Useful when an element within the container (e.g. a "show
+   * more" button) needs guaranteed room.
+   */
+  offsetValue?: number;
+  /**
+   * The gap (in px) between items in the container's flex/grid layout.
+   */
+  gap?: number;
 }
 /**
  * Represents an instance of an overflow handler.
@@ -98,7 +115,9 @@ declare function createOverflowHandler({
   container,
   maxVisibleItems,
   onChange,
-  dimension
+  dimension,
+  offsetValue,
+  gap
 }: OverflowHandlerOptions): OverflowHandler;
 //#endregion
 export { OverflowHandler, OverflowHandlerOptions, UpdateOverflowHandlerOptions, createOverflowHandler, getSize, updateOverflowHandler };

package/es/overflowHandler/index.js

@@ -8,21 +8,23 @@
 /**
 * Calculates the size (width or height) of a given HTML element.
 *
-* This function performs an expensive calculation by temporarily changing the
-* display style of the element if it is not currently visible. It then uses
-* `getBoundingClientRect` to retrieve the size of the element.
+* Temporarily sets `display` if the element is not currently visible so hidden
+* items can still be measured. Adds margin and an optional `gap`.
 *
-* @param el - The HTML element whose size is to be calculated.
+* @param el - The HTML element whose size is to be calculated. Returns 0 if
+*   `null` or `undefined` is passed.
 * @param dimension - The dimension to measure ('width' or 'height').
-* @returns The size of the element in pixels. Returns 0 if the element is not provided.
+* @param gap - Optional gap (in px) to add to each item's size, representing the `column-gap` (width) or `row-gap` (height) of the parent container.
+* @returns The size of the element in pixels, or 0 if no element is provided.
 */
-function getSize(el, dimension) {
+function getSize(el, dimension, gap = 0) {
 	if (!el) return 0;
 	const originalDisplay = el.style.display;
-	if (!el.offsetParent && getComputedStyle(el).display === "none") el.style.display = "inline-block";
+	const styles = getComputedStyle(el);
+	if (!el.offsetParent && styles.display === "none") el.style.display = "inline-block";
 	const size = el.getBoundingClientRect()[dimension];
 	el.style.display = originalDisplay;
-	return size;
+	return size + (dimension === "width" ? (parseFloat(styles.marginLeft) || 0) + (parseFloat(styles.marginRight) || 0) : (parseFloat(styles.marginTop) || 0) + (parseFloat(styles.marginBottom) || 0)) + gap;
 }
 /**
 * Updates the overflow handler by determining which items should be visible and which should be hidden.
@@ -30,64 +32,80 @@ function getSize(el, dimension) {
 * @param options - Configuration options for updating the overflow handler.
 * @returns An array of hidden items after the update.
 */
-function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [] }) {
+function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [], offsetValue = 0, gap = 0 }) {
 	const containerSize = dimension === "width" ? container.clientWidth : container.clientHeight;
 	let visibleItems = [];
 	let hiddenItems = [];
 	const totalSize = sizes.reduce((sum, size) => sum + size, 0);
 	const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);
-	if (totalSize + totalFixedSize <= containerSize) {
+	const trailingGap = sizes.length + fixedSizes.length > 0 ? gap : 0;
+	if (totalSize + totalFixedSize - trailingGap <= containerSize - offsetValue) {
 		visibleItems = maxVisibleItems ? items.slice(0, maxVisibleItems) : [...items];
 		hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];
 	} else {
-		const available = containerSize - offsetSize;
+		const available = containerSize - offsetSize - totalFixedSize - offsetValue + gap;
 		let accumulated = 0;
+		let breakIndex = items.length;
 		for (let i = 0; i < items.length; i++) {
 			const size = sizes[i];
-			if (accumulated + size + totalFixedSize <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
+			if (accumulated + size <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
 				visibleItems.push(items[i]);
 				accumulated += size;
-			} else hiddenItems.push(items[i]);
+			} else {
+				breakIndex = i;
+				break;
+			}
 		}
+		hiddenItems = items.slice(breakIndex);
 	}
-	if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) return previousHiddenItems;
 	visibleItems.forEach((item) => item.removeAttribute("data-hidden"));
 	hiddenItems.forEach((item) => item.setAttribute("data-hidden", ""));
 	if (offset) offset.toggleAttribute("data-hidden", hiddenItems.length === 0);
+	if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) return previousHiddenItems;
 	onChange(visibleItems, hiddenItems);
 	return hiddenItems;
 }
-function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = "width" }) {
+function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = "width", offsetValue, gap }) {
 	if (!(container instanceof HTMLElement)) throw new Error("container must be an HTMLElement");
 	if (typeof onChange !== "function") throw new Error("onChange must be a function");
 	if (maxVisibleItems !== void 0 && (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)) throw new Error("maxVisibleItems must be a positive integer");
-	const children = Array.from(container.children).filter((item) => item instanceof HTMLElement);
+	const children = Array.from(container.children);
 	const offset = children.find((item) => item.hasAttribute("data-offset"));
 	const fixedItems = children.filter((item) => item.hasAttribute("data-fixed"));
 	const items = children.filter((item) => item !== offset && !fixedItems.includes(item));
-	const fixedSizes = fixedItems.map((item) => getSize(item, dimension));
-	const sizes = items.map((item) => getSize(item, dimension));
-	const offsetSize = getSize(offset, dimension);
 	let previousHiddenItems = [];
-	function update() {
+	let rafId;
+	let disconnected = false;
+	const update = () => {
+		if (disconnected) return;
+		rafId = void 0;
 		previousHiddenItems = updateOverflowHandler({
 			container,
 			items,
 			offset,
-			sizes,
-			fixedSizes,
-			offsetSize,
+			sizes: items.map((item) => getSize(item, dimension, gap)),
+			fixedSizes: fixedItems.map((item) => getSize(item, dimension, gap)),
+			offsetSize: getSize(offset, dimension, gap),
 			maxVisibleItems,
 			dimension,
 			onChange,
-			previousHiddenItems
+			previousHiddenItems,
+			offsetValue,
+			gap
 		});
-	}
-	const resizeObserver = new ResizeObserver(() => requestAnimationFrame(update));
+	};
+	const scheduleUpdate = () => {
+		if (disconnected || rafId !== void 0) return;
+		rafId = requestAnimationFrame(update);
+	};
+	const resizeObserver = new ResizeObserver(scheduleUpdate);
 	resizeObserver.observe(container);
-	requestAnimationFrame(update);
+	scheduleUpdate();
+	document.fonts?.ready?.then(scheduleUpdate);
 	return { disconnect() {
+		disconnected = true;
 		resizeObserver.disconnect();
+		if (rafId !== void 0) cancelAnimationFrame(rafId);
 	} };
 }
 //#endregion

package/lib/date-picker/index.js

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("temporal-polyfill/global");
 //#region src/date-picker/primitives/states.ts
 /**
 * Copyright IBM Corp. 2026
@@ -358,64 +359,6 @@ function parseDateString(dateString, format) {
 function isTemporalAvailable() {
 	return typeof Temporal !== "undefined" && typeof Temporal.PlainDate !== "undefined";
 }
-/**
-* Get a fallback date handler if Temporal is not available
-* This provides a migration path for browsers without Temporal support
-*/
-function getDateHandler() {
-	if (isTemporalAvailable()) return {
-		type: "temporal",
-		toISOString: plainDateToISOString,
-		fromISOString: parseISOToPlainDate,
-		compare: comparePlainDates,
-		format: formatPlainDate,
-		isInRange: isDateInRange
-	};
-	return {
-		type: "date",
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to convert
-		*/
-		toISOString: (date) => date.toISOString().split("T")[0],
-		/**
-		*
-		* @param {string} str - The ISO string to parse
-		*/
-		fromISOString: (str) => {
-			const date = new Date(str);
-			return isNaN(date.getTime()) ? null : date;
-		},
-		/**
-		*
-		* @param {Temporal.PlainDate} d1 - First date
-		* @param {Temporal.PlainDate} d2 - Second date
-		*/
-		compare: (d1, d2) => d1.getTime() - d2.getTime(),
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to format
-		* @param {string} format - The format string
-		*/
-		format: (date, format) => {
-			const year = date.getFullYear().toString();
-			const month = (date.getMonth() + 1).toString().padStart(2, "0");
-			const day = date.getDate().toString().padStart(2, "0");
-			return format.replace("Y", year).replace("m", month).replace("d", day);
-		},
-		/**
-		*
-		* @param {Temporal.PlainDate} date - The date to check
-		* @param {Temporal.PlainDate | null} min - Minimum date
-		* @param {Temporal.PlainDate | null} max - Maximum date
-		*/
-		isInRange: (date, min, max) => {
-			if (min && date < min) return false;
-			if (max && date > max) return false;
-			return true;
-		}
-	};
-}
 //#endregion
 //#region src/date-picker/primitives/guards.ts
 /**
@@ -2013,6 +1956,33 @@ function getWeekdayLabels(locale = "en", weekStartsOn = 0) {
 	return labels;
 }
 //#endregion
+//#region src/date-picker/index.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* @internal
+* This module is for internal use by @carbon/react and @carbon/web-components only.
+* It is not part of the public @carbon/utilities API.
+*
+* Import from source path:
+* import { ... } from '@carbon/utilities/src/date-picker';
+*/
+/**
+* The primitives below are built on Temporal, which is still unevenly shipped:
+* no version of Safari implements it, and Chrome/Edge only gained it in 144.
+* Every `Temporal.*` reference in this module tree is a bare global, so on those engines
+* the first access — `Temporal.Now.plainDateISO()` on the calendar-open transition
+* throws a ReferenceError and the calendar never opens.
+
+* `temporal-polyfill/global` installs `globalThis.Temporal` only when the engine
+* does not already provide it, so a native implementation always wins. It is
+* imported first so the global exists before any primitive can reach for it.
+*/
+//#endregion
 exports.ClickOutsideHandler = ClickOutsideHandler;
 exports.DatePickerEvent = DatePickerEvent;
 exports.DatePickerState = DatePickerState;
@@ -2031,7 +2001,6 @@ exports.executeEffect = executeEffect;
 exports.formatPlainDate = formatPlainDate;
 exports.generateCalendarGrid = generateCalendarGrid;
 exports.getAction = getAction;
-exports.getDateHandler = getDateHandler;
 exports.getEffect = getEffect;
 exports.getFullDateLabel = getFullDateLabel;
 exports.getGuard = getGuard;

package/lib/makeDraggable/index.js

@@ -2,7 +2,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/makeDraggable/makeDraggable.ts
 /**
 * Makes a given element draggable using a handle element.
-*@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+* @param {object} draggable - Configuration object for draggable behavior
+* @param {HTMLElement} draggable.el - The element to make draggable
+* @param {HTMLElement} [draggable.dragHandle] - Optional handle element for dragging
+* @param {boolean} [draggable.focusableDragHandle] - Whether the drag handle should be focusable
+* @param {number} [draggable.dragStep] - Step size for keyboard dragging (default: 10)
+* @param {number} [draggable.shiftDragStep] - Step size for keyboard dragging with Shift key (default: 50)
 */
 const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep }) => {
 	if (dragHandle) {
@@ -61,7 +66,8 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.dispatchEvent(new CustomEvent(type, eventInit));
 	};
 	const onKeyDown = (e) => {
-		if (e.key === "Enter") {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
 			isDragging = !isDragging;
 			if (isDragging) {
 				syncTransformState();
@@ -72,24 +78,42 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
 		switch (e.key) {
 			case "Enter":
-			case " ":
-				e.preventDefault();
-				break;
+			case " ": break;
 			case "ArrowLeft":
+				e.preventDefault();
 				currentX -= distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "left",
+					distance
+				});
 				break;
 			case "ArrowRight":
+				e.preventDefault();
 				currentX += distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "right",
+					distance
+				});
 				break;
 			case "ArrowUp":
+				e.preventDefault();
 				currentY -= distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "up",
+					distance
+				});
 				break;
 			case "ArrowDown":
+				e.preventDefault();
 				currentY += distance;
 				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "down",
+					distance
+				});
 				break;
 		}
 	};

package/lib/overflowHandler/index.js

@@ -9,21 +9,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 /**
 * Calculates the size (width or height) of a given HTML element.
 *
-* This function performs an expensive calculation by temporarily changing the
-* display style of the element if it is not currently visible. It then uses
-* `getBoundingClientRect` to retrieve the size of the element.
+* Temporarily sets `display` if the element is not currently visible so hidden
+* items can still be measured. Adds margin and an optional `gap`.
 *
-* @param el - The HTML element whose size is to be calculated.
+* @param el - The HTML element whose size is to be calculated. Returns 0 if
+*   `null` or `undefined` is passed.
 * @param dimension - The dimension to measure ('width' or 'height').
-* @returns The size of the element in pixels. Returns 0 if the element is not provided.
+* @param gap - Optional gap (in px) to add to each item's size, representing the `column-gap` (width) or `row-gap` (height) of the parent container.
+* @returns The size of the element in pixels, or 0 if no element is provided.
 */
-function getSize(el, dimension) {
+function getSize(el, dimension, gap = 0) {
 	if (!el) return 0;
 	const originalDisplay = el.style.display;
-	if (!el.offsetParent && getComputedStyle(el).display === "none") el.style.display = "inline-block";
+	const styles = getComputedStyle(el);
+	if (!el.offsetParent && styles.display === "none") el.style.display = "inline-block";
 	const size = el.getBoundingClientRect()[dimension];
 	el.style.display = originalDisplay;
-	return size;
+	return size + (dimension === "width" ? (parseFloat(styles.marginLeft) || 0) + (parseFloat(styles.marginRight) || 0) : (parseFloat(styles.marginTop) || 0) + (parseFloat(styles.marginBottom) || 0)) + gap;
 }
 /**
 * Updates the overflow handler by determining which items should be visible and which should be hidden.
@@ -31,64 +33,80 @@ function getSize(el, dimension) {
 * @param options - Configuration options for updating the overflow handler.
 * @returns An array of hidden items after the update.
 */
-function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [] }) {
+function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [], offsetValue = 0, gap = 0 }) {
 	const containerSize = dimension === "width" ? container.clientWidth : container.clientHeight;
 	let visibleItems = [];
 	let hiddenItems = [];
 	const totalSize = sizes.reduce((sum, size) => sum + size, 0);
 	const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);
-	if (totalSize + totalFixedSize <= containerSize) {
+	const trailingGap = sizes.length + fixedSizes.length > 0 ? gap : 0;
+	if (totalSize + totalFixedSize - trailingGap <= containerSize - offsetValue) {
 		visibleItems = maxVisibleItems ? items.slice(0, maxVisibleItems) : [...items];
 		hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];
 	} else {
-		const available = containerSize - offsetSize;
+		const available = containerSize - offsetSize - totalFixedSize - offsetValue + gap;
 		let accumulated = 0;
+		let breakIndex = items.length;
 		for (let i = 0; i < items.length; i++) {
 			const size = sizes[i];
-			if (accumulated + size + totalFixedSize <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
+			if (accumulated + size <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
 				visibleItems.push(items[i]);
 				accumulated += size;
-			} else hiddenItems.push(items[i]);
+			} else {
+				breakIndex = i;
+				break;
+			}
 		}
+		hiddenItems = items.slice(breakIndex);
 	}
-	if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) return previousHiddenItems;
 	visibleItems.forEach((item) => item.removeAttribute("data-hidden"));
 	hiddenItems.forEach((item) => item.setAttribute("data-hidden", ""));
 	if (offset) offset.toggleAttribute("data-hidden", hiddenItems.length === 0);
+	if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) return previousHiddenItems;
 	onChange(visibleItems, hiddenItems);
 	return hiddenItems;
 }
-function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = "width" }) {
+function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = "width", offsetValue, gap }) {
 	if (!(container instanceof HTMLElement)) throw new Error("container must be an HTMLElement");
 	if (typeof onChange !== "function") throw new Error("onChange must be a function");
 	if (maxVisibleItems !== void 0 && (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)) throw new Error("maxVisibleItems must be a positive integer");
-	const children = Array.from(container.children).filter((item) => item instanceof HTMLElement);
+	const children = Array.from(container.children);
 	const offset = children.find((item) => item.hasAttribute("data-offset"));
 	const fixedItems = children.filter((item) => item.hasAttribute("data-fixed"));
 	const items = children.filter((item) => item !== offset && !fixedItems.includes(item));
-	const fixedSizes = fixedItems.map((item) => getSize(item, dimension));
-	const sizes = items.map((item) => getSize(item, dimension));
-	const offsetSize = getSize(offset, dimension);
 	let previousHiddenItems = [];
-	function update() {
+	let rafId;
+	let disconnected = false;
+	const update = () => {
+		if (disconnected) return;
+		rafId = void 0;
 		previousHiddenItems = updateOverflowHandler({
 			container,
 			items,
 			offset,
-			sizes,
-			fixedSizes,
-			offsetSize,
+			sizes: items.map((item) => getSize(item, dimension, gap)),
+			fixedSizes: fixedItems.map((item) => getSize(item, dimension, gap)),
+			offsetSize: getSize(offset, dimension, gap),
 			maxVisibleItems,
 			dimension,
 			onChange,
-			previousHiddenItems
+			previousHiddenItems,
+			offsetValue,
+			gap
 		});
-	}
-	const resizeObserver = new ResizeObserver(() => requestAnimationFrame(update));
+	};
+	const scheduleUpdate = () => {
+		if (disconnected || rafId !== void 0) return;
+		rafId = requestAnimationFrame(update);
+	};
+	const resizeObserver = new ResizeObserver(scheduleUpdate);
 	resizeObserver.observe(container);
-	requestAnimationFrame(update);
+	scheduleUpdate();
+	document.fonts?.ready?.then(scheduleUpdate);
 	return { disconnect() {
+		disconnected = true;
 		resizeObserver.disconnect();
+		if (rafId !== void 0) cancelAnimationFrame(rafId);
 	} };
 }
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/utilities",
   "description": "Utilities and helpers to drive consistency across software products using the Carbon Design System",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,9 @@
   "sideEffects": [
     "*.scss",
     "./index.scss",
-    "./scss/**"
+    "./scss/**",
+    "./es/date-picker/index.js",
+    "./lib/date-picker/index.js"
   ],
   "exports": {
     ".": {
@@ -64,7 +66,8 @@
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.6.1",
-    "@internationalized/number": "^3.6.1"
+    "@internationalized/number": "^3.6.1",
+    "temporal-polyfill": "^1.0.4"
   },
-  "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
+  "gitHead": "7518c84ffd00f22434fe19d83119692c12fccb2f"
 }