@carbon/ibm-products-web-components 0.44.0 → 0.45.0

package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts

@@ -93,16 +93,18 @@ export declare const clearFocusableContainers: (uniqueId?: string) => void;
  *
  * @param wrapper - Optional wrapper element to attach the keydown listener to.
  *                  If not provided, defaults to document for backward compatibility.
- *                  Using a specific wrapper can improve performance and scope the listener.
  * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.
  *                   If provided, only containers registered with this uniqueId are included.
- *                   If not provided, uses the default key for backward compatibility.
+ * @param getFirstFocusable - Optional resolver called lazily on each keydown (and for initial
+ *                            focus) to determine the first element. Using a function rather than
+ *                            a value avoids a stale reference if header-action buttons are added
+ *                            or removed while the tearsheet is open.
+ *                            Falls back to the first element across registered containers.
  *
  * @returns An object with a `cleanup` method that removes event listeners.
- *          Call this method when the component is closing or unmounting.
  *
  * @example
- * // In a parent component when opening
+ *  * // In a parent component when opening
  * protected updated(changedProps) {
  *   if (changedProps.has('open') && this.open) {
  *     // Update signal so children can register
@@ -125,8 +127,13 @@ export declare const clearFocusableContainers: (uniqueId?: string) => void;
  *   this._trapFocusAPI?.cleanup();
  *   clearFocusableContainers(this.uniqueId);
  * }
+ * this._trapFocusAPI = trapFocus(
+ *   this as HTMLElement,
+ *   this.uniqueId,
+ *   () => this._getFirstFocusable()
+ * );
  */
-export declare const trapFocus: (wrapper?: HTMLElement, uniqueId?: string) => {
+export declare const trapFocus: (wrapper?: HTMLElement, uniqueId?: string, getFirstFocusable?: (() => HTMLElement | null) | null) => {
     cleanup: () => void;
 };
 //# sourceMappingURL=manageFocusTrap.d.ts.map

package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,2BAA2B,GACtC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAiBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,6BAA6B,GACxC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAalB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,SAMzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,SAAS,GAAI,UAAU,WAAW,EAAE,WAAW,MAAM;;CA8JjE,CAAC"}
+{"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,2BAA2B,GACtC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAiBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,6BAA6B,GACxC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAalB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,SAMzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,WAAW,EACrB,WAAW,MAAM,EACjB,oBAAoB,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI;;CA4KtD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@carbon-labs/wc-empty-state": "^0.22.0",
     "@carbon-labs/wc-resizer": "^0.3.0",
-    "@carbon/ibm-products-styles": "^2.91.0",
+    "@carbon/ibm-products-styles": "^2.92.0",
     "@carbon/layout": "^11.54.0",
     "@carbon/styles": "^1.110.1",
     "@carbon/utilities": "^0.21.0",
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@aarsteinmedia/dotlottie-player": "^6.0.5",
     "@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
-    "@carbon/ibm-products-utilities": "1.4.0",
+    "@carbon/ibm-products-utilities": "1.5.0",
     "@carbon/icon-helpers": "^10.77.0",
     "@carbon/icons": "^11.83.0",
     "@carbon/motion": "^11.47.0",
@@ -109,5 +109,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "ac1586f56880d74a163c73b60d82895427dea2ce"
+  "gitHead": "452f9b6ddfcc5e76fc88cc005bfc5455944872cb"
 }

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

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/layout/scss/convert';
 @use './tearsheet.scss' as *;
 
 $prefix: config.$pkg-prefix;
@@ -53,6 +54,9 @@ $motion-duration: $duration-moderate-02;
 }
 
 :host {
+  // Grid hosts header-content (col 1) and header-actions (col 2).
+  // Decorator and close button are absolutely positioned top-right,
+  // placed early in DOM order for correct keyboard tab sequence.
   display: grid;
   flex-basis: unset;
   gap: $spacing-05;
@@ -61,7 +65,7 @@ $motion-duration: $duration-moderate-02;
       1fr
     );
 
-  inline-size: calc(100% - var(--tearsheet-header-action-offset));
+  inline-size: 100%; // full width — close/decorator are abs-positioned, no offset needed
 
   @include breakpoint-down(md) {
     display: flex;
@@ -73,6 +77,39 @@ $motion-duration: $duration-moderate-02;
     }
   }
 }
+
+// ── Decorator (AI label) ─────────────────────────────────────────
+// DOM position: 2nd (after header-actions, before close, before header-content)
+// Visual position: absolute top-right (matches React TearsheetNext)
+.#{$block-class__next}__decorator {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: convert.to-rem(10px);
+  inset-inline-end: $spacing-09;
+  // Transition on base state so it animates in both directions (expand + collapse)
+  transition: inset-block-start $motion-duration motion(entrance, expressive);
+
+  // When header is collapsed, shift slightly down — matches React
+  :host-context(#{$c4p-prefix}-tearsheet-header[collapsed]) & {
+    inset-block-start: $spacing-03;
+  }
+}
+
+// ── Close button ─────────────────────────────────────────────────
+// DOM position: 3rd (after decorator, before header-content)
+// Visual position: absolute top-right corner — stays absolute on ALL screen sizes
+.#{$block-class__next}__close-button {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  // Animate size change (lg → md on collapse) — matches React
+  .#{$carbon-prefix}--modal-close {
+    transition: all $motion-duration ease;
+  }
+}
+
 .#{$block-class__next}__header-actions {
   display: flex;
   justify-content: flex-end;
@@ -134,6 +171,10 @@ $motion-duration: $duration-moderate-02;
     @include type.type-style('label-02');
 
     align-items: center;
+    // Fixed block-size keeps the title row at the same height as the close button
+    block-size: $spacing-08;
+    // Gap between title-start icon and title text when collapsed
+    gap: $spacing-03;
     margin-block-start: $spacing-02;
     transition: all $motion-duration motion(entrance, expressive);
 
@@ -151,24 +192,29 @@ $motion-duration: $duration-moderate-02;
   }
 
   // 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;
+
+  @include breakpoint-down(md) {
+    .#{$block-class__next}__header-actions {
+      display: none;
+    }
+  }
+
+  @include breakpoint(md) {
+    .#{$block-class__next}__header-actions {
+      display: flex;
+      align-items: center;
+      margin-block: 0;
+      transition: margin-block $motion-duration ease;
+    }
   }
+  // Header actions adjustment — removed negative offset that caused misalignment
   // Style for title-start slot content (like icons)
   .#{$block-class__next}__title-start {
     display: inline-flex;

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

@@ -122,7 +122,8 @@ $motion-duration: $duration-moderate-02;
 // ──────────────────────────────────────────────────────────────
 :host([collapsed]) {
   .#{$block-class__next}__header {
-    padding-block-start: $spacing-04;
+    // Collapsed: remove top padding (was $spacing-04)
+    padding-block-start: 0;
     transition: padding $motion-duration motion(entrance, expressive);
   }
 
@@ -141,8 +142,8 @@ $motion-duration: $duration-moderate-02;
   }
 
   ::slotted([slot='header-content']) {
+    // Remove bottom padding when collapsed (was $spacing-04)
     min-block-size: $spacing-08;
-    padding-block-end: $spacing-04;
   }
 
   // Divider line above navigation bar when collapsed
@@ -153,7 +154,7 @@ $motion-duration: $duration-moderate-02;
     block-size: 1px;
     content: '';
     inline-size: 100vw;
-    inset-block-start: -$spacing-02;
+    inset-block-start: 0;
     inset-inline-start: 50%;
     pointer-events: none;
     transform: translateX(-50%);

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

@@ -194,8 +194,24 @@ $motion-duration: $duration-moderate-02;
   }
 }
 
+// ──────────────────────────────────────────────────────────────
 // Narrow variant styles
+// ──────────────────────────────────────────────────────────────
+// ── Narrow container sizing ───────────────────────────────────
+// Carbon's dialog defaults to full-width on small screens and ~480 px on
+// larger ones, but its breakpoint (~672 px) is too wide for a narrow
+// tearsheet.  Pin it to exactly 480 px; below 480 px fill the viewport.
 :host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  ::part(dialog) {
+    inline-size: 480px;
+    max-inline-size: 480px;
+
+    @media (width <= 480px) {
+      inline-size: 100%;
+      max-inline-size: 100%;
+    }
+  }
+
   .#{$block-class__next}__header {
     padding-inline: $spacing-05;
   }

package/telemetry.yml

@@ -208,6 +208,7 @@ collect:
         - container-class-name
         - onc4p-preview-tearsheet-beingclosed
         - onc4p-preview-tearsheet-closed
+        - onc4p-preview-tearsheet-collapse-change
         - selectors-floating-menus
         - summary-content-width
         - variant
@@ -235,7 +236,7 @@ collect:
         - width
         # c4p-tearsheet-header
         - disable-header-collapse
-        - onc4p-tearsheet-header-close-button-clicked
+        - onc4p-tearsheet-header-collapse-change
         # c4p-tearsheet-influencer
         - influencer-panel-aria-label
         - influencer-panel-open