@carbon/ibm-products 2.92.1 → 2.93.0

package/css/index-full-carbon.css

@@ -3536,6 +3536,35 @@ button.c4p--add-select__global-filter-toggle--open {
   padding: 0.125rem 1rem 0;
 }
 
+.c4p--coachmark__next.c4p--coachmark__next--floating span:has(> div > .c4p--coachmark__next--content-header--drag-icon) {
+  margin-inline-end: auto;
+}
+.c4p--coachmark__next .c4p--coachmark__next--content-header--is-dragging {
+  border-radius: 0;
+  box-shadow: 0 0 0 0.25rem var(--cds-icon-inverse, #ffffff);
+  outline: 0.125rem solid var(--cds-background-inverse, #393939);
+}
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header {
+  display: flex;
+  justify-content: flex-end;
+}
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header--drag-icon,
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header .cds--btn {
+  color: var(--cds-icon-inverse, #ffffff);
+}
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header--drag-icon .cds--btn__icon,
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header--drag-icon svg,
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header .cds--btn .cds--btn__icon,
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-header .cds--btn svg {
+  color: var(--cds-icon-inverse, #ffffff);
+  fill: var(--cds-icon-inverse, #ffffff);
+}
+.c4p--coachmark__next .c4p--coachmark__next--coachmark-content .c4p--coachmark__next--content-body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.125rem 1rem 0;
+}
+
 /* stylelint-disable carbon/layout-use */
 /* stylelint-disable carbon/motion-easing-use */
 /* stylelint-disable max-nesting-depth */
@@ -5044,8 +5073,10 @@ button.c4p--add-select__global-filter-toggle--open {
   flex: 1 1 100%;
 }
 .c4p--tearsheet .c4p--tearsheet__header-actions {
-  flex: 0 0 auto;
-  padding-inline-start: 1.5rem;
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 1rem;
+  inset-inline-end: 10rem;
 }
 .c4p--tearsheet .c4p--tearsheet__header-actions .cds--btn-set .cds--btn:not(:first-of-type) {
   margin-inline-start: 0.5rem;
@@ -5053,6 +5084,22 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--tearsheet .c4p--tearsheet__header--no-close-icon {
   display: none;
 }
+.c4p--tearsheet .c4p--tearsheet__close-button {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 1rem;
+}
+.c4p--tearsheet .c4p--tearsheet__decorator {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 3rem;
+}
+.c4p--tearsheet .c4p--tearsheet__decorator .cds--ai-label__button--sm,
+.c4p--tearsheet .c4p--tearsheet__decorator .cds--slug__button--sm {
+  margin: 0.5rem 1rem 0 0;
+}
 .c4p--tearsheet.c4p--tearsheet--wide .cds--modal-header__heading.c4p--tearsheet__heading {
   font-size: var(--cds-heading-04-font-size, 1.75rem);
   font-weight: var(--cds-heading-04-font-weight, 400);
@@ -8630,6 +8677,11 @@ button.c4p--add-select__global-filter-toggle--open {
   border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   /* stylelint-disable-next-line carbon/layout-use */
   inset-block-start: var(--c4p-page-header-header-top);
+  overflow-x: clip;
+}
+.c4p--page-header__next.c4p--page-header.c4p--page-header--disable-sticky-tab-bar {
+  position: static;
+  padding-block-start: 2.5rem;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar {
   position: sticky;
@@ -8639,6 +8691,12 @@ button.c4p--add-select__global-filter-toggle--open {
   /* stylelint-disable-next-line carbon/layout-use */
   inset-block-start: var(--c4p-page-header-breadcrumb-top);
 }
+.c4p--page-header__next.c4p--page-header.c4p--page-header--disable-sticky-tab-bar .c4p--page-header__breadcrumb-bar {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+}
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--subgrid,
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--css-grid {
   block-size: 100%;
@@ -8717,13 +8775,19 @@ button.c4p--add-select__global-filter-toggle--open {
   white-space: nowrap;
 }
 @media (max-width: 65.98rem) {
+  .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow .cds--breadcrumb-item[data-fixed=true] {
+    max-inline-size: 75vw;
+  }
   .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow .cds--breadcrumb-item[data-fixed=true] .cds--link {
     inline-size: 75%;
   }
 }
 @media (max-width: 41.98rem) {
+  .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow .cds--breadcrumb-item[data-fixed=true] {
+    max-inline-size: 35vw;
+  }
   .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow .cds--breadcrumb-item[data-fixed=true] .cds--link {
-    inline-size: 25%;
+    inline-size: 100%;
   }
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow-item {
@@ -8866,15 +8930,17 @@ button.c4p--add-select__global-filter-toggle--open {
   object-position: center;
 }
 .c4p--page-header__next .c4p--page-header__tab-bar {
-  position: relative;
-  display: flex;
-  align-items: center;
+  position: sticky;
+  z-index: 1;
   background-color: var(--cds-layer);
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-breadcrumb-top);
 }
-@media (min-width: 99rem) {
-  .c4p--page-header__next .c4p--page-header__tab-bar {
-    display: block;
-  }
+.c4p--page-header__next.c4p--page-header.c4p--page-header--disable-sticky-tab-bar .c4p--page-header__tab-bar {
+  position: static;
+  display: flex;
+  align-items: center;
+  display: block;
 }
 .c4p--page-header__next .c4p--page-header__tab-bar--tablist {
   display: flex;
@@ -8935,13 +9001,18 @@ button.c4p--add-select__global-filter-toggle--open {
   align-content: center;
   justify-content: flex-end;
   inline-size: 40%;
-  padding-inline-end: 0.5rem;
+  padding-inline-end: 1.5rem;
   text-align: end;
 }
 .c4p--page-header__next .c4p--page-header--tag-overflow-container .cds--tag {
   flex-shrink: 0;
   margin-inline-end: 0.5rem;
 }
+@media (max-width: 65.98rem) {
+  .c4p--page-header__next .c4p--page-header--tag-overflow-container {
+    padding-inline-end: 1.5rem;
+  }
+}
 .c4p--page-header__next .c4p--page-header--tag-overflow-popover__hidden {
   display: none;
 }
@@ -8965,15 +9036,10 @@ button.c4p--add-select__global-filter-toggle--open {
   display: inline-flex;
   align-items: center;
   margin-inline-start: 0.5rem;
-}
-@media (min-width: 99rem) {
-  .c4p--page-header__next .c4p--page-header--scroller-button-container {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    margin-inline-start: 0;
-    padding-inline-end: 0;
-  }
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  margin-inline-start: 0;
 }
 @keyframes page-header-title-breadcrumb-animation {
   0% {
@@ -10222,6 +10288,19 @@ button.c4p--add-select__global-filter-toggle--open {
     padding-inline: 1rem;
   }
 }
+.c4p--tearsheet__next__influencer:focus,
+.c4p--tearsheet__next__main-content:focus,
+.c4p--tearsheet__next__summary-content:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .c4p--tearsheet__next__influencer:focus,
+  .c4p--tearsheet__next__main-content:focus,
+  .c4p--tearsheet__next__summary-content:focus {
+    outline-style: dotted;
+  }
+}
 
 .c4p--tearsheet__next__main-content {
   position: relative;