@carbon/ibm-products 2.92.1 → 2.93.0

package/lib/components/Tearsheet/next/TearsheetBody.d.ts

@@ -52,6 +52,14 @@ export interface SummaryContentProps {
     onSummaryPanelClose?(): void;
     /** this can be set take full width without any padding */
     isFlush?: boolean;
+    /**
+     * Optional ref to the trigger button that opened the panel. Focus will return here when panel closes.
+     */
+    summaryPanelTriggerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Optional aria-label for the summary panel. Defaults to "Summary panel".
+     */
+    summaryPanelAriaLabel?: string;
 }
 export declare const SummaryContent: React.ForwardRefExoticComponent<SummaryContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface InfluencerProps {
@@ -68,6 +76,14 @@ export interface InfluencerProps {
     onInfluencerPanelClose?(): void;
     /** this can be set take full width without any padding */
     isFlush?: boolean;
+    /**
+     * Optional ref to the trigger button that opened the panel. Focus will return here when panel closes.
+     */
+    influencerPanelTriggerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Optional aria-label for the influencer panel. Defaults to "Influencer panel".
+     */
+    influencerPanelAriaLabel?: string;
 }
 export declare const Influencer: React.ForwardRefExoticComponent<InfluencerProps & React.RefAttributes<HTMLDivElement>>;
 export default TearsheetBody;

package/lib/components/Tearsheet/next/TearsheetBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TearsheetBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EAGZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAOf;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CAOpB;AAED,QAAA,MAAM,aAAa,2FAQlB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD;;;;GAIG;AACH,eAAO,MAAM,WAAW,yFAuDvB,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,cAAc,4FAiC1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,IAAI,IAAI,CAAC;IAChC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,UAAU,wFAkCtB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TearsheetBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EAGZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAOf;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CAOpB;AAED,QAAA,MAAM,aAAa,2FAQlB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD;;;;GAIG;AACH,eAAO,MAAM,WAAW,yFAuDvB,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACtD;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AACD,eAAO,MAAM,cAAc,4FAoD1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,IAAI,IAAI,CAAC;IAChC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,yBAAyB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzD;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AACD,eAAO,MAAM,UAAU,wFAqDtB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Tearsheet/next/TearsheetBody.js

@@ -59,8 +59,15 @@ const MainContent = (0, react.forwardRef)(({ children, className, isFlush, ...re
 		...rest
 	}, children);
 });
-const SummaryContent = (0, react.forwardRef)(({ children, className, summaryPanelOpen = false, onSummaryPanelClose, isFlush }, ref) => {
+const SummaryContent = (0, react.forwardRef)(({ children, className, summaryPanelOpen = false, onSummaryPanelClose, isFlush, summaryPanelTriggerRef, summaryPanelAriaLabel = "Summary panel" }, ref) => {
 	const { isSm } = (0, react.useContext)(require_context.TearsheetContext);
+	const prevOpenRef = (0, react.useRef)(summaryPanelOpen);
+	(0, react.useEffect)(() => {
+		if (prevOpenRef.current && !summaryPanelOpen && summaryPanelTriggerRef?.current) setTimeout(() => {
+			summaryPanelTriggerRef.current?.focus();
+		}, 100);
+		prevOpenRef.current = summaryPanelOpen;
+	}, [summaryPanelOpen, summaryPanelTriggerRef]);
 	return !isSm ? /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, import_classnames.default)(`${require_context.blockClass}__summary-content`, className, { [`${require_context.blockClass}__flush`]: isFlush }),
 		ref
@@ -68,11 +75,20 @@ const SummaryContent = (0, react.forwardRef)(({ children, className, summaryPane
 		size: "sm",
 		open: summaryPanelOpen,
 		onRequestClose: onSummaryPanelClose,
-		className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className)
+		className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className),
+		"aria-label": summaryPanelAriaLabel,
+		"aria-modal": "true"
 	}, children);
 });
-const Influencer = (0, react.forwardRef)(({ children, className, influencerPanelOpen = false, onInfluencerPanelClose, isFlush }, ref) => {
+const Influencer = (0, react.forwardRef)(({ children, className, influencerPanelOpen = false, onInfluencerPanelClose, isFlush, influencerPanelTriggerRef, influencerPanelAriaLabel = "Influencer panel" }, ref) => {
 	const { isSm } = (0, react.useContext)(require_context.TearsheetContext);
+	const prevOpenRef = (0, react.useRef)(influencerPanelOpen);
+	(0, react.useEffect)(() => {
+		if (prevOpenRef.current && !influencerPanelOpen && influencerPanelTriggerRef?.current) setTimeout(() => {
+			influencerPanelTriggerRef.current?.focus();
+		}, 100);
+		prevOpenRef.current = influencerPanelOpen;
+	}, [influencerPanelOpen, influencerPanelTriggerRef]);
 	return !isSm ? /* @__PURE__ */ react.default.createElement("aside", {
 		className: (0, import_classnames.default)(`${require_context.blockClass}__influencer`, className, { [`${require_context.blockClass}__flush`]: isFlush }),
 		ref
@@ -81,7 +97,9 @@ const Influencer = (0, react.forwardRef)(({ children, className, influencerPanel
 		open: influencerPanelOpen,
 		onRequestClose: onInfluencerPanelClose,
 		placement: "left",
-		className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className)
+		className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className),
+		"aria-label": influencerPanelAriaLabel,
+		"aria-modal": "true"
 	}, children);
 });
 //#endregion

package/lib/components/Tearsheet/next/TearsheetFooter.js

@@ -22,7 +22,7 @@ var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.de
 const TearsheetFooter = (0, react.forwardRef)(({ children, className, actions, buttonSize }, ref) => {
 	const { variant } = (0, react.useContext)(require_context.TearsheetContext);
 	const actionCount = actions?.length || 0;
-	return /* @__PURE__ */ react.default.createElement("footer", {
+	return /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, import_classnames.default)(`${require_context.blockClass}__footer`, className, {
 			[`${require_context.blockClass}__footer--three-actions`]: actionCount == 3,
 			[`${require_context.blockClass}__footer--many-actions`]: actionCount > 3

package/lib/components/Tearsheet/next/TearsheetHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TearsheetHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAc,eAAe,EAAe,MAAM,eAAe,CAAC;AACzE,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAMf;;;;GAIG;AAEH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,QAAA,MAAM,eAAe,6FA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B;;;;GAIG;AAEH,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,sBAAsB,oGAajC,CAAC;AAEH;;;;GAIG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,eAAe;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,mGA6ChC,CAAC"}
+{"version":3,"file":"TearsheetHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAc,eAAe,EAAe,MAAM,eAAe,CAAC;AACzE,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAMf;;;;GAIG;AAEH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,QAAA,MAAM,eAAe,6FA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B;;;;GAIG;AAEH,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,sBAAsB,oGAajC,CAAC;AAEH;;;;GAIG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,eAAe;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,mGAiDhC,CAAC"}

package/lib/components/Tearsheet/next/TearsheetHeader.js

@@ -68,7 +68,9 @@ const TearsheetScrollButton = react.default.forwardRef(function PageHeaderExpand
 			onClick?.(event);
 			handleScroller(!!fullyCollapsed);
 		},
-		className: (0, import_classnames.default)(className, `${require_context.blockClass}__scroller-button`)
+		className: (0, import_classnames.default)(className, `${require_context.blockClass}__scroller-button`),
+		"aria-label": fullyCollapsed ? `${expandText} header` : `${collapseText} header`,
+		"aria-expanded": !fullyCollapsed
 	}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronUp, { className: (0, import_classnames.default)(`${require_context.blockClass}__scroller-button-icon`, { [`${require_context.blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed }) })));
 });
 //#endregion

package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts

@@ -29,7 +29,7 @@ export interface TearsheetHeaderActionsProps {
      */
     menuButtonProps?: MenuButtonProps;
 }
-export declare const TearsheetHeaderActions: ({ className, children, menuButtonProps, }: TearsheetHeaderActionsProps) => React.JSX.Element;
+export declare const TearsheetHeaderActions: React.ForwardRefExoticComponent<TearsheetHeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * ----------------
  * TearsheetHeaderActionsItem

package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TearsheetHeaderActions.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeaderActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAc,eAAe,EAAY,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAKzE;;;;GAIG;AACH,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC/E,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AACD,eAAO,MAAM,sBAAsB,GAAI,2CAIpC,2BAA2B,sBA+F7B,CAAC;AAEF;;;;GAIG;AAEH,MAAM,WAAW,8BAA8B;IAC7C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,eAAO,MAAM,yBAAyB,GAAI,0BAGvC,8BAA8B,sBAMhC,CAAC"}
+{"version":3,"file":"TearsheetHeaderActions.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeaderActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAc,eAAe,EAAY,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,EAGZ,SAAS,EAGV,MAAM,OAAO,CAAC;AAKf;;;;GAIG;AACH,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC/E,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AACD,eAAO,MAAM,sBAAsB,oGAuGjC,CAAC;AAIH;;;;GAIG;AAEH,MAAM,WAAW,8BAA8B;IAC7C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,eAAO,MAAM,yBAAyB,GAAI,0BAGvC,8BAA8B,sBAMhC,CAAC"}

package/lib/components/Tearsheet/next/TearsheetHeaderActions.js

@@ -21,9 +21,10 @@ let _carbon_utilities = require("@carbon/utilities");
 * LICENSE file in the root directory of this source tree.
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
-const TearsheetHeaderActions = ({ className, children, menuButtonProps }) => {
+const TearsheetHeaderActions = (0, react.forwardRef)(({ className, children, menuButtonProps }, ref) => {
 	const containerRef = (0, react.useRef)(null);
 	const offsetRef = (0, react.useRef)(null);
+	const menuButtonContainerRef = (0, react.useRef)(null);
 	const [menuButtonVisibility, setMenuButtonVisibility] = (0, react.useState)(false);
 	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
 	const hasOtherChildType = (0, react.useRef)(false);
@@ -56,6 +57,7 @@ const TearsheetHeaderActions = ({ className, children, menuButtonProps }) => {
 		ref: offsetRef,
 		className: (0, import_classnames.default)(`${require_context.blockClass}__header-actions-menuButton`, { [`${require_context.blockClass}__header-actions-menuButton--hidden`]: hiddenItems.length === 0 })
 	}, /* @__PURE__ */ react.default.createElement(_carbon_react.MenuButton, {
+		ref: menuButtonContainerRef,
 		size: "sm",
 		...menuButtonProps
 	}, hiddenItems.map((item) => {
@@ -68,7 +70,8 @@ const TearsheetHeaderActions = ({ className, children, menuButtonProps }) => {
 			label: childProps.overflowItemLabel
 		});
 	}))));
-};
+});
+TearsheetHeaderActions.displayName = "TearsheetHeaderActions";
 const TearsheetHeaderActionItem = ({ children, className }) => {
 	return /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-action-item  ${className}` }, children);
 };

package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TearsheetHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAIZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,QAAA,MAAM,sBAAsB,oGA4G1B,CAAC;AAEH,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"TearsheetHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/TearsheetHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAIZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,QAAA,MAAM,sBAAsB,oGA+G1B,CAAC;AAEH,eAAe,sBAAsB,CAAC"}

package/lib/components/Tearsheet/next/TearsheetHeaderContent.js

@@ -24,9 +24,12 @@ var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.de
 const TearsheetHeaderContent = react.default.forwardRef((props, ref) => {
 	const { children, label, title, description, headerActions, titleStart, titleEnd, ...rest } = props;
 	const carbonPrefix = (0, _carbon_react.usePrefix)();
-	const { isSm, onClose, decorator, closeIconDescription, hideCloseButton = false } = (0, react.useContext)(require_context.TearsheetContext);
+	const { isSm, onClose, decorator, closeIconDescription, hideCloseButton = false, titleId } = (0, react.useContext)(require_context.TearsheetContext);
 	const normalizedDecorator = (0, react.isValidElement)(decorator) && decorator.type === _carbon_react.AILabel ? (0, react.cloneElement)(decorator, { size: "sm" }) : decorator;
-	const headerContent = /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-content` }, label ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-label` }, label) : null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__content__title-wrapper` }, /* @__PURE__ */ react.default.createElement("h2", { className: (0, import_classnames.default)(`${require_context.blockClass}__header-title`) }, titleStart ? /* @__PURE__ */ react.default.createElement("span", { className: `${require_context.blockClass}__title-start` }, titleStart) : null, /* @__PURE__ */ react.default.createElement(require_TruncatedText.TruncatedText, {
+	const headerContent = /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-content` }, label ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-label` }, label) : null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__content__title-wrapper` }, /* @__PURE__ */ react.default.createElement("h2", {
+		className: (0, import_classnames.default)(`${require_context.blockClass}__header-title`),
+		id: titleId
+	}, titleStart ? /* @__PURE__ */ react.default.createElement("span", { className: `${require_context.blockClass}__title-start` }, titleStart) : null, /* @__PURE__ */ react.default.createElement(require_TruncatedText.TruncatedText, {
 		id: `${require_context.blockClass}__header-title__truncatedText`,
 		className: `${require_context.blockClass}__content__title`,
 		align: "bottom",
@@ -34,7 +37,10 @@ const TearsheetHeaderContent = react.default.forwardRef((props, ref) => {
 		value: title
 	}), titleEnd ? /* @__PURE__ */ react.default.createElement("span", { className: `${require_context.blockClass}__title-end` }, titleEnd) : null)), /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-description` }, description), children && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-content--extra` }, children));
 	const headerActionsElement = headerActions && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__header-actions` }, headerActions);
-	const decoratorElement = decorator && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__decorator` }, normalizedDecorator);
+	const decoratorElement = decorator && /* @__PURE__ */ react.default.createElement("div", {
+		className: `${require_context.blockClass}__decorator`,
+		role: "complementary"
+	}, normalizedDecorator);
 	const closeButtonElement = !hideCloseButton && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__close-button ${carbonPrefix}--modal-close-button` }, /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
 		className: `${carbonPrefix}--modal-close`,
 		label: closeIconDescription || "Close",

package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepTearsheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tearsheet/next/_story-assets/StepTearsheet.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC/D,OAAO,EAEL,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAcjC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC9C,iBAAiB,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,kBAAkB,GAAI,kKAahC,KAAK,sBAuIP,CAAC"}
+{"version":3,"file":"StepTearsheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tearsheet/next/_story-assets/StepTearsheet.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AACzE,OAAO,EAEL,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAcjC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC9C,iBAAiB,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,kBAAkB,GAAI,kKAahC,KAAK,sBAsLP,CAAC"}

package/lib/components/Tearsheet/next/context.d.ts

@@ -22,6 +22,7 @@ interface TearsheetContextType {
     decorator?: ReactNode;
     closeIconDescription?: string;
     hideCloseButton?: boolean;
+    titleId?: string;
 }
 export declare const TearsheetContext: import("react").Context<TearsheetContextType>;
 export declare const blockClass: string;

package/lib/components/Tearsheet/next/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAyB,MAAM,OAAO,CAAC;AAGxE;;;;GAIG;AAEH,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AACD,eAAO,MAAM,gBAAgB,+CAQ3B,CAAC;AAEH,eAAO,MAAM,UAAU,QAAmC,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/Tearsheet/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAyB,MAAM,OAAO,CAAC;AAGxE;;;;GAIG;AAEH,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,gBAAgB,+CAQ3B,CAAC;AAEH,eAAO,MAAM,UAAU,QAAmC,CAAC"}

package/lib/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/lib/components/Tearsheet/usePresence.js

@@ -7,6 +7,7 @@
 
 require("../../_virtual/_rolldown/runtime.js");
 const require_settings = require("../../settings.js");
+const require_useIsomorphicEffect = require("../../global/js/hooks/useIsomorphicEffect.js");
 let react = require("react");
 //#region src/components/Tearsheet/usePresence.ts
 /**
@@ -23,7 +24,7 @@ const usePresence = (ref, isOpen) => {
 	const handleAnimationEnd = (0, react.useCallback)(() => {
 		setExitState("finished");
 	}, []);
-	(0, react.useLayoutEffect)(() => {
+	require_useIsomorphicEffect.useIsomorphicEffect(() => {
 		if (!ref.current || !isExiting) return;
 		if (!("getAnimations" in ref.current)) {
 			handleAnimationEnd();

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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
 exports.makeDraggable = makeDraggable;

package/lib/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/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.92.1",
+  "version": "2.93.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -66,7 +66,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@carbon/ibm-products-utilities": "1.1.0",
+    "@carbon/ibm-products-utilities": "1.2.0",
     "@carbon/styles": "^1.106.0",
     "@figma/code-connect": "^1.4.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
@@ -79,7 +79,7 @@
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.50.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.51.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -87,7 +87,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^13.0.0",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.51.0",
+    "jest-config-ibm-cloud-cognitive": "^1.52.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -105,9 +105,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@carbon-labs/react-resizer": "^0.24.0",
+    "@carbon-labs/react-resizer": "^0.25.0",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/ibm-products-styles": "^2.88.0",
+    "@carbon/ibm-products-styles": "^2.89.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.19.0",
     "@carbon/utilities-react": "0.22.0",
@@ -131,5 +131,5 @@
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-is": "^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0"
   },
-  "gitHead": "f1ec2fe96cec5ac06708123a7ec9f5a2f9612313"
+  "gitHead": "15847d5d8a78cd5d70ae083f9faf8126112004da"
 }

package/scss/components/Coachmark/_carbon-imports.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2023, 2024
+// Copyright IBM Corp. 2023, 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.
@@ -8,3 +8,4 @@
 // Import any Carbon component styles used from Coachmark in this file.
 // Coachmark uses the following Carbon components:
 @use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/popover';

package/scss/components/Coachmark/_coachmark_next.scss

@@ -0,0 +1,53 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/config' as carbon-config;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
+
+@include mixins.block-wrap(#{c4p-settings.$pkg-prefix}--coachmark__next) {
+  &.#{$block-class-next}--floating {
+    span:has(> div > .#{$block-class-next}--content-header--drag-icon) {
+      margin-inline-end: auto;
+    }
+  }
+  .#{$block-class-next}--content-header--is-dragging {
+    border-radius: 0;
+    box-shadow: 0 0 0 $spacing-02 $icon-inverse;
+    outline: $spacing-01 solid $background-inverse;
+  }
+
+  .#{$block-class-next}--coachmark-content {
+    .#{$block-class-next}--content-header {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .#{$block-class-next}--content-header--drag-icon,
+    .#{$block-class-next}--content-header .#{carbon-config.$prefix}--btn {
+      color: $icon-inverse;
+
+      .#{carbon-config.$prefix}--btn__icon,
+      svg {
+        color: $icon-inverse;
+        fill: $icon-inverse;
+      }
+    }
+
+    .#{$block-class-next}--content-body {
+      display: flex;
+      flex-direction: column;
+      padding: $spacing-01 $spacing-05 0;
+    }
+  }
+}

package/scss/components/Coachmark/_index.scss

@@ -1,8 +1,11 @@
 //
-// Copyright IBM Corp. 2023, 2024
+// Copyright IBM Corp. 2023, 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.
 //
 
 @use './coachmark';
+@use './coachmark-tagline';
+@use './coachmark-beacon';
+@use './coachmark_next';