@carbon/ibm-products-web-components 0.41.1 → 0.42.0

package/scss/components/side-panel/side-panel.scss

@@ -16,6 +16,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/config' as carbon-config;
 
 $prefix: 'c4p';
@@ -333,4 +334,22 @@ $block-class-action-set: #{$prefix}--action-set;
   .#{$block-class}__close-button {
     inline-size: 2rem;
   }
+
+  .#{$block-class}__resizer {
+    position: absolute;
+    z-index: z('modal');
+    inset-block-end: 0;
+    inset-block-start: 0;
+    --resizer-thickness: 4px;
+    --resizer-grab-thickness: 4px;
+    --resizer-grab-color: transparent;
+  }
+
+  .#{$block-class}[placement='right'] .#{$block-class}__resizer {
+    inset-inline-start: 0;
+  }
+
+  .#{$block-class}[placement='left'] .#{$block-class}__resizer {
+    inset-inline-end: 0;
+  }
 }

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

@@ -15,6 +15,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
 
 @use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'
   as *;
@@ -73,6 +74,10 @@ $motion-duration: $duration-moderate-02;
   @extend .#{$block-class__next}__summary-content;
 }
 
+:host ::slotted([slot='summary-content']:focus) {
+  @include focus-outline.focus-outline('outline');
+}
+
 :host ::slotted([slot='summary-content'][is-flush]) {
   padding-inline: 0;
 }

package/telemetry.yml

@@ -191,6 +191,8 @@ collect:
         - close-on-activation
         - enter-delay-ms
         - leave-delay-ms
+        # c4p-page-header-tabs
+        - disable-sticky-tab-bar
         # c4p-page-header-tags-set
         - tags-data
         # c4p-preview-tearsheet
@@ -213,6 +215,7 @@ collect:
         - onc4p-side-panel-closed
         - onc4p-side-panel-navigate-back
         - placement
+        - resizable
         - selector-page-content
         - slide-in
         # c4p-tearsheet
@@ -226,12 +229,14 @@ collect:
         - disable-header-collapse
         - onc4p-tearsheet-header-close-button-clicked
         # c4p-tearsheet-influencer
+        - influencer-panel-aria-label
         - influencer-panel-open
         - oncds-tearsheet-influencer-closed
         # c4p-tearsheet-stack
         - stack-step-size
         # c4p-tearsheet-summary-content
         - oncds-tearsheet-summary-closed
+        - summary-panel-aria-label
         - summary-panel-open
         # c4p-user-avatar
         - background-color