@carbon/ibm-products 2.8.0 → 2.9.0

package/css/index.css

@@ -368,31 +368,31 @@
   display: block;
 }
 
-.cds--popover--tab-tip > .cds--popover .cds--popover-caret {
+.cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
   display: none;
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-content {
+.cds--popover--bottom > .cds--popover > .cds--popover-content {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-left > .cds--popover .cds--popover-content {
+.cds--popover--bottom-left > .cds--popover > .cds--popover-content {
   bottom: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-right > .cds--popover .cds--popover-content {
+.cds--popover--bottom-right > .cds--popover > .cds--popover-content {
   right: 0;
   bottom: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-content::before,
-.cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
-.cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
+.cds--popover--bottom > .cds--popover > .cds--popover-content::before,
+.cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
+.cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
   top: 0;
   right: 0;
   left: 0;
@@ -400,9 +400,9 @@
   transform: translateY(-100%);
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-caret,
-.cds--popover--bottom-left > .cds--popover .cds--popover-caret,
-.cds--popover--bottom-right > .cds--popover .cds--popover-caret {
+.cds--popover--bottom > .cds--popover > .cds--popover-caret,
+.cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
+.cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
   bottom: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -411,27 +411,27 @@
   transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
 
-.cds--popover--top > .cds--popover .cds--popover-content {
+.cds--popover--top > .cds--popover > .cds--popover-content {
   top: 0;
   left: 50%;
   transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-left > .cds--popover .cds--popover-content {
+.cds--popover--top-left > .cds--popover > .cds--popover-content {
   top: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-right > .cds--popover .cds--popover-content {
+.cds--popover--top-right > .cds--popover > .cds--popover-content {
   top: 0;
   right: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top > .cds--popover .cds--popover-content::before,
-.cds--popover--top-left > .cds--popover .cds--popover-content::before,
-.cds--popover--top-right > .cds--popover .cds--popover-content::before {
+.cds--popover--top > .cds--popover > .cds--popover-content::before,
+.cds--popover--top-left > .cds--popover > .cds--popover-content::before,
+.cds--popover--top-right > .cds--popover > .cds--popover-content::before {
   right: 0;
   bottom: 0;
   left: 0;
@@ -439,9 +439,9 @@
   transform: translateY(100%);
 }
 
-.cds--popover--top > .cds--popover .cds--popover-caret,
-.cds--popover--top-left > .cds--popover .cds--popover-caret,
-.cds--popover--top-right > .cds--popover .cds--popover-caret {
+.cds--popover--top > .cds--popover > .cds--popover-caret,
+.cds--popover--top-left > .cds--popover > .cds--popover-caret,
+.cds--popover--top-right > .cds--popover > .cds--popover-caret {
   top: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -450,27 +450,27 @@
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--right > .cds--popover .cds--popover-content {
+.cds--popover--right > .cds--popover > .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), -50%);
 }
 
-.cds--popover--right-top > .cds--popover .cds--popover-content {
+.cds--popover--right-top > .cds--popover > .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
 }
 
-.cds--popover--right-bottom > .cds--popover .cds--popover-content {
+.cds--popover--right-bottom > .cds--popover > .cds--popover-content {
   bottom: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--right > .cds--popover .cds--popover-content::before,
-.cds--popover--right-top > .cds--popover .cds--popover-content::before,
-.cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
+.cds--popover--right > .cds--popover > .cds--popover-content::before,
+.cds--popover--right-top > .cds--popover > .cds--popover-content::before,
+.cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
   top: 0;
   bottom: 0;
   left: 0;
@@ -478,9 +478,9 @@
   transform: translateX(-100%);
 }
 
-.cds--popover--right > .cds--popover .cds--popover-caret,
-.cds--popover--right-top > .cds--popover .cds--popover-caret,
-.cds--popover--right-bottom > .cds--popover .cds--popover-caret {
+.cds--popover--right > .cds--popover > .cds--popover-caret,
+.cds--popover--right-top > .cds--popover > .cds--popover-caret,
+.cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
   top: 50%;
   left: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -489,27 +489,27 @@
   transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
 
-.cds--popover--left > .cds--popover .cds--popover-content {
+.cds--popover--left > .cds--popover > .cds--popover-content {
   top: 50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
 }
 
-.cds--popover--left-top > .cds--popover .cds--popover-content {
+.cds--popover--left-top > .cds--popover > .cds--popover-content {
   top: -50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--left-bottom > .cds--popover .cds--popover-content {
+.cds--popover--left-bottom > .cds--popover > .cds--popover-content {
   right: 100%;
   bottom: -50%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
-.cds--popover--left > .cds--popover .cds--popover-content::before,
-.cds--popover--left-top > .cds--popover .cds--popover-content::before,
-.cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
+.cds--popover--left > .cds--popover > .cds--popover-content::before,
+.cds--popover--left-top > .cds--popover > .cds--popover-content::before,
+.cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
   top: 0;
   right: 0;
   bottom: 0;
@@ -517,9 +517,9 @@
   transform: translateX(100%);
 }
 
-.cds--popover--left > .cds--popover .cds--popover-caret,
-.cds--popover--left-top > .cds--popover .cds--popover-caret,
-.cds--popover--left-bottom > .cds--popover .cds--popover-caret {
+.cds--popover--left > .cds--popover > .cds--popover-caret,
+.cds--popover--left-top > .cds--popover > .cds--popover-caret,
+.cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
   top: 50%;
   right: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -528,7 +528,7 @@
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
-.cds--popover--tab-tip > .cds--popover .cds--popover-content {
+.cds--popover--tab-tip > .cds--popover > .cds--popover-content {
   border-radius: 0;
 }
 
@@ -847,14 +847,14 @@
   padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
-  background-color: var(--cds-layer-hover);
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
 }
 .cds--btn--ghost:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
   box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
 .cds--btn--ghost:active {
-  background-color: var(--cds-layer-active);
+  background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
 }
 .cds--btn--ghost .cds--btn__icon,
 .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -1908,9 +1908,13 @@
 .cds--modal .cds--date-picker__input,
 .cds--modal .cds--multi-select,
 .cds--modal .cds--number__control-btn::before,
-.cds--modal .cds--number__control-btn::after {
+.cds--modal .cds--number__control-btn::after,
+.cds--modal .cds--list-box input[role=combobox] {
   background-color: var(--cds-field-02, #ffffff);
 }
+.cds--modal .cds--list-box__menu {
+  background-color: var(--cds-layer-02, #ffffff);
+}
 .cds--modal .cds--number__rule-divider {
   background-color: var(--cds-border-subtle-02, #e0e0e0);
 }
@@ -1918,10 +1922,10 @@
   border-top-color: var(--cds-border-subtle-02, #e0e0e0);
 }
 .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
-  border-top-color: var(--cds-layer-hover);
+  border-top-color: var(--cds-layer-hover-02, #e8e8e8);
 }
 .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
-  border-top-color: var(--cds-layer-selected-hover);
+  border-top-color: var(--cds-layer-selected-hover-02, #d1d1d1);
 }
 .cds--modal .cds--text-input--fluid .cds--text-input,
 .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
@@ -1937,6 +1941,18 @@
 .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
   background-color: var(--cds-field-01, #f4f4f4);
 }
+.cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+.cds--modal .cds--list-box__menu-item:hover {
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+.cds--modal .cds--list-box__menu-item--active {
+  background-color: var(--cds-layer-selected-02, #e0e0e0);
+}
+.cds--modal .cds--list-box__menu-item--active:hover {
+  background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
+}
 .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
 .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
   background-color: var(--cds-field-hover);
@@ -6700,6 +6716,7 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--create-influencer {
   display: grid;
   height: 100%;
+  padding: 1.5rem 2rem;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
 }
@@ -6710,8 +6727,12 @@ a.cds--overflow-menu-options__btn::before {
   overflow-y: auto;
 }
 
-.c4p--create-influencer__progress-indicator.cds--progress {
-  padding: 1.5rem;
+.c4p--create-influencer__title {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+  margin-bottom: 1.5rem;
 }
 
 .c4p--create-influencer__view-all-toggle {
@@ -16111,6 +16132,22 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 100%;
   padding-top: 0;
 }
+.c4p--datagrid__grid-container .cds--data-table-header__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c4p--datagrid__grid-container .cds--data-table-header__title {
+  overflow: hidden;
+  max-width: 80ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (min-width: 42rem) {
+  .c4p--datagrid__grid-container .cds--data-table-header__title {
+    max-width: 55ch;
+  }
+}
 .c4p--datagrid__grid-container .cds--data-table-content {
   width: 100%;
   height: 100%;
@@ -16533,6 +16570,7 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 1rem;
   height: 100%;
   margin: 0;
+  -moz-appearance: initial;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
@@ -16542,12 +16580,12 @@ button.c4p--add-select__global-filter-toggle--open {
   outline: 0;
 }
 
-.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::before {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 2px;
-  height: 100%;
+  height: var(--c4p--datagrid--header-height);
   background-color: var(--cds-focus, #0f62fe);
   content: "";
   transform: translate(-50%, -50%);
@@ -16565,11 +16603,11 @@ button.c4p--add-select__global-filter-toggle--open {
   transform: translate(-50%, 0);
 }
 
-.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
-  top: var(--c4p--datagrid--row-height);
-  right: 0.5rem;
+  top: calc(var(--c4p--datagrid--row-height) - 20px);
+  right: 0.25rem;
   width: 1px;
   height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
   background-color: var(--cds-layer-active-01, #c6c6c6);
@@ -16586,6 +16624,10 @@ button.c4p--add-select__global-filter-toggle--open {
   background: transparent;
 }
 
+.c4p--datagrid .c4p--datagrid__col-resizer-range::-moz-range-thumb {
+  visibility: hidden;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36