@carbon/ibm-products 2.68.0 → 2.69.0-rc.0

package/css/index.css

@@ -153,6 +153,7 @@
 :root {
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -170,6 +171,7 @@
 .cds--layer-one {
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -187,6 +189,7 @@
 .cds--layer-two {
   --cds-layer: var(--cds-layer-02, #ffffff);
   --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-02, #f4f4f4);
   --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
@@ -204,6 +207,7 @@
 .cds--layer-three {
   --cds-layer: var(--cds-layer-03, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-03, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
@@ -218,6 +222,18 @@
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
 }
 
+.cds--layer-one.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
+.cds--layer-two.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
+.cds--layer-three.cds--layer__with-background {
+  background-color: var(--cds-layer-background);
+}
+
 @keyframes cds--hide-feedback {
   0% {
     opacity: 1;
@@ -794,6 +810,7 @@
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
   max-inline-size: 18rem;
+  overflow-wrap: break-word;
 }
 
 .cds--icon-tooltip {
@@ -2232,6 +2249,8 @@
   grid-column: 1/-1;
   grid-row: 1/1;
   margin-block-end: 0.5rem;
+  max-block-size: 50vh;
+  overflow-y: auto;
   padding-block-start: 1rem;
   padding-inline: 1rem 3rem;
 }
@@ -3125,6 +3144,12 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
   fill: var(--cds-icon-primary, #161616);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
+  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
+    fill: ButtonText;
+  }
+}
 
 .cds--text-input--invalid,
 .cds--text-input--warning {
@@ -6934,6 +6959,8 @@ a.cds--overflow-menu-options__btn::before {
 
 .cds--progress--space-equal .cds--progress-text {
   overflow: hidden;
+  padding: 0.125rem;
+  margin: -0.125rem;
 }
 
 .cds--progress-label {
@@ -7272,13 +7299,11 @@ a.cds--overflow-menu-options__btn::before {
 .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch::after,
 .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch::after {
   display: block;
-  border: 2px solid var(--cds-focus, #0f62fe);
   border-radius: 1rem;
-  block-size: calc(100% + 0.375rem);
+  block-size: 100%;
   content: "";
-  inline-size: calc(100% + 0.375rem);
-  margin-block-start: -0.1875rem;
-  margin-inline-start: -0.1875rem;
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: 1px;
 }
 
 .cds--toggle__switch--checked {
@@ -7789,10 +7814,6 @@ a.cds--overflow-menu-options__btn::before {
   margin-block-end: 0;
 }
 
-/* One or two values
-  * - width (first value)
-  * - min-width (optional second value)
-*/
 @keyframes side-panel-entrance-reduced {
   0% {
     opacity: 0;
@@ -7885,11 +7906,21 @@ a.cds--overflow-menu-options__btn::before {
   /* if the title does not scroll then we have a child scrolling section. */
   grid-template-rows: auto 1fr auto; /* titles content and actions */
   inset-block-start: 3rem;
+  max-inline-size: 100%;
+  min-inline-size: 16rem;
   transform: translateX(0);
   transition-behavior: allow-discrete;
   transition-duration: 150ms;
   transition-property: display, opacity, transform;
 }
+.c4p--side-panel:not(.c4p--side-panel--slide-in).c4p--side-panel--enable-sidepanel-resizer {
+  grid-template-columns: 0 1fr;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .c4p--side-panel:not(.c4p--side-panel--slide-in).c4p--side-panel--enable-sidepanel-resizer {
+    transition: all 150ms linear;
+  }
+}
 @starting-style {
   .c4p--side-panel {
     opacity: 0;
@@ -7897,36 +7928,28 @@ a.cds--overflow-menu-options__btn::before {
     transform: translateX(var(--panel-transform));
   }
 }
+@media (min-width: 42rem) {
+  .c4p--side-panel {
+    max-inline-size: 75vw;
+  }
+}
 .c4p--side-panel.c4p--side-panel--xs {
-  /* any value is single value list */
-  inline-size: 16rem;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 16rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--sm {
-  /* any value is single value list */
-  inline-size: 20rem;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 20rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--md {
-  /* any value is single value list */
-  inline-size: 30rem;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 30rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--lg {
-  /* any value is single value list */
-  inline-size: 40rem;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 40rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--xl {
-  /* any value is single value list */
-  inline-size: 65rem;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 65rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--2xl {
-  /* any value is single value list */
-  inline-size: 40rem;
-  min-inline-size: 75%;
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 80rem), 100%);
 }
 .c4p--side-panel.c4p--side-panel--open.c4p--side-panel--right-placement {
   animation: side-panel-entrance-right 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
@@ -7995,10 +8018,55 @@ a.cds--overflow-menu-options__btn::before {
   border-inline-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
   inset-inline-start: 0;
 }
+.c4p--side-panel.c4p--side-panel--left-placement .clabs__resizer {
+  grid-column: 2;
+  inset-inline-start: 0;
+}
+.c4p--side-panel.c4p--side-panel--left-placement .clabs__resizer::before {
+  inset-inline-start: 0;
+}
+.c4p--side-panel.c4p--side-panel--left-placement:not(.c4p--side-panel--slide-in).c4p--side-panel--enable-sidepanel-resizer {
+  grid-template-columns: 1fr 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .c4p--side-panel.c4p--side-panel--left-placement:not(.c4p--side-panel--slide-in).c4p--side-panel--enable-sidepanel-resizer {
+    transition: all 150ms linear;
+  }
+}
 .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator {
   border-color: transparent;
   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));
 }
+.c4p--side-panel .clabs__resizer--vertical::before {
+  position: absolute;
+  z-index: -1;
+  background-color: transparent;
+  block-size: 100%;
+  content: "";
+  inline-size: 0.125rem;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.c4p--side-panel:hover .clabs__resizer--vertical::before {
+  background-color: var(--cds-button-secondary-hover, #474747);
+}
+.c4p--side-panel .clabs__resizer {
+  background-color: transparent;
+  grid-row: span 4/span 3;
+  inset-inline-start: -0.25rem;
+}
+.c4p--side-panel .clabs__resizer--vertical::after {
+  position: absolute;
+  z-index: 10;
+  block-size: 100%;
+  content: "";
+  inline-size: 0.5rem;
+  inset-inline-start: -0.125rem;
+}
+.c4p--side-panel .clabs__resizer:hover, .c4p--side-panel .clabs__resizer:focus {
+  background-color: var(--cds-border-interactive, #0f62fe);
+}
 .c4p--side-panel .c4p--side-panel__header {
   --c4p--side-panel--title-padding-bottom: 1rem;
   position: sticky;
@@ -8248,11 +8316,6 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--side-panel .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
   block-size: var(--c4p--side-panel--actions-height);
 }
-.c4p--side-panel.c4p--side-panel.c4p--side-panel--xs .c4p--side-panel__actions-container.c4p--action-set--sm {
-  /* any value is single value list */
-  inline-size: 16rem;
-  max-inline-size: 100%;
-}
 
 .c4p--side-panel .cds--text-input,
 .c4p--side-panel .cds--text-area,
@@ -8316,6 +8379,49 @@ a.cds--overflow-menu-options__btn::before {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
+.clabs__resizer {
+  position: relative;
+  flex: none;
+  background-color: var(--cds-border-subtle-01, #c6c6c6);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .clabs__resizer:hover {
+    background-color: var(--cds-border-interactive, #0f62fe);
+    transition: background-color 150ms;
+  }
+}
+.clabs__resizer:focus {
+  background-color: var(--cds-border-interactive, #0f62fe);
+  outline: none;
+}
+.clabs__resizer:active {
+  background-color: var(--cds-border-interactive, #0f62fe);
+}
+.clabs__resizer:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+.clabs__resizer--horizontal {
+  block-size: 0.25rem;
+  cursor: ns-resize;
+}
+.clabs__resizer--vertical {
+  cursor: ew-resize;
+  inline-size: 0.25rem;
+}
+
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  white-space: nowrap;
+}
+
 .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
   padding-inline-end: calc(20% - 1rem);
 }
@@ -9891,16 +9997,22 @@ a.cds--overflow-menu-options__btn::before {
 .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
   inline-size: -webkit-fill-available;
   padding-inline-start: 1rem;
+  /* This is for targeting styles specific to firefox */
+  /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+  /* stylelint-disable-next-line at-rule-no-vendor-prefix */
 }
-@document url-prefix() {
+@-moz-document url-prefix() {
   .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
     inline-size: -moz-available;
   }
 }
 .cds--file__selected-file .cds--file-filename-tooltip {
   inline-size: -webkit-fill-available;
+  /* This is for targeting styles specific to firefox */
+  /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+  /* stylelint-disable-next-line at-rule-no-vendor-prefix */
 }
-@document url-prefix() {
+@-moz-document url-prefix() {
   .cds--file__selected-file .cds--file-filename-tooltip {
     inline-size: -moz-available;
   }
@@ -9921,8 +10033,11 @@ a.cds--overflow-menu-options__btn::before {
   outline: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /* This is for targeting styles specific to firefox */
+  /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+  /* stylelint-disable-next-line at-rule-no-vendor-prefix */
 }
-@document url-prefix() {
+@-moz-document url-prefix() {
   .cds--file__selected-file .cds--file-filename-button {
     inline-size: -moz-available;
   }
@@ -10380,12 +10495,6 @@ a.cds--overflow-menu-options__btn::before {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
-  overflow-x: auto;
-}
-@supports (overflow-inline: auto) {
-  .c4p--add-select__columns {
-    overflow-inline: auto;
-  }
 }
 .c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
   margin-inline-start: 0.5rem;
@@ -10417,7 +10526,6 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--add-select__column {
-  overflow: auto;
   flex: 0 0 20rem;
   padding: 1rem;
   border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -10426,8 +10534,15 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--add-select__column-search-bar {
   display: flex;
 }
-.c4p--add-select__column-search-bar label {
-  display: none;
+.c4p--add-select__column-search-bar .cds--btn {
+  border-block-end: 1px solid var(--cds-border-strong-01, #8d8d8d);
+}
+.c4p--add-select__column .cds--popover--tab-tip.cds--popover--open .cds--btn {
+  background: var(--cds-layer);
+}
+.c4p--add-select__column-filter-popover.cds--popover-content {
+  padding: 1rem;
+  min-inline-size: 10rem;
 }
 .c4p--add-select__column-sort-filter {
   display: flex;
@@ -10613,11 +10728,6 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-block: 0;
 }
 
-.c4p--add-select + div .cds--tooltip,
-.c4p--add-select + div .cds--overflow-menu-options {
-  z-index: 9000;
-}
-
 @keyframes notifications-panel-fade-in {
   0% {
     opacity: 0;
@@ -10994,6 +11104,11 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-inline-end: 0.25rem;
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item .cds--link {
+  justify-content: center;
+  min-inline-size: 0.75rem;
+}
+
 .cds--breadcrumb-item .cds--link:visited {
   color: var(--cds-link-primary, #0f62fe);
 }
@@ -15457,6 +15572,9 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-layer-active-01: #6f6f6f;
   --cds-layer-active-02: #8d8d8d;
   --cds-layer-active-03: #393939;
+  --cds-layer-background-01: #262626;
+  --cds-layer-background-02: #393939;
+  --cds-layer-background-03: #525252;
   --cds-layer-hover-01: #474747;
   --cds-layer-hover-02: #636363;
   --cds-layer-hover-03: #5e5e5e;
@@ -15812,6 +15930,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-tag-hover-warm-gray: #696363;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -15947,6 +16066,9 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-layer-active-01: #525252;
   --cds-layer-active-02: #6f6f6f;
   --cds-layer-active-03: #8d8d8d;
+  --cds-layer-background-01: #161616;
+  --cds-layer-background-02: #262626;
+  --cds-layer-background-03: #393939;
   --cds-layer-hover-01: #333333;
   --cds-layer-hover-02: #474747;
   --cds-layer-hover-03: #636363;
@@ -16302,6 +16424,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-tag-hover-warm-gray: #696363;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -21097,6 +21220,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-layer-active-01: #c6c6c6;
   --cds-layer-active-02: #c6c6c6;
   --cds-layer-active-03: #c6c6c6;
+  --cds-layer-background-01: #f4f4f4;
+  --cds-layer-background-02: #ffffff;
+  --cds-layer-background-03: #f4f4f4;
   --cds-layer-hover-01: #e8e8e8;
   --cds-layer-hover-02: #e8e8e8;
   --cds-layer-hover-03: #e8e8e8;
@@ -21453,6 +21579,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-tag-hover-warm-gray: #d8d0cf;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -21563,6 +21690,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-layer-active-01: #525252;
   --cds-layer-active-02: #6f6f6f;
   --cds-layer-active-03: #8d8d8d;
+  --cds-layer-background-01: #161616;
+  --cds-layer-background-02: #262626;
+  --cds-layer-background-03: #393939;
   --cds-layer-hover-01: #333333;
   --cds-layer-hover-02: #474747;
   --cds-layer-hover-03: #636363;
@@ -21919,6 +22049,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-tag-hover-warm-gray: #696363;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -25750,6 +25881,9 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   --cds-layer-active-01: #525252;
   --cds-layer-active-02: #6f6f6f;
   --cds-layer-active-03: #8d8d8d;
+  --cds-layer-background-01: #161616;
+  --cds-layer-background-02: #262626;
+  --cds-layer-background-03: #393939;
   --cds-layer-hover-01: #333333;
   --cds-layer-hover-02: #474747;
   --cds-layer-hover-03: #636363;
@@ -26106,6 +26240,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   --cds-tag-hover-warm-gray: #696363;
   --cds-layer: var(--cds-layer-01, #f4f4f4);
   --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-background: var(--cds-layer-background-01, #ffffff);
   --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
   --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
   --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);