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

package/lib/components/page-header/page-header.d.ts

@@ -7,12 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+export interface pageHeaderContextType {
+    breadcrumbOffset?: number;
+    headerOffset?: number;
+    fullyCollapsed?: boolean;
+    root?: CDSPageHeader | null;
+    withContent?: boolean;
+}
 /**
  * Page header.
  * @element c4p-page-header
  */
 declare class CDSPageHeader extends LitElement {
-    updated(): void;
+    context: pageHeaderContextType;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/lib/components/page-header/utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+/**
+ * ----------
+ * Utilities
+ * ----------
+ */
+export declare const getHeaderOffset: (el: HTMLElement) => number;
+/**
+ * Determines if the given target is scrollable
+ *
+ * @param {HTMLElement} target
+ * @returns {boolean}
+ */
+export declare const scrollable: (target: HTMLElement) => boolean;
+/**
+ * Recursively looks for the scrollable ancestor
+ */
+export declare const scrollableAncestorInner: (target: HTMLElement) => any;
+/**
+ * Walks up the parent nodes to identify the first scrollable ancestor
+ *
+ * @param {HTMLElement} target
+ * @returns {HTMLElement}
+ */
+export declare const scrollableAncestor: (target: HTMLElement) => any;

package/lib/components/side-panel/side-panel.d.ts

@@ -461,6 +461,10 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * Sets the close button icon description
      */
     closeIconDescription: string;
+    /**
+     * Sets the close button tooltip alignment
+     */
+    closeIconTooltipAlignment: string;
     /**
      * Determines whether the side panel should render the condensed version (affects action buttons primarily)
      */

package/lib/components/truncated-text/truncated-text.d.ts

@@ -18,14 +18,6 @@ declare const elementName = "c4p-truncated-text";
  * @element c4p-truncated-text
  */
 export declare class CDSTruncatedText extends LitElement {
-    /**
-     * The maximum number of lines to display before truncation.
-     */
-    lines: number;
-    /**
-     * The string value to be truncated.
-     */
-    value: string;
     /**
      * Specify how the tooltip should align with the content.
      */
@@ -34,18 +26,30 @@ export declare class CDSTruncatedText extends LitElement {
      * Specify whether a auto align functionality should be applied
      */
     autoalign: boolean;
+    /**
+     * The label on the collapse button.
+     */
+    collapseLabel: string;
     /**
      * The label on expand button.
      */
     expandLabel: string;
     /**
-     * The label on the collapse button.
+     * Unique identifier for the element.
      */
-    collapseLabel: string;
+    id: string;
+    /**
+     * The maximum number of lines to display before truncation.
+     */
+    lines: number;
     /**
      * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
      */
-    with: 'tooltip' | 'expand';
+    type: 'tooltip' | 'expand';
+    /**
+     * The string value to be truncated.
+     */
+    value: string;
     private _isOverflowing;
     private _isExpanded;
     private _maxHeight;
@@ -61,6 +65,7 @@ export declare class CDSTruncatedText extends LitElement {
     private _updateMaxHeight;
     private _setupResizeObserver;
     private _updateOverflowStatus;
+    private _handleKeydown;
     private _toggleExpansion;
     private _renderToggleButton;
     render(): import("lit-html").TemplateResult<1>;

package/lib/components/user-avatar/user-avatar.d.ts

@@ -400,6 +400,14 @@ declare class CDSUseravatar extends CDSUseravatar_base {
      */
     theme: any;
     render(): import("lit-html").TemplateResult<1>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
     static styles: any;
 }
 export default CDSUseravatar;

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+import { InitCarousel, Config } from './types';
+export declare const initCarousel: (carouselContainer: HTMLElement, config?: Config) => InitCarousel;

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export * from './carousel';
+export * from './types';

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const registerSwipeEvents: (carousel: HTMLElement, next: () => void, prev: () => void, destroy: boolean) => void;

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

@@ -0,0 +1,36 @@
+/**
+ * @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.
+ */
+interface CarouselStackHistory {
+    id: number;
+    elem: HTMLLIElement;
+}
+type CarouselResponse = {
+    currentIndex: number;
+    lastIndex: number;
+    totalViews: number;
+    historyStack: CarouselStackHistory[];
+};
+type ActiveItem = {
+    index: number;
+    item: HTMLElement | null;
+};
+export type Config = {
+    onViewChangeStart?: (args: CarouselResponse) => void;
+    onViewChangeEnd?: (args: CarouselResponse) => void;
+    excludeSwipeSupport?: boolean;
+};
+interface InitCarousel {
+    next: () => void;
+    prev: () => void;
+    reset: () => void;
+    goToIndex: (index: number) => void;
+    getActiveItem: () => ActiveItem;
+    destroyEvents: (() => void) | 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.20.0",
+  "version": "0.21.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -54,10 +54,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.67.0",
-    "@carbon/styles": "1.84.0",
-    "@carbon/web-components": "2.32.1",
+    "@carbon/ibm-products-styles": "^2.68.0-rc.0",
+    "@carbon/styles": "1.85.0",
+    "@carbon/web-components": "2.33.0",
     "@ibm/telemetry-js": "^1.9.1",
+    "@lit-labs/signals": "^0.1.2",
     "@lit/context": "^1.1.5",
     "lit": "^3.1.0"
   },
@@ -74,7 +75,7 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-docs": "^9.0.5",
-    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-links": "^9.0.0",
     "@storybook/web-components-vite": "^9.0.12",
     "@types/jest": "^29.5.13",
     "@vitest/browser": "^3.2.0",
@@ -101,5 +102,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "6b1aa641b80b4df7b6fc51c91dfaaefbfccc1ae6"
+  "gitHead": "844a483091e668abe326d27da86108ec05be8860"
 }

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

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */
+@use '../../utilities/carousel/index' as carousel;
+@use '@carbon/styles/scss/spacing' as *;
+
+@include carousel.carouselStyles();
+
+:host {
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: border-box !important;
+  padding-inline-start: $spacing-07;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @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.
+ */
+@use './interstitial-screen';
+@use '../../utilities/carousel/index' as carousel;
+@use '@carbon/styles/scss/spacing' as *;
+
+@include carousel.wrapperStyles();
+
+$prefix: 'c4p';
+
+.#{$prefix}--interstitial-screen--body {
+  block-size: 100%;
+}
+.#{$prefix}--interstitial-screen__carousel,
+.#{$prefix}--interstitial-screen__contentWrapper {
+  display: flex;
+}
+
+: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

@@ -0,0 +1,40 @@
+/**
+ * @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.
+ */
+@use './interstitial-screen';
+@use '@carbon/styles/scss/spacing' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+:host {
+  display: flex;
+  inline-size: 100%;
+}
+
+.#{$prefix}--interstitial-screen--footer {
+  block-size: 4rem; //as in cds modal footer
+}
+.#{$prefix}--interstitial-screen--footer-controls {
+  display: flex;
+}
+#{$carbon-prefix}-button {
+  block-size: 100%;
+}
+#{$carbon-prefix}-inline-loading {
+  position: absolute;
+  inset-block-start: 0;
+}
+.#{$prefix}--interstitial-screen--skip-btn {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-inline-start: 0 !important;
+
+  &::part(button) {
+    padding-inline-start: $spacing-07;
+  }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @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.
+ */
+@use './interstitial-screen';
+
+:host {
+  display: contents;
+}

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

@@ -0,0 +1,28 @@
+/*
+* 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.
+*/
+
+$css--plex: true !default;
+
+@use 'sass:map';
+
+@use '@carbon/styles/scss/reset';
+
+@use '@carbon/ibm-products-styles/scss/components/InterstitialScreen/index' as *;
+
+$prefix: 'c4p';
+$block-class: #{$prefix}--interstitial-screen;
+
+:host([fullscreen]) {
+  @extend .#{$block-class}--full-screen;
+  .#{$block-class}--container {
+    @extend .#{$block-class}--container;
+  }
+}
+
+.#{$block-class}__body-container {
+  padding: 0;
+}

package/scss/components/interstitial-screen/story-styles.scss

@@ -0,0 +1,27 @@
+/**
+ * @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.
+ */
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+$interstitial-block-class: #{c4p}--interstitial-screen;
+$block-class: #{c4p}--interstitial-screen-view-module;
+
+.#{$block-class}--enableTag {
+  margin-block-start: $spacing-07;
+}
+
+.#{$block-class} {
+  margin-block: $spacing-07;
+}
+.#{$block-class}--heading {
+  @include type.type-style('heading-05');
+
+  margin-block-end: $spacing-07;
+}

package/scss/components/notification-panel/notification-panel.scss

@@ -29,7 +29,6 @@ $block-class-action-set: #{$prefix}--action-set;
 :host(#{$prefix}-notification-panel) {
   .c4p--notifications-panel__do-not-disturb-toggle {
     display: block;
-    margin-block-start: -$spacing-05;
   }
 }
 :host(#{$prefix}-notification-panel)

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

@@ -0,0 +1,41 @@
+/*
+* 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.
+*/
+
+$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-breadcrumbs;
+
+:host {
+  display: block;
+  inline-size: 100%;
+
+  // Suppress custom elements until styles are loaded
+  #{$carbon-prefix}-breadcrumb:not(:defined),
+  #{$carbon-prefix}-overflow-menu:not(:defined) {
+    display: none;
+  }
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  cds-breadcrumb-item {
+    flex: none;
+  }
+
+  [data-hidden]:not([data-fixed]) {
+    display: none;
+  }
+}

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

@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities/convert';
 @use '@carbon/grid';
@@ -77,6 +78,7 @@ $carbon-prefix: 'cds';
 
   .#{$prefix}--page-header__breadcrumb-wrapper {
     display: inline-flex;
+    inline-size: 100%;
   }
 
   .#{$prefix}--page-header__breadcrumb__actions {
@@ -282,6 +284,11 @@ $carbon-prefix: 'cds';
   }
 }
 
+:host(#{$prefix}-page-header-tabs) ::slotted([slot='scroller']) {
+  position: absolute;
+  inset-inline-end: 0;
+}
+
 :host(#{$prefix}-page-header-breadcrumb),
 :host(#{$prefix}-page-header-content),
 :host(#{$prefix}-page-header-tabs) {
@@ -297,3 +304,81 @@ $carbon-prefix: 'cds';
 :host(#{$prefix}-page-header-tabs) ::slotted(#{$carbon-prefix}-tabs) {
   --tabs-overflow-button-background: $layer-01;
 }
+
+@keyframes page-header-title-breadcrumb-animation {
+  0% {
+    opacity: 0;
+    transform: translateY($spacing-05);
+  }
+
+  5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes page-header-title-breadcrumb-animation-reduced-motion {
+  0% {
+    opacity: 0;
+  }
+
+  5% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+: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()
+  @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;
+    }
+  }
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__with-content
+) {
+  // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+  @supports (animation-timeline: scroll()) {
+    // Show by default should not have any animation, this means
+    // there was not a page header content element provided
+    animation-direction: alternate;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-name: page-header-title-breadcrumb-animation;
+    animation-timeline: scroll(block nearest);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+      transform: translateY(0);
+    }
+  }
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__by-default
+) {
+  opacity: 1;
+  transform: translateY(0);
+}

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

@@ -1,13 +1,14 @@
-/*
-* 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.
-*/
+//
+// 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/theme' as *;
+.truncated-text-stories__viewport {
+  @include type.type-style('body-01');
 
-// $story-prefix: 'truncated-text-stories__';
-#main-content {
-  padding: 12rem;
+  inline-size: 100%;
+  max-inline-size: 900px;
 }

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

@@ -79,25 +79,10 @@ $block-class: #{$prefix}--truncated-text;
 }
 
 .#{$block-class}_button-expand {
-  position: absolute;
-  background-color: $background;
-  inset-block-end: 0;
-  inset-inline-end: 0;
-
   &.#{$block-class}_button-layered {
     background-color: $layer;
   }
 
-  &::before {
-    position: absolute;
-    block-size: 100%;
-    color: $text-primary;
-    content: '...';
-    inline-size: 1em; // use em so truncation element scales with parent font size
-    inset-inline-start: -1em; // positions pseudo element before button without overlap across font sizes
-    pointer-events: none;
-  }
-
   // Gradient LTR
   &:dir(ltr)::before {
     @include gradient-bg(90deg, $background);

package/scss/components/user-avatar/user-avatar.scss

@@ -28,8 +28,11 @@ $carbon-prefix: 'cds';
 $block-class: #{$prefix}--user-avatar;
 
 :host(#{$prefix}-user-avatar) {
-  @extend .#{$block-class};
-  @extend .#{$block-class}__tooltip;
+  display: inline-block;
+
+  .#{$block-class} {
+    box-sizing: border-box;
+  }
 }
 
 :host(#{$prefix}-user-avatar) .#{$block-class}--xl {