@carbon/ibm-products-web-components 0.48.0 → 0.49.0

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

@@ -54,7 +54,7 @@ $carbon-prefix: 'cds';
 
 :host(#{$prefix}-page-header-breadcrumb) {
   position: sticky;
-  z-index: 1;
+  z-index: 2;
   overflow: visible;
   background-color: $layer-01;
   block-size: convert.to-rem(40px);
@@ -157,8 +157,10 @@ $carbon-prefix: 'cds';
 
 :host(#{$prefix}-page-header-breadcrumb:not([content-actions-flush]))
   ::slotted([slot='content-actions']) {
-  //stylelint-disable declaration-no-important
-  margin-inline-end: $spacing-04 !important;
+  @include breakpoint(md) {
+    //stylelint-disable declaration-no-important
+    margin-inline-end: $spacing-04 !important;
+  }
 }
 
 :host(#{$prefix}-page-header-breadcrumb[page-actions-flush]) {
@@ -173,7 +175,7 @@ $carbon-prefix: 'cds';
 }
 
 :host(#{$prefix}-page-header-content) {
-  padding-block-start: $spacing-06;
+  padding-block-start: $spacing-09;
   // TODO: remove above styles when styles from React have been migrated
   // and use the extend below
   // @extend .#{$prefix}--page-header__content;
@@ -195,21 +197,16 @@ $carbon-prefix: 'cds';
   }
 
   .#{$prefix}--page-header__content__title-wrapper {
-    // TODO: remove this section
-    @include breakpoint-down(md) {
-      display: flex;
-      flex-direction: column;
-      grid-gap: $spacing-05;
-    }
-
-    display: grid;
+    display: flex;
+    flex-direction: column;
     gap: $spacing-05;
-    ///////////////////////////////
-
-    // overriding until the responsive behavior is implemented
-    grid-template-columns: auto minmax(auto, auto);
     margin-block-end: $spacing-05;
     min-block-size: convert.to-rem(40px);
+
+    @include breakpoint('md') {
+      display: grid;
+      grid-template-columns: auto minmax(auto, auto);
+    }
   }
 
   // TODO: remove this section
@@ -221,7 +218,7 @@ $carbon-prefix: 'cds';
 
   .#{$prefix}--page-header__content__page-actions {
     display: flex;
-    justify-content: right;
+    justify-self: right;
     /* stylelint-disable-next-line carbon/motion-easing-use */
     transition: opacity motion(standard, productive) $duration-moderate-02;
 
@@ -499,8 +496,15 @@ $carbon-prefix: 'cds';
 
 :host(#{$prefix}-page-header-breadcrumb)
   .#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions {
+  overflow: hidden;
+  min-inline-size: 0;
   opacity: 0;
   visibility: hidden;
+
+  @include breakpoint-down('md') {
+    display: none;
+  }
+
   &.#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions--show {
     opacity: 1;
     transform: translateY(0);
@@ -508,6 +512,10 @@ $carbon-prefix: 'cds';
     /* stylelint-disable-next-line */ opacity
       motion(standard, productive) $duration-moderate-01;
     visibility: visible;
+
+    @include breakpoint-down('md') {
+      display: none;
+    }
   }
 }
 
@@ -518,6 +526,12 @@ $carbon-prefix: 'cds';
     /* stylelint-disable-next-line */
     transform motion(standard, productive) $duration-moderate-01,
     opacity motion(standard, productive) $duration-moderate-01;
+
+  #{$carbon-prefix}-breadcrumb-item {
+    &::after {
+      display: none;
+    }
+  }
 }
 
 :host(

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

@@ -89,6 +89,10 @@ $motion-duration: $duration-moderate-02;
   // Transition on base state so it animates in both directions (expand + collapse)
   transition: inset-block-start $motion-duration motion(entrance, expressive);
 
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   // When header is collapsed, shift slightly down — matches React
   :host-context(#{$c4p-prefix}-tearsheet-header[collapsed]) & {
     inset-block-start: $spacing-03;
@@ -107,6 +111,10 @@ $motion-duration: $duration-moderate-02;
   // Animate size change (lg → md on collapse) — matches React
   .#{$carbon-prefix}--modal-close {
     transition: all $motion-duration ease;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }
 
@@ -140,6 +148,10 @@ $motion-duration: $duration-moderate-02;
     transition:
       all $motion-duration motion(entrance, expressive),
       opacity $motion-duration motion(entrance, expressive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }
 
@@ -178,6 +190,10 @@ $motion-duration: $duration-moderate-02;
     margin-block-start: $spacing-02;
     transition: all $motion-duration motion(entrance, expressive);
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     > span {
       display: flex;
       align-items: center;
@@ -198,6 +214,10 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class__next}__header-title {
     margin-block: 0;
     transition: margin-block $motion-duration ease;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   @include breakpoint-down(md) {
@@ -212,6 +232,10 @@ $motion-duration: $duration-moderate-02;
       align-items: center;
       margin-block: 0;
       transition: margin-block $motion-duration ease;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
   // Header actions adjustment — removed negative offset that caused misalignment
@@ -227,14 +251,12 @@ $motion-duration: $duration-moderate-02;
   }
 }
 .#{$block-class__next}__title-start {
-  @media screen and (prefers-reduced-motion: reduce) {
-    ::slotted(*) {
-      transition: none;
-    }
-  }
-
   ::slotted(*) {
     transition: all $motion-duration motion(entrance, expressive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }
 
@@ -245,5 +267,9 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class__next}__header-content * {
     opacity: 0;
     transition: opacity 0.1s ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }

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

@@ -125,6 +125,10 @@ $motion-duration: $duration-moderate-02;
     // Collapsed: remove top padding (was $spacing-04)
     padding-block-start: 0;
     transition: padding $motion-duration motion(entrance, expressive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   // Collapse everything except core elements (navigation-bar, header-content, excludeFromCollapse)

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

@@ -33,7 +33,15 @@ $motion-duration: $duration-moderate-02;
   max-block-size: 0;
   opacity: 0;
   pointer-events: none;
-  transition: all $motion-duration motion(entrance, expressive);
+  transition:
+    opacity $motion-duration motion(entrance, expressive),
+    max-block-size $motion-duration motion(entrance, expressive),
+    padding $motion-duration motion(entrance, expressive),
+    margin $motion-duration motion(entrance, expressive);
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 .#{$block-class__next}--has-ai-label::part(dialog) {
   border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */
@@ -143,6 +151,17 @@ $motion-duration: $duration-moderate-02;
   }
 }
 
+// Carbon's cds-modal has its own opacity transition on exit (non-visible state)
+// that has no prefers-reduced-motion guard upstream. Override it here so the
+// tearsheet host-level opacity fade is also suppressed on exit.
+:host(#{$c4p-prefix}-preview-tearsheet:not([open])) {
+  @media screen and (prefers-reduced-motion: reduce) {
+    #{$carbon-prefix}-modal {
+      transition: none;
+    }
+  }
+}
+
 // This will set full screen height for tearsheets in mobile devices
 :host(:not(.#{$block-class__next}--stack-activated.is-visible)) {
   ::part(dialog) {

package/telemetry.yml

@@ -209,8 +209,12 @@ collect:
         - titleId
         - warn
         - warnText
+        # c4p-page-header
+        - full-width-grid
+        - narrow-grid
         # c4p-page-header-actions-set
         - actions-data
+        - toolbar-aria-label
         # c4p-page-header-breadcrumb
         - actions-aria-label
         - border
@@ -219,7 +223,6 @@ collect:
         # c4p-page-header-breadcrumbs-set
         - breadcrumb-aria-label
         - breadcrumbs-data
-        - hiddenItems
         # c4p-page-header-content
         - title-level
         # c4p-page-header-content-text

package/es/components/page-header/page-header-tags-set/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/page-header/page-header-tags-set/utils.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  TAG_TYPE,\n  TAG_SIZE,\n} from '@carbon/web-components/es/components/tag/defs';\n\nexport interface TagType {\n  type: TAG_TYPE;\n  text: string;\n  size: TAG_SIZE;\n  onClose?: () => void; // Made optional to allow exclusion\n}\n\nconst tagTypes: TAG_TYPE[] = Object.values(TAG_TYPE);\n\nconst randomWords =\n  'Interface Components Architecture Microservices Tokens Authentication Authorization Encryption Dashboard Metrics Logging Tracing Scalability Latency Containers Virtualization Deployment Infrastructure Cloud Cluster Replica Storage Bandwidth Throughput Streaming Sockets Requests Responses Payload Endpoint GraphQL REST Webhooks JSON Serialization Deserialization Algorithms Inference Model Training Embeddings Prompts Outputs Transformer Neural Optimization Gradient Epoch Dataset Labels Prediction Pipeline Automation Hooks State Context Reducer Props Render Refactor Commit Branch Merge Versioning Build Compile Transpile Minify Bundle Dependency Modules Imports Exports Testing Coverage Snapshot Regression Lint Formatter Error Exception Debug Logs Watcher Server Client Browser Viewport Media Query Responsive Breakpoints Grid CSS Tailwind JavaScript TypeScript Framework Library Routing Navigation SPA SSR Hydration DOM Event Handler Listener Throttle Debounce Asynchronous Callback Promise Await Fetch Resource CORS Header Cookie Session Cache Index Query Database Schema Migration ORM Relation Join Table Record Document NoSQL SQL Function Parameter Return Expression Condition Loop Iteration Variable Constant Scope Closure Arrow Object Array Boolean String Integer Float Null Undefined NaN Prototype Instance Class Constructor Inheritance Encapsulation Abstraction Polymorphism Tokenization CI CD Monitoring Alert Incident SLA SLO Uptime Availability Redundancy Failover Load Balancer Firewall Gateway Certificate TLS HTTPS Domain DNS Proxy Timeout Queue Service Registry Discovery Containerization Kubernetes Docker';\n\nconst words: string[] = randomWords.split(/\\s+/);\n\ninterface GenerateTagsOptions {\n  count: number;\n  size?: TAG_SIZE;\n  dismissible?: boolean;\n}\n\nexport function generateTags({\n  count,\n  size = TAG_SIZE.MEDIUM,\n  dismissible = false,\n}: GenerateTagsOptions): TagType[] {\n  return Array.from({ length: count }, (_, index) => {\n    const type = tagTypes[index % tagTypes.length];\n    const text = words[index % words.length];\n\n    const tag: TagType = {\n      type,\n      text,\n      size,\n    };\n\n    if (dismissible) {\n      tag.onClose = () => console.log(`Closed tag: ${text}`);\n    }\n\n    return tag;\n  });\n}\n\n// Example usage:\nexport const tagsData = generateTags({\n  count: 100,\n  size: TAG_SIZE.SMALL,\n  dismissible: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,WAAuB,OAAO,OAAO,SAAS;AAKpD,MAAM,QAAkB,4lDAAY,MAAM,MAAM;AAQhD,SAAgB,aAAa,EAC3B,OACA,OAAO,SAAS,QAChB,cAAc,SACmB;AACjC,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,UAAU;EACjD,MAAM,OAAO,SAAS,QAAQ,SAAS;EACvC,MAAM,OAAO,MAAM,QAAQ,MAAM;EAEjC,MAAM,MAAe;GACnB;GACA;GACA;GACD;AAED,MAAI,YACF,KAAI,gBAAgB,QAAQ,IAAI,eAAe,OAAO;AAGxD,SAAO;GACP;;AAIJ,MAAa,WAAW,aAAa;CACnC,OAAO;CACP,MAAM,SAAS;CACf,aAAa;CACd,CAAC"}

package/es-custom/components/page-header/page-header-tags-set/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/page-header/page-header-tags-set/utils.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  TAG_TYPE,\n  TAG_SIZE,\n} from '@carbon/web-components/es/components/tag/defs';\n\nexport interface TagType {\n  type: TAG_TYPE;\n  text: string;\n  size: TAG_SIZE;\n  onClose?: () => void; // Made optional to allow exclusion\n}\n\nconst tagTypes: TAG_TYPE[] = Object.values(TAG_TYPE);\n\nconst randomWords =\n  'Interface Components Architecture Microservices Tokens Authentication Authorization Encryption Dashboard Metrics Logging Tracing Scalability Latency Containers Virtualization Deployment Infrastructure Cloud Cluster Replica Storage Bandwidth Throughput Streaming Sockets Requests Responses Payload Endpoint GraphQL REST Webhooks JSON Serialization Deserialization Algorithms Inference Model Training Embeddings Prompts Outputs Transformer Neural Optimization Gradient Epoch Dataset Labels Prediction Pipeline Automation Hooks State Context Reducer Props Render Refactor Commit Branch Merge Versioning Build Compile Transpile Minify Bundle Dependency Modules Imports Exports Testing Coverage Snapshot Regression Lint Formatter Error Exception Debug Logs Watcher Server Client Browser Viewport Media Query Responsive Breakpoints Grid CSS Tailwind JavaScript TypeScript Framework Library Routing Navigation SPA SSR Hydration DOM Event Handler Listener Throttle Debounce Asynchronous Callback Promise Await Fetch Resource CORS Header Cookie Session Cache Index Query Database Schema Migration ORM Relation Join Table Record Document NoSQL SQL Function Parameter Return Expression Condition Loop Iteration Variable Constant Scope Closure Arrow Object Array Boolean String Integer Float Null Undefined NaN Prototype Instance Class Constructor Inheritance Encapsulation Abstraction Polymorphism Tokenization CI CD Monitoring Alert Incident SLA SLO Uptime Availability Redundancy Failover Load Balancer Firewall Gateway Certificate TLS HTTPS Domain DNS Proxy Timeout Queue Service Registry Discovery Containerization Kubernetes Docker';\n\nconst words: string[] = randomWords.split(/\\s+/);\n\ninterface GenerateTagsOptions {\n  count: number;\n  size?: TAG_SIZE;\n  dismissible?: boolean;\n}\n\nexport function generateTags({\n  count,\n  size = TAG_SIZE.MEDIUM,\n  dismissible = false,\n}: GenerateTagsOptions): TagType[] {\n  return Array.from({ length: count }, (_, index) => {\n    const type = tagTypes[index % tagTypes.length];\n    const text = words[index % words.length];\n\n    const tag: TagType = {\n      type,\n      text,\n      size,\n    };\n\n    if (dismissible) {\n      tag.onClose = () => console.log(`Closed tag: ${text}`);\n    }\n\n    return tag;\n  });\n}\n\n// Example usage:\nexport const tagsData = generateTags({\n  count: 100,\n  size: TAG_SIZE.SMALL,\n  dismissible: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,WAAuB,OAAO,OAAO,SAAS;AAKpD,MAAM,QAAkB,4lDAAY,MAAM,MAAM;AAQhD,SAAgB,aAAa,EAC3B,OACA,OAAO,SAAS,QAChB,cAAc,SACmB;AACjC,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,UAAU;EACjD,MAAM,OAAO,SAAS,QAAQ,SAAS;EACvC,MAAM,OAAO,MAAM,QAAQ,MAAM;EAEjC,MAAM,MAAe;GACnB;GACA;GACA;GACD;AAED,MAAI,YACF,KAAI,gBAAgB,QAAQ,IAAI,eAAe,OAAO;AAGxD,SAAO;GACP;;AAIJ,MAAa,WAAW,aAAa;CACnC,OAAO;CACP,MAAM,SAAS;CACf,aAAa;CACd,CAAC"}