@carbon/utilities 0.18.0-rc.0 → 0.19.0-rc.0

package/es/carousel/index.d.ts

@@ -1,2 +1,2 @@
-import { a as InitCarousel, i as Config, n as CarouselResponse, o as TranslationKey, r as CarouselStackHistory, t as initCarousel } from "../chunk-DPUOAfLB.js";
+import { a as InitCarousel, i as Config, n as CarouselResponse, o as TranslationKey, r as CarouselStackHistory, t as initCarousel } from "../chunk-BxtJV719.js";
 export { CarouselResponse, CarouselStackHistory, Config, InitCarousel, TranslationKey, initCarousel };

package/es/carousel/index.js

@@ -1,3 +1,2 @@
-import { t as initCarousel } from "../chunk-Ci2WlFE4.js";
-
-export { initCarousel };
+import { t as initCarousel } from "../chunk-DMEZ3h3f.js";
+export { initCarousel };

package/es/{chunk-Bzxox1sl.d.ts → chunk-BIOsKtwb.d.ts}

@@ -45,4 +45,10 @@ declare function formatRange(startDate: Date | number, endDate: Date | number, o
   timeZone: Intl.DateTimeFormatOptions['timeZone'];
 }>): string;
 //#endregion
-export { relative_d_exports as n, absolute_d_exports as t };
+//#region src/dateTimeFormat/index.d.ts
+declare const dateTimeFormat: {
+  relative: typeof relative_d_exports;
+  absolute: typeof absolute_d_exports;
+};
+//#endregion
+export { dateTimeFormat as t };

package/es/{chunk-CYAX4TFi.js → chunk-D7jICOmO.js}

@@ -1,5 +1,4 @@
-import { t as __exportAll } from "./chunk-BYypO7fO.js";
-
+import { t as __exportAll } from "./chunk-pbuEa-1d.js";
 //#region src/dateTimeFormat/relative.ts
 var relative_exports = /* @__PURE__ */ __exportAll({ format: () => format$1 });
 /**
@@ -11,8 +10,7 @@ var relative_exports = /* @__PURE__ */ __exportAll({ format: () => format$1 });
 function format$1(date, options) {
 	const rtf = new Intl.RelativeTimeFormat(options?.locale, { style: options?.style ?? "long" });
 	const d = typeof date === "number" ? new Date(date) : date;
-	const now = Date.now();
-	const seconds = Math.floor((now - d.getTime()) / 1e3);
+	const seconds = Math.floor((Date.now() - d.getTime()) / 1e3);
 	const minutes = Math.floor(seconds / 60);
 	const hours = Math.floor(minutes / 60);
 	const days = Math.floor(hours / 24);
@@ -30,7 +28,6 @@ function format$1(date, options) {
 	if (Math.abs(days) < 365) return rtf.format(months * -1, "months");
 	return rtf.format(years * -1, "years");
 }
-
 //#endregion
 //#region src/dateTimeFormat/absolute.ts
 var absolute_exports = /* @__PURE__ */ __exportAll({
@@ -75,6 +72,17 @@ function formatRange(startDate, endDate, options) {
 		timeZone: options?.timeZone
 	}).formatRange(startDate, endDate);
 }
-
 //#endregion
-export { relative_exports as n, absolute_exports as t };
+//#region src/dateTimeFormat/index.ts
+/**
+* Copyright IBM Corp. 2024
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const dateTimeFormat = {
+	relative: relative_exports,
+	absolute: absolute_exports
+};
+//#endregion
+export { dateTimeFormat as t };

package/es/{chunk-Ci2WlFE4.js → chunk-DMEZ3h3f.js}

@@ -9,7 +9,6 @@ const translationIds = {
 	"carbon.carousel.item": "carbon.carousel.item",
 	"carbon.carousel.of": "carbon.carousel.of"
 };
-
 //#endregion
 //#region src/carousel/swipeEvents.ts
 /**
@@ -89,7 +88,6 @@ const registerSwipeEvents = (carousel, next, prev, destroy) => {
 	carousel.addEventListener("mouseup", mouseUpHandler);
 	carousel.addEventListener("wheel", wheelHandler);
 };
-
 //#endregion
 //#region src/carousel/carousel.ts
 const defaultTranslations = {
@@ -432,6 +430,5 @@ const initCarousel = (carouselContainer, config) => {
 		allViews: refs
 	};
 };
-
 //#endregion
-export { initCarousel as t };
+export { initCarousel as t };

package/es/chunk-pbuEa-1d.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/es/datePartsOrder/index.js

@@ -16,6 +16,5 @@ const datePartsOrder = {
 	getMonthYearOrder,
 	isMonthFirst
 };
-
 //#endregion
-export { datePartsOrder };
+export { datePartsOrder };

package/es/dateTimeFormat/index.d.ts

@@ -1,9 +1,2 @@
-import { n as relative_d_exports, t as absolute_d_exports } from "../chunk-Bzxox1sl.js";
-
-//#region src/dateTimeFormat/index.d.ts
-declare const dateTimeFormat: {
-  relative: typeof relative_d_exports;
-  absolute: typeof absolute_d_exports;
-};
-//#endregion
+import { t as dateTimeFormat } from "../chunk-BIOsKtwb.js";
 export { dateTimeFormat };

package/es/dateTimeFormat/index.js

@@ -1,16 +1,2 @@
-import { n as relative_exports, t as absolute_exports } from "../chunk-CYAX4TFi.js";
-
-//#region src/dateTimeFormat/index.ts
-/**
-* Copyright IBM Corp. 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-const dateTimeFormat = {
-	relative: relative_exports,
-	absolute: absolute_exports
-};
-
-//#endregion
-export { dateTimeFormat };
+import { t as dateTimeFormat } from "../chunk-D7jICOmO.js";
+export { dateTimeFormat };

package/es/documentLang/index.js

@@ -64,6 +64,5 @@ function subscribeDocumentLangChange(callback) {
 		if (subscribers.length === 0) observerInitialized = false;
 	};
 }
-
 //#endregion
-export { getDocumentLang, subscribeDocumentLangChange };
+export { getDocumentLang, subscribeDocumentLangChange };

package/es/index.d.ts

@@ -1,6 +1,6 @@
-import { a as InitCarousel, i as Config, n as CarouselResponse, o as TranslationKey, r as CarouselStackHistory, t as initCarousel } from "./chunk-DPUOAfLB.js";
+import { a as InitCarousel, i as Config, n as CarouselResponse, o as TranslationKey, r as CarouselStackHistory, t as initCarousel } from "./chunk-BxtJV719.js";
 import { datePartsOrder } from "./datePartsOrder/index.js";
-import { dateTimeFormat } from "./dateTimeFormat/index.js";
+import { t as dateTimeFormat } from "./chunk-BIOsKtwb.js";
 import { getDocumentLang, subscribeDocumentLangChange } from "./documentLang/index.js";
 import { makeDraggable } from "./makeDraggable/index.js";
 import { OverflowHandler, OverflowHandlerOptions, UpdateOverflowHandlerOptions, createOverflowHandler, getSize, updateOverflowHandler } from "./overflowHandler/index.js";

package/es/index.js

@@ -1,10 +1,8 @@
-import { t as initCarousel } from "./chunk-Ci2WlFE4.js";
+import { t as initCarousel } from "./chunk-DMEZ3h3f.js";
 import { datePartsOrder } from "./datePartsOrder/index.js";
-import { dateTimeFormat } from "./dateTimeFormat/index.js";
+import { t as dateTimeFormat } from "./chunk-D7jICOmO.js";
 import { getDocumentLang, subscribeDocumentLangChange } from "./documentLang/index.js";
 import { makeDraggable } from "./makeDraggable/index.js";
 import { createOverflowHandler, getSize, updateOverflowHandler } from "./overflowHandler/index.js";
-
-export * from "@internationalized/number"
-
-export { createOverflowHandler, datePartsOrder, dateTimeFormat, getDocumentLang, getSize, initCarousel, makeDraggable, subscribeDocumentLangChange, updateOverflowHandler };
+export * from "@internationalized/number";
+export { createOverflowHandler, datePartsOrder, dateTimeFormat, getDocumentLang, getSize, initCarousel, makeDraggable, subscribeDocumentLangChange, updateOverflowHandler };

package/es/makeDraggable/index.d.ts

@@ -1,6 +1,6 @@
 //#region src/makeDraggable/makeDraggable.d.ts
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025, 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.
@@ -41,6 +41,7 @@ declare const makeDraggable: ({
   shiftDragStep
 }: DraggableProps) => {
   cleanup: () => void;
+  init: () => void;
 };
 //#endregion
 export { makeDraggable };

package/es/makeDraggable/index.js

@@ -9,8 +9,49 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.style.cursor = "default";
 	} else el.style.cursor = "move";
 	let isDragging = false;
-	let offsetX = 0;
-	let offsetY = 0;
+	let currentX = 0;
+	let currentY = 0;
+	let initialMouseX = 0;
+	let initialMouseY = 0;
+	let baseMatrix = null;
+	/**
+	* Syncs position and extracts base matrix from computed style.
+	* Reads from getComputedStyle() to include all transform sources (inline, classes, etc.).
+	*/
+	const syncTransformState = () => {
+		const transformString = window.getComputedStyle(el).transform;
+		if (!transformString || transformString === "none") {
+			currentX = 0;
+			currentY = 0;
+			baseMatrix = null;
+			return;
+		}
+		const matrix = new DOMMatrix(transformString);
+		currentX = matrix.m41;
+		currentY = matrix.m42;
+		if (matrix.a === 1 && matrix.b === 0 && matrix.c === 0 && matrix.d === 1 && matrix.e === 0 && matrix.f === 0) baseMatrix = null;
+		else baseMatrix = new DOMMatrix([
+			matrix.a,
+			matrix.b,
+			matrix.c,
+			matrix.d,
+			0,
+			0
+		]);
+	};
+	syncTransformState();
+	/**
+	* Applies transform by combining translation with base matrix using matrix multiplication.
+	*/
+	const applyTransform = (x, y) => {
+		if (baseMatrix) {
+			const translationMatrix = new DOMMatrix();
+			translationMatrix.m41 = x;
+			translationMatrix.m42 = y;
+			const combined = translationMatrix.multiply(baseMatrix);
+			el.style.transform = combined.toString();
+		} else el.style.transform = `translate(${x}px, ${y}px)`;
+	};
 	const dispatch = (type, detail) => {
 		const eventInit = {
 			detail,
@@ -19,9 +60,13 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.dispatchEvent(new CustomEvent(type, eventInit));
 	};
 	const onKeyDown = (e) => {
-		if (e.key === "Enter") isDragging = !isDragging;
-		if (isDragging) dispatch("dragstart", { keyboard: true });
-		else dispatch("dragend", { keyboard: true });
+		if (e.key === "Enter") {
+			isDragging = !isDragging;
+			if (isDragging) {
+				syncTransformState();
+				dispatch("dragstart", { keyboard: true });
+			} else dispatch("dragend", { keyboard: true });
+		}
 		if (!isDragging) return;
 		const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
 		switch (e.key) {
@@ -30,16 +75,20 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 				e.preventDefault();
 				break;
 			case "ArrowLeft":
-				el.style.left = `${el.offsetLeft - distance}px`;
+				currentX -= distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowRight":
-				el.style.left = `${el.offsetLeft + distance}px`;
+				currentX += distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowUp":
-				el.style.top = `${el.offsetTop - distance}px`;
+				currentY -= distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowDown":
-				el.style.top = `${el.offsetTop + distance}px`;
+				currentY += distance;
+				applyTransform(currentX, currentY);
 				break;
 		}
 	};
@@ -47,8 +96,9 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		const target = e.target;
 		if (!(target instanceof Node)) return;
 		if (!(dragHandle ? dragHandle.contains(target) : el.contains(target))) return;
-		offsetX = e.clientX - el.offsetLeft;
-		offsetY = e.clientY - el.offsetTop;
+		syncTransformState();
+		initialMouseX = e.clientX;
+		initialMouseY = e.clientY;
 		isDragging = true;
 		dispatch("dragstart", { mouse: true });
 		document.addEventListener("mousemove", onMouseMove);
@@ -56,11 +106,16 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 	};
 	const onMouseMove = (e) => {
 		if (!isDragging) return;
-		el.style.left = `${e.clientX - offsetX}px`;
-		el.style.top = `${e.clientY - offsetY}px`;
+		const dx = e.clientX - initialMouseX;
+		const dy = e.clientY - initialMouseY;
+		applyTransform(currentX + dx, currentY + dy);
 	};
-	const onMouseUp = () => {
+	const onMouseUp = (e) => {
 		if (!isDragging) return;
+		const dx = e.clientX - initialMouseX;
+		const dy = e.clientY - initialMouseY;
+		currentX += dx;
+		currentY += dy;
 		isDragging = false;
 		dispatch("dragend", { mouse: true });
 		document.removeEventListener("mousemove", onMouseMove);
@@ -75,8 +130,18 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		document.removeEventListener("mousemove", onMouseMove);
 		document.removeEventListener("mouseup", onMouseUp);
 	};
-	return { cleanup: draggableCleanup };
+	/**
+	* Re-initialize the draggable position from the element's current computed transform.
+	* Call this if the element has been repositioned externally (e.g., via CSS animation,
+	* class changes, or other scripts) to prevent position jumps on the next drag.
+	*/
+	const init = () => {
+		syncTransformState();
+	};
+	return {
+		cleanup: draggableCleanup,
+		init
+	};
 };
-
 //#endregion
-export { makeDraggable };
+export { makeDraggable };

package/es/overflowHandler/index.js

@@ -90,6 +90,5 @@ function createOverflowHandler({ container, maxVisibleItems, onChange, dimension
 		resizeObserver.disconnect();
 	} };
 }
-
 //#endregion
-export { createOverflowHandler, getSize, updateOverflowHandler };
+export { createOverflowHandler, getSize, updateOverflowHandler };

package/lib/carousel/index.js

@@ -1,4 +1,3 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_carousel = require('../chunk-C5VBwGBG.js');
-
-exports.initCarousel = require_carousel.initCarousel;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_carousel = require("../chunk-DVu1wdA8.js");
+exports.initCarousel = require_carousel.initCarousel;

package/lib/{chunk-Dc0mzKQx.js → chunk-D5n0j0X6.js}

@@ -2,20 +2,14 @@
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-
 //#endregion
-
 //#region src/dateTimeFormat/relative.ts
 var relative_exports = /* @__PURE__ */ __exportAll({ format: () => format$1 });
 /**
@@ -27,8 +21,7 @@ var relative_exports = /* @__PURE__ */ __exportAll({ format: () => format$1 });
 function format$1(date, options) {
 	const rtf = new Intl.RelativeTimeFormat(options?.locale, { style: options?.style ?? "long" });
 	const d = typeof date === "number" ? new Date(date) : date;
-	const now = Date.now();
-	const seconds = Math.floor((now - d.getTime()) / 1e3);
+	const seconds = Math.floor((Date.now() - d.getTime()) / 1e3);
 	const minutes = Math.floor(seconds / 60);
 	const hours = Math.floor(minutes / 60);
 	const days = Math.floor(hours / 24);
@@ -46,7 +39,6 @@ function format$1(date, options) {
 	if (Math.abs(days) < 365) return rtf.format(months * -1, "months");
 	return rtf.format(years * -1, "years");
 }
-
 //#endregion
 //#region src/dateTimeFormat/absolute.ts
 var absolute_exports = /* @__PURE__ */ __exportAll({
@@ -91,17 +83,22 @@ function formatRange(startDate, endDate, options) {
 		timeZone: options?.timeZone
 	}).formatRange(startDate, endDate);
 }
-
 //#endregion
-Object.defineProperty(exports, 'absolute_exports', {
-  enumerable: true,
-  get: function () {
-    return absolute_exports;
-  }
+//#region src/dateTimeFormat/index.ts
+/**
+* Copyright IBM Corp. 2024
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const dateTimeFormat = {
+	relative: relative_exports,
+	absolute: absolute_exports
+};
+//#endregion
+Object.defineProperty(exports, "dateTimeFormat", {
+	enumerable: true,
+	get: function() {
+		return dateTimeFormat;
+	}
 });
-Object.defineProperty(exports, 'relative_exports', {
-  enumerable: true,
-  get: function () {
-    return relative_exports;
-  }
-});

package/lib/{chunk-C5VBwGBG.js → chunk-DVu1wdA8.js}

@@ -1,4 +1,3 @@
-
 //#region src/carousel/defs.ts
 /**
 * Copyright IBM Corp. 2026
@@ -10,7 +9,6 @@ const translationIds = {
 	"carbon.carousel.item": "carbon.carousel.item",
 	"carbon.carousel.of": "carbon.carousel.of"
 };
-
 //#endregion
 //#region src/carousel/swipeEvents.ts
 /**
@@ -90,7 +88,6 @@ const registerSwipeEvents = (carousel, next, prev, destroy) => {
 	carousel.addEventListener("mouseup", mouseUpHandler);
 	carousel.addEventListener("wheel", wheelHandler);
 };
-
 //#endregion
 //#region src/carousel/carousel.ts
 const defaultTranslations = {
@@ -433,11 +430,10 @@ const initCarousel = (carouselContainer, config) => {
 		allViews: refs
 	};
 };
-
 //#endregion
-Object.defineProperty(exports, 'initCarousel', {
-  enumerable: true,
-  get: function () {
-    return initCarousel;
-  }
-});
+Object.defineProperty(exports, "initCarousel", {
+	enumerable: true,
+	get: function() {
+		return initCarousel;
+	}
+});

package/lib/datePartsOrder/index.js

@@ -1,5 +1,4 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/datePartsOrder/datePartsOrder.ts
 const _orderCache = /* @__PURE__ */ new Map();
 function getMonthYearOrder(locale) {
@@ -18,6 +17,5 @@ const datePartsOrder = {
 	getMonthYearOrder,
 	isMonthFirst
 };
-
 //#endregion
-exports.datePartsOrder = datePartsOrder;
+exports.datePartsOrder = datePartsOrder;

package/lib/dateTimeFormat/index.js

@@ -1,17 +1,3 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_absolute = require('../chunk-Dc0mzKQx.js');
-
-//#region src/dateTimeFormat/index.ts
-/**
-* Copyright IBM Corp. 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-const dateTimeFormat = {
-	relative: require_absolute.relative_exports,
-	absolute: require_absolute.absolute_exports
-};
-
-//#endregion
-exports.dateTimeFormat = dateTimeFormat;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dateTimeFormat = require("../chunk-D5n0j0X6.js");
+exports.dateTimeFormat = require_dateTimeFormat.dateTimeFormat;

package/lib/documentLang/index.js

@@ -1,5 +1,4 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/documentLang/documentLang.ts
 /**
 * Copyright IBM Corp. 2025
@@ -66,7 +65,6 @@ function subscribeDocumentLangChange(callback) {
 		if (subscribers.length === 0) observerInitialized = false;
 	};
 }
-
 //#endregion
 exports.getDocumentLang = getDocumentLang;
-exports.subscribeDocumentLangChange = subscribeDocumentLangChange;
+exports.subscribeDocumentLangChange = subscribeDocumentLangChange;

package/lib/index.js

@@ -1,14 +1,13 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_carousel = require('./chunk-C5VBwGBG.js');
-const require_datePartsOrder_index = require('./datePartsOrder/index.js');
-const require_dateTimeFormat_index = require('./dateTimeFormat/index.js');
-const require_documentLang_index = require('./documentLang/index.js');
-const require_makeDraggable_index = require('./makeDraggable/index.js');
-const require_overflowHandler_index = require('./overflowHandler/index.js');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dateTimeFormat = require("./chunk-D5n0j0X6.js");
+const require_carousel = require("./chunk-DVu1wdA8.js");
+const require_datePartsOrder_index = require("./datePartsOrder/index.js");
+const require_documentLang_index = require("./documentLang/index.js");
+const require_makeDraggable_index = require("./makeDraggable/index.js");
+const require_overflowHandler_index = require("./overflowHandler/index.js");
 exports.createOverflowHandler = require_overflowHandler_index.createOverflowHandler;
 exports.datePartsOrder = require_datePartsOrder_index.datePartsOrder;
-exports.dateTimeFormat = require_dateTimeFormat_index.dateTimeFormat;
+exports.dateTimeFormat = require_dateTimeFormat.dateTimeFormat;
 exports.getDocumentLang = require_documentLang_index.getDocumentLang;
 exports.getSize = require_overflowHandler_index.getSize;
 exports.initCarousel = require_carousel.initCarousel;
@@ -16,9 +15,11 @@ exports.makeDraggable = require_makeDraggable_index.makeDraggable;
 exports.subscribeDocumentLangChange = require_documentLang_index.subscribeDocumentLangChange;
 exports.updateOverflowHandler = require_overflowHandler_index.updateOverflowHandler;
 var _internationalized_number = require("@internationalized/number");
-Object.keys(_internationalized_number).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return _internationalized_number[k]; }
-  });
+Object.keys(_internationalized_number).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return _internationalized_number[k];
+		}
+	});
 });

package/lib/makeDraggable/index.js

@@ -1,5 +1,4 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/makeDraggable/makeDraggable.ts
 /**
 * Makes a given element draggable using a handle element.
@@ -11,8 +10,49 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.style.cursor = "default";
 	} else el.style.cursor = "move";
 	let isDragging = false;
-	let offsetX = 0;
-	let offsetY = 0;
+	let currentX = 0;
+	let currentY = 0;
+	let initialMouseX = 0;
+	let initialMouseY = 0;
+	let baseMatrix = null;
+	/**
+	* Syncs position and extracts base matrix from computed style.
+	* Reads from getComputedStyle() to include all transform sources (inline, classes, etc.).
+	*/
+	const syncTransformState = () => {
+		const transformString = window.getComputedStyle(el).transform;
+		if (!transformString || transformString === "none") {
+			currentX = 0;
+			currentY = 0;
+			baseMatrix = null;
+			return;
+		}
+		const matrix = new DOMMatrix(transformString);
+		currentX = matrix.m41;
+		currentY = matrix.m42;
+		if (matrix.a === 1 && matrix.b === 0 && matrix.c === 0 && matrix.d === 1 && matrix.e === 0 && matrix.f === 0) baseMatrix = null;
+		else baseMatrix = new DOMMatrix([
+			matrix.a,
+			matrix.b,
+			matrix.c,
+			matrix.d,
+			0,
+			0
+		]);
+	};
+	syncTransformState();
+	/**
+	* Applies transform by combining translation with base matrix using matrix multiplication.
+	*/
+	const applyTransform = (x, y) => {
+		if (baseMatrix) {
+			const translationMatrix = new DOMMatrix();
+			translationMatrix.m41 = x;
+			translationMatrix.m42 = y;
+			const combined = translationMatrix.multiply(baseMatrix);
+			el.style.transform = combined.toString();
+		} else el.style.transform = `translate(${x}px, ${y}px)`;
+	};
 	const dispatch = (type, detail) => {
 		const eventInit = {
 			detail,
@@ -21,9 +61,13 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		el.dispatchEvent(new CustomEvent(type, eventInit));
 	};
 	const onKeyDown = (e) => {
-		if (e.key === "Enter") isDragging = !isDragging;
-		if (isDragging) dispatch("dragstart", { keyboard: true });
-		else dispatch("dragend", { keyboard: true });
+		if (e.key === "Enter") {
+			isDragging = !isDragging;
+			if (isDragging) {
+				syncTransformState();
+				dispatch("dragstart", { keyboard: true });
+			} else dispatch("dragend", { keyboard: true });
+		}
 		if (!isDragging) return;
 		const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
 		switch (e.key) {
@@ -32,16 +76,20 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 				e.preventDefault();
 				break;
 			case "ArrowLeft":
-				el.style.left = `${el.offsetLeft - distance}px`;
+				currentX -= distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowRight":
-				el.style.left = `${el.offsetLeft + distance}px`;
+				currentX += distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowUp":
-				el.style.top = `${el.offsetTop - distance}px`;
+				currentY -= distance;
+				applyTransform(currentX, currentY);
 				break;
 			case "ArrowDown":
-				el.style.top = `${el.offsetTop + distance}px`;
+				currentY += distance;
+				applyTransform(currentX, currentY);
 				break;
 		}
 	};
@@ -49,8 +97,9 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		const target = e.target;
 		if (!(target instanceof Node)) return;
 		if (!(dragHandle ? dragHandle.contains(target) : el.contains(target))) return;
-		offsetX = e.clientX - el.offsetLeft;
-		offsetY = e.clientY - el.offsetTop;
+		syncTransformState();
+		initialMouseX = e.clientX;
+		initialMouseY = e.clientY;
 		isDragging = true;
 		dispatch("dragstart", { mouse: true });
 		document.addEventListener("mousemove", onMouseMove);
@@ -58,11 +107,16 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 	};
 	const onMouseMove = (e) => {
 		if (!isDragging) return;
-		el.style.left = `${e.clientX - offsetX}px`;
-		el.style.top = `${e.clientY - offsetY}px`;
+		const dx = e.clientX - initialMouseX;
+		const dy = e.clientY - initialMouseY;
+		applyTransform(currentX + dx, currentY + dy);
 	};
-	const onMouseUp = () => {
+	const onMouseUp = (e) => {
 		if (!isDragging) return;
+		const dx = e.clientX - initialMouseX;
+		const dy = e.clientY - initialMouseY;
+		currentX += dx;
+		currentY += dy;
 		isDragging = false;
 		dispatch("dragend", { mouse: true });
 		document.removeEventListener("mousemove", onMouseMove);
@@ -77,8 +131,18 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		document.removeEventListener("mousemove", onMouseMove);
 		document.removeEventListener("mouseup", onMouseUp);
 	};
-	return { cleanup: draggableCleanup };
+	/**
+	* Re-initialize the draggable position from the element's current computed transform.
+	* Call this if the element has been repositioned externally (e.g., via CSS animation,
+	* class changes, or other scripts) to prevent position jumps on the next drag.
+	*/
+	const init = () => {
+		syncTransformState();
+	};
+	return {
+		cleanup: draggableCleanup,
+		init
+	};
 };
-
 //#endregion
-exports.makeDraggable = makeDraggable;
+exports.makeDraggable = makeDraggable;

package/lib/overflowHandler/index.js

@@ -1,5 +1,4 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/overflowHandler/overflowHandler.ts
 /**
 * Copyright IBM Corp. 2025, 2026
@@ -92,8 +91,7 @@ function createOverflowHandler({ container, maxVisibleItems, onChange, dimension
 		resizeObserver.disconnect();
 	} };
 }
-
 //#endregion
 exports.createOverflowHandler = createOverflowHandler;
 exports.getSize = getSize;
-exports.updateOverflowHandler = updateOverflowHandler;
+exports.updateOverflowHandler = updateOverflowHandler;

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.18.0-rc.0",
+  "version": "0.19.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -59,12 +59,12 @@
   },
   "devDependencies": {
     "rimraf": "^6.0.1",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.0",
     "typescript-config-carbon": "^0.9.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.6.1",
     "@internationalized/number": "^3.6.1"
   },
-  "gitHead": "d901529b78f5b70b49309ad45604fa5ec99a2e69"
+  "gitHead": "20a00767571db791cac99d499527e2f995ead478"
 }

package/es/chunk-BYypO7fO.js

@@ -1,18 +0,0 @@
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
-	return target;
-};
-
-//#endregion
-export { __exportAll as t };