@carbon/ibm-products 2.94.0 → 2.95.0

package/es/components/Card/next/Card.js

@@ -12,6 +12,14 @@ import { CardContext } from "./CardContext.js";
 import { CardHeader } from "./CardHeader.js";
 import { CardBody } from "./CardBody.js";
 import { CardFooter } from "./CardFooter.js";
+import { CardHeaderMedia } from "./CardHeaderMedia.js";
+import { CardMedia } from "./CardMedia.js";
+import { CardLabel } from "./CardLabel.js";
+import { CardTitle } from "./CardTitle.js";
+import { CardTitleMedia } from "./CardTitleMedia.js";
+import { CardCaption } from "./CardCaption.js";
+import { CardActions } from "./CardActions.js";
+import { CardAction } from "./CardAction.js";
 import React, { forwardRef, useMemo } from "react";
 import PropTypes from "prop-types";
 //#region src/components/Card/next/Card.tsx
@@ -27,11 +35,21 @@ const blockClass = `${pkg.prefix}--card-next`;
 /**
 * Card component - Root container for composable card
 */
-const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, className, children, ...rest }, ref) => {
+const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, className, children, ...rest }, ref) => {
+	const hasAILabel = decorator?.["type"]?.displayName === "AILabel";
+	const normalizedDecorator = useMemo(() => {
+		if (hasAILabel && React.isValidElement(decorator)) return React.cloneElement(decorator, { size: "xs" });
+		return decorator;
+	}, [decorator, hasAILabel]);
 	const contextValue = useMemo(() => ({
 		clickable,
-		disabled
-	}), [clickable, disabled]);
+		disabled,
+		decorator: normalizedDecorator
+	}), [
+		clickable,
+		disabled,
+		normalizedDecorator
+	]);
 	const handleKeyDown = (event) => {
 		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
 			event.preventDefault();
@@ -44,7 +62,9 @@ const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disab
 	};
 	const cardClasses = (0, import_classnames.default)(blockClass, className, {
 		[`${blockClass}--clickable`]: clickable && !disabled,
-		[`${blockClass}--disabled`]: disabled
+		[`${blockClass}--disabled`]: disabled,
+		[`${blockClass}--${density}`]: density,
+		[`${blockClass}--has-ai-label`]: hasAILabel
 	});
 	const cardProps = {
 		...rest,
@@ -75,6 +95,14 @@ CardComponent.propTypes = {
 	*/
 	clickable: PropTypes.bool,
 	/**
+	* Optional decorator component (typically AILabel from Carbon)
+	*/
+	decorator: PropTypes.node,
+	/**
+	* Density variant: productive uses heading-compact-02, expressive uses heading-03
+	*/
+	density: PropTypes.oneOf(["productive", "expressive"]),
+	/**
 	* Disables the card and all interactive elements
 	*/
 	disabled: PropTypes.bool,
@@ -87,19 +115,45 @@ CardComponent.propTypes = {
 	*/
 	onKeyDown: PropTypes.func
 };
-const Card = CardComponent;
 /**
 * -------
 * Exports
 * -------
 */
-const Root = Card;
-Root.displayName = "Card.Root";
 const Header = CardHeader;
 Header.displayName = "Card.Header";
 const Body = CardBody;
 Body.displayName = "Card.Body";
 const Footer = CardFooter;
 Footer.displayName = "Card.Footer";
+const HeaderMedia = CardHeaderMedia;
+HeaderMedia.displayName = "Card.HeaderMedia";
+const Media = CardMedia;
+Media.displayName = "Card.Media";
+const Label = CardLabel;
+Label.displayName = "Card.Label";
+const Title = CardTitle;
+Title.displayName = "Card.Title";
+const TitleMedia = CardTitleMedia;
+TitleMedia.displayName = "Card.TitleMedia";
+const Caption = CardCaption;
+Caption.displayName = "Card.Caption";
+const Actions = CardActions;
+Actions.displayName = "Card.Actions";
+const Action = CardAction;
+Action.displayName = "Card.Action";
+const Card = Object.assign(CardComponent, {
+	Header,
+	Body,
+	Footer,
+	HeaderMedia,
+	Media,
+	Label,
+	Title,
+	TitleMedia,
+	Caption,
+	Actions,
+	Action
+});
 //#endregion
-export { Body, Card, Footer, Header, Root };
+export { Card };

package/es/components/Card/next/Card.types.d.ts

@@ -38,6 +38,15 @@ export interface CardProps extends CardBaseProps {
      * Disables the card and all interactive elements
      */
     disabled?: boolean;
+    /**
+     * Density variant: productive uses heading-compact-02, expressive uses heading-03
+     */
+    density?: 'productive' | 'expressive';
+    /**
+     * Optional decorator component (typically AILabel from Carbon).
+     * Renders in the top-right corner of the card header with a blue gradient border.
+     */
+    decorator?: ReactNode;
 }
 /**
  * Props for CardHeader component
@@ -63,5 +72,9 @@ export interface CardContextValue {
      * Whether the card is disabled
      */
     disabled: boolean;
+    /**
+     * Optional decorator component (typically AILabel) to be rendered by CardHeader
+     */
+    decorator?: ReactNode;
 }
 //# sourceMappingURL=Card.types.d.ts.map

package/es/components/Card/next/Card.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/Card.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/Card.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}

package/es/components/Card/next/CardAction.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface CardActionProps {
+    /**
+     * Provide the contents of the CardAction (typically a Button or IconButton).
+     * Wrapping content in CardAction opts into action-set layout: no footer
+     * padding, automatic top border, and stretch/fixed-width button behavior.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+/**
+ * CardAction is a wrapper for interactive elements in the card footer.
+ * Its presence signals action-set layout to the footer (no padding, auto
+ * border, stretch behavior).
+ *
+ * Note: do not use CardAction inside a clickable card — clickable cards
+ * should not contain interactive elements (see usage guidelines).
+ */
+export declare const CardAction: {
+    ({ children, className, ...rest }: CardActionProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of the CardAction.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};
+//# sourceMappingURL=CardAction.d.ts.map

package/es/components/Card/next/CardAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardAction.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardAction.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;uCAIpB,eAAe;;QAahB;;WAEG;;QAGH;;WAEG;;;;CAVJ,CAAC"}

package/es/components/Card/next/CardAction.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { __toESM } from "../../../_virtual/_rolldown/runtime.js";
+import { require_classnames } from "../../../node_modules/classnames/index.js";
+import { pkg } from "../../../settings.js";
+import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
+import React from "react";
+import PropTypes from "prop-types";
+//#region src/components/Card/next/CardAction.tsx
+/**
+* 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.
+*/
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
+const blockClass = `${pkg.prefix}--card-next`;
+const componentName = "CardAction";
+/**
+* CardAction is a wrapper for interactive elements in the card footer.
+* Its presence signals action-set layout to the footer (no padding, auto
+* border, stretch behavior).
+*
+* Note: do not use CardAction inside a clickable card — clickable cards
+* should not contain interactive elements (see usage guidelines).
+*/
+const CardAction = ({ children, className, ...rest }) => {
+	return /* @__PURE__ */ React.createElement("div", {
+		...rest,
+		className: (0, import_classnames.default)(`${blockClass}__action`, className),
+		...getDevtoolsProps(componentName)
+	}, children);
+};
+CardAction.propTypes = {
+	/**
+	* Provide the contents of the CardAction.
+	*/
+	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: PropTypes.string
+};
+CardAction.displayName = componentName;
+//#endregion
+export { CardAction };

package/es/components/Card/next/CardActions.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface CardActionsProps {
+    /**
+     * Provide the contents of the CardActions (typically CardAction components).
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Aria label for the overflow menu
+     */
+    overflowMenuLabel?: string;
+}
+/**
+ * CardActions is a container for action buttons in the card header.
+ * Positioned in the top-right corner with 8px gap between actions.
+ * When actions exceed 50% of available header space, overflow menu is shown.
+ */
+export declare const CardActions: {
+    ({ children, className, overflowMenuLabel, ...rest }: CardActionsProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of the CardActions.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Aria label for the overflow menu
+         */
+        overflowMenuLabel: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};
+//# sourceMappingURL=CardActions.d.ts.map

package/es/components/Card/next/CardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAyC,MAAM,OAAO,CAAC;AAChF,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD;;;;GAIG;AACH,eAAO,MAAM,WAAW;0DAKrB,gBAAgB;;QA2FjB;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;;;CAfJ,CAAC"}

package/es/components/Card/next/CardActions.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { __toESM } from "../../../_virtual/_rolldown/runtime.js";
+import { require_classnames } from "../../../node_modules/classnames/index.js";
+import { pkg } from "../../../settings.js";
+import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
+import React, { Children, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { FeatureFlags, OverflowMenu, OverflowMenuItem } from "@carbon/react";
+import { createOverflowHandler } from "@carbon/utilities";
+//#region src/components/Card/next/CardActions.tsx
+/**
+* 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.
+*/
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
+const blockClass = `${pkg.prefix}--card-next`;
+const componentName = "CardActions";
+/**
+* CardActions is a container for action buttons in the card header.
+* Positioned in the top-right corner with 8px gap between actions.
+* When actions exceed 50% of available header space, overflow menu is shown.
+*/
+const CardActions = ({ children, className, overflowMenuLabel = "More actions", ...rest }) => {
+	const containerRef = useRef(null);
+	const [hiddenItems, setHiddenItems] = useState([]);
+	const classes = (0, import_classnames.default)(`${blockClass}__actions`, className);
+	const actionItems = [];
+	Children.forEach(children, (child, index) => {
+		if (React.isValidElement(child)) {
+			const id = `action-${index}`;
+			let label = overflowMenuLabel;
+			const childProps = child.props;
+			if (childProps.children && React.isValidElement(childProps.children)) {
+				const iconButton = childProps.children;
+				label = iconButton.props?.label || iconButton.props?.iconDescription || `Action ${index + 1}`;
+			}
+			actionItems.push({
+				id,
+				element: child,
+				label
+			});
+		}
+	});
+	useEffect(() => {
+		if (!containerRef.current || actionItems.length === 0) return;
+		const handler = createOverflowHandler({
+			container: containerRef.current,
+			onChange: (_visible, hidden) => {
+				const hiddenIds = hidden.map((el) => el.dataset.id);
+				setHiddenItems(actionItems.filter((item) => hiddenIds.includes(item.id)));
+			}
+		});
+		return () => handler.disconnect();
+	}, [children]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: containerRef,
+		className: classes,
+		...rest,
+		...getDevtoolsProps(componentName)
+	}, actionItems.map((item) => /* @__PURE__ */ React.createElement("div", {
+		key: item.id,
+		"data-id": item.id
+	}, item.element)), /* @__PURE__ */ React.createElement("div", {
+		"data-offset": true,
+		"data-hidden": true,
+		"data-floating-menu-container": true,
+		style: { position: "relative" }
+	}, /* @__PURE__ */ React.createElement(FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ React.createElement(OverflowMenu, {
+		size: "sm",
+		"aria-label": overflowMenuLabel
+	}, hiddenItems.map((item) => /* @__PURE__ */ React.createElement(OverflowMenuItem, {
+		key: item.id,
+		itemText: item.label || "Action",
+		onClick: () => {
+			const button = item.element.props.children;
+			if (button && React.isValidElement(button)) {
+				const buttonProps = button.props;
+				if (buttonProps.onClick) buttonProps.onClick();
+			}
+		}
+	}))))));
+};
+CardActions.propTypes = {
+	/**
+	* Provide the contents of the CardActions.
+	*/
+	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: PropTypes.string,
+	/**
+	* Aria label for the overflow menu
+	*/
+	overflowMenuLabel: PropTypes.string
+};
+CardActions.displayName = componentName;
+//#endregion
+export { CardActions };

package/es/components/Card/next/CardCaption.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface CardCaptionProps {
+    /**
+     * Provide the contents of the CardCaption.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Enable text truncation with ellipsis.
+     * @default false
+     */
+    truncate?: boolean;
+}
+/**
+ * CardCaption displays secondary text below the title in the card header.
+ * Uses $label-01 typography token and $text-secondary color.
+ */
+export declare const CardCaption: {
+    ({ children, className, truncate, ...rest }: CardCaptionProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of the CardCaption.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Enable text truncation with ellipsis.
+         */
+        truncate: PropTypes.Requireable<boolean>;
+    };
+    displayName: string;
+};
+//# sourceMappingURL=CardCaption.d.ts.map

package/es/components/Card/next/CardCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardCaption.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardCaption.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;iDAKrB,gBAAgB;;QAiBjB;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;;;CAfJ,CAAC"}

package/es/components/Card/next/CardCaption.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { __toESM } from "../../../_virtual/_rolldown/runtime.js";
+import { require_classnames } from "../../../node_modules/classnames/index.js";
+import { pkg } from "../../../settings.js";
+import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
+import React from "react";
+import PropTypes from "prop-types";
+//#region src/components/Card/next/CardCaption.tsx
+/**
+* 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.
+*/
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
+const blockClass = `${pkg.prefix}--card-next`;
+const componentName = "CardCaption";
+/**
+* CardCaption displays secondary text below the title in the card header.
+* Uses $label-01 typography token and $text-secondary color.
+*/
+const CardCaption = ({ children, className, truncate = false, ...rest }) => {
+	const classes = (0, import_classnames.default)(`${blockClass}__caption`, { [`${blockClass}__caption--truncate`]: truncate }, className);
+	return /* @__PURE__ */ React.createElement("div", {
+		...rest,
+		className: classes,
+		...getDevtoolsProps(componentName)
+	}, children);
+};
+CardCaption.propTypes = {
+	/**
+	* Provide the contents of the CardCaption.
+	*/
+	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: PropTypes.string,
+	/**
+	* Enable text truncation with ellipsis.
+	*/
+	truncate: PropTypes.bool
+};
+CardCaption.displayName = componentName;
+//#endregion
+export { CardCaption };

package/es/components/Card/next/CardContext.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 //#region src/components/Card/next/CardContext.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -17,5 +17,15 @@ import { createContext } from "react";
 * Context for sharing Card state with child components
 */
 const CardContext = createContext(void 0);
+/**
+* Hook to access Card context
+* @returns CardContextValue
+* @throws Error if used outside of Card component
+*/
+const useCardContext = () => {
+	const context = useContext(CardContext);
+	if (!context) throw new Error("Card subcomponents must be used within a Card component");
+	return context;
+};
 //#endregion
-export { CardContext };
+export { CardContext, useCardContext };

package/es/components/Card/next/CardFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardFooter.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAU1C;;GAEG;AACH,eAAO,MAAM,UAAU,6GAUtB,CAAC"}
+{"version":3,"file":"CardFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardFooter.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C;;GAEG;AACH,eAAO,MAAM,UAAU,6GAUtB,CAAC"}

package/es/components/Card/next/CardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardHeader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAU1C;;GAEG;AACH,eAAO,MAAM,UAAU,6GAUtB,CAAC"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardHeader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAC;AAU/E;;GAEG;AACH,eAAO,MAAM,UAAU,6GA4EtB,CAAC"}

package/es/components/Card/next/CardHeader.js

@@ -8,7 +8,8 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { pkg } from "../../../settings.js";
-import React, { forwardRef } from "react";
+import { useCardContext } from "./CardContext.js";
+import React, { Children, forwardRef, isValidElement } from "react";
 import PropTypes from "prop-types";
 //#region src/components/Card/next/CardHeader.tsx
 /**
@@ -24,12 +25,34 @@ const blockClass = `${pkg.prefix}--card-next__header`;
 * CardHeader component - Header section of the card
 */
 const CardHeader = forwardRef(({ className, children, ...rest }, ref) => {
+	const context = useCardContext();
+	const cardBlockClass = `${pkg.prefix}--card-next`;
+	const hasTitleMedia = Children.toArray(children).some((child) => {
+		return isValidElement(child) && child.type?.["displayName"] === "Card.TitleMedia";
+	});
+	const titleMediaElements = [];
+	const mediaElements = [];
+	const otherContent = [];
+	if (hasTitleMedia) Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type?.["displayName"] === "Card.TitleMedia") titleMediaElements.push(child);
+		else if (isValidElement(child) && child.type?.["displayName"] === "Card.Media") mediaElements.push(child);
+		else otherContent.push(child);
+	});
 	const headerClasses = (0, import_classnames.default)(blockClass, className);
 	return /* @__PURE__ */ React.createElement("div", {
 		...rest,
 		ref,
 		className: headerClasses
-	}, children);
+	}, hasTitleMedia ? /* @__PURE__ */ React.createElement(React.Fragment, null, mediaElements, /* @__PURE__ */ React.createElement("div", { className: `${cardBlockClass}__header-content` }, titleMediaElements, /* @__PURE__ */ React.createElement("div", { className: `${cardBlockClass}__title-content` }, otherContent))) : children, context.decorator && /* @__PURE__ */ React.createElement("div", {
+		className: `${cardBlockClass}__decorator`,
+		role: "presentation",
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		onKeyDown: (e) => {
+			e.stopPropagation();
+		}
+	}, context.decorator));
 });
 CardHeader.displayName = componentName;
 CardHeader.propTypes = {

package/es/components/Card/next/CardHeaderMedia.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface CardHeaderMediaProps {
+    /**
+     * Provide the contents of the CardHeaderMedia.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+export declare const CardHeaderMedia: {
+    ({ children, className, ...rest }: CardHeaderMediaProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of the CardHeaderMedia.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};
+//# sourceMappingURL=CardHeaderMedia.d.ts.map

package/es/components/Card/next/CardHeaderMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeaderMedia.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/next/CardHeaderMedia.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe;uCAIzB,oBAAoB;;QAWrB;;WAEG;;QAGH;;WAEG;;;;CAVJ,CAAC"}