@carbon/ibm-products-web-components 0.34.0 → 0.35.0

package/lib/index.d.ts

@@ -8,6 +8,15 @@
  */
 export { default as CDSSidePanel } from './components/side-panel/side-panel';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet';
+export { default as CDSTearsheetPreview } from './components/tearsheet-preview/tearsheet';
+export { default as CDSTearsheetBody } from './components/tearsheet-preview/tearsheet-body';
+export { default as CDSTearsheetFooter } from './components/tearsheet-preview/tearsheet-footer';
+export { default as CDSTearsheetHeader } from './components/tearsheet-preview/tearsheet-header';
+export { default as CDSTearsheetHeaderContent } from './components/tearsheet-preview/tearsheet-header-content';
+export { default as CDSTearsheetInfluencer } from './components/tearsheet-preview/tearsheet-influencer';
+export { default as CDSTearsheetNavigationBar } from './components/tearsheet-preview/tearsheet-navigation-bar';
+export { default as CDSTearsheetScroller } from './components/tearsheet-preview/tearsheet-scroller';
+export { default as CDSTearsheetSummaryContent } from './components/tearsheet-preview/tearsheet-summary-content';
 export { default as CDSFullPageError } from './components/full-page-error/full-page-error';
 export { default as CDSAboutModal } from './components/about-modal/about-modal';
 export { default as CDSUserAvatar } from './components/user-avatar/user-avatar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -52,14 +52,15 @@
     "test": "yarn playwright install --with-deps && vitest run",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
     "coverage": "vitest run --coverage",
+    "coverage:report": "open coverage/index.html",
     "telemetry-config": "ibmtelemetry-config generate --wc --id 8a79d901-a9c0-4672-94a4-fa8eea139832 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components"
   },
   "dependencies": {
     "@carbon-labs/wc-empty-state": "^0.13.0",
-    "@carbon/ibm-products-styles": "^2.81.0",
-    "@carbon/styles": "^1.100.0",
+    "@carbon/ibm-products-styles": "^2.82.0",
+    "@carbon/styles": "^1.101.0",
     "@carbon/utilities": "^0.16.0",
-    "@carbon/web-components": "2.48.0",
+    "@carbon/web-components": "2.49.0",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit-labs/signals": "^0.1.2",
     "@lit/context": "^1.1.5",
@@ -68,9 +69,9 @@
   "devDependencies": {
     "@aarsteinmedia/dotlottie-player": "^6.0.5",
     "@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
-    "@carbon/icon-helpers": "^10.72.0",
-    "@carbon/icons": "^11.75.0",
-    "@carbon/motion": "^11.41.0",
+    "@carbon/icon-helpers": "^10.73.0",
+    "@carbon/icons": "^11.76.0",
+    "@carbon/motion": "^11.42.0",
     "@figma/code-connect": "^1.4.0",
     "@ibm/telemetry-js-config-generator": "^2.1.0",
     "@mordech/vite-lit-loader": "^0.37.0",
@@ -112,5 +113,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "d5645922d967cd5c602f4c111bab8a6b5f633abe"
+  "gitHead": "b850469558c82e297e176a9ac502e9445b9b29c7"
 }

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

@@ -129,7 +129,7 @@ $block-notification-class: #{$prefix}--notifications-panel__notification;
 }
 
 :host(:hover),
-:host(:focus) {
+:host(:focus-visible) {
   background-color: $layer-accent-01;
   .#{$block-notification-class}__dismiss-single-button {
     opacity: 1;
@@ -140,6 +140,19 @@ $block-notification-class: #{$prefix}--notifications-panel__notification;
   }
 }
 
+:host(:focus-visible) {
+  border-color: $focus;
+  box-shadow:
+    inset 0 0 0 2px $focus,
+    inset 0 0 0 2px $background;
+  outline: 0;
+
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
 :host(.#{$block-notification-class}--next) {
   &::before {
     background-color: transparent;

package/scss/components/tearsheet-preview/_story-assets/_storybook-styles.scss

@@ -0,0 +1,87 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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/utilities/hide-at-breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/breakpoint' as *;
+
+$c4p-prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+#{$c4p-prefix}-tearsheet-influencer,
+div[slot='main-content'],
+#{$c4p-prefix}-tearsheet-summary-content {
+  padding-block: $spacing-07;
+}
+
+$block-class__next: #{$c4p-prefix}--tearsheet__next;
+@mixin hideAtLargeScreens() {
+  @include hide-at-lg;
+  @include hide-at-md;
+  @include hide-at-xlg;
+  @include hide-at-max;
+}
+
+.summaryPanelTrigger {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+.influencerPanelTrigger {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+#{$c4p-prefix}-preview-tearsheet:not([variant='narrow']) {
+  .summaryPanelTrigger,
+  .influencerPanelTrigger {
+    @include hideAtLargeScreens();
+  }
+}
+
+.summaryPanelHeading {
+  @include type.type-style('heading-03');
+}
+
+.stackButtons {
+  position: absolute;
+  z-index: 9999;
+  display: flex;
+  gap: $spacing-01;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  @include hide-at-sm;
+}
+
+.smallScreenButton {
+  position: absolute;
+  z-index: 9999;
+  display: flex;
+  gap: $spacing-01;
+  inset-block-start: 0;
+  inset-inline-start: $spacing-05;
+  @include hideAtLargeScreens();
+}
+//footer actions styles
+.default__action-buttons {
+  display: grid;
+  grid-auto-rows: minmax(auto, auto);
+  grid-template-columns: repeat(6, 1fr);
+
+  > #{$carbon-prefix}-button {
+    inline-size: 100%;
+    max-inline-size: none;
+
+    &:first-child {
+      grid-column: span 4;
+    }
+  }
+}

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

@@ -0,0 +1,190 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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/breakpoint' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use './tearsheet.scss' as *;
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+$block-class__next: #{$prefix}--tearsheet__next;
+$motion-duration: $duration-moderate-02;
+// Narrow variant styles
+:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  display: flex;
+  flex-direction: column;
+
+  .#{$block-class__next}__header-title {
+    @include type.type-style('heading-03');
+  }
+
+  .#{$block-class__next}__header-actions {
+    justify-content: flex-start;
+    margin-inline-end: 0;
+  }
+}
+
+// Hide header actions when collapsed in narrow variant
+:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  &:host-context(#{$c4p-prefix}-tearsheet-header[collapsed]) {
+    .#{$block-class__next}__header-actions {
+      display: none;
+    }
+  }
+  .#{$block-class__next}__title-start {
+    align-items: center;
+
+    ::slotted(*) {
+      block-size: $spacing-06;
+      inline-size: $spacing-06;
+    }
+  }
+}
+
+:host {
+  display: grid;
+  flex-basis: unset;
+  gap: $spacing-05;
+  grid-template-columns: minmax(auto, 40rem) minmax(
+      var(--tearsheet-header-title-grid-width, 0),
+      1fr
+    );
+
+  inline-size: calc(100% - var(--tearsheet-header-action-offset));
+
+  @include breakpoint-down(md) {
+    display: flex;
+    flex-direction: column;
+
+    .#{$block-class__next}__header-actions {
+      justify-content: flex-start;
+      margin-inline-end: 0;
+    }
+  }
+}
+.#{$block-class__next}__header-actions {
+  display: flex;
+  justify-content: flex-end;
+  order: 2; /* Visual order: appears on the right on desktop */
+  margin-block-start: -14px;
+
+  @include breakpoint-down(md) {
+    order: 0; /* Reset to DOM order on mobile (header-actions first) */
+  }
+}
+
+.#{$block-class__next}__header-content {
+  order: 1; /* Visual order: appears on the left on desktop */
+
+  @include breakpoint-down(md) {
+    order: 0; /* Reset to DOM order on mobile (header-content second) */
+  }
+}
+
+:host {
+  .#{$block-class__next}__header-actions,
+  .#{$block-class__next}__header-content
+    *:not(
+      .#{$block-class__next}__content__title-wrapper,
+      .#{$block-class__next}__header-label
+    ) {
+    opacity: 1;
+    transition:
+      all $motion-duration motion(entrance, expressive),
+      opacity $motion-duration motion(entrance, expressive);
+  }
+}
+
+// ──────────────────────────────────────────────────────────────
+// Collapsed Header State
+// ──────────────────────────────────────────────────────────────
+:host-context(#{$c4p-prefix}-tearsheet-header[collapsed]) {
+  // Collapse header actions except the main action button
+  .#{$block-class__next}__header-actions
+    > *:not(.#{$block-class__next}__content__header-actions) {
+    @include collapsed-element;
+  }
+
+  // Collapse all header content except title wrapper
+  .#{$block-class__next}__header-content
+    > *:not(.#{$block-class__next}__content__title-wrapper) {
+    @include collapsed-element;
+  }
+
+  // Collapse nested elements within non-title elements
+  .#{$block-class__next}__header-content
+    > *:not(.#{$block-class__next}__content__title-wrapper)
+    * {
+    @include collapsed-element;
+  }
+
+  // Header title styling when collapsed
+  .#{$block-class__next}__header-title {
+    @include type.type-style('label-02');
+
+    align-items: center;
+    margin-block-start: $spacing-02;
+    transition: all $motion-duration motion(entrance, expressive);
+
+    > span {
+      display: flex;
+      align-items: center;
+      block-size: $spacing-06;
+    }
+  }
+
+  // Header content alignment
+  .#{$block-class__next}__header-content {
+    align-self: center;
+    margin-block-end: 0;
+  }
+
+  // Hide header actions on small screens when collapsed
+  @include breakpoint-down(md) {
+    .#{$block-class__next}__header-actions {
+      display: none;
+    }
+  }
+
+  // Normalize visible elements
+  .#{$block-class__next}__header-content,
+  .#{$block-class__next}__content__title-wrapper,
+  .#{$block-class__next}__header-actions,
+  .#{$block-class__next}__header-title {
+    margin-block: 0;
+    transition: margin-block $motion-duration ease;
+  }
+  // Header actions adjustment
+  .#{$block-class__next}__header-actions {
+    margin-block-start: -$spacing-01;
+  }
+  // Style for title-start slot content (like icons)
+  .#{$block-class__next}__title-start {
+    display: inline-flex;
+    align-items: center;
+
+    ::slotted(*) {
+      block-size: $spacing-05;
+      inline-size: $spacing-05;
+    }
+  }
+}
+.#{$block-class__next}__title-start {
+  @media screen and (prefers-reduced-motion: reduce) {
+    ::slotted(*) {
+      transition: none;
+    }
+  }
+
+  ::slotted(*) {
+    transition: all $motion-duration motion(entrance, expressive);
+  }
+}

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

@@ -0,0 +1,146 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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/breakpoint' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use './tearsheet.scss' as *;
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+$block-class__next: #{$prefix}--tearsheet__next;
+$motion-duration: $duration-moderate-02;
+// Narrow variant styles
+:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  .#{$block-class__next}__header {
+    padding-inline: $spacing-05;
+  }
+}
+
+:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow'][collapsed]) {
+  .#{$block-class__next}__header-actions {
+    display: none;
+  }
+}
+
+:host {
+  position: relative;
+  .#{$block-class__next}__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    border-block-end: 1px solid $border-subtle-01;
+    margin-block: 0;
+    max-block-size: 50vh;
+    padding-block-end: 0;
+    padding-block-start: $spacing-06;
+    padding-inline: $spacing-07;
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
+  }
+
+  ::slotted(*:not([slot='header-content'])) {
+    flex-basis: 100%;
+    margin-block-end: $spacing-06;
+  }
+
+  ::slotted([slot='header-content']) {
+    inline-size: calc(100% - var(--tearsheet-header-action-offset));
+  }
+}
+
+:host ::slotted([slot='header-content']),
+:host ::slotted([slot='navigation-bar']) {
+  margin-block-end: 0;
+}
+
+.#{$block-class__next}__header--no-close-icon {
+  display: none;
+}
+
+// ──────────────────────────────────────────────────────────────
+// Header (default vs collapsed)
+// ──────────────────────────────────────────────────────────────
+:host {
+  /* Animate all slotted children by default */
+  @media screen and (prefers-reduced-motion: reduce) {
+    ::slotted(*) {
+      overflow: hidden;
+      max-block-size: 50vh;
+      opacity: 1;
+      transition: none;
+    }
+  }
+
+  ::slotted(*) {
+    overflow: hidden;
+    max-block-size: 50vh;
+    opacity: 1;
+    transition:
+      max-block-size $motion-duration motion(entrance, expressive),
+      opacity $motion-duration motion(entrance, expressive),
+      margin $motion-duration motion(entrance, expressive),
+      padding $motion-duration motion(entrance, expressive);
+  }
+
+  /* Exclusions */
+  ::slotted([slot='navigation-bar']),
+  ::slotted([slot='header-content']),
+  ::slotted(.excludeFromCollapse) {
+    overflow: visible;
+    max-block-size: none;
+    opacity: 1;
+    transition: none;
+  }
+}
+
+// ──────────────────────────────────────────────────────────────
+// Collapsed Header State
+// ──────────────────────────────────────────────────────────────
+:host([collapsed]) {
+  .#{$block-class__next}__header {
+    padding-block-start: $spacing-04;
+    transition: padding $motion-duration motion(entrance, expressive);
+  }
+
+  // Collapse everything except core elements (navigation-bar, header-content, excludeFromCollapse)
+  ::slotted(
+    *:not(
+        [slot='navigation-bar'],
+        [slot='header-content'],
+        .excludeFromCollapse,
+        [slot='decorator']
+      )
+  ) {
+    @include collapsed-element;
+
+    display: none;
+  }
+
+  ::slotted([slot='header-content']) {
+    min-block-size: $spacing-08;
+    padding-block-end: $spacing-04;
+  }
+
+  // Divider line above navigation bar when collapsed
+  ::slotted([slot='navigation-bar'])::before {
+    position: absolute;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.12);
+    block-size: 1px;
+    content: '';
+    inline-size: 100vw;
+    inset-block-start: -$spacing-02;
+    inset-inline-start: 50%;
+    pointer-events: none;
+    transform: translateX(-50%);
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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/ibm-products-styles/scss/config';
+@use '@carbon/styles/scss/spacing' as *;
+@use './tearsheet';
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+$block-class__next: #{$prefix}--tearsheet__next;
+
+:host {
+  @extend .#{$block-class__next}__navigation-bar;
+}
+
+:host ::slotted([slot='scroller']) {
+  @extend .#{$block-class__next}__scroller-container;
+}
+
+:host ::slotted(#{$carbon-prefix}-tabs) {
+  margin-inline-start: -$spacing-05;
+}