@carbon/ibm-products-web-components 0.37.0 → 0.38.0

package/scss/components/page-header/page-header.scss

@@ -47,6 +47,7 @@ $carbon-prefix: 'cds';
 :host(#{$prefix}-page-header-breadcrumb) {
   position: sticky;
   z-index: 1;
+  overflow: visible;
   background-color: $layer-01;
   block-size: convert.to-rem(40px);
   border-block-end: $border-subtle;
@@ -68,22 +69,52 @@ $carbon-prefix: 'cds';
     block-size: 100%;
   }
 
+  .#{$carbon-prefix}--css-grid-column {
+    overflow: visible;
+    min-inline-size: 0;
+  }
+
   // TODO: remove this section when styles from React have been migrated
   .#{$prefix}--page-header__breadcrumb-container {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: space-between;
     block-size: 100%;
+    gap: $spacing-03;
     inline-size: 100%;
+    min-inline-size: 0;
   }
 
   .#{$prefix}--page-header__breadcrumb-wrapper {
-    display: inline-flex;
-    inline-size: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+
+    @include breakpoint-down(md) {
+      flex: 1 1 75%;
+    }
+
+    @include breakpoint(md) {
+      max-inline-size: 60%;
+    }
+
+    @include breakpoint(lg) {
+      max-inline-size: 60%;
+    }
   }
 
   .#{$prefix}--page-header__breadcrumb__actions {
-    display: inline-flex;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $spacing-03;
+    min-inline-size: 0;
+
+    @include breakpoint-down(md) {
+      flex: 0 1 25%;
+      max-inline-size: 25%;
+    }
   }
   ///////////////////////////////
 }

package/scss/components/tearsheet-preview/tearsheet-header-content.scss

@@ -188,3 +188,13 @@ $motion-duration: $duration-moderate-02;
     transition: all $motion-duration motion(entrance, expressive);
   }
 }
+
+// Hide header content elements immediately when tearsheet is closing
+:host-context(#{$c4p-prefix}-preview-tearsheet:not([open])) {
+  .#{$block-class__next}__header-actions,
+  .#{$block-class__next}__header-content,
+  .#{$block-class__next}__header-content * {
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+  }
+}

package/scss/components/tearsheet-preview/tearsheet-header.scss

@@ -102,6 +102,21 @@ $motion-duration: $duration-moderate-02;
   }
 }
 
+// Hide header elements immediately when tearsheet is closing
+:host-context(#{$c4p-prefix}-preview-tearsheet:not([open])) {
+  @media screen and (prefers-reduced-motion: reduce) {
+    ::slotted(*) {
+      opacity: 0;
+      transition: none;
+    }
+  }
+
+  ::slotted(*) {
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+  }
+}
+
 // ──────────────────────────────────────────────────────────────
 // Collapsed Header State
 // ──────────────────────────────────────────────────────────────

package/scss/components/tearsheet-preview/tearsheet.scss

@@ -146,11 +146,9 @@ $motion-duration: $duration-moderate-02;
   --overlay-color: #{$overlay};
   --overlay-alpha: 0.5;
 
-  z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));
-
   &::before {
     position: fixed;
-    z-index: -1;
+    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));
     display: block;
     background: var(--overlay-color);
     content: '';

package/telemetry.yml

@@ -8,8 +8,10 @@ collect:
     elements:
       allowedAttributeNames:
         # General
+        - actions
         - align
         - autoalign
+        - button-size
         - close-icon-description
         - closeIconDescription
         - collapse-label
@@ -46,8 +48,6 @@ collect:
         - onc4p-about-modal-closed
         - version
         # c4p-action-set
-        - actions
-        - button-size
         - disable-stacking
         # c4p-big-number
         - fraction-digits
@@ -75,6 +75,7 @@ collect:
         - dropShadow
         - floating
         - highContrast
+        - onc4p-coachmark-closed
         - onc4p-coachmark-opened
         - position
         # c4p-coachmark-beacon
@@ -132,16 +133,23 @@ collect:
         - onc4p-options-tile-close
         - onc4p-options-tile-open
         - titleId
+        # c4p-page-header-actions-set
+        - actions-data
         # c4p-page-header-breadcrumb
         - border
         - content-actions-flush
         - page-actions-flush
+        # c4p-page-header-breadcrumbs-set
+        - breadcrumbs-data
+        - hiddenItems
         # c4p-page-header-content-text
         - subtitle
         # c4p-page-header-scroller
         - close-on-activation
         - enter-delay-ms
         - leave-delay-ms
+        # c4p-page-header-tags-set
+        - tags-data
         # c4p-preview-tearsheet
         - container-class-name
         - onc4p-preview-tearsheet-beingclosed
@@ -178,6 +186,8 @@ collect:
         # c4p-tearsheet-influencer
         - influencer-panel-open
         - oncds-tearsheet-influencer-closed
+        # c4p-tearsheet-stack
+        - stack-step-size
         # c4p-tearsheet-summary-content
         - oncds-tearsheet-summary-closed
         - summary-panel-open
@@ -189,11 +199,6 @@ collect:
         - theme
         - tooltip-alignment
         - tooltip-text
-        # set-of-breadcrumbs-example
-        - breadcrumbs-data
-        - hiddenItems
-        # set-of-tags-example
-        - tags-data
         # stacking-tearsheet-demo
         - tearsheet-type
         # step-tearsheet-preview
@@ -202,6 +207,12 @@ collect:
         # General - boolean attributes
         - "true"
         - "false"
+        # General - button-size
+        - 2xl
+        - lg
+        - md
+        - sm
+        - xl
         # General - influencer-width
         - narrow
         - wide
@@ -229,12 +240,6 @@ collect:
         - success
         - tooltip
         - warning
-        # c4p-action-set - button-size
-        - 2xl
-        - lg
-        - md
-        - sm
-        - xl
         # c4p-preview-tearsheet - variant
         - narrow
         - wide
@@ -247,6 +252,10 @@ collect:
         # c4p-tearsheet - width
         - narrow
         - wide
+        # c4p-tearsheet-stack - stack-step-size
+        - lg
+        - md
+        - sm
   npm:
     dependencies: null
   js: