@carbon/ibm-products-web-components 0.21.0 → 0.22.0-rc.0

package/lib/utilities/carousel/types.d.ts

@@ -32,5 +32,6 @@ interface InitCarousel {
     goToIndex: (index: number) => void;
     getActiveItem: () => ActiveItem;
     destroyEvents: (() => void) | null;
+    allViews: Record<number, HTMLElement | null>;
 }
 export type { CarouselStackHistory, CarouselResponse, InitCarousel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.21.0",
+  "version": "0.22.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -54,7 +54,8 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.68.0",
+    "@carbon-labs/wc-empty-state": "^0.4.0",
+    "@carbon/ibm-products-styles": "^2.69.0-rc.0",
     "@carbon/styles": "1.85.0",
     "@carbon/web-components": "2.33.0",
     "@ibm/telemetry-js": "^1.9.1",
@@ -102,5 +103,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "996fe987dd30d6c6704e0d48079ec3346f58cd18"
+  "gitHead": "fc508881b9c0d514a376be3440ebd9f9e12bd95a"
 }

package/scss/components/interstitial-screen/interstitial-screen-body-item.scss

@@ -9,7 +9,7 @@
 @use '../../utilities/carousel/index' as carousel;
 @use '@carbon/styles/scss/spacing' as *;
 
-@include carousel.carouselStyles();
+@include carousel.carousel();
 
 :host {
   /* stylelint-disable-next-line declaration-no-important */

package/scss/components/interstitial-screen/interstitial-screen-body.scss

@@ -23,7 +23,6 @@ $prefix: 'c4p';
 }
 
 :host {
-  display: flex;
   flex-grow: 1;
   /* stylelint-disable-next-line declaration-no-important */
   padding-block-end: 0 !important;

package/scss/components/interstitial-screen/interstitial-screen-footer.scss

@@ -13,7 +13,6 @@ $prefix: 'c4p';
 $carbon-prefix: 'cds';
 
 :host {
-  display: flex;
   inline-size: 100%;
 }
 

package/scss/components/options-tile/options-tile.scss

@@ -90,7 +90,13 @@ $block-class: #{$prefix}--options-tile;
     }
   }
 
-  .#{$block-class}--open .#{$block-class}__chevron {
-    transform: rotate(-180deg);
+  .#{$block-class}--open {
+    .#{$block-class}__chevron {
+      transform: rotate(-180deg);
+    }
+
+    .#{$block-class}__summary {
+      display: none;
+    }
   }
 }

package/scss/components/options-tile/story-styles.scss

@@ -0,0 +1,21 @@
+/*
+* 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.
+*/
+
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+
+.options-tile {
+  &__body p {
+    @include type.type-style('body-01');
+
+    margin-block-end: $spacing-05;
+  }
+
+  &__dropdown:first-of-type {
+    margin-block-end: $spacing-05;
+  }
+}

package/scss/components/page-header/_story-assets/set-of-tags/set-of-tags.scss

@@ -0,0 +1,94 @@
+/*
+* Copyright IBM Corp. 2025, 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.
+*/
+
+/* stylelint-disable  */
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use 'sass:map';
+@use '@carbon/styles';
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+$block-class: #{$prefix}--set-of-tags;
+
+:host {
+  inline-size: 100%;
+  .#{$block-class} {
+    display: flex;
+    box-sizing: border-box;
+    justify-content: flex-end;
+    inline-size: 100%;
+    white-space: nowrap;
+
+    &__popover-container {
+      padding: $spacing-05;
+
+      .#{$block-class}__popover-tag {
+        @include type.type-style('label-02');
+
+        margin: 0;
+      }
+
+      cds-dismissible-tag {
+        margin: $spacing-01 0;
+      }
+    }
+
+    &__view-all {
+      --#{$carbon-prefix}-link-text-color: var(
+        --#{$carbon-prefix}-link-inverse
+      );
+      --#{$carbon-prefix}-link-hover-text-color: var(
+        --#{$carbon-prefix}-link-inverse-hover
+      );
+      --#{$carbon-prefix}-link-visited-text-color: var(
+        --#{$carbon-prefix}-link-inverse-visited
+      );
+      --#{$carbon-prefix}-link-focus-text-color: var(
+        --#{$carbon-prefix}-focus-inverse
+      );
+      margin-top: $spacing-03;
+      display: block;
+    }
+
+    &__modal-tags-search {
+      margin-block-start: $spacing-05;
+    }
+
+    &__modal-tags-container {
+      cds-dismissible-tag {
+        margin: $spacing-02 $spacing-03 $spacing-02 0;
+      }
+    }
+  }
+
+  // Suppress custom elements until styles are loaded
+  #{$carbon-prefix}-tag:not(:defined),
+  #{$carbon-prefix}-dismissible-tag:not(:defined),
+  #{$carbon-prefix}-operational-tag:not(:defined) {
+    display: none;
+  }
+
+  cds-modal-header {
+    padding-inline: $spacing-05;
+  }
+
+  cds-modal-body {
+    @extend .#{$carbon-prefix}--modal-scroll-content;
+
+    cds-tag {
+      margin-inline-start: 0;
+    }
+  }
+}

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

@@ -46,6 +46,7 @@ $carbon-prefix: 'cds';
 
 :host(#{$prefix}-page-header-breadcrumb) {
   position: sticky;
+  z-index: 1;
   background-color: $layer-01;
   block-size: convert.to-rem(40px);
   border-block-end: $border-subtle;
@@ -162,6 +163,13 @@ $carbon-prefix: 'cds';
   .#{$prefix}--page-header__content__page-actions {
     display: flex;
     justify-content: right;
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: opacity motion(standard, productive) $duration-moderate-02;
+
+    &.#{$prefix}--page-header__content__page-actions--clipped {
+      opacity: 0;
+      visibility: hidden;
+    }
 
     @include breakpoint-down('md') {
       justify-content: left;
@@ -259,29 +267,20 @@ $carbon-prefix: 'cds';
 
 :host(#{$prefix}-page-header-tabs) .#{$prefix}--page-header__tab-bar--tablist {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   inline-size: 100%;
-
-  // TODO: remove once responsive logic for tags is implemented
-  @include breakpoint-down(md) {
-    flex-direction: column-reverse;
-    grid-gap: $spacing-05;
-  }
 }
 
 :host(#{$prefix}-page-header-tabs) ::slotted([slot='tags']) {
   display: flex;
   align-items: center;
   justify-content: right;
+  inline-size: 100%;
+  max-inline-size: 500px;
   // TODO: remove above styles when styles from React have been migrated
   // and use the extend below
   // @extend .#{$prefix}--page-header__tags;
-  inline-size: 100%;
-
-  // TODO: remove once responsive logic for tags is implemented
-  @include breakpoint-down(md) {
-    justify-content: left;
-  }
 }
 
 :host(#{$prefix}-page-header-tabs) ::slotted([slot='scroller']) {
@@ -336,31 +335,20 @@ $carbon-prefix: 'cds';
   }
 }
 
-:host(#{$prefix}-page-header-title-breadcrumb) {
-  opacity: 0;
-  transform: translateY($spacing-05);
-  transition:
-    /* stylelint-disable-next-line */
-    transform motion(standard, productive) $duration-moderate-01,
-    opacity motion(standard, productive) $duration-moderate-01;
-  // Target browsers that do not yet support animation-timeline: scroll()
+// Target browsers that do not yet support animation-timeline: scroll()
+@mixin scroll-fallback {
   @supports not (animation-timeline: scroll()) {
-    &.#{$prefix}--page-header-title-breadcrumb-show {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    @media (prefers-reduced-motion: reduce) {
-      transform: translateY(0);
-      /* stylelint-disable-next-line */
-      transition: opacity motion(standard, productive) $duration-moderate-01;
-    }
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transform: translateY(0);
+    /* stylelint-disable-next-line */
+    transition: opacity motion(standard, productive) $duration-moderate-01;
   }
 }
 
-:host(
-  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__with-content
-) {
-  // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+@mixin scroll-animation {
   @supports (animation-timeline: scroll()) {
     // Show by default should not have any animation, this means
     // there was not a page header content element provided
@@ -376,6 +364,54 @@ $carbon-prefix: 'cds';
   }
 }
 
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__fallback
+) {
+  @include scroll-fallback();
+}
+
+:host(#{$prefix}-page-header-breadcrumb)
+  .#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions {
+  opacity: 0;
+  visibility: hidden;
+  &.#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions--show {
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+    /* stylelint-disable-next-line */ opacity
+      motion(standard, productive) $duration-moderate-01;
+    visibility: visible;
+  }
+}
+
+:host(#{$prefix}-page-header-title-breadcrumb) {
+  opacity: 0;
+  transform: translateY($spacing-05);
+  transition:
+    /* stylelint-disable-next-line */
+    transform motion(standard, productive) $duration-moderate-01,
+    opacity motion(standard, productive) $duration-moderate-01;
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__with-content
+) {
+  // Target browsers that do not yet support animation-timeline: scroll()
+  &.#{$prefix}--page-header-title-breadcrumb-show__fallback {
+    @supports not (animation-timeline: scroll()) {
+      @include scroll-fallback();
+
+      @media (prefers-reduced-motion: reduce) {
+        transform: translateY(0);
+        /* stylelint-disable-next-line */
+        transition: opacity motion(standard, productive) $duration-moderate-01;
+      }
+    }
+  }
+  // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+  @include scroll-animation();
+}
+
 :host(
   #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__by-default
 ) {

package/scss/components/truncated-text/truncated-text.scss

@@ -55,6 +55,10 @@ $block-class: #{$prefix}--truncated-text;
     }
   }
 
+  .#{$block-class}_content--closing {
+    -webkit-line-clamp: none;
+  }
+
   #{$carbon-prefix}-tooltip {
     display: inline-flex;
   }