@carbon/ibm-products 2.43.2-canary.293 → 2.43.2-canary.297

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/css/index-full-carbon.css +10 -7
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +10 -7
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +10 -7
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +10 -7
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/SidePanel/SidePanel.d.ts +5 -0
  18. package/es/components/SidePanel/SidePanel.js +30 -16
  19. package/es/components/Tearsheet/TearsheetShell.js +12 -6
  20. package/lib/components/SidePanel/SidePanel.d.ts +5 -0
  21. package/lib/components/SidePanel/SidePanel.js +30 -16
  22. package/lib/components/Tearsheet/TearsheetShell.js +12 -6
  23. package/package.json +3 -3
  24. package/scss/components/SidePanel/_side-panel.scss +12 -6
package/css/index-full-carbon.css CHANGED
@@ -3092,7 +3092,7 @@ p.c4p--about-modal__copyright-text:first-child {
3092
3092
  left: 0;
3093
3093
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3094
3094
  }
3095
- .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug {
3095
+ .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label {
3096
3096
  border-color: transparent;
3097
3097
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
3098
3098
  }
@@ -3157,10 +3157,10 @@ p.c4p--about-modal__copyright-text:first-child {
3157
3157
  .c4p--side-panel .c4p--side-panel__header:not(.c4p--side-panel__header--has-title)::before {
3158
3158
  background-color: transparent;
3159
3159
  }
3160
- .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug {
3160
+ .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label {
3161
3161
  --c4p--side-panel--title-padding-right: 4rem;
3162
3162
  }
3163
- .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug {
3163
+ .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label {
3164
3164
  --c4p--side-panel--title-padding-right: 5rem;
3165
3165
  }
3166
3166
  .c4p--side-panel .c4p--side-panel__animated-scroll-wrapper {
@@ -3257,7 +3257,7 @@ p.c4p--about-modal__copyright-text:first-child {
3257
3257
  .c4p--side-panel .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
3258
3258
  padding-top: 0.5rem;
3259
3259
  }
3260
- .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
3260
+ .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls {
3261
3261
  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
3262
3262
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
3263
3263
  }
@@ -3305,7 +3305,8 @@ p.c4p--about-modal__copyright-text:first-child {
3305
3305
  width: 2.5rem;
3306
3306
  height: 2.5rem;
3307
3307
  }
3308
- .c4p--side-panel .c4p--side-panel__slug-and-close {
3308
+ .c4p--side-panel .c4p--side-panel__slug-and-close,
3309
+ .c4p--side-panel .c4p--side-panel__ai-label-and-close {
3309
3310
  position: absolute;
3310
3311
  z-index: 10; /* must be higher than title container border bottom */
3311
3312
  top: 0;
@@ -3314,7 +3315,8 @@ p.c4p--about-modal__copyright-text:first-child {
3314
3315
  /* stylelint-disable-next-line max-nesting-depth */
3315
3316
  }
3316
3317
  @media (prefers-reduced-motion) {
3317
- .c4p--side-panel .c4p--side-panel__slug-and-close {
3318
+ .c4p--side-panel .c4p--side-panel__slug-and-close,
3319
+ .c4p--side-panel .c4p--side-panel__ai-label-and-close {
3318
3320
  position: absolute;
3319
3321
  }
3320
3322
  }
@@ -3398,7 +3400,8 @@ p.c4p--about-modal__copyright-text:first-child {
3398
3400
  inset: 0;
3399
3401
  }
3400
3402
 
3401
- .c4p--side-panel--has-slug + .c4p--side-panel__overlay {
3403
+ .c4p--side-panel--has-slug + .c4p--side-panel__overlay,
3404
+ .c4p--side-panel--has-ai-label + .c4p--side-panel__overlay {
3402
3405
  /* stylelint-disable-next-line carbon/theme-token-use */
3403
3406
  background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
3404
3407
  }