@carbon/ibm-products 2.75.0 → 2.76.0

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

@@ -0,0 +1,99 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 strict';
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../../../_virtual/index.js');
+var cx = require('classnames');
+var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var devtools = require('../../../../../global/js/utils/devtools.js');
+var settings = require('../../../../../settings.js');
+
+var _Idea;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${settings.pkg.prefix}--coachmark-tagline`;
+const componentName = 'CoachmarkTagline';
+const defaults = {
+  onClose: () => {},
+  closeIconDescription: 'Close'
+};
+/**
+ * DO NOT USE. This component is for the exclusive use
+ * of other Onboarding components.
+ */
+const CoachmarkTagline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    closeIconDescription = defaults.closeIconDescription,
+    onClose = defaults.onClose,
+    title,
+    buttonProps,
+    isOpen,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, isOpen && `${blockClass}--is-open`),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
+    className: `${blockClass}__cta`,
+    type: "button"
+  }, buttonProps), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__idea`
+  }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
+    size: 16
+  }))), /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--close-btn-container`
+  }, /*#__PURE__*/React.createElement(react.Button, {
+    kind: "ghost",
+    size: "sm",
+    renderIcon: icons.Close,
+    iconDescription: closeIconDescription,
+    hasIconOnly: true,
+    className: `${blockClass}--close-btn`,
+    onClick: onClose
+  })));
+});
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+CoachmarkTagline.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+CoachmarkTagline.propTypes = {
+  /**
+   * button props
+   */
+  buttonProps: index.default.shape({
+    /**@ts-ignore*/
+    ...react.Button.propTypes,
+    /**@ts-ignore*/
+    id: index.default.string,
+    onClick: index.default.func,
+    onDoubleClick: index.default.func,
+    tabIndex: index.default.number,
+    ['aria-expanded']: index.default.bool
+  }),
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: index.default.string,
+  /**
+   * Function to call when the close button is clicked.
+   */
+  onClose: index.default.func,
+  /**
+   * The title of the tagline.
+   */
+  title: index.default.string.isRequired
+};
+
+exports.CoachmarkTagline = CoachmarkTagline;

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { CoachmarkTagline } from './CoachmarkTagline';
+export type { CoachmarkTaglineProps } from './CoachmarkTagline';

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 strict';
+
+var CoachmarkTagline = require('./CoachmarkTagline.js');
+
+
+
+exports.CoachmarkTagline = CoachmarkTagline.CoachmarkTagline;

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

@@ -6,7 +6,6 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 import { IconButtonProps, BreadcrumbItemProps, BreadcrumbProps } from '@carbon/react';
-import { TYPES } from '@carbon/react/es/components/Tag/Tag';
 /**
  * ----------
  * PageHeader
@@ -199,19 +198,19 @@ declare const PageHeaderHeroImage: {
  * PageHeaderTabBar
  * ----------------
  */
-interface TagItem {
-    type: keyof typeof TYPES;
-    text: string;
-    size?: 'sm' | 'md' | 'lg';
-    id: string;
-}
 interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
-    tags?: TagItem[];
+    tags?: React.ReactNode;
     scroller?: React.ReactNode;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderTagOverflowProps {
+    children: React.ReactNode;
+    renderOverflowTag?: (hiddenBreadcrumbs: HTMLElement[], handleOverflowClick: (event: React.MouseEvent) => void, openPopover: boolean) => React.ReactElement;
+    renderPopoverContent?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement;
+}
+declare const PageHeaderTagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
 interface PageHeaderScrollButtonProps extends IconButtonProps {
     collapseText?: string;
     expandText?: string;
@@ -288,5 +287,6 @@ declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & Re
 declare const ScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
 declare const TitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
 declare const BreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, };
+declare const TagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, };

package/lib/components/PageHeader/next/PageHeader.js

@@ -16,8 +16,6 @@ var layout = require('@carbon/layout');
 var PageHeaderUtils = require('../PageHeaderUtils.js');
 var overflowHandler = require('./overflowHandler.js');
 var utilities = require('@carbon/utilities');
-var useOverflowItems = require('../../../global/js/hooks/useOverflowItems/useOverflowItems.js');
-var useId = require('../../../global/js/utils/useId.js');
 var icons = require('@carbon/react/icons');
 var context = require('./context.js');
 var utils = require('./utils.js');
@@ -523,7 +521,7 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
   }, scroller);
 
   // Early return if no tags are provided
-  if (!tags.length) {
+  if (!tags) {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
       className: classNames,
       ref: ref
@@ -533,17 +531,29 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
       sm: 4
     }, children, renderScroller())));
   }
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(`${PageHeaderUtils.blockClass}__tab-bar--tablist`, {
+      [`${settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    })
+  }, children, tags, renderScroller()))));
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderTagOverflow = /*#__PURE__*/React.forwardRef(_ref8 => {
+  let {
+    renderOverflowTag,
+    renderPopoverContent,
+    children
+  } = _ref8;
   const [openPopover, setOpenPopover] = React.useState(false);
-  const tagSize = tags[0]?.size || 'md';
-  const instanceId = useId.useId('PageHeaderTabBar');
-  const tagsWithIds = React.useMemo(() => {
-    return tags.map((tag, index) => ({
-      ...tag,
-      id: tag.id || `tag-${index}-${instanceId}`
-    }));
-  }, [instanceId, tags]);
+  const [hiddenTags, setHiddenTags] = React.useState([]);
   const tagsContainerRef = React.useRef(null);
-  const offsetRef = React.useRef(null);
   // To close popover when window resizes
   React.useEffect(() => {
     const handleResize = () => {
@@ -555,64 +565,36 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-
-  // overflow items hook
-  const {
-    visibleItems = [],
-    hiddenItems = [],
-    itemRefHandler = () => {}
-  } = useOverflowItems.useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
-    visibleItems: [],
-    hiddenItems: [],
-    itemRefHandler: () => {}
-  };
   const handleOverflowClick = React.useCallback(event => {
     event.stopPropagation();
     setOpenPopover(prev => !prev);
   }, []);
-
-  // Function to render tags
-  const renderTags = () => /*#__PURE__*/React.createElement("div", {
-    className: `${PageHeaderUtils.blockClass}__tags`,
-    ref: tagsContainerRef
-  }, visibleItems.map(tag => /*#__PURE__*/React.createElement(react.Tag, {
-    key: tag.id,
-    ref: node => itemRefHandler(tag.id, node),
-    type: tag.type,
-    size: tag.size,
-    className: `${PageHeaderUtils.blockClass}__tag-item`
-  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React.createElement(react.Popover, {
+  React.useEffect(() => {
+    overflowHandler.createOverflowHandler({
+      container: tagsContainerRef.current,
+      onChange: (_, hidden) => {
+        setHiddenTags(hidden);
+      }
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: tagsContainerRef,
+    className: cx(`${settings.pkg.prefix}--page-header--tag-overflow-container`, {
+      [`${settings.pkg.prefix}--page-header--tag-overflow-container__has-no-hidden-items`]: !hiddenTags.length
+    })
+  }, children, /*#__PURE__*/React.createElement(react.Popover, {
     open: openPopover,
-    onRequestClose: () => setOpenPopover(false)
-  }, /*#__PURE__*/React.createElement(react.OperationalTag, {
-    onClick: handleOverflowClick,
-    "aria-expanded": openPopover,
-    text: `+${hiddenItems.length}`,
-    size: tagSize
-  }), /*#__PURE__*/React.createElement(react.PopoverContent, {
-    className: "tag-popover-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${PageHeaderUtils.blockClass}__tags-popover-list`
-  }, hiddenItems.map(tag => /*#__PURE__*/React.createElement(react.Tag, {
-    key: tag.id,
-    type: tag.type,
-    size: tag.size
-  }, tag.text))))));
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: classNames,
-    ref: ref
-  }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
-    lg: 16,
-    md: 8,
-    sm: 4
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx(`${PageHeaderUtils.blockClass}__tab-bar--tablist`, {
-      [`${settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    onRequestClose: () => setOpenPopover(false),
+    "data-fixed": true,
+    className: cx(`${settings.pkg.prefix}--page-header--tag-overflow-popover`, {
+      [`${settings.pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length
     })
-  }, children, tags.length > 0 && renderTags(), renderScroller()))));
+  }, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /*#__PURE__*/React.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__tags-popover-list`
+  }, renderPopoverContent?.(hiddenTags)))));
 });
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeaderExpander(_ref8, ref) {
+PageHeaderTagOverflow.displayName = 'PageHeaderTagOverflow';
+const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeaderExpander(_ref9, ref) {
   let {
     className,
     children,
@@ -621,7 +603,7 @@ const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeader
     collapseText = 'Collapse',
     expandText = 'Expand',
     ...other
-  } = _ref8;
+  } = _ref9;
   const {
     refs,
     fullyCollapsed
@@ -666,12 +648,12 @@ const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeader
     })
   }));
 });
-const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     className,
     children,
     ...other
-  } = _ref9;
+  } = _ref10;
   const {
     titleClipped,
     refs
@@ -691,13 +673,13 @@ const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref9, ref) =>
 // including the overflow breadcrumb item. The overflowHandler determines what elements
 // are visible and hidden and passes the hidden elements back to the render prop used
 // to display the overflow breadcrumb
-const PageHeaderBreadcrumbOverflow = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+const PageHeaderBreadcrumbOverflow = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     renderOverflowBreadcrumb,
     className,
     children,
     ...other
-  } = _ref10;
+  } = _ref11;
   const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = React.useState([]);
   const fallbackRef = React.useRef(null);
   const componentRef = ref ?? fallbackRef;
@@ -777,6 +759,8 @@ const TitleBreadcrumb = PageHeaderTitleBreadcrumb;
 TitleBreadcrumb.displayName = 'PageHeaderTitleBreadcrumb';
 const BreadcrumbOverflow = PageHeaderBreadcrumbOverflow;
 BreadcrumbOverflow.displayName = 'PageHeaderBreadcrumbOverflow';
+const TagOverflow = PageHeaderTagOverflow;
+TagOverflow.displayName = 'PageHeaderTagOverflow';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.BreadcrumbOverflow = BreadcrumbOverflow;
@@ -793,8 +777,10 @@ exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderScrollButton = PageHeaderScrollButton;
 exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.PageHeaderTagOverflow = PageHeaderTagOverflow;
 exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb;
 exports.Root = Root;
 exports.ScrollButton = ScrollButton;
 exports.TabBar = TabBar;
+exports.TagOverflow = TagOverflow;
 exports.TitleBreadcrumb = TitleBreadcrumb;

package/lib/components/PageHeader/next/index.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, } from './PageHeader';

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -75,8 +75,13 @@ const TagOverflowPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(react.OperationalTag, {
     onClick: () => setPopoverOpen?.(!popoverOpen),
     className: cx(`${blockClass}__trigger`),
-    text: `+${overflowTags.length}`
-  }), /*#__PURE__*/React.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
+    text: `+${overflowTags.length}`,
+    "aria-expanded": popoverOpen,
+    "aria-controls": `${settings.pkg.prefix}-overflow-content`
+  }), /*#__PURE__*/React.createElement(react.PopoverContent, {
+    id: `${settings.pkg.prefix}-overflow-content`,
+    "aria-hidden": !popoverOpen
+  }, /*#__PURE__*/React.createElement("div", {
     ref: overflowTagContent,
     className: `${blockClass}__content`
   }, /*#__PURE__*/React.createElement("ul", {

package/lib/components/TagSet/TagSetOverflow.js

@@ -103,8 +103,13 @@ const TagSetOverflow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onClick: () => setPopoverOpen(!popoverOpen),
     className: cx(`${blockClass}__popover-trigger`),
     size: size,
-    text: `+${overflowTags.length}`
-  }), /*#__PURE__*/React.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
+    text: `+${overflowTags.length}`,
+    "aria-expanded": popoverOpen,
+    "aria-controls": `${settings.pkg.prefix}-overflow-content`
+  }), /*#__PURE__*/React.createElement(react.PopoverContent, {
+    id: `${settings.pkg.prefix}-overflow-content`,
+    "aria-hidden": !popoverOpen
+  }, /*#__PURE__*/React.createElement("div", {
     ref: overflowTagContent,
     className: `${blockClass}__content`
   }, /*#__PURE__*/React.createElement("ul", {

package/lib/components/index.d.ts

@@ -43,6 +43,7 @@ export * from './WebTerminal';
  * draft | previewCandidate | preview
  */
 export * as preview__Coachmark from './Coachmark/next/Coachmark';
+export * as preview__CoachmarkTagline from './Coachmark/next/Coachmark/CoachmarkTagline';
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
 export * as preview__PageHeader from './PageHeader/next/PageHeader';
 export * as previewCandidate__BigNumber from './BigNumber';

package/lib/index.js

@@ -53,11 +53,12 @@ var TearsheetNarrow = require('./components/Tearsheet/TearsheetNarrow.js');
 var TruncatedText = require('./components/TruncatedText/TruncatedText.js');
 var WebTerminal = require('./components/WebTerminal/WebTerminal.js');
 var WebTerminalContentWrapper = require('./components/WebTerminal/WebTerminalContentWrapper.js');
-var index$b = require('./components/WebTerminal/hooks/index.js');
+var index$c = require('./components/WebTerminal/hooks/index.js');
 var index = require('./components/Coachmark/next/Coachmark/index.js');
-var index$a = require('./components/FeatureFlags/index.js');
+var index$1 = require('./components/Coachmark/next/Coachmark/CoachmarkTagline/index.js');
+var index$b = require('./components/FeatureFlags/index.js');
 var PageHeader = require('./components/PageHeader/next/PageHeader.js');
-var index$1 = require('./components/BigNumber/index.js');
+var index$2 = require('./components/BigNumber/index.js');
 var Coachmark = require('./components/Coachmark/Coachmark.js');
 var enums = require('./components/Coachmark/utils/enums.js');
 var context = require('./components/Coachmark/utils/context.js');
@@ -67,11 +68,11 @@ var CoachmarkButton = require('./components/CoachmarkButton/CoachmarkButton.js')
 var CoachmarkFixed = require('./components/CoachmarkFixed/CoachmarkFixed.js');
 var CoachmarkOverlayElement = require('./components/CoachmarkOverlayElement/CoachmarkOverlayElement.js');
 var CoachmarkOverlayElements = require('./components/CoachmarkOverlayElements/CoachmarkOverlayElements.js');
-var index$2 = require('./components/ConditionBuilder/index.js');
-var index$3 = require('./components/DataSpreadsheet/index.js');
-var index$4 = require('./components/DelimitedList/index.js');
-var index$5 = require('./components/Decorator/index.js');
-var index$6 = require('./components/GetStartedCard/index.js');
+var index$3 = require('./components/ConditionBuilder/index.js');
+var index$4 = require('./components/DataSpreadsheet/index.js');
+var index$5 = require('./components/DelimitedList/index.js');
+var index$6 = require('./components/Decorator/index.js');
+var index$7 = require('./components/GetStartedCard/index.js');
 var Guidebanner = require('./components/Guidebanner/Guidebanner.js');
 var GuidebannerElement = require('./components/Guidebanner/GuidebannerElement.js');
 var GuidebannerElementButton = require('./components/Guidebanner/GuidebannerElementButton.js');
@@ -79,14 +80,14 @@ var GuidebannerElementLink = require('./components/Guidebanner/GuidebannerElemen
 var InlineTip = require('./components/InlineTip/InlineTip.js');
 var InlineTipButton = require('./components/InlineTip/InlineTipButton.js');
 var InlineTipLink = require('./components/InlineTip/InlineTipLink.js');
-var index$7 = require('./components/NonLinearReading/index.js');
-var index$8 = require('./components/SearchBar/index.js');
+var index$8 = require('./components/NonLinearReading/index.js');
+var index$9 = require('./components/SearchBar/index.js');
 var Toolbar = require('./components/Toolbar/Toolbar.js');
 var ToolbarButton = require('./components/Toolbar/ToolbarButton.js');
 var ToolbarGroup = require('./components/Toolbar/ToolbarGroup.js');
-var index$9 = require('./components/TruncatedList/index.js');
+var index$a = require('./components/TruncatedList/index.js');
 var ComboButton = require('./components/ComboButton/ComboButton.js');
-var index$c = require('./components/ComboButton/ComboButtonItem/index.js');
+var index$d = require('./components/ComboButton/ComboButtonItem/index.js');
 var Datagrid = require('./components/Datagrid/Datagrid/Datagrid.js');
 var useDatagrid = require('./components/Datagrid/useDatagrid.js');
 var useInfiniteScroll = require('./components/Datagrid/useInfiniteScroll.js');
@@ -195,14 +196,15 @@ Object.defineProperty(exports, "TruncatedText", {
 });
 exports.WebTerminal = WebTerminal.WebTerminal;
 exports.WebTerminalContentWrapper = WebTerminalContentWrapper.WebTerminalContentWrapper;
-exports.WebTerminalProvider = index$b.WebTerminalProvider;
-exports.useWebTerminal = index$b.useWebTerminal;
+exports.WebTerminalProvider = index$c.WebTerminalProvider;
+exports.useWebTerminal = index$c.useWebTerminal;
 exports.preview__Coachmark = index;
-exports.preview__FeatureFlags = index$a.FeatureFlags;
-exports.preview__useFeatureFlag = index$a.useFeatureFlag;
-exports.preview__useFeatureFlags = index$a.useFeatureFlags;
+exports.preview__CoachmarkTagline = index$1;
+exports.preview__FeatureFlags = index$b.FeatureFlags;
+exports.preview__useFeatureFlag = index$b.useFeatureFlag;
+exports.preview__useFeatureFlags = index$b.useFeatureFlags;
 exports.preview__PageHeader = PageHeader;
-exports.previewCandidate__BigNumber = index$1;
+exports.previewCandidate__BigNumber = index$2;
 exports.previewCandidate__Coachmark = Coachmark.Coachmark;
 exports.BEACON_KIND = enums.BEACON_KIND;
 exports.COACHMARK_ALIGNMENT = enums.COACHMARK_ALIGNMENT;
@@ -213,11 +215,11 @@ exports.previewCandidate__CoachmarkButton = CoachmarkButton.CoachmarkButton;
 exports.previewCandidate__CoachmarkFixed = CoachmarkFixed.CoachmarkFixed;
 exports.previewCandidate__CoachmarkOverlayElement = CoachmarkOverlayElement.CoachmarkOverlayElement;
 exports.previewCandidate__CoachmarkOverlayElements = CoachmarkOverlayElements.CoachmarkOverlayElements;
-exports.previewCandidate__ConditionBuilder = index$2;
-exports.previewCandidate__DataSpreadsheet = index$3;
-exports.previewCandidate__DelimitedList = index$4;
-exports.previewCandidate__Decorator = index$5;
-exports.previewCandidate__GetStartedCard = index$6;
+exports.previewCandidate__ConditionBuilder = index$3;
+exports.previewCandidate__DataSpreadsheet = index$4;
+exports.previewCandidate__DelimitedList = index$5;
+exports.previewCandidate__Decorator = index$6;
+exports.previewCandidate__GetStartedCard = index$7;
 exports.previewCandidate__Guidebanner = Guidebanner.Guidebanner;
 exports.previewCandidate__GuidebannerElement = GuidebannerElement.GuidebannerElement;
 exports.previewCandidate__GuidebannerElementButton = GuidebannerElementButton.GuidebannerElementButton;
@@ -225,14 +227,14 @@ exports.previewCandidate__GuidebannerElementLink = GuidebannerElementLink.Guideb
 exports.previewCandidate__InlineTip = InlineTip.InlineTip;
 exports.previewCandidate__InlineTipButton = InlineTipButton.InlineTipButton;
 exports.previewCandidate__InlineTipLink = InlineTipLink.InlineTipLink;
-exports.previewCandidate__NonLinearReading = index$7;
-exports.previewCandidate__SearchBar = index$8;
+exports.previewCandidate__NonLinearReading = index$8;
+exports.previewCandidate__SearchBar = index$9;
 exports.previewCandidate__Toolbar = Toolbar.Toolbar;
 exports.previewCandidate__ToolbarButton = ToolbarButton.ToolbarButton;
 exports.previewCandidate__ToolbarGroup = ToolbarGroup.ToolbarGroup;
-exports.previewCandidate__TruncatedList = index$9;
+exports.previewCandidate__TruncatedList = index$a;
 exports.ComboButton = ComboButton.ComboButton;
-exports.ComboButtonItem = index$c.ComboButtonItem;
+exports.ComboButtonItem = index$d.ComboButtonItem;
 exports.Datagrid = Datagrid.Datagrid;
 exports.useDatagrid = useDatagrid.default;
 exports.useInfiniteScroll = useInfiniteScroll.default;

package/lib/patterns/DeleteAndRemove/_story-assets/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare function getCurrentTime(): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.75.0",
+  "version": "2.76.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -68,6 +68,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
+    "@figma/code-connect": "^1.3.5",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
     "@percy/storybook": "^9.0.0",
@@ -81,8 +82,7 @@
     "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.33.0",
-    "chalk": "^4.1.2",
+    "babel-preset-ibm-cloud-cognitive": "^0.34.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -90,7 +90,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.34.0",
+    "jest-config-ibm-cloud-cognitive": "^1.35.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -107,9 +107,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@carbon-labs/react-resizer": "^0.7.0",
+    "@carbon-labs/react-resizer": "^0.10.0",
     "@carbon/feature-flags": "^0.30.0",
-    "@carbon/ibm-products-styles": "^2.71.0",
+    "@carbon/ibm-products-styles": "^2.72.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.9.0",
     "@carbon/utilities-react": "0.12.0",
@@ -131,5 +131,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "98ca4d24bcc54951cf99c2c892da24b5ea44e059"
+  "gitHead": "9574ac50c9027213234f5fb015b44af96cc6ad0c"
 }

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

@@ -794,6 +794,7 @@ $duration: 1000ms;
 
   .#{$block-class}__content {
     padding: $spacing-06 0;
+    background-color: $layer;
   }
 
   .#{$block-class}__content__title-wrapper {
@@ -903,12 +904,13 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__tab-bar {
+    background-color: $layer;
     margin-inline-start: -$spacing-05;
   }
 
   .#{$block-class}__tab-bar--tablist {
     display: grid;
-    grid-gap: $spacing-10;
+    gap: $spacing-07;
     grid-template-columns: auto minmax(0, 1fr);
   }
 
@@ -966,6 +968,29 @@ $duration: 1000ms;
     padding: $spacing-05;
   }
 
+  .#{$block-class}--tag-overflow-container {
+    align-content: center;
+    text-align: end;
+    @include breakpoint(sm) {
+      transform: translateX(calc(-1 * #{$spacing-06}));
+    }
+    @include breakpoint(md) {
+      transform: translateX(calc(-1 * #{$spacing-03}));
+    }
+    @include breakpoint(lg) {
+      transform: translateX($spacing-08);
+    }
+  }
+
+  .#{$block-class}--tag-overflow-popover__hidden {
+    visibility: hidden;
+  }
+
+  .#{$block-class}--tag-overflow-container__has-no-hidden-items {
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX($spacing-07);
+  }
+
   .#{$block-class}__tag-item {
     flex-shrink: 0;
   }