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

package/css/index.css

@@ -359,13 +359,13 @@
   max-inline-size: 23rem;
   pointer-events: auto;
 }
-.cds--layout--size-sm .cds--popover-content {
+.cds--popover-content.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--popover-content) {
   --cds-layout-size-height: var(--cds-layout-size-height-sm);
 }
-.cds--layout--size-md .cds--popover-content {
+.cds--popover-content.cds--layout--size-md, .cds--layout--size-md :where(.cds--popover-content) {
   --cds-layout-size-height: var(--cds-layout-size-height-md);
 }
-.cds--layout--size-lg .cds--popover-content {
+.cds--popover-content.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--popover-content) {
   --cds-layout-size-height: var(--cds-layout-size-height-lg);
 }
 .cds--popover-content *,
@@ -1351,13 +1351,6 @@
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
-  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
-    fill: ButtonText;
-  }
-}
-
 [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
   box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
 }
@@ -2079,12 +2072,6 @@
   padding-block-end: 0;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--snippet__icon {
-    fill: ButtonText;
-  }
-}
-
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--snippet--inline:focus {
     color: Highlight;
@@ -2134,6 +2121,7 @@
 .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
 .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
 .cds--modal .cds--number-input--fluid input[type=number],
+.cds--modal .cds--number-input--fluid input[type=text],
 .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
 .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
 .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -2502,12 +2490,6 @@
   display: none;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--modal-close__icon {
-    fill: ButtonText;
-  }
-}
-
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--modal-close:focus {
     color: Highlight;
@@ -2678,12 +2660,14 @@ textarea:-webkit-autofill:focus {
   }
 }
 
-input[type=number] {
+input[type=number],
+input[type=text].cds--number {
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
 }
 
 input[data-invalid]:not(:focus),
 .cds--number[data-invalid] input[type=number]:not(:focus),
+.cds--number[data-invalid] input[type=text]:not(:focus),
 .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
 .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
 .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -2696,6 +2680,7 @@ input[data-invalid]:not(:focus),
 @media screen and (prefers-contrast) {
   input[data-invalid]:not(:focus),
   .cds--number[data-invalid] input[type=number]:not(:focus),
+  .cds--number[data-invalid] input[type=text]:not(:focus),
   .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
   .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
   .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -3124,11 +3109,6 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-secondary, #525252);
   transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
-  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
-    fill: ButtonText;
-  }
-}
 
 .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -3144,12 +3124,6 @@ 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 {
@@ -3456,13 +3430,6 @@ fieldset[disabled] .cds--form__helper-text {
   block-size: 1rem;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
-  .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
-    fill: ButtonText;
-  }
-}
-
 .cds--text-input__label-wrapper {
   display: flex;
   justify-content: space-between;
@@ -4120,7 +4087,7 @@ fieldset[disabled] .cds--form__helper-text {
   inline-size: 1rem;
 }
 .cds--tabs .cds--tabs__nav-item--close-icon svg:hover {
-  fill: var(--cds-text-primary, #161616);
+  fill: var(--cds-icon-primary, #161616);
 }
 .cds--tabs .cds--tabs__nav-item--close-icon:hover {
   background-color: var(--cds-layer-hover);
@@ -4135,10 +4102,10 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg {
-  fill: var(--cds-text-primary, #161616);
+  fill: var(--cds-icon-primary, #161616);
 }
 .cds--tabs .cds--tabs__nav-item--close-icon--selected svg {
-  fill: var(--cds-text-primary, #161616);
+  fill: var(--cds-icon-primary, #161616);
 }
 .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled,
 .cds--tabs .cds--tabs__nav-item--close-icon--disabled,
@@ -4149,7 +4116,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg,
 .cds--tabs .cds--tabs__nav-item--close-icon--disabled svg,
 .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg {
-  fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:focus, .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:active,
 .cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus,
@@ -4378,6 +4345,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box,
 .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
 .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=number],
+.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=text],
 .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::before,
 .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::after,
 .cds--tabs--vertical ~ .cds--tab-content .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -5015,12 +4983,6 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--overflow-menu svg {
-    fill: ButtonText;
-  }
-}
-
 /*stylelint-enable */
 .cds--overflow-menu__top-start {
   transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
@@ -8281,6 +8243,7 @@ a.cds--overflow-menu-options__btn::before {
   position: absolute;
   z-index: 10; /* must be higher than title container border bottom */
   display: flex;
+  block-size: 2rem;
   inset-block-start: 0;
   inset-inline-end: 0;
   /* stylelint-disable-next-line max-nesting-depth */
@@ -8685,6 +8648,7 @@ a.cds--overflow-menu-options__btn::before {
   background-color: var(--cds-layer);
 }
 .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
+  background-color: var(--cds-layer);
   border-inline-end: none;
   border-inline-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
@@ -9208,7 +9172,6 @@ a.cds--overflow-menu-options__btn::before {
 }
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
-    fill: ButtonText;
     background-color: ButtonText;
   }
 }
@@ -10261,12 +10224,6 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--file__state-container .cds--file-close svg path {
-    fill: ButtonText;
-  }
-}
-
 .c4p--import-modal .cds--modal-close {
   display: none;
 }
@@ -11209,7 +11166,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--breadcrumb-item .cds--overflow-menu:active .cds--overflow-menu__icon {
-  fill: var(--cds-text-primary, #161616);
+  fill: var(--cds-icon-primary, #161616);
 }
 
 .cds--breadcrumb-menu-options:focus {
@@ -11441,16 +11398,16 @@ button.c4p--add-select__global-filter-toggle--open {
   vertical-align: middle;
   word-break: break-word;
 }
-.cds--layout--size-xs .cds--tag {
+.cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--tag) {
   --cds-layout-size-height: var(--cds-layout-size-height-xs);
 }
-.cds--layout--size-sm .cds--tag {
+.cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--tag) {
   --cds-layout-size-height: var(--cds-layout-size-height-sm);
 }
-.cds--layout--size-md .cds--tag {
+.cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--tag) {
   --cds-layout-size-height: var(--cds-layout-size-height-md);
 }
-.cds--layout--size-lg .cds--tag {
+.cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--tag) {
   --cds-layout-size-height: var(--cds-layout-size-height-lg);
 }
 .cds--tag.cds--tag--operational {
@@ -11961,13 +11918,6 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--tag__close-icon svg,
-  .cds--tag__custom-icon svg {
-    fill: ButtonText;
-  }
-}
-
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--tag__close-icon:focus {
     color: Highlight;
@@ -15369,13 +15319,6 @@ button.c4p--add-select__global-filter-toggle--open {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--search-close svg,
-  .cds--search-magnifier-icon {
-    fill: ButtonText;
-  }
-}
-
 .c4p--toolbar {
   display: flex;
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -15952,6 +15895,30 @@ button.c4p--add-select__global-filter-toggle--open {
   inset-inline-end: 0;
   max-inline-size: 40rem;
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .c4p--web-terminal {
+    --cds-icon-primary: ButtonText;
+    --cds-icon-secondary: ButtonText;
+    --cds-icon-interactive: ButtonText;
+    --cds-icon-disabled: GrayText;
+    --cds-icon-on-color-disabled: GrayText;
+    --cds-icon-inverse: SelectedItemText;
+    --cds-icon-on-color: SelectedItemText;
+    --cds-button-disabled: GrayText;
+    --cds-interactive: ButtonText;
+    --cds-link-primary: LinkText;
+    --cds-link-primary-hover: LinkText;
+    --cds-link-secondary: LinkText;
+    --cds-link-inverse: SelectedItemText;
+    --cds-link-inverse-hover: SelectedItemText;
+    --cds-link-inverse-visited: SelectedItemText;
+    --cds-link-visited: VisitedText;
+    --cds-background-selected: SelectedItem;
+    --cds-background-selected-hover: SelectedItem;
+    --cds-background-inverse: SelectedItem;
+    --cds-layer-selected-inverse: SelectedItem;
+  }
+}
 @media (prefers-reduced-motion) {
   .c4p--web-terminal {
     animation: none;
@@ -16438,6 +16405,30 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .c4p--web-terminal__documentation-overflow {
+    --cds-icon-primary: ButtonText;
+    --cds-icon-secondary: ButtonText;
+    --cds-icon-interactive: ButtonText;
+    --cds-icon-disabled: GrayText;
+    --cds-icon-on-color-disabled: GrayText;
+    --cds-icon-inverse: SelectedItemText;
+    --cds-icon-on-color: SelectedItemText;
+    --cds-button-disabled: GrayText;
+    --cds-interactive: ButtonText;
+    --cds-link-primary: LinkText;
+    --cds-link-primary-hover: LinkText;
+    --cds-link-secondary: LinkText;
+    --cds-link-inverse: SelectedItemText;
+    --cds-link-inverse-hover: SelectedItemText;
+    --cds-link-inverse-visited: SelectedItemText;
+    --cds-link-visited: VisitedText;
+    --cds-background-selected: SelectedItem;
+    --cds-background-selected-hover: SelectedItem;
+    --cds-background-inverse: SelectedItem;
+    --cds-layer-selected-inverse: SelectedItem;
+  }
+}
 
 .c4p--web-terminal__documentation-overflow .cds--overflow-menu-options__btn {
   text-decoration: none;
@@ -17524,15 +17515,6 @@ a.cds--side-nav__link--current::before {
   fill: var(--cds-icon-secondary, #525252);
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--side-nav__icon > svg,
-  .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
-  .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
-  .cds--side-nav .cds--header__menu-arrow {
-    fill: ButtonText;
-  }
-}
-
 @keyframes form-content-entrance {
   0% {
     opacity: 0;
@@ -21593,6 +21575,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .c4p--decorator--light {
+    --cds-icon-primary: ButtonText;
+    --cds-icon-secondary: ButtonText;
+    --cds-icon-interactive: ButtonText;
+    --cds-icon-disabled: GrayText;
+    --cds-icon-on-color-disabled: GrayText;
+    --cds-icon-inverse: SelectedItemText;
+    --cds-icon-on-color: SelectedItemText;
+    --cds-button-disabled: GrayText;
+    --cds-interactive: ButtonText;
+    --cds-link-primary: LinkText;
+    --cds-link-primary-hover: LinkText;
+    --cds-link-secondary: LinkText;
+    --cds-link-inverse: SelectedItemText;
+    --cds-link-inverse-hover: SelectedItemText;
+    --cds-link-inverse-visited: SelectedItemText;
+    --cds-link-visited: VisitedText;
+    --cds-background-selected: SelectedItem;
+    --cds-background-selected-hover: SelectedItem;
+    --cds-background-inverse: SelectedItem;
+    --cds-layer-selected-inverse: SelectedItem;
+  }
+}
 
 .c4p--decorator--dark {
   --cds-ai-aura-end: rgba(0, 0, 0, 0);
@@ -22063,6 +22069,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .c4p--decorator--dark {
+    --cds-icon-primary: ButtonText;
+    --cds-icon-secondary: ButtonText;
+    --cds-icon-interactive: ButtonText;
+    --cds-icon-disabled: GrayText;
+    --cds-icon-on-color-disabled: GrayText;
+    --cds-icon-inverse: SelectedItemText;
+    --cds-icon-on-color: SelectedItemText;
+    --cds-button-disabled: GrayText;
+    --cds-interactive: ButtonText;
+    --cds-link-primary: LinkText;
+    --cds-link-primary-hover: LinkText;
+    --cds-link-secondary: LinkText;
+    --cds-link-inverse: SelectedItemText;
+    --cds-link-inverse-hover: SelectedItemText;
+    --cds-link-inverse-visited: SelectedItemText;
+    --cds-link-visited: VisitedText;
+    --cds-background-selected: SelectedItem;
+    --cds-background-selected-hover: SelectedItem;
+    --cds-background-inverse: SelectedItem;
+    --cds-layer-selected-inverse: SelectedItem;
+  }
+}
 
 .c4p--decorator {
   display: inline-flex;
@@ -23788,13 +23818,6 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-inline-start: 1rem;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--accordion__arrow,
-  .cds--accordion__item--active .cds--accordion__arrow {
-    fill: ButtonText;
-  }
-}
-
 [dir=rtl] .cds--accordion--start .cds--accordion__heading {
   padding-inline: var(--cds-layout-density-padding-inline-local) 0;
 }
@@ -23909,6 +23932,11 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-block: 0.0625rem 0.125rem;
   margin-inline: 0.1875rem 0;
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--checkbox-label::before {
+    border: 1px solid ButtonBorder;
+  }
+}
 
 .cds--checkbox-label::after {
   position: absolute;
@@ -23932,6 +23960,14 @@ li.cds--accordion__item--disabled:last-of-type {
   border-width: 1px;
   background-color: var(--cds-icon-primary, #161616);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--checkbox:checked + .cds--checkbox-label::before,
+  .cds--checkbox:indeterminate + .cds--checkbox-label::before,
+  .cds--checkbox-label[data-contained-checkbox-state=true]::before {
+    border: 1px solid ButtonBorder;
+    background-color: SelectedItem;
+  }
+}
 
 .cds--checkbox:checked + .cds--checkbox-label::after,
 .cds--checkbox-label[data-contained-checkbox-state=true]::after {
@@ -24060,6 +24096,12 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
   border-color: var(--cds-text-primary, #161616);
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
+  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
+    fill: SelectedItemText;
+  }
+}
 
 .cds--checkbox-skeleton .cds--checkbox-label {
   cursor: default;
@@ -26257,6 +26299,30 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
   background-color: #001d6c;
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .c4p--guidebanner {
+    --cds-icon-primary: ButtonText;
+    --cds-icon-secondary: ButtonText;
+    --cds-icon-interactive: ButtonText;
+    --cds-icon-disabled: GrayText;
+    --cds-icon-on-color-disabled: GrayText;
+    --cds-icon-inverse: SelectedItemText;
+    --cds-icon-on-color: SelectedItemText;
+    --cds-button-disabled: GrayText;
+    --cds-interactive: ButtonText;
+    --cds-link-primary: LinkText;
+    --cds-link-primary-hover: LinkText;
+    --cds-link-secondary: LinkText;
+    --cds-link-inverse: SelectedItemText;
+    --cds-link-inverse-hover: SelectedItemText;
+    --cds-link-inverse-visited: SelectedItemText;
+    --cds-link-visited: VisitedText;
+    --cds-background-selected: SelectedItem;
+    --cds-background-selected-hover: SelectedItem;
+    --cds-background-inverse: SelectedItem;
+    --cds-layer-selected-inverse: SelectedItem;
+  }
+}
 
 .c4p--guidebanner__icon-idea {
   position: absolute;