@carbon/ibm-products 2.88.0 → 2.89.0

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

@@ -943,6 +943,14 @@ $duration: 1000ms;
     min-inline-size: 0;
   }
 
+  // Ensure menu dropdown stays within viewport bounds
+  // Note: Carbon MenuButton renders the menu in a portal at body level
+  .#{$carbon-prefix}--menu.#{$carbon-prefix}--menu--open {
+    // Prevent menu from being cut off at top of viewport
+    max-block-size: calc(100vh - #{$spacing-05});
+    overflow-y: auto;
+  }
+
   .#{$block-class}__content__subtitle {
     @include type.type-style('productive-heading-03');
 
@@ -973,16 +981,22 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__tab-bar--tablist {
-    display: grid;
-    gap: $spacing-07;
-    grid-template-columns: auto minmax(0, 1fr);
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$block-class}__tab-bar--tablist > .#{$carbon-prefix}--tabs {
+    display: inline-flex;
+    margin-inline-end: $spacing-03;
   }
 
   .#{$pkg-prefix}--page-header__tab-bar--tablist
     .#{$pkg-prefix}--page-header__tags {
-    display: flex;
-    align-self: center;
+    display: inline-flex;
+    align-items: center;
     justify-content: flex-end;
+    margin-inline-start: auto;
+    min-inline-size: 0;
   }
 
   .#{$pkg-prefix}--page-header__tab-bar--tablist.#{$pkg-prefix}--page-header__tab-bar--with-scroller
@@ -1033,32 +1047,26 @@ $duration: 1000ms;
   }
 
   .#{$block-class}--tag-overflow-container {
+    display: inline-flex;
     align-content: center;
+    justify-content: flex-end;
+    inline-size: 40%;
     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);
-    }
 
     .#{$carbon-prefix}--tag {
+      flex-shrink: 0;
       margin-inline-end: $spacing-03;
     }
+
+    @include breakpoint-down(md) {
+      inline-size: auto;
+    }
   }
 
   .#{$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;
   }
@@ -1076,9 +1084,9 @@ $duration: 1000ms;
   }
 
   .#{$pkg-prefix}--page-header--scroller-button-container {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: $spacing-01;
+    position: relative;
+    margin-inline-start: $spacing-03;
+    padding-inline-end: $spacing-05;
   }
 
   @keyframes page-header-title-breadcrumb-animation {

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/utilities';
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins' as *;
+@use '@carbon/layout/scss/convert';
 
 $block-class__next: #{$pkg-prefix}--tearsheet__next;
 $motion-duration: $duration-moderate-02;
@@ -183,7 +184,8 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     > *:not(
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button
+        .#{$carbon-prefix}--modal-close-button,
+        .#{$block-class__next}__close-button
       ) {
       margin-block-end: $spacing-06;
     }
@@ -216,6 +218,22 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     }
   }
 
+  // Reorder elements visually for wide variant on desktop
+  // headerActions is first in DOM but should display on the right (order: 2)
+  // This only applies to wide variant on desktop (not mobile, not narrow)
+  &:not(.#{$block-class__next}--narrow) {
+    @include breakpoint(md) {
+      .#{$block-class__next}__header-content-wrapper {
+        .#{$block-class__next}__header-actions {
+          order: 2;
+        }
+        .#{$block-class__next}__header-content {
+          order: 1;
+        }
+      }
+    }
+  }
+
   // ──────────────────────────────────────────────────────────────
   // Header (default vs collapsed)
   // ──────────────────────────────────────────────────────────────
@@ -225,6 +243,8 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
         .#{$carbon-prefix}--modal-close-button,
+        .#{$block-class__next}__close-button,
+        .#{$block-class__next}__decorator,
         .excludeFromCollapse
       ) {
       overflow: hidden;
@@ -235,6 +255,7 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
         opacity $motion-duration motion(entrance, expressive),
         margin $motion-duration motion(entrance, expressive),
         padding $motion-duration motion(entrance, expressive);
+      visibility: hidden;
     }
 
     .#{$block-class__next}__header-actions,
@@ -261,6 +282,8 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
         .#{$carbon-prefix}--modal-close-button,
+        .#{$block-class__next}__close-button,
+        .#{$block-class__next}__decorator,
         .excludeFromCollapse
       ),
     .#{$block-class__next}__header-actions
@@ -271,6 +294,8 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
         .#{$carbon-prefix}--modal-close-button,
+        .#{$block-class__next}__close-button,
+        .#{$block-class__next}__decorator,
         .excludeFromCollapse
       )
       *,
@@ -285,6 +310,7 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       opacity: 0;
       pointer-events: none;
       transition: all $motion-duration motion(entrance, expressive);
+      visibility: hidden;
     }
 
     // Header title
@@ -343,14 +369,13 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     .#{$block-class__next}__navigation-bar::before {
       position: absolute;
       z-index: 1;
-      background: rgba(0, 0, 0, 0.12);
+      background: $border-subtle-01;
       block-size: 1px;
       content: '';
-      inline-size: 100vw;
-      inset-block-start: -$spacing-02;
-      inset-inline-start: 50%;
+      inline-size: calc(100% + $spacing-11);
+      inset-block-start: 0;
+      inset-inline-start: -$spacing-07;
       pointer-events: none;
-      transform: translateX(-50%);
     }
   }
 
@@ -424,10 +449,18 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
   @include type.type-style('body-compact-01');
 }
 
+// Always hide Carbon's default modal close button
 .#{$block-class__next}__header--no-close-icon {
   display: none;
 }
 
+// Decorator positioning (after close button)
+.#{$block-class__next}__decorator {
+  position: absolute;
+  inset-block-start: convert.to-rem(10px);
+  inset-inline-end: convert.to-rem(48px);
+}
+
 // ──────────────────────────────────────────────────────────────
 // Navigation bar inside header
 // ──────────────────────────────────────────────────────────────
@@ -447,7 +480,7 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
 }
 .#{$block-class__next}__scroller-container {
   position: absolute;
-  inset-block-end: $spacing-01;
+  inset-block-end: 0;
   inset-inline-end: -$spacing-08; // padding inline end of header + adjusted -ve margin for tabs
   @include breakpoint-down(md) {
     inset-inline-end: -$spacing-06;

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js

@@ -1,110 +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 { useIsomorphicEffect } from "../../../../../global/js/hooks/useIsomorphicEffect.js";
-import { autoUpdate, computePosition } from "../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { arrow, flip, offset, shift } from "../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-import React, { forwardRef, useRef } from "react";
-import { usePrefix, useTheme } from "@carbon/react";
-
-//#region src/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.tsx
-var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
-const CoachmarkBubble = forwardRef((props, ref) => {
-	const { children, align, target, className, dropShadow = true, highContrast = false, caret = false, open, ...rest } = props;
-	const { theme } = useTheme();
-	const carbonPrefix = usePrefix();
-	const tooltipRef = useRef(null);
-	const arrowRef = useRef(null);
-	const targetRef = useRef(null);
-	useIsomorphicEffect(() => {
-		if (target) {
-			if (typeof target === "string") {
-				if (target === "#" || target.trim() === "") return;
-				targetRef.current = document.querySelector(target);
-			} else if ("current" in target) targetRef.current = target.current;
-			else targetRef.current = target;
-			if (targetRef.current && tooltipRef.current && arrowRef.current && open) {
-				targetRef.current.scrollIntoView({
-					behavior: "smooth",
-					block: "center",
-					inline: "center"
-				});
-				const middlewares = [
-					offset(10),
-					flip(),
-					shift({ padding: 5 }),
-					arrow({ element: arrowRef.current })
-				];
-				const cleanup = autoUpdate(targetRef.current, tooltipRef.current, () => {
-					if (targetRef.current && tooltipRef.current) computePosition(targetRef.current, tooltipRef.current, {
-						placement: align,
-						strategy: "fixed",
-						middleware: middlewares
-					}).then(({ x, y, placement, middlewareData }) => {
-						if (tooltipRef.current) Object.assign(tooltipRef.current.style, {
-							left: `${x}px`,
-							top: `${y}px`
-						});
-						const arrowX = middlewareData.arrow?.x;
-						const arrowY = middlewareData.arrow?.y;
-						const staticSide = {
-							top: "bottom",
-							right: "left",
-							bottom: "top",
-							left: "right"
-						}[placement.split("-")[0]];
-						if (staticSide && arrowRef.current) Object.assign(arrowRef.current.style, {
-							left: arrowX != null ? `${arrowX}px` : "",
-							top: arrowY != null ? `${arrowY}px` : "",
-							right: "",
-							bottom: "",
-							[staticSide]: "-4px"
-						});
-					});
-				}, { animationFrame: true });
-				return () => {
-					cleanup();
-				};
-			}
-		}
-	}, [
-		target,
-		open,
-		align
-	]);
-	if (!target) return null;
-	const mergedRefs = (node) => {
-		tooltipRef.current = node;
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	};
-	return /* @__PURE__ */ React.createElement("div", {
-		...rest,
-		ref: mergedRefs,
-		className: (0, import_classnames.default)({
-			[`${carbonPrefix}--g100`]: theme === "white" && highContrast || theme === "g100" && !highContrast,
-			[`${carbonPrefix}--g90`]: theme === "g10" && highContrast || theme === "g90" && !highContrast,
-			[`${carbonPrefix}--g10`]: theme === "g90" && highContrast || theme === "g10" && !highContrast,
-			[`${carbonPrefix}--white`]: theme === "g100" && highContrast || theme === "white" && !highContrast,
-			[`${pkg.prefix}__bubble`]: true,
-			[`${pkg.prefix}__bubble-open`]: open,
-			[`${pkg.prefix}__bubble-drop-shadow`]: dropShadow,
-			[`${pkg.prefix}__bubble-high-contrast`]: highContrast,
-			[`${pkg.prefix}__bubble-hidden`]: !targetRef.current
-		}, className)
-	}, /* @__PURE__ */ React.createElement("div", {
-		ref: arrowRef,
-		className: !caret ? `${pkg.prefix}__bubble__arrow` : ""
-	}), children);
-});
-CoachmarkBubble.displayName = "CoachmarkBubble";
-
-//#endregion
-export { CoachmarkBubble };

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.js

@@ -1,32 +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 React from "react";
-
-//#region src/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.tsx
-/**
-* @license
-*
-* 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.
-*/
-var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
-const CoachmarkBubbleHeader = ({ children, className, ...rest }) => {
-	return /* @__PURE__ */ React.createElement("header", {
-		...rest,
-		className: (0, import_classnames.default)(`${pkg.prefix}__bubble__header`, className)
-	}, children);
-};
-CoachmarkBubbleHeader.displayName = "CoachmarkBubbleHeader";
-
-//#endregion
-export { CoachmarkBubbleHeader };