@carbon/ibm-products 1.32.1 → 1.34.0

package/css/index.css

@@ -10715,6 +10715,20 @@ a.bx--overflow-menu-options__btn::before {
   border-radius: 0;
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .bx--toggle__switch::before {
+    outline: 1px solid transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .bx--toggle__switch::after,
+.bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
+    outline: 1px solid transparent;
+    background-color: ButtonText;
+  }
+}
+
 @keyframes influencer-menu-entrance {
   0% {
     opacity: 0;
@@ -11075,26 +11089,6 @@ a.bx--overflow-menu-options__btn::before {
     stroke-dashoffset: 0;
   }
 }
-@keyframes side-panel-exit-left {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(calc(-1 * 30rem));
-  }
-}
-@keyframes side-panel-exit-right {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-}
 .c4p--side-panel__container {
   --c4p--side-panel--subtitle-opacity: 1;
   --c4p--side-panel--title-container-height: 0;
@@ -11113,7 +11107,6 @@ a.bx--overflow-menu-options__btn::before {
   box-sizing: border-box;
   background-color: var(--cds-ui-01, #f4f4f4);
   color: var(--cds-text-01, #161616);
-  transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--side-panel__container.c4p--side-panel__container--xs {
   width: 16rem;
@@ -11127,37 +11120,13 @@ a.bx--overflow-menu-options__btn::before {
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--sm {
   width: 20rem;
   max-width: 100%;
@@ -11170,37 +11139,13 @@ a.bx--overflow-menu-options__btn::before {
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--md {
   width: 30rem;
   max-width: 100%;
@@ -11213,37 +11158,13 @@ a.bx--overflow-menu-options__btn::before {
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--lg {
   width: 40rem;
   max-width: 100%;
@@ -11256,37 +11177,13 @@ a.bx--overflow-menu-options__btn::before {
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--max {
   width: 75%;
   max-width: 100%;
@@ -11299,37 +11196,13 @@ a.bx--overflow-menu-options__btn::before {
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
-  width: 75%;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
-  width: 75%;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
   content: none;
 }
@@ -11649,7 +11522,6 @@ a.bx--overflow-menu-options__btn::before {
   width: 100%;
   height: 100%;
   background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
-  transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -13080,6 +12952,7 @@ a.bx--side-nav__link--current::before {
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
     fill: ButtonText;
+    background-color: ButtonText;
   }
 }
 
@@ -13893,8 +13766,8 @@ a.bx--side-nav__link--current::before {
   height: 2.5rem;
   padding: var(--cds-spacing-04, 0.75rem);
   border: var(--cds-spacing-01, 0.125rem) solid transparent;
-  background-color: transparent;
   border-radius: 0;
+  background-color: transparent;
   cursor: pointer;
   transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -16755,6 +16628,12 @@ button.c4p--add-select__global-filter-toggle--open {
   transform: translateY(-2px);
   vertical-align: middle;
 }
+.c4p--page-header .c4p--page-header__title-wrapper {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+}
 .c4p--page-header .c4p--page-header__page-actions {
   flex: 0 0 100%;
   margin-top: var(--cds-spacing-05, 1rem);
@@ -19130,8 +19009,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit .c4p--inline-edit__input {
   display: inline-block;
   overflow: hidden;
-  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
-  max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
+  width: calc(
+        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
+      );
+  max-width: calc(
+        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
+      );
   min-height: var(--c4p--inline-edit--size);
   /* stylelint-disable-next-line carbon/layout-token-use */
   margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -19967,11 +19850,6 @@ button.c4p--add-select__global-filter-toggle--open {
   height: var(--cds-spacing-09, 3rem);
 }
 
-.c4p--datagrid .c4p--datagrid__table-grid-active {
-  border: 2px solid var(--cds-inverse-link, #78a9ff);
-  outline: 0;
-}
-
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20463,7 +20341,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
-  height: 1.25rem;
+  height: calc(1.5rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
@@ -20479,7 +20357,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
-  height: 1.75rem;
+  height: calc(2rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
@@ -20495,7 +20373,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
-  height: 2.25rem;
+  height: calc(2.5rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
@@ -20511,7 +20389,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
-  height: 2.75rem;
+  height: calc(3rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
@@ -20527,13 +20405,17 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
-  height: 3.75rem;
+  height: calc(4rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
   max-height: none;
 }
 
+.c4p--datagrid {
+  --c4p--datagrid--grid-header-height: 0;
+}
+
 .c4p--datagrid__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -20552,6 +20434,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
   position: relative;
+  z-index: 2;
   display: flex;
   width: 100%;
   height: 100%;
@@ -20568,6 +20451,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
   padding-left: 0;
+  cursor: default;
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
   height: var(--cds-spacing-05, 1rem);
@@ -20677,11 +20561,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   white-space: nowrap;
 }
 
-.bx--data-table .c4p--datagrid__carbon-row-hover-active td {
+.c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-hover-active td {
   border-top-color: var(--cds-hover-ui, #e5e5e5);
   background-color: var(--cds-hover-ui, #e5e5e5);
 }
 
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
+  background-color: var(--cds-inverse-link, #78a9ff);
+  content: "";
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
+  background-color: var(--cds-inverse-link, #78a9ff);
+  content: "";
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active .bx--data-table-content::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: var(--c4p--datagrid--grid-width);
+  height: 2px;
+  background-color: var(--cds-inverse-link, #78a9ff);
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
+  height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
+  outline: 2px solid var(--cds-inverse-link, #78a9ff);
+  outline-offset: -2px;
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
+  padding-top: var(--cds-spacing-01, 0.125rem);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .bx--form-requirement,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .bx--form-requirement {
+  position: absolute;
+  z-index: 3;
+  top: calc(100% - var(--cds-spacing-01, 0.125rem));
+  width: 100%;
+  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-03, 0.5rem);
+  margin: 0;
+  background-color: var(--cds-ui-01, #f4f4f4);
+  outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-danger-02, #da1e28);
+  outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box[data-invalid]:focus-within ~ .bx--form-requirement {
+  outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box__invalid-icon,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input__invalid-icon,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
+  z-index: 4;
+  top: calc(100% + var(--cds-spacing-04, 0.75rem) + var(--cds-spacing-01, 0.125rem));
+  right: var(--cds-spacing-03, 0.5rem);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
+  top: calc(100% + var(--cds-spacing-02, 0.25rem) + var(--cds-spacing-01, 0.125rem));
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
+  position: absolute;
+  top: 0;
+  left: var(--cds-spacing-01, 0.125rem);
+  width: calc(100% - (var(--cds-spacing-01, 0.125rem) * 2));
+  height: var(--cds-spacing-01, 0.125rem);
+  background-color: var(--cds-ui-01, #f4f4f4);
+  content: "";
+}
+
+.c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
+  position: absolute;
+  top: var(--cds-spacing-01, 0.125rem);
+  left: var(--cds-spacing-03, 0.5rem);
+  width: calc(100% - (var(--cds-spacing-03, 0.5rem) * 2));
+  height: 1px;
+  background-color: var(--cds-ui-03, #e0e0e0);
+  content: "";
+}
+
+.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
+  background-color: var(--cds-ui-03, #e0e0e0);
+}
+.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
+  background-color: transparent;
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input:focus,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__control-btn:focus {
+  outline-color: var(--cds-support-01, #da1e28);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
+  background-color: var(--cds-support-01, #da1e28);
+}
+
 .c4p--datagrid__datagridWrap {
   display: block;
   width: 100%;
@@ -20844,4 +20842,58 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   margin-bottom: var(--cds-spacing-05, 1rem);
 }
 
+.c4p--inline-edit-v2 {
+  display: flex;
+  align-items: center;
+  background: transparent;
+  cursor: pointer;
+}
+.c4p--inline-edit-v2-readonly {
+  cursor: not-allowed;
+}
+.c4p--inline-edit-v2:hover {
+  background: var(--cds-hover-ui, #e5e5e5);
+}
+.c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
+  visibility: visible;
+}
+.c4p--inline-edit-v2__btn-edit {
+  visibility: hidden;
+}
+.c4p--inline-edit-v2-focused {
+  background: var(--cds-hover-ui, #e5e5e5);
+  outline: 2px solid var(--cds-focus, #0f62fe);
+}
+.c4p--inline-edit-v2__text-input {
+  flex: 1;
+}
+.c4p--inline-edit-v2__warning-icon {
+  color: var(--cds-support-01, #da1e28);
+}
+.c4p--inline-edit-v2__warning-text {
+  font-size: var(--cds-caption-01-font-size, 0.75rem);
+  font-weight: var(--cds-caption-01-font-weight, 400);
+  line-height: var(--cds-caption-01-line-height, 1.33333);
+  letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
+  margin-top: var(--cds-spacing-03, 0.5rem);
+  color: var(--cds-support-01, #da1e28);
+}
+
+.c4p--inline-edit-v2__text-input.bx--text-input {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.bx--text-input {
+  color: var(--cds-disabled-02, #c6c6c6);
+  cursor: not-allowed;
+}
+
+.c4p--inline-edit-v2__text-input.bx--text-input:focus,
+.c4p--inline-edit-v2__text-input.bx--text-input:active {
+  outline: none;
+}
+
 /*# sourceMappingURL=index.css.map */