@carbon/ibm-products 2.92.1 → 2.93.0

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

@@ -721,6 +721,15 @@ $duration: 1000ms;
     border-block-end: 1px solid $border-subtle-01;
     /* stylelint-disable-next-line carbon/layout-use */
     inset-block-start: var(--#{$pkg-prefix}-page-header-header-top);
+    overflow-x: clip;
+  }
+
+  // When disableStickyTabBar is true, remove sticky positioning from root
+  // This allows breadcrumb to stick to viewport while tab bar scrolls normally
+  &.#{$block-class}.#{$block-class}--disable-sticky-tab-bar {
+    position: static;
+    // Add padding to compensate for fixed breadcrumb (40px height)
+    padding-block-start: to-rem(40px);
   }
 
   .#{$block-class}__breadcrumb-bar {
@@ -732,6 +741,15 @@ $duration: 1000ms;
     inset-block-start: var(--#{$pkg-prefix}-page-header-breadcrumb-top);
   }
 
+  // When disableStickyTabBar is true, breadcrumb uses fixed positioning at top of viewport
+  &.#{$block-class}.#{$block-class}--disable-sticky-tab-bar
+    .#{$block-class}__breadcrumb-bar {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+  }
+
   .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid,
   .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--css-grid {
     block-size: 100%;
@@ -829,14 +847,18 @@ $duration: 1000ms;
       }
 
       @include breakpoint-down(lg) {
+        max-inline-size: 75vw;
+
         .#{$carbon-prefix}--link {
           inline-size: 75%;
         }
       }
 
       @include breakpoint-down(md) {
+        max-inline-size: 35vw;
+
         .#{$carbon-prefix}--link {
-          inline-size: 25%;
+          inline-size: 100%;
         }
       }
     }
@@ -1022,14 +1044,25 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__tab-bar {
+    position: sticky;
+    z-index: 1;
+    background-color: $layer;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$pkg-prefix}-page-header-breadcrumb-top);
+  }
+
+  // Disable sticky positioning for tab bar when disableStickyTabBar prop is true
+  &.#{$block-class}.#{$block-class}--disable-sticky-tab-bar
+    .#{$block-class}__tab-bar {
+    position: static;
     // On smaller screens, use flex to keep scroller button in flow
-    position: relative;
+    // position: relative;
     display: flex;
     align-items: center;
-    background-color: $layer;
+    // background-color: $layer;
 
-    // On max breakpoint and above, use block to maintain Carbon alignment (scroller uses absolute positioning)
-    @include breakpoint(max) {
+    // // On max breakpoint and above, use block to maintain Carbon alignment (scroller uses absolute positioning)
+    @include breakpoint(sm) {
       display: block;
     }
   }
@@ -1105,13 +1138,17 @@ $duration: 1000ms;
     align-content: center;
     justify-content: flex-end;
     inline-size: 40%;
-    padding-inline-end: $spacing-03;
+    padding-inline-end: $spacing-06;
     text-align: end;
 
     .#{$carbon-prefix}--tag {
       flex-shrink: 0;
       margin-inline-end: $spacing-03;
     }
+
+    @include breakpoint-down(lg) {
+      padding-inline-end: $spacing-06;
+    }
   }
 
   .#{$block-class}--tag-overflow-popover__hidden {
@@ -1141,12 +1178,11 @@ $duration: 1000ms;
     margin-inline-start: $spacing-03;
 
     // On max breakpoint and above, position absolutely to the right (enough gutter space)
-    @include breakpoint(max) {
+    @include breakpoint(sm) {
       position: absolute;
       inset-block-start: 0;
       inset-inline-end: 0;
       margin-inline-start: 0;
-      padding-inline-end: 0;
     }
   }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -323,8 +323,10 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header-actions {
-    flex: 0 0 auto;
-    padding-inline-start: $spacing-06;
+    position: absolute;
+    z-index: 1;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-13;
   }
 
   // buttons inside button sets in the header action area have 8px gap
@@ -338,6 +340,28 @@ $motion-duration: $duration-moderate-02;
     display: none;
   }
 
+  // Custom close button positioning (rendered in correct DOM order)
+  .#{$block-class}__close-button {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: $spacing-03;
+    inset-inline-end: $spacing-05;
+  }
+
+  // Decorator positioning (rendered before close button in DOM for correct focus order)
+  .#{$block-class}__decorator {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: $spacing-03;
+    inset-inline-end: $spacing-09;
+
+    // Add margin to AI label and slug buttons for proper spacing
+    .#{carbon-config.$prefix}--ai-label__button--sm,
+    .#{carbon-config.$prefix}--slug__button--sm {
+      margin: $spacing-03 $spacing-05 0 0;
+    }
+  }
+
   &.#{$block-class}--wide
     .#{carbon-config.$prefix}--modal-header__heading.#{$block-class}__heading {
     @include type.type-style('heading-04');

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -14,6 +14,7 @@
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins' as *;
 @use '@carbon/layout/scss/convert';
+@use '@carbon/styles/scss/utilities/focus-outline';
 
 $block-class__next: #{$pkg-prefix}--tearsheet__next;
 $motion-duration: $duration-moderate-02;
@@ -632,6 +633,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       padding-inline: $spacing-05;
     }
   }
+
+  &:focus {
+    @include focus-outline.focus-outline('outline');
+  }
 }
 
 .#{$block-class__next}__main-content {

package/telemetry.yml

@@ -610,7 +610,11 @@ collect:
         - position
         - positionTune
         - target
-        - triggerRef
+        # CoachmarkContent
+        - aria-label
+        # CoachmarkContentHeader
+        - dragAriaLabel
+        - dragIconDescription
         # CoachmarkDragbar
         - a11yKeyboardHandler
         - onDrag
@@ -659,8 +663,6 @@ collect:
         # ConditionPreview
         - colorIndex
         - previewType
-        # ContentHeader
-        - dragIconDescription
         # CreateFullPage
         - breadcrumbsOverflowAriaLabel
         - maxVisibleBreadcrumbs
@@ -805,7 +807,9 @@ collect:
         - maxFileSizeErrorBody
         - maxFileSizeErrorHeader
         # Influencer
+        - influencerPanelAriaLabel
         - influencerPanelOpen
+        - influencerPanelTriggerRef
         # InlineEditButton
         - columnConfig
         - isActiveCell
@@ -934,6 +938,8 @@ collect:
         - menuButtonLabel
         # PageHeaderHeroImage
         - objectFit
+        # PageHeaderTabBar
+        - disableStickyTabBar
         # PageHeaderTagOverflow
         - renderOverflowTag
         - renderPopoverContent
@@ -1012,7 +1018,9 @@ collect:
         - tooltipDirection
         - width
         # SummaryContent
+        - summaryPanelAriaLabel
         - summaryPanelOpen
+        - summaryPanelTriggerRef
         # TagOverflow
         - tagComponent
         # Tearsheet

package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/ContentBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,yFAUvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/ContentHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,2FA6GzB,CAAC"}

package/lib/components/Coachmark/next/Coachmark/ContentBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/ContentBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,yFAUvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/ContentHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,2FA6GzB,CAAC"}