@carbon/ibm-products 2.95.0 → 2.96.0

package/scss/components/Card/_card-next.scss

@@ -54,11 +54,23 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
 }
 
 // Header styles
+// Uses a two-column grid so __title-media (left) and __title (right) can sit
+// side-by-side without JS injecting wrapper divs. Each child declares its own
+// grid-column; absent children simply leave their cell empty and it collapses.
+//
+//  col 1 (auto)  │  col 2 (1fr)
+//  ──────────────────────────────────────────
+//  __header-media  spans 1 / -1  (full width)
+//  __title-media   col 1         │  __title col 2
+//  __actions       absolute, not in flow
+//
+// When __title-media is absent, __title gets grid-column: 1 / -1 via :not(:has(...))
 .#{$block-class-next}__header {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-01; // 2px gap between label, title, and caption
+  display: grid;
+  column-gap: $spacing-05; // 16px gap between __title-media (col 1) and __title (col 2)
+  grid-template-columns: auto 1fr;
+  row-gap: 0; // vertical rhythm is handled by margin-block on each child
 }
 
 // Body styles
@@ -135,42 +147,17 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
 
 // Header primitive components
 
-// Header Media styles (icon slot)
+// CardHeaderMedia — icon/pictogram slot above the title row.
+// $spacing-05 padding on all four sides, max-height 64px per design spec.
+// Spans both grid columns so it is always full-width.
 .#{$block-class-next}__header-media {
   display: flex;
-  flex-shrink: 0; // Don't shrink
-  align-items: flex-start; // Top-align content
-  justify-content: flex-start; // Left-align content
-  block-size: auto; // Auto height based on content
-  inline-size: auto; // Auto width based on content
-  margin-block-end: $spacing-05; // 16px bottom
-  margin-block-start: $spacing-05; // 16px top
-  margin-inline-end: $spacing-05; // 16px right
-  margin-inline-start: $spacing-05; // 16px left
-  max-block-size: $spacing-10; // 64px max height for content
-}
-
-// Inline header media margin (when NOT the first child, i.e., not header media slot)
-// This ensures inline icons align with label/title/caption text
-.#{$block-class-next}__header
-  > .#{$block-class-next}__header-media:not(:first-child) {
-  margin-inline-start: $spacing-05; // 16px left to align with text content
-}
-
-// When header media slot is followed by actions, create row layout
-.#{$block-class-next}__header:has(
-    > .#{$block-class-next}__header-media:first-child
-      + .#{$block-class-next}__actions
-  ) {
-  > .#{$block-class-next}__header-media:first-child {
-    // Header media on the left, remove right margin
-    margin-inline-end: 0;
-  }
-
-  > .#{$block-class-next}__actions {
-    // Actions on the right
-    margin-inline-start: auto;
-  }
+  align-items: flex-start;
+  justify-content: flex-start;
+  grid-column: 1 / -1; // span full width
+  margin-block: $spacing-05;
+  margin-inline: $spacing-05;
+  max-block-size: $spacing-10; // 64px max height
 }
 
 // Media styles (uses Carbon AspectRatio)
@@ -178,104 +165,170 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
   inline-size: 100%;
 }
 
-// Label styles
-.#{$block-class-next}__label {
-  @include type-style('label-01');
+// ──────────────────────────────────────────────────────────────
+// Horizontal layout
+// ──────────────────────────────────────────────────────────────
+// Card root: side-by-side flex row
+.#{$block-class-next}--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
 
-  color: $text-secondary;
+// Media column in horizontal mode.
+// Width is driven by the --ibm-products--card-next--media-width custom property
+// (set by the mediaWidth prop, default 33.33%).
+// Height stretches to match the content column via align-self: stretch.
+.#{$block-class-next}__media--horizontal {
+  overflow: hidden;
+  flex-basis: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--media-width,
+    33.33%
+  );
+  flex-shrink: 0;
+  align-self: stretch;
+}
 
-  margin-block-start: $spacing-05; // 16px top
-  margin-inline: $spacing-05; // 16px left and right
+// Right-hand content column: Header/Body/Footer wrapped in __content, stacks vertically.
+.#{$block-class-next}--horizontal > .#{$block-class-next}__content {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-inline-size: 0;
+}
 
-  &--truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+// Body grows to fill remaining space when present.
+.#{$block-class-next}--horizontal
+  > .#{$block-class-next}__content
+  > .#{$block-class-next}__body {
+  flex: 1 0 auto;
+}
+
+// Footer always pins to the bottom edge, whether or not a body is present.
+.#{$block-class-next}--horizontal
+  > .#{$block-class-next}__content
+  > .#{$block-class-next}__footer {
+  margin-block-start: auto;
+}
+
+// __label nested inside __title (via label prop on CardTitle).
+// __title owns the horizontal margins; __label carries only typography + color.
+// Truncation modifiers are standalone rules — &--modifier inside a descendant
+// combinator block compiles to `.parent > .element--modifier` which only
+// matches the sole modifier class, not the element with base + modifier.
+// Standalone rules match both classes correctly.
+.#{$block-class-next}__title > .#{$block-class-next}__label {
+  @include type-style('label-01');
+
+  color: $text-secondary;
 }
 
-// Remove all inline margins from label when inside title-content (with TitleMedia)
-.#{$block-class-next}__title-content > .#{$block-class-next}__label {
-  margin-inline: 0;
+.#{$block-class-next}__label--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-// Title styles
+.#{$block-class-next}__label--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--label-line-clamp
+  );
+  text-overflow: ellipsis;
+}
+
+// Title container — always a flex column so label / text-row / description stack.
+// Never set display on this element: truncation lives on __title-text-row below.
+// min-inline-size: 0 is required because __title is a grid item: grid items
+// default to min-inline-size: auto (i.e. their content width), which means
+// they won't shrink to fit the cell and overflow: hidden on __title-text-row
+// has no effect. Setting 0 allows the grid cell to constrain the item width.
+// overflow: hidden clips any content that still escapes (e.g. unbreakable words).
 .#{$block-class-next}__title {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
   color: $text-primary;
+  gap: $spacing-01; // 2px between label / text-row / description
   margin-inline: $spacing-05; // 16px left and right
+  min-inline-size: 0;
+}
 
-  &--truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &--truncate-multi {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-  }
+// Title text row — wraps the leading icon, title text, and trailing icon.
+// Truncation modifiers live here so they only clip the text row and never
+// affect the flex column that keeps description visible below.
+.#{$block-class-next}__title-text-row {
+  // Default: inline so bare text nodes wrap naturally.
+  display: block;
 }
 
-// Remove all inline margins from title when inside title-content (with TitleMedia)
-.#{$block-class-next}__title-content > .#{$block-class-next}__title {
-  margin-inline: 0;
+.#{$block-class-next}__title-text-row--truncate {
+  overflow: hidden;
+  max-inline-size: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--title-max-width,
+    100%
+  );
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-// Title Media styles (icon alongside label+title+caption block)
+.#{$block-class-next}__title-text-row--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--title-line-clamp
+  );
+  max-inline-size: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--title-max-width,
+    100%
+  );
+  text-overflow: ellipsis;
+}
+
+// CardTitleMedia — inline icon, left column of the title row.
+// Sits in grid column 1; __title takes column 2 alongside it.
 .#{$block-class-next}__title-media {
   display: flex;
-  flex-shrink: 0; // Don't shrink
-  align-items: center; // Center content within the media container
-  justify-content: center; // Center content
-  margin-block-start: $spacing-05; // 16px top margin to align with label
-  margin-inline-start: $spacing-05; // 16px left padding
+  flex-shrink: 0;
+  align-items: flex-start; // top-align so it tracks the first line on long titles
+  justify-content: center;
+  grid-column: 1; // left column
+  margin-block-start: $spacing-05; // aligns top edge with title text top margin
+  margin-inline-start: $spacing-05; // 16px from card edge
   max-block-size: $spacing-10; // 64px max height
 }
 
-// When header contains title-media, make it a flex row container
-// Outer wrapper for TitleMedia + title content (horizontal layout)
-.#{$block-class-next}__header-content {
-  display: flex;
-  flex: 1; // Take remaining space
-  flex-direction: row; // Horizontal: TitleMedia on left, title-content on right
-  align-items: flex-start; // Top-align
-  gap: $spacing-05; // 16px gap between TitleMedia and title-content
-  min-inline-size: 0; // Allow content to shrink and wrap
-}
-
-// Inner wrapper for label, title, caption (vertical stack)
-.#{$block-class-next}__title-content {
-  display: flex;
-  flex: 1; // Take remaining space
-  flex-direction: column; // Stack label, title, caption vertically
-  gap: $spacing-01; // 2px gap between label, title, and caption
-  min-inline-size: 0; // Allow content to shrink and wrap
-  padding-inline-end: $spacing-05; // 16px right padding only
+// When __title-media is present, __title sits in the right column.
+// When absent, __title spans both columns (full width).
+.#{$block-class-next}__header:has(> .#{$block-class-next}__title-media)
+  > .#{$block-class-next}__title {
+  grid-column: 2;
+  margin-inline-start: 0; // left margin is provided by the gap from __title-media
 }
 
-// Expressive density uses larger heading
-.#{$block-class-next}--expressive .#{$block-class-next}__title {
+// Expressive density uses larger heading — applied to the text row so only the
+// title text itself inherits the type style, not the label or description.
+.#{$block-class-next}--expressive .#{$block-class-next}__title-text-row {
   @include type-style('heading-03');
 }
 
 // Productive density uses compact heading (must come after expressive to override)
-.#{$block-class-next}--productive .#{$block-class-next}__title {
+.#{$block-class-next}--productive .#{$block-class-next}__title-text-row {
   @include type-style('heading-compact-02');
 }
 
-// Title with leading icon layout
-.#{$block-class-next}__title--with-start-icon {
+// Leading icon: flex row so icon and text sit side-by-side on the same line.
+.#{$block-class-next}__title-text-row--with-start-icon {
   display: flex;
   align-items: flex-start;
   gap: $spacing-03; // 8px between icon and text per design
 }
 
-// Title with trailing icon - no flex, icon flows inline with text
-.#{$block-class-next}__title--with-end-icon {
-  // No display: flex - let content flow naturally inline
-  // Ensure inline content can flow
+// Trailing icon - no override needed; icon span is inline-flex inside block text.
+.#{$block-class-next}__title-text-row--with-end-icon {
   display: block;
 }
 
@@ -283,7 +336,7 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
 .#{$block-class-next}__title-start-icon {
   display: flex;
   flex-shrink: 0; // Prevent icon from shrinking
-  margin-block: $spacing-01; // 2px top/bottom padding to center with first line of text
+  margin-block-start: $spacing-01; // 2px top/bottom padding to center with first line of text
 }
 
 // Title trailing icon wrapper - inline element that flows with text
@@ -294,47 +347,37 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
   vertical-align: middle; // Align with text baseline
 }
 
-// Conditional margin for title based on siblings
-// When title is standalone (no label before it), add top margin
-.#{$block-class-next}__header > .#{$block-class-next}__title:first-child,
-.#{$block-class-next}__header
-  > .#{$block-class-next}__header-media:first-child
-  + .#{$block-class-next}__title,
-.#{$block-class-next}__header
-  > .#{$block-class-next}__media:first-child
-  + .#{$block-class-next}__title,
-.#{$block-class-next}__title-content
-  > .#{$block-class-next}__title:first-child {
-  margin-block-start: $spacing-05; // 16px top
-}
-
-// When title is standalone (no caption after it), add bottom margin
-// This applies when title is last child OR when followed by actions (but not caption)
-.#{$block-class-next}__header > .#{$block-class-next}__title:last-child,
-.#{$block-class-next}__title-content > .#{$block-class-next}__title:last-child,
-.#{$block-class-next}__title:not(:has(+ .#{$block-class-next}__caption)) {
-  margin-block-end: $spacing-05; // 16px bottom
+// __title vertical rhythm.
+// Grid layout makes all sibling-combinator rules unnecessary — every __title
+// that is a direct child of __header always needs 16px top and bottom.
+.#{$block-class-next}__header > .#{$block-class-next}__title {
+  margin-block: $spacing-05;
 }
 
-// Caption styles
-.#{$block-class-next}__caption {
+// __description nested inside __title (via description prop on CardTitle).
+// __title owns the horizontal margins; __description carries only typography + color.
+// No block margins — the parent flex gap provides the 2px separation from the title text.
+// Truncation modifiers are standalone — see note above __label for why.
+.#{$block-class-next}__title > .#{$block-class-next}__description {
   @include type-style('label-01');
 
   color: $text-secondary;
+}
 
-  margin-block-end: $spacing-05; // 16px bottom
-  margin-inline: $spacing-05; // 16px left and right
-
-  &--truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.#{$block-class-next}__description--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-// Remove all inline margins from caption when inside title-content (with TitleMedia)
-.#{$block-class-next}__title-content > .#{$block-class-next}__caption {
-  margin-inline: 0;
+.#{$block-class-next}__description--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(
+    --#{c4p-settings.$pkg-prefix}--card-next--description-line-clamp
+  );
+  text-overflow: ellipsis;
 }
 
 // Actions container styles
@@ -346,19 +389,11 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
   block-size: $spacing-07; // 32px default height
   gap: $spacing-02;
   inline-size: 50%; // Limit actions to 50% of available header space per design
-  inset-block-start: $spacing-03; // 16px from top
-  inset-inline-end: $spacing-03; // 16px from right
+  inset-block-start: $spacing-03; // 8px from top
+  inset-inline-end: $spacing-03; // 8px from right edge
   max-inline-size: 50%; // Enforce 50% maximum width
 }
 
-// When actions are in header with header media slot, add bottom margin
-.#{$block-class-next}__header:has(
-    > .#{$block-class-next}__header-media:first-child
-  )
-  .#{$block-class-next}__actions {
-  margin-block-end: $spacing-07; // 32px gap below actions to title
-}
-
 // Action wrapper styles
 .#{$block-class-next}__action {
   display: inline-flex;
@@ -416,14 +451,14 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
   padding-inline-end: $spacing-13;
 }
 
-// Adjust caption padding when AI label is present
-.#{$block-class-next}--has-ai-label .#{$block-class-next}__caption {
+// Adjust description padding when AI label is present
+.#{$block-class-next}--has-ai-label .#{$block-class-next}__description {
   padding-inline-end: calc($spacing-07 + $spacing-05);
 }
 
-// When both actions and AI label are present, increase caption padding
+// When both actions and AI label are present, increase description padding
 .#{$block-class-next}--has-ai-label:has(.#{$block-class-next}__actions)
-  .#{$block-class-next}__caption {
+  .#{$block-class-next}__description {
   padding-inline-end: $spacing-13;
 }
 
@@ -435,14 +470,6 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--card-next;
   inset-inline-end: calc($spacing-03 + $spacing-06 + $spacing-03);
 }
 
-// When AI label is present and title has no caption after it, add bottom margin
-// This prevents title from overlapping with actions
-.#{$block-class-next}--has-ai-label
-  .#{$block-class-next}__header
-  > .#{$block-class-next}__title:not(:has(+ .#{$block-class-next}__caption)) {
-  margin-block-end: $spacing-05; // 16px bottom to prevent overlap with actions
-}
-
 // Hover state for clickable cards with AI label
 .#{$block-class-next}__clickable.#{$block-class-next}--has-ai-label::before {
   @include utilities.ai-popover-gradient('hover', 0, 'layer');

package/scss/components/PageHeader/_page-header.scss

@@ -734,7 +734,7 @@ $duration: 1000ms;
 
   .#{$block-class}__breadcrumb-bar {
     position: sticky;
-    z-index: 1;
+    z-index: 2;
     background-color: $layer;
     block-size: to-rem(40px);
     /* stylelint-disable-next-line carbon/layout-use */

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -485,7 +485,7 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
 .#{$block-class__next}__decorator {
   position: absolute;
   inset-block-start: convert.to-rem(10px);
-  inset-inline-end: convert.to-rem(48px);
+  inset-inline-end: $spacing-09;
 }
 
 // ──────────────────────────────────────────────────────────────
@@ -505,7 +505,6 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     margin-inline-start: -$spacing-05;
   }
 }
-
 .#{$block-class__next}__scroller-container {
   position: absolute;
   inset-block-end: 0;

package/telemetry.yml

@@ -88,7 +88,6 @@ collect:
         - disableColumnSwapping
         - disabled
         - disabledCell
-        - disableHeaderCollapse
         - disableSubmit
         - displayMetalPanel
         - downloadLinkLabel
@@ -197,7 +196,6 @@ collect:
         - itemCount
         - items
         - itemsLabel
-        - keepMounted
         - key
         - kind
         - label
@@ -416,7 +414,6 @@ collect:
         - variableRowHeight
         - variant
         - verticalAlign
-        - verticalGap
         - verticalPosition
         - viewAllLabel
         - viewLessLabel
@@ -586,13 +583,19 @@ collect:
         - clickable
         - density
         - getStarted
+        - horizontal
         # CardFooter
         - hasButton
         # CardHeader
         - inClickableCard
         - noActionIcons
+        # CardMedia
+        - mediaWidth
         # CardTitle
+        - descriptionTruncate
+        - labelTruncate
         - maxWidth
+        - titleTruncate
         # Carousel
         - disableArrowScroll
         - disableResetOnResize
@@ -1031,8 +1034,11 @@ collect:
         # Tearsheet
         - containerClassName
         - disablePortal
+        - keepMounted
         - summaryContentWidth
+        - verticalGap
         # TearsheetHeader
+        - disableHeaderCollapse
         - onHeaderCollapse
         # TearsheetHeaderActionItem
         - overflowItemLabel
@@ -1049,9 +1055,6 @@ collect:
         - summaryPanelAriaLabel
         - summaryPanelOpen
         - summaryPanelTriggerRef
-        # TearsheetWithSteps
-        - progressIndicator
-        - setOpen
         # Toolbar
         - vertical
         # TruncatedList
@@ -1382,9 +1385,6 @@ collect:
         - lg
         - md
         - sm
-        # TearsheetWithSteps - progressIndicator
-        - horizontal
-        - vertical
   npm:
     dependencies: null
   js:

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

@@ -1,46 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,52 +0,0 @@
-/**
- * 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 };