@carbon/ibm-products 2.88.0 → 2.89.0

package/css/index-full-carbon.css

@@ -2558,6 +2558,26 @@ p.c4p--about-modal__copyright-text:first-child {
   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 */
@@ -8200,6 +8220,10 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--page-header__next .c4p--page-header__content__page-actions .cds--menu-button__trigger:not(.cds--btn--ghost) {
   min-inline-size: 0;
 }
+.c4p--page-header__next .cds--menu.cds--menu--open {
+  max-block-size: calc(100vh - 1rem);
+  overflow-y: auto;
+}
 .c4p--page-header__next .c4p--page-header__content__subtitle {
   font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
   font-weight: var(--cds-productive-heading-03-font-weight, 400);
@@ -8229,14 +8253,19 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-layer);
 }
 .c4p--page-header__next .c4p--page-header__tab-bar--tablist {
-  display: grid;
-  gap: 2rem;
-  grid-template-columns: auto minmax(0, 1fr);
+  display: flex;
+  align-items: center;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar--tablist > .cds--tabs {
+  display: inline-flex;
+  margin-inline-end: 0.5rem;
 }
 .c4p--page-header__next .c4p--page-header__tab-bar--tablist .c4p--page-header__tags {
-  display: flex;
-  align-self: center;
+  display: inline-flex;
+  align-items: center;
   justify-content: flex-end;
+  margin-inline-start: auto;
+  min-inline-size: 0;
 }
 .c4p--page-header__next .c4p--page-header__tab-bar--tablist.c4p--page-header__tab-bar--with-scroller .c4p--page-header__tags {
   display: flex;
@@ -8278,30 +8307,24 @@ button.c4p--add-select__global-filter-toggle--open {
   padding: 1rem;
 }
 .c4p--page-header__next .c4p--page-header--tag-overflow-container {
+  display: inline-flex;
   align-content: center;
+  justify-content: flex-end;
+  inline-size: 40%;
   text-align: end;
-  transform: translateX(calc(-1 * 1.5rem));
 }
-@media (min-width: 42rem) {
-  .c4p--page-header__next .c4p--page-header--tag-overflow-container {
-    transform: translateX(calc(-1 * 0.5rem));
-  }
+.c4p--page-header__next .c4p--page-header--tag-overflow-container .cds--tag {
+  flex-shrink: 0;
+  margin-inline-end: 0.5rem;
 }
-@media (min-width: 66rem) {
+@media (max-width: 41.98rem) {
   .c4p--page-header__next .c4p--page-header--tag-overflow-container {
-    transform: translateX(2.5rem);
+    inline-size: auto;
   }
 }
-.c4p--page-header__next .c4p--page-header--tag-overflow-container .cds--tag {
-  margin-inline-end: 0.5rem;
-}
 .c4p--page-header__next .c4p--page-header--tag-overflow-popover__hidden {
   visibility: hidden;
 }
-.c4p--page-header__next .c4p--page-header--tag-overflow-container__has-no-hidden-items {
-  /* stylelint-disable-next-line carbon/layout-use */
-  transform: translateX(2rem);
-}
 .c4p--page-header__next .c4p--page-header__tag-item {
   flex-shrink: 0;
 }
@@ -8318,9 +8341,9 @@ button.c4p--add-select__global-filter-toggle--open {
   transform: rotate(-180deg);
 }
 .c4p--page-header__next .c4p--page-header--scroller-button-container {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 0.125rem;
+  position: relative;
+  margin-inline-start: 0.5rem;
+  padding-inline-end: 1rem;
 }
 @keyframes page-header-title-breadcrumb-animation {
   0% {
@@ -9201,7 +9224,8 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
-.cds--modal-close-button) {
+.cds--modal-close-button,
+.c4p--tearsheet__next__close-button) {
   margin-block-end: 1.5rem;
 }
 @media (max-width: 41.98rem) {
@@ -9225,14 +9249,25 @@ button.c4p--add-select__global-filter-toggle--open {
     flex-direction: column;
   }
 }
+@media (min-width: 42rem) {
+  .c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions {
+    order: 2;
+  }
+  .c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content {
+    order: 1;
+  }
+}
 .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
+.c4p--tearsheet__next__close-button,
+.c4p--tearsheet__next__decorator,
 .excludeFromCollapse) {
   overflow: hidden;
   max-block-size: 50vh;
   opacity: 1;
   transition: max-block-size 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1), margin 240ms cubic-bezier(0, 0, 0.3, 1), padding 240ms cubic-bezier(0, 0, 0.3, 1);
+  visibility: hidden;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,
 .c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content *:not(.c4p--tearsheet__next__content__title-wrapper,
@@ -9247,12 +9282,16 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
+.c4p--tearsheet__next__close-button,
+.c4p--tearsheet__next__decorator,
 .excludeFromCollapse),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions > *:not(.c4p--tearsheet__next__content__header-actions),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
+.c4p--tearsheet__next__close-button,
+.c4p--tearsheet__next__decorator,
 .excludeFromCollapse) *,
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) * {
   overflow: hidden;
@@ -9262,6 +9301,7 @@ button.c4p--add-select__global-filter-toggle--open {
   opacity: 0;
   pointer-events: none;
   transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+  visibility: hidden;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
   font-size: var(--cds-label-02-font-size, 0.875rem);
@@ -9308,14 +9348,13 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar::before {
   position: absolute;
   z-index: 1;
-  background: rgba(0, 0, 0, 0.12);
+  background: var(--cds-border-subtle-01, #c6c6c6);
   block-size: 1px;
   content: "";
-  inline-size: 100vw;
-  inset-block-start: -0.25rem;
-  inset-inline-start: 50%;
+  inline-size: calc(100% + 5rem);
+  inset-block-start: 0;
+  inset-inline-start: -2rem;
   pointer-events: none;
-  transform: translateX(-50%);
 }
 .c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible {
   --overlay-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
@@ -9389,6 +9428,12 @@ button.c4p--add-select__global-filter-toggle--open {
   display: none;
 }
 
+.c4p--tearsheet__next__decorator {
+  position: absolute;
+  inset-block-start: 0.625rem;
+  inset-inline-end: 3rem;
+}
+
 .c4p--tearsheet__next__navigation-bar {
   position: relative;
   display: flex;
@@ -9404,7 +9449,7 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--tearsheet__next__scroller-container {
   position: absolute;
-  inset-block-end: 0.125rem;
+  inset-block-end: 0;
   inset-inline-end: -2.5rem;
 }
 @media (max-width: 41.98rem) {
@@ -18799,7 +18844,9 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
 .c4p--condition-builder__item-option__option {
   display: grid;
   cursor: pointer;
+  inline-size: 100%;
   min-block-size: 2rem;
+  min-inline-size: 0;
   padding-inline: 1rem;
 }
 
@@ -18826,6 +18873,8 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   display: flex;
   align-items: center;
   block-size: 100%;
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .c4p--condition-builder__item-option__option-label {
@@ -18833,6 +18882,17 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   overflow: hidden;
   align-items: center;
   column-gap: 0.5rem;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.c4p--condition-builder__item-option__option-label > svg {
+  flex-shrink: 0;
+}
+
+.c4p--condition-builder__item-option__option-label-text {
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-inline-size: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -25986,7 +26046,7 @@ a.cds--overflow-menu-options__btn::before {
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
-  display: inline-flex;
+  display: inline;
   color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
   outline: none;
   text-decoration: none;
@@ -26094,8 +26154,20 @@ a.cds--overflow-menu-options__btn::before {
 
 .cds--link__icon {
   display: inline-flex;
-  align-self: center;
+  align-items: center;
+  block-size: 1lh;
+  line-height: inherit;
   margin-inline-start: 0.5rem;
+  vertical-align: text-bottom;
+}
+
+.cds--link--lg .cds--link__icon > svg {
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
+}
+
+.cds--link--lg .cds--link__icon {
+  block-size: 1.25rem;
 }
 
 .cds--chat-btn {
@@ -30239,6 +30311,7 @@ fieldset[disabled] .cds--form__helper-text {
   position: sticky;
   z-index: 1;
   display: flex;
+  box-sizing: border-box;
   align-items: center;
   inset-block-start: 0;
   padding-inline: var(--cds-layout-density-padding-inline-local);
@@ -30299,7 +30372,7 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
   line-height: var(--cds-heading-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer-background);
   block-size: var(--cds-layout-size-height-local);
   border-block-end: 1px solid var(--cds-border-subtle);
   color: var(--cds-text-primary, #161616);
@@ -39641,7 +39714,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--list--unordered.cds--list--nested > .cds--list__item::before {
-  content: "▪";
+  content: "▪︎";
   inset-inline-start: calc(-1 * 0.75rem);
 }