@carbon/ibm-products 2.94.0 → 2.95.0

package/lib/components/Card/next/Card.js

@@ -12,6 +12,14 @@ const require_CardContext = require("./CardContext.js");
 const require_CardHeader = require("./CardHeader.js");
 const require_CardBody = require("./CardBody.js");
 const require_CardFooter = require("./CardFooter.js");
+const require_CardHeaderMedia = require("./CardHeaderMedia.js");
+const require_CardMedia = require("./CardMedia.js");
+const require_CardLabel = require("./CardLabel.js");
+const require_CardTitle = require("./CardTitle.js");
+const require_CardTitleMedia = require("./CardTitleMedia.js");
+const require_CardCaption = require("./CardCaption.js");
+const require_CardActions = require("./CardActions.js");
+const require_CardAction = require("./CardAction.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
@@ -29,11 +37,21 @@ const blockClass = `${require_settings.pkg.prefix}--card-next`;
 /**
 * Card component - Root container for composable card
 */
-const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, className, children, ...rest }, ref) => {
+const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, className, children, ...rest }, ref) => {
+	const hasAILabel = decorator?.["type"]?.displayName === "AILabel";
+	const normalizedDecorator = (0, react.useMemo)(() => {
+		if (hasAILabel && react.default.isValidElement(decorator)) return react.default.cloneElement(decorator, { size: "xs" });
+		return decorator;
+	}, [decorator, hasAILabel]);
 	const contextValue = (0, react.useMemo)(() => ({
 		clickable,
-		disabled
-	}), [clickable, disabled]);
+		disabled,
+		decorator: normalizedDecorator
+	}), [
+		clickable,
+		disabled,
+		normalizedDecorator
+	]);
 	const handleKeyDown = (event) => {
 		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
 			event.preventDefault();
@@ -46,7 +64,9 @@ const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKey
 	};
 	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,
@@ -77,6 +97,14 @@ CardComponent.propTypes = {
 	*/
 	clickable: prop_types.default.bool,
 	/**
+	* Optional decorator component (typically AILabel from Carbon)
+	*/
+	decorator: prop_types.default.node,
+	/**
+	* Density variant: productive uses heading-compact-02, expressive uses heading-03
+	*/
+	density: prop_types.default.oneOf(["productive", "expressive"]),
+	/**
 	* Disables the card and all interactive elements
 	*/
 	disabled: prop_types.default.bool,
@@ -89,23 +117,45 @@ CardComponent.propTypes = {
 	*/
 	onKeyDown: prop_types.default.func
 };
-const Card = CardComponent;
 /**
 * -------
 * Exports
 * -------
 */
-const Root = Card;
-Root.displayName = "Card.Root";
 const Header = require_CardHeader.CardHeader;
 Header.displayName = "Card.Header";
 const Body = require_CardBody.CardBody;
 Body.displayName = "Card.Body";
 const Footer = require_CardFooter.CardFooter;
 Footer.displayName = "Card.Footer";
+const HeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
+HeaderMedia.displayName = "Card.HeaderMedia";
+const Media = require_CardMedia.CardMedia;
+Media.displayName = "Card.Media";
+const Label = require_CardLabel.CardLabel;
+Label.displayName = "Card.Label";
+const Title = require_CardTitle.CardTitle;
+Title.displayName = "Card.Title";
+const TitleMedia = require_CardTitleMedia.CardTitleMedia;
+TitleMedia.displayName = "Card.TitleMedia";
+const Caption = require_CardCaption.CardCaption;
+Caption.displayName = "Card.Caption";
+const Actions = require_CardActions.CardActions;
+Actions.displayName = "Card.Actions";
+const Action = require_CardAction.CardAction;
+Action.displayName = "Card.Action";
+const Card = Object.assign(CardComponent, {
+	Header,
+	Body,
+	Footer,
+	HeaderMedia,
+	Media,
+	Label,
+	Title,
+	TitleMedia,
+	Caption,
+	Actions,
+	Action
+});
 //#endregion
-exports.Body = Body;
 exports.Card = Card;
-exports.Footer = Footer;
-exports.Header = Header;
-exports.Root = Root;

package/lib/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/lib/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/lib/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/lib/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/lib/components/Card/next/CardAction.js

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+
+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");
+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/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__ */ require_runtime.__toESM(require_index.default);
+const blockClass = `${require_settings.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.default.createElement("div", {
+		...rest,
+		className: (0, import_classnames.default)(`${blockClass}__action`, className),
+		...require_devtools.getDevtoolsProps(componentName)
+	}, children);
+};
+CardAction.propTypes = {
+	/**
+	* Provide the contents of the CardAction.
+	*/
+	children: prop_types.default.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: prop_types.default.string
+};
+CardAction.displayName = componentName;
+//#endregion
+exports.CardAction = CardAction;

package/lib/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/lib/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/lib/components/Card/next/CardActions.js

@@ -0,0 +1,109 @@
+/**
+ * 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.
+ */
+
+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");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let _carbon_react = require("@carbon/react");
+let _carbon_utilities = require("@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__ */ require_runtime.__toESM(require_index.default);
+const blockClass = `${require_settings.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 = (0, react.useRef)(null);
+	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
+	const classes = (0, import_classnames.default)(`${blockClass}__actions`, className);
+	const actionItems = [];
+	react.Children.forEach(children, (child, index) => {
+		if (react.default.isValidElement(child)) {
+			const id = `action-${index}`;
+			let label = overflowMenuLabel;
+			const childProps = child.props;
+			if (childProps.children && react.default.isValidElement(childProps.children)) {
+				const iconButton = childProps.children;
+				label = iconButton.props?.label || iconButton.props?.iconDescription || `Action ${index + 1}`;
+			}
+			actionItems.push({
+				id,
+				element: child,
+				label
+			});
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (!containerRef.current || actionItems.length === 0) return;
+		const handler = (0, _carbon_utilities.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.default.createElement("div", {
+		ref: containerRef,
+		className: classes,
+		...rest,
+		...require_devtools.getDevtoolsProps(componentName)
+	}, actionItems.map((item) => /* @__PURE__ */ react.default.createElement("div", {
+		key: item.id,
+		"data-id": item.id
+	}, item.element)), /* @__PURE__ */ react.default.createElement("div", {
+		"data-offset": true,
+		"data-hidden": true,
+		"data-floating-menu-container": true,
+		style: { position: "relative" }
+	}, /* @__PURE__ */ react.default.createElement(_carbon_react.FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenu, {
+		size: "sm",
+		"aria-label": overflowMenuLabel
+	}, hiddenItems.map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenuItem, {
+		key: item.id,
+		itemText: item.label || "Action",
+		onClick: () => {
+			const button = item.element.props.children;
+			if (button && react.default.isValidElement(button)) {
+				const buttonProps = button.props;
+				if (buttonProps.onClick) buttonProps.onClick();
+			}
+		}
+	}))))));
+};
+CardActions.propTypes = {
+	/**
+	* Provide the contents of the CardActions.
+	*/
+	children: prop_types.default.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: prop_types.default.string,
+	/**
+	* Aria label for the overflow menu
+	*/
+	overflowMenuLabel: prop_types.default.string
+};
+CardActions.displayName = componentName;
+//#endregion
+exports.CardActions = CardActions;

package/lib/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/lib/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/lib/components/Card/next/CardCaption.js

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+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");
+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/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__ */ require_runtime.__toESM(require_index.default);
+const blockClass = `${require_settings.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.default.createElement("div", {
+		...rest,
+		className: classes,
+		...require_devtools.getDevtoolsProps(componentName)
+	}, children);
+};
+CardCaption.propTypes = {
+	/**
+	* Provide the contents of the CardCaption.
+	*/
+	children: prop_types.default.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
+	className: prop_types.default.string,
+	/**
+	* Enable text truncation with ellipsis.
+	*/
+	truncate: prop_types.default.bool
+};
+CardCaption.displayName = componentName;
+//#endregion
+exports.CardCaption = CardCaption;

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

@@ -6,6 +6,7 @@
  */
 
 require("../../../_virtual/_rolldown/runtime.js");
+let react = require("react");
 //#region src/components/Card/next/CardContext.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -16,6 +17,17 @@ require("../../../_virtual/_rolldown/runtime.js");
 /**
 * Context for sharing Card state with child components
 */
-const CardContext = (0, require("react").createContext)(void 0);
+const CardContext = (0, react.createContext)(void 0);
+/**
+* Hook to access Card context
+* @returns CardContextValue
+* @throws Error if used outside of Card component
+*/
+const useCardContext = () => {
+	const context = (0, react.useContext)(CardContext);
+	if (!context) throw new Error("Card subcomponents must be used within a Card component");
+	return context;
+};
 //#endregion
 exports.CardContext = CardContext;
+exports.useCardContext = useCardContext;

package/lib/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/lib/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/lib/components/Card/next/CardHeader.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_CardContext = require("./CardContext.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
@@ -26,12 +27,34 @@ const blockClass = `${require_settings.pkg.prefix}--card-next__header`;
 * CardHeader component - Header section of the card
 */
 const CardHeader = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
+	const context = require_CardContext.useCardContext();
+	const cardBlockClass = `${require_settings.pkg.prefix}--card-next`;
+	const hasTitleMedia = react.Children.toArray(children).some((child) => {
+		return (0, react.isValidElement)(child) && child.type?.["displayName"] === "Card.TitleMedia";
+	});
+	const titleMediaElements = [];
+	const mediaElements = [];
+	const otherContent = [];
+	if (hasTitleMedia) react.Children.forEach(children, (child) => {
+		if ((0, react.isValidElement)(child) && child.type?.["displayName"] === "Card.TitleMedia") titleMediaElements.push(child);
+		else if ((0, react.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.default.createElement("div", {
 		...rest,
 		ref,
 		className: headerClasses
-	}, children);
+	}, hasTitleMedia ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, mediaElements, /* @__PURE__ */ react.default.createElement("div", { className: `${cardBlockClass}__header-content` }, titleMediaElements, /* @__PURE__ */ react.default.createElement("div", { className: `${cardBlockClass}__title-content` }, otherContent))) : children, context.decorator && /* @__PURE__ */ react.default.createElement("div", {
+		className: `${cardBlockClass}__decorator`,
+		role: "presentation",
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		onKeyDown: (e) => {
+			e.stopPropagation();
+		}
+	}, context.decorator));
 });
 CardHeader.displayName = componentName;
 CardHeader.propTypes = {

package/lib/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/lib/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"}