@carbon/ibm-products 2.92.1 → 2.93.0

package/es/components/Tearsheet/usePresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../../src/components/Tearsheet/usePresence.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,eAAO,MAAM,WAAW,GACtB,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,QAAQ,OAAO;IAgEb;;OAEG;;IAGH;;OAEG;;CAGN,CAAC"}
+{"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../../src/components/Tearsheet/usePresence.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9D,eAAO,MAAM,WAAW,GACtB,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,QAAQ,OAAO;IAgEb;;OAEG;;IAGH;;OAEG;;CAGN,CAAC"}

package/es/components/Tearsheet/usePresence.js

@@ -6,7 +6,8 @@
  */
 
 import { pkg } from "../../settings.js";
-import { useCallback, useLayoutEffect, useState } from "react";
+import { useIsomorphicEffect } from "../../global/js/hooks/useIsomorphicEffect.js";
+import { useCallback, useState } from "react";
 //#region src/components/Tearsheet/usePresence.ts
 /**
 * Copyright IBM Corp. 2025
@@ -22,7 +23,7 @@ const usePresence = (ref, isOpen) => {
 	const handleAnimationEnd = useCallback(() => {
 		setExitState("finished");
 	}, []);
-	useLayoutEffect(() => {
+	useIsomorphicEffect(() => {
 		if (!ref.current || !isExiting) return;
 		if (!("getAnimations" in ref.current)) {
 			handleAnimationEnd();

package/es/global/js/package-settings.d.ts

@@ -108,6 +108,7 @@ declare namespace defaults {
         let CoachmarkOverlayElement: boolean;
         let CoachmarkOverlayElements: boolean;
         let CoachmarkStack: boolean;
+        let CoachmarkTagline: boolean;
         let Decorator: boolean;
         let DecoratorLink: boolean;
         let DecoratorSingleButton: boolean;

package/es/global/js/package-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"package-settings.d.ts","sourceRoot":"","sources":["../../../src/global/js/package-settings.js"],"names":[],"mappings":"AA6MA,0DAEC;AAJD,gCAAiC,yBAAyB,CAAC;;;;;;;;IAarC,mFAMnB;IAEkB,sFAOlB;IAEiB,6EAEjB;IAED,8EAOC;IAEgB,gFAKhB;IAEiB,qDAIjB;IAEe,mDAIf;IAEiB,mDAKjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1FH;;;;;;;EAqBE"}
+{"version":3,"file":"package-settings.d.ts","sourceRoot":"","sources":["../../../src/global/js/package-settings.js"],"names":[],"mappings":"AA8MA,0DAEC;AAJD,gCAAiC,yBAAyB,CAAC;;;;;;;;IAarC,mFAMnB;IAEkB,sFAOlB;IAEiB,6EAEjB;IAED,8EAOC;IAEgB,gFAKhB;IAEiB,qDAIjB;IAEe,mDAIf;IAEiB,mDAKjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1FH;;;;;;;EAqBE"}

package/es/global/js/package-settings.js

@@ -96,6 +96,7 @@ const defaults = {
 		CoachmarkOverlayElement: false,
 		CoachmarkOverlayElements: false,
 		CoachmarkStack: false,
+		CoachmarkTagline: false,
 		Decorator: false,
 		DecoratorLink: false,
 		DecoratorSingleButton: false,

package/es/global/js/utils/makeDraggable/makeDraggable.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -30,10 +30,16 @@ 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)
  */
 export declare const makeDraggable: ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps) => {
     cleanup: () => void;
+    init: () => void;
 };
 export {};
 //# sourceMappingURL=makeDraggable.d.ts.map

package/es/global/js/utils/makeDraggable/makeDraggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeDraggable.d.ts","sourceRoot":"","sources":["../../../../../src/global/js/utils/makeDraggable/makeDraggable.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,UAAU,cAAc;IACtB;;OAEG;IACH,EAAE,EAAE,WAAW,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAOD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,mEAM3B,cAAc;;CA0IhB,CAAC"}
+{"version":3,"file":"makeDraggable.d.ts","sourceRoot":"","sources":["../../../../../src/global/js/utils/makeDraggable/makeDraggable.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,UAAU,cAAc;IACtB;;OAEG;IACH,EAAE,EAAE,WAAW,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAQD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GAAI,mEAM3B,cAAc;;;CAqNhB,CAAC"}

package/es/global/js/utils/makeDraggable/makeDraggable.js

@@ -8,7 +8,12 @@
 //#region src/global/js/utils/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) {
@@ -20,6 +25,45 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 	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,
@@ -28,13 +72,11 @@ 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) {
-				const style = window.getComputedStyle(el);
-				const matrix = new DOMMatrix(style.transform);
-				currentX = matrix.m41;
-				currentY = matrix.m42;
+				syncTransformState();
 				dispatch("dragstart", { keyboard: true });
 			} else dispatch("dragend", { keyboard: true });
 		}
@@ -47,19 +89,35 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 				break;
 			case "ArrowLeft":
 				currentX -= distance;
-				el.style.transform = `translate(${currentX}px, ${currentY}px)`;
+				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "left",
+					distance
+				});
 				break;
 			case "ArrowRight":
 				currentX += distance;
-				el.style.transform = `translate(${currentX}px, ${currentY}px)`;
+				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "right",
+					distance
+				});
 				break;
 			case "ArrowUp":
 				currentY -= distance;
-				el.style.transform = `translate(${currentX}px, ${currentY}px)`;
+				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "up",
+					distance
+				});
 				break;
 			case "ArrowDown":
 				currentY += distance;
-				el.style.transform = `translate(${currentX}px, ${currentY}px)`;
+				applyTransform(currentX, currentY);
+				dispatch("dragmove", {
+					direction: "down",
+					distance
+				});
 				break;
 		}
 	};
@@ -67,10 +125,7 @@ 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;
-		const style = window.getComputedStyle(el);
-		const matrix = new DOMMatrix(style.transform);
-		currentX = matrix.m41;
-		currentY = matrix.m42;
+		syncTransformState();
 		initialMouseX = e.clientX;
 		initialMouseY = e.clientY;
 		isDragging = true;
@@ -82,10 +137,14 @@ const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDra
 		if (!isDragging) return;
 		const dx = e.clientX - initialMouseX;
 		const dy = e.clientY - initialMouseY;
-		el.style.transform = `translate(${currentX + dx}px, ${currentY + dy}px)`;
+		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);
@@ -100,7 +159,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 };

package/es/settings.d.ts

@@ -94,6 +94,7 @@ export const pkg: {
         CoachmarkOverlayElement: boolean;
         CoachmarkOverlayElements: boolean;
         CoachmarkStack: boolean;
+        CoachmarkTagline: boolean;
         Decorator: boolean;
         DecoratorLink: boolean;
         DecoratorSingleButton: boolean;

package/es/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../src/settings.js"],"names":[],"mappings":";;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+B"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../src/settings.js"],"names":[],"mappings":";;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+B"}

package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts

@@ -1,14 +1,14 @@
 /**
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024, 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.
  */
-import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { CoachmarkContentProps } from './CoachmarkContent';
 import { NewPopoverAlignment } from '@carbon/react';
-import { ContentHeaderProps } from './ContentHeader';
-import { ContentBodyProps } from './ContentBody';
+import { CoachmarkContentHeaderProps } from './CoachmarkContentHeader';
+import { CoachmarkContentBodyProps } from './CoachmarkContentBody';
 export interface CoachmarkPropsNext {
     /**
      * Provide the contents of the Coachmark.
@@ -59,16 +59,14 @@ export interface CoachmarkPropsNext {
      */
     selectorPrimaryFocus?: string;
     /**
-     * Optional ref for an external trigger element, used when the trigger is not part of the coachmark.
+     * Prevents the Coachmark from closing when clicking outside of it.
      */
-    triggerRef?: RefObject<HTMLElement>;
+    preventCloseOnClickOutside?: boolean;
 }
-type CoachmarkContentComponent = FC<CoachmarkContentProps> & {
-    Header: FC<ContentHeaderProps>;
-    Body: FC<ContentBodyProps>;
-};
 export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkPropsNext & RefAttributes<HTMLDivElement>> & {
-    Content: CoachmarkContentComponent;
+    Content: FC<CoachmarkContentProps>;
+    ContentHeader: FC<CoachmarkContentHeaderProps>;
+    ContentBody: FC<CoachmarkContentBodyProps>;
 };
 /**
  * Coachmarks are used to call out specific functionality or concepts
@@ -76,5 +74,4 @@ export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkPropsNext &
  * user to gain understanding of the product's main value and discover new use cases.
  */
 export declare const Coachmark: CoachmarkComponent;
-export {};
 //# sourceMappingURL=Coachmark.d.ts.map

package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Coachmark.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/Coachmark.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EACZ,EAAE,EACF,yBAAyB,EACzB,SAAS,EACT,aAAa,EACb,SAAS,EAKV,MAAM,OAAO,CAAC;AAOf,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAW,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiB9D,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACrC;AAED,KAAK,yBAAyB,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG;IAC3D,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC;IAC/B,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CACxD,kBAAkB,GAAG,aAAa,CAAC,cAAc,CAAC,CACnD,GAAG;IACF,OAAO,EAAE,yBAAyB,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAwJjB,kBAAkB,CAAC"}
+{"version":3,"file":"Coachmark.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/Coachmark.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EACZ,EAAE,EACF,yBAAyB,EACzB,SAAS,EACT,aAAa,EAMd,MAAM,OAAO,CAAC;AAOf,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAW,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAGD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CACxD,kBAAkB,GAAG,aAAa,CAAC,cAAc,CAAC,CACnD,GAAG;IACF,OAAO,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IACnC,aAAa,EAAE,EAAE,CAAC,2BAA2B,CAAC,CAAC;IAC/C,WAAW,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EA4IjB,kBAAkB,CAAC"}

package/lib/components/Coachmark/next/Coachmark/Coachmark.js

@@ -11,8 +11,8 @@ const require_useIsomorphicEffect = require("../../../../global/js/hooks/useIsom
 const require_devtools = require("../../../../global/js/utils/devtools.js");
 const require_context = require("./context.js");
 const require_CoachmarkContent = require("./CoachmarkContent.js");
-const require_ContentHeader = require("./ContentHeader.js");
-const require_ContentBody = require("./ContentBody.js");
+const require_CoachmarkContentHeader = require("./CoachmarkContentHeader.js");
+const require_CoachmarkContentBody = require("./CoachmarkContentBody.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
@@ -20,7 +20,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let _carbon_react = require("@carbon/react");
 //#region src/components/Coachmark/next/Coachmark/Coachmark.tsx
 /**
-* Copyright IBM Corp. 2024, 2025
+* Copyright IBM Corp. 2024, 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.
@@ -36,12 +36,12 @@ const Coachmark = (0, react.forwardRef)((props, ref) => {
 	const { children, className, onClose, align = "bottom", open, position = {
 		x: 0,
 		y: 0
-	}, floating, dropShadow, highContrast, caret, selectorPrimaryFocus, triggerRef: triggerRefProp, ...rest } = props;
-	const internalTriggerRef = (0, react.useRef)(null);
-	const triggerRef = triggerRefProp ?? internalTriggerRef;
+	}, floating, dropShadow, highContrast, caret, selectorPrimaryFocus, preventCloseOnClickOutside, ...rest } = props;
+	const triggerRef = (0, react.useRef)(null);
 	const internalRef = (0, react.useRef)(null);
 	const [contentRef, setContentRef] = (0, react.useState)(null);
 	const [openState, setOpenState] = (0, react.useState)(false);
+	const shouldPreventClose = preventCloseOnClickOutside !== void 0 ? preventCloseOnClickOutside : floating === true;
 	const setOpen = (value) => {
 		if (!value) onClose?.();
 		if (open === void 0) setOpenState(value);
@@ -49,16 +49,11 @@ const Coachmark = (0, react.forwardRef)((props, ref) => {
 	const currentOpen = open ?? openState;
 	const caretValue = caret !== void 0 ? caret : floating === true ? false : true;
 	(0, react.useEffect)(() => {
-		if (triggerRefProp?.current) return;
 		const container = internalRef.current;
 		if (!container) return;
 		const firstFocusable = Array.from(container.querySelectorAll("*")).find((el) => el.tabIndex >= 0 && !el.hasAttribute("disabled"));
 		if (firstFocusable) triggerRef.current = firstFocusable;
-	}, [
-		children,
-		triggerRef,
-		triggerRefProp
-	]);
+	}, [children, triggerRef]);
 	(0, react.useEffect)(() => {
 		const el = triggerRef.current;
 		if (el) el.setAttribute("aria-expanded", String(!!open));
@@ -84,8 +79,8 @@ const Coachmark = (0, react.forwardRef)((props, ref) => {
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	};
-	const handleRequestClose = (event) => {
-		if (floating) return;
+	const handleRequestClose = () => {
+		if (shouldPreventClose) return;
 		onClose?.();
 		setOpen(false);
 	};
@@ -112,17 +107,11 @@ const Coachmark = (0, react.forwardRef)((props, ref) => {
 		caret: caretValue,
 		highContrast: highContrast ?? true,
 		dropShadow
-	}, triggerRefProp?.current ? /* @__PURE__ */ react.default.createElement("span", {
-		"aria-hidden": "true",
-		style: { display: "contents" },
-		ref: (node) => {
-			if (node && triggerRefProp.current) node.replaceWith(triggerRefProp.current);
-		}
-	}) : null, children)));
+	}, children)));
 });
 Coachmark.Content = require_CoachmarkContent.default;
-Coachmark.Content.Header = require_ContentHeader.ContentHeader;
-Coachmark.Content.Body = require_ContentBody.default;
+Coachmark.ContentHeader = require_CoachmarkContentHeader.CoachmarkContentHeader;
+Coachmark.ContentBody = require_CoachmarkContentBody.default;
 Coachmark.displayName = componentName;
 Coachmark.propTypes = {
 	/**
@@ -169,13 +158,13 @@ Coachmark.propTypes = {
 		y: prop_types.default.number
 	}),
 	/**
-	* CSS selector for the element that should receive focus when the coachmark opens.
+	* Prevents the Coachmark from closing when clicking outside of it.
 	*/
-	selectorPrimaryFocus: prop_types.default.string,
+	preventCloseOnClickOutside: prop_types.default.bool,
 	/**
-	* Optional ref for an external trigger element, used when the trigger is not part of the coachmark.
+	* CSS selector for the element that should receive focus when the coachmark opens.
 	*/
-	triggerRef: prop_types.default.shape({ current: prop_types.default.any })
+	selectorPrimaryFocus: prop_types.default.string
 };
 //#endregion
 exports.Coachmark = Coachmark;

package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024, 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.

package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoachmarkBeacon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AAMpD;;GAEG;AACH,oBAAY,WAAW;IACrB,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,iGA6B1B,CAAC"}
+{"version":3,"file":"CoachmarkBeacon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AAMpD;;GAEG;AACH,oBAAY,WAAW;IACrB,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,iGA8B1B,CAAC"}

package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js

@@ -16,7 +16,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let _carbon_react = require("@carbon/react");
 //#region src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx
 /**
-* Copyright IBM Corp. 2024, 2025
+* Copyright IBM Corp. 2024, 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.
@@ -38,7 +38,8 @@ const CoachmarkBeacon = (0, react.forwardRef)((props, ref) => {
 		type: "button",
 		...buttonProps,
 		className: `${blockClass}__target`,
-		"aria-label": label
+		"aria-label": label,
+		title: label
 	}, /* @__PURE__ */ react.default.createElement("svg", {
 		className: `${blockClass}__center`,
 		"aria-hidden": "true",
@@ -55,9 +56,7 @@ CoachmarkBeacon.propTypes = {
 	* button props
 	*/
 	buttonProps: prop_types.default.shape({
-		/**@ts-ignore*/
 		..._carbon_react.Button.propTypes,
-		/**@ts-ignore*/
 		id: prop_types.default.string,
 		onClick: prop_types.default.func,
 		onDoubleClick: prop_types.default.func,

package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { FC, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from 'react';
-import { ContentHeaderProps } from './ContentHeader';
-import { ContentBodyProps } from './ContentBody';
+import { CoachmarkContentHeaderProps } from './CoachmarkContentHeader';
+import { CoachmarkContentBodyProps } from './CoachmarkContentBody';
 export interface CoachmarkContentProps {
     /**
      * Provide an optional class to be applied to the containing node.
@@ -17,10 +17,14 @@ export interface CoachmarkContentProps {
      * It can be a single child or an array of children depending on your need
      */
     children: ReactElement | ReactNode;
+    /**
+     * Accessible label for the coachmark content region.
+     */
+    'aria-label': string;
 }
 export type CoachmarkContentComponent = ForwardRefExoticComponent<CoachmarkContentProps & RefAttributes<HTMLDivElement>> & {
-    Header: FC<ContentHeaderProps>;
-    Body: FC<ContentBodyProps>;
+    Header: FC<CoachmarkContentHeaderProps>;
+    Body: FC<CoachmarkContentBodyProps>;
 };
 declare const CoachmarkContent: CoachmarkContentComponent;
 export default CoachmarkContent;

package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoachmarkContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAc,EACZ,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,aAAa,EAId,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAC/D,qBAAqB,GAAG,aAAa,CAAC,cAAc,CAAC,CACtD,GAAG;IACF,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC;IAC/B,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAgGjB,yBAAyB,CAAC;AAE/B,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CoachmarkContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAc,EACZ,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,aAAa,EAId,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAMnE,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAC/D,qBAAqB,GAAG,aAAa,CAAC,cAAc,CAAC,CACtD,GAAG;IACF,MAAM,EAAE,EAAE,CAAC,2BAA2B,CAAC,CAAC;IACxC,IAAI,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAwHjB,yBAAyB,CAAC;AAE/B,eAAe,gBAAgB,CAAC"}

package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js

@@ -8,6 +8,7 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
 const require_index = require("../../../../node_modules/classnames/index.js");
 const require_settings = require("../../../../settings.js");
+const require_devtools = require("../../../../global/js/utils/devtools.js");
 const require_context = require("./context.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
@@ -23,7 +24,7 @@ let _carbon_react = require("@carbon/react");
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
 const CoachmarkContent = (0, react.forwardRef)((props, ref) => {
-	const { className = "", children, ...rest } = props;
+	const { className = "", children, "aria-label": ariaLabel, ...rest } = props;
 	const coachmarkContentBlockClass = `${require_context.blockClass}--coachmark-content`;
 	const { open, setContentRef, onClose, setOpen, triggerRef, selectorPrimaryFocus } = (0, react.useContext)(require_context.CoachmarkContext);
 	const handleRef = (0, react.useRef)(null);
@@ -69,20 +70,33 @@ const CoachmarkContent = (0, react.forwardRef)((props, ref) => {
 		setOpen
 	]);
 	(0, react.useEffect)(() => {
-		if (open && selectorPrimaryFocus) setTimeout(() => {
+		if (open) setTimeout(() => {
 			requestAnimationFrame(() => {
-				const elementToFocus = document.querySelector(selectorPrimaryFocus);
+				let elementToFocus = null;
+				if (selectorPrimaryFocus) elementToFocus = document.querySelector(selectorPrimaryFocus);
+				if (!elementToFocus && contentRef && "current" in contentRef && contentRef.current) elementToFocus = contentRef.current.querySelector(`.${require_context.blockClass}--content-header--close-button`);
 				if (elementToFocus) elementToFocus.focus();
 			});
 		}, 100);
-	}, [open, selectorPrimaryFocus]);
+	}, [
+		open,
+		selectorPrimaryFocus,
+		contentRef
+	]);
 	return /* @__PURE__ */ react.default.createElement(_carbon_react.PopoverContent, {
 		ref: contentRef,
 		className: (0, import_classnames.default)(coachmarkContentBlockClass, className) || "",
-		...rest
+		role: "region",
+		"aria-label": ariaLabel,
+		...rest,
+		...require_devtools.getDevtoolsProps("CoachmarkContent")
 	}, children);
 });
 CoachmarkContent.propTypes = {
+	/**
+	* Accessible label for the coachmark content region.
+	*/
+	"aria-label": prop_types.default.string.isRequired,
 	/**
 	* This is a required callback that has to return the content to render in the body section.
 	* It can be a single child or an array of children depending on your need

package/lib/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts}

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024, 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.
  */
 import React, { ReactNode } from 'react';
-export interface ContentBodyProps {
+export interface CoachmarkContentBodyProps {
     /**
      * Provide the optional content for header section and will be render after header titles and before progress indicator.
      * People can make use of this if they want to have custom header.
@@ -19,6 +19,6 @@ export interface ContentBodyProps {
 export type EnrichedChildren = {
     children: ReactNode;
 };
-export declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
-export default ContentBody;
-//# sourceMappingURL=ContentBody.d.ts.map
+export declare const CoachmarkContentBody: React.ForwardRefExoticComponent<CoachmarkContentBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default CoachmarkContentBody;
+//# sourceMappingURL=CoachmarkContentBody.d.ts.map

package/lib/components/Coachmark/next/Coachmark/CoachmarkContentBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoachmarkContentBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContentBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,kGAgB/B,CAAC;AAEH,eAAe,oBAAoB,CAAC"}

package/lib/components/Coachmark/next/Coachmark/{ContentBody.js → CoachmarkContentBody.js}

@@ -7,28 +7,32 @@
 
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
 const require_index = require("../../../../node_modules/classnames/index.js");
+const require_devtools = require("../../../../global/js/utils/devtools.js");
 const require_context = require("./context.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
-//#region src/components/Coachmark/next/Coachmark/ContentBody.tsx
+//#region src/components/Coachmark/next/Coachmark/CoachmarkContentBody.tsx
 /**
-* Copyright IBM Corp. 2024, 2025
+* Copyright IBM Corp. 2024, 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.
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
-const ContentBody = (0, react.forwardRef)((props, ref) => {
+const CoachmarkContentBody = (0, react.forwardRef)((props, ref) => {
 	const { className = "", children, ...rest } = props;
 	const ContentBodyBlockClass = `${require_context.blockClass}--content-body`;
 	return /* @__PURE__ */ react.default.createElement("div", {
 		ref,
-		className: (0, import_classnames.default)(ContentBodyBlockClass, className)
+		className: (0, import_classnames.default)(ContentBodyBlockClass, className),
+		...rest,
+		...require_devtools.getDevtoolsProps("CoachmarkContentBody")
 	}, children);
 });
-ContentBody.propTypes = {
+CoachmarkContentBody.displayName = "CoachmarkContentBody";
+CoachmarkContentBody.propTypes = {
 	/**
 	* Provide the optional content for header section and will be render after header titles and before progress indicator.
 	* People can make use of this if they want to have custom header.
@@ -40,4 +44,4 @@ ContentBody.propTypes = {
 	className: prop_types.default.string
 };
 //#endregion
-exports.default = ContentBody;
+exports.default = CoachmarkContentBody;