@carbon/ibm-products-styles 2.70.0-rc.0 → 2.71.0-rc.0

package/css/index.css

@@ -882,7 +882,7 @@
 }
 
 .cds--btn {
-  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   --temp-1lh: (
     var(--cds-body-compact-01-line-height, 1.28572) * 1em
@@ -1083,11 +1083,12 @@
 }
 
 .cds--btn--icon-only {
+  align-items: center;
   justify-content: center;
   padding: 0;
   block-size: var(--cds-layout-size-height-local);
   inline-size: var(--cds-layout-size-height-local);
-  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  padding-block-start: 0;
 }
 .cds--btn--icon-only > :first-child {
   min-inline-size: 1rem;
@@ -1102,6 +1103,11 @@
   padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 1rem);
 }
 
+.cds--btn--xs:not(.cds--btn--icon-only) {
+  padding-block-start: 1.5px;
+}
+
+.cds--btn--xs:not(.cds--btn--icon-only) .cds--btn__icon,
 .cds--btn--sm:not(.cds--btn--icon-only) .cds--btn__icon,
 .cds--btn--md:not(.cds--btn--icon-only) .cds--btn__icon {
   margin-block-start: 0;
@@ -1287,6 +1293,15 @@
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--btn.cds--skeleton {
+    background: CanvasText;
+  }
+  .cds--btn.cds--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--btn-set {
   display: flex;
@@ -2008,14 +2023,12 @@
   background-image: linear-gradient(to right, transparent, var(--cds-layer));
 }
 
-@media not all and (min-resolution >= 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .cds--snippet__overflow-indicator--left {
-      background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
-    }
-    .cds--snippet__overflow-indicator--right {
-      background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
-    }
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  .cds--snippet__overflow-indicator--left {
+    background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
+  }
+  .cds--snippet__overflow-indicator--right {
+    background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
   }
 }
 .cds--snippet--multi.cds--skeleton {
@@ -2058,6 +2071,15 @@
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--snippet.cds--skeleton span {
+    background: CanvasText;
+  }
+  .cds--snippet.cds--skeleton span::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 .cds--snippet.cds--skeleton span:first-child {
   margin: 0;
 }
@@ -2659,6 +2681,15 @@ textarea:-webkit-autofill:focus {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--label.cds--skeleton {
+    background: CanvasText;
+  }
+  .cds--label.cds--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 input[type=number],
 input[type=text].cds--number {
@@ -2794,7 +2825,7 @@ input:not(output, [data-invalid]):-moz-ui-invalid {
   line-height: var(--cds-helper-text-01-line-height, 1.33333);
   letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
   z-index: 0;
-  color: var(--cds-text-secondary, #525252);
+  color: var(--cds-text-helper, #6f6f6f);
   inline-size: 100%;
   margin-block-start: 0.25rem;
   opacity: 1;
@@ -3251,6 +3282,15 @@ fieldset[disabled] .cds--form__helper-text {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--skeleton.cds--text-input {
+    background: CanvasText;
+  }
+  .cds--skeleton.cds--text-input::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--form--fluid .cds--text-input-wrapper {
   position: relative;
@@ -3538,12 +3578,10 @@ fieldset[disabled] .cds--form__helper-text {
   stroke-dashoffset: -22;
 }
 
-@media not all and (resolution >= 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    circle.cds--loading__background {
-      stroke-dasharray: 265;
-      stroke-dashoffset: 0;
-    }
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  circle.cds--loading__background {
+    stroke-dasharray: 265;
+    stroke-dashoffset: 0;
   }
 }
 .cds--loading-overlay {
@@ -3962,20 +4000,18 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right {
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-accent));
 }
-@media not all and (resolution >= 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .cds--tabs .cds--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
-    }
-    .cds--tabs .cds--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
-    }
-    .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
-    }
-    .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
-    }
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  .cds--tabs .cds--tabs__overflow-indicator--left {
+    background-image: linear-gradient(to left, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
+  }
+  .cds--tabs .cds--tabs__overflow-indicator--right {
+    background-image: linear-gradient(to right, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff));
+  }
+  .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left {
+    background-image: linear-gradient(to left, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
+  }
+  .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right {
+    background-image: linear-gradient(to right, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent));
   }
 }
 .cds--tabs .cds--tabs__nav-item-label-wrapper {
@@ -4440,6 +4476,15 @@ fieldset[disabled] .cds--form__helper-text {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
+    background: CanvasText;
+  }
+  .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--tabs__nav-item .cds--tabs__nav-item--selected .cds--tabs__nav-item--selected {
@@ -4681,7 +4726,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .cds--overflow-menu:hover,
 .cds--overflow-menu__trigger:hover {
-  background-color: var(--cds-layer-hover);
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
 }
 
 .cds--overflow-menu > :first-child {
@@ -4777,14 +4822,14 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .cds--overflow-menu-options--light {
-  background-color: var(--cds-layer);
+  background-color: var(--cds-layer-hover);
 }
 .cds--overflow-menu-options--light::after {
   background-color: var(--cds-layer);
 }
 
 .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
-  background-color: var(--cds-layer);
+  background-color: var(--cds-layer-hover);
 }
 
 .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
@@ -7148,6 +7193,15 @@ a.cds--overflow-menu-options__btn::before {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--progress.cds--skeleton .cds--progress-label {
+    background: CanvasText;
+  }
+  .cds--progress.cds--skeleton .cds--progress-label::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
   margin-block-start: 0.0625rem;
@@ -7409,6 +7463,15 @@ a.cds--overflow-menu-options__btn::before {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggle--skeleton .cds--toggle__skeleton-circle {
+    background: CanvasText;
+  }
+  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
   position: relative;
@@ -7441,6 +7504,15 @@ a.cds--overflow-menu-options__btn::before {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
+    background: CanvasText;
+  }
+  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 [dir=rtl] .cds--toggle__switch--checked::before {
   transform: translateX(-1.5rem);
@@ -8190,6 +8262,7 @@ a.cds--overflow-menu-options__btn::before {
   -webkit-line-clamp: 2;
   /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
   padding-inline-end: var(--c4p--side-panel--title-padding-right);
+  word-break: break-all;
   opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
 }
 .c4p--side-panel .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
@@ -8221,6 +8294,7 @@ a.cds--overflow-menu-options__btn::before {
   -webkit-line-clamp: 2;
   /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
   padding-inline-end: var(--c4p--side-panel--title-padding-right);
+  word-break: break-all;
   position: absolute;
   inset-block-start: 0;
   opacity: var(--c4p--side-panel--scroll-animation-progress);
@@ -8350,18 +8424,6 @@ a.cds--overflow-menu-options__btn::before {
   block-size: var(--c4p--side-panel--actions-height);
 }
 
-.c4p--side-panel .cds--text-input,
-.c4p--side-panel .cds--text-area,
-.c4p--side-panel .cds--search-input,
-.c4p--side-panel .cds--select-input,
-.c4p--side-panel .cds--multi-select,
-.c4p--side-panel .cds--dropdown,
-.c4p--side-panel .cds--dropdown-list,
-.c4p--side-panel .cds--number input[type=number],
-.c4p--side-panel .cds--date-picker__input {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
 @keyframes side-panel-overlay-entrance {
   0% {
     opacity: 0;
@@ -8926,24 +8988,24 @@ a.cds--overflow-menu-options__btn::before {
   color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
   text-decoration: underline;
 }
-.cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
+.cds--link:active:not(.cds--link--disabled), .cds--link:active:visited, .cds--link:active:visited:hover {
   outline: 1px solid var(--cds-focus, #0f62fe);
   color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
   outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
   text-decoration: underline;
 }
 @media screen and (prefers-contrast) {
-  .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
+  .cds--link:active:not(.cds--link--disabled), .cds--link:active:visited, .cds--link:active:visited:hover {
     outline-style: dotted;
   }
 }
-.cds--link:focus {
+.cds--link:focus:not(.cds--link--disabled) {
   outline: 1px solid var(--cds-focus, #0f62fe);
   outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
   text-decoration: underline;
 }
 @media screen and (prefers-contrast) {
-  .cds--link:focus {
+  .cds--link:focus:not(.cds--link--disabled) {
     outline-style: dotted;
   }
 }
@@ -9319,6 +9381,15 @@ a.cds--overflow-menu-options__btn::before {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--radio-button__label.cds--skeleton {
+    background: CanvasText;
+  }
+  .cds--radio-button__label.cds--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--radio-button__label.cds--skeleton .cds--radio-button__appearance {
   display: none;
@@ -11267,6 +11338,15 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--breadcrumb.cds--skeleton .cds--link {
+    background: CanvasText;
+  }
+  .cds--breadcrumb.cds--skeleton .cds--link::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 @keyframes ai-skeleton-animation {
   0% {
@@ -11307,6 +11387,15 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--icon--skeleton {
+    background: CanvasText;
+  }
+  .cds--icon--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--skeleton__placeholder {
   position: relative;
@@ -11338,6 +11427,15 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--skeleton__placeholder {
+    background: CanvasText;
+  }
+  .cds--skeleton__placeholder::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--skeleton__text {
   position: relative;
@@ -11370,6 +11468,15 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--skeleton__text {
+    background: CanvasText;
+  }
+  .cds--skeleton__text::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--skeleton__heading {
   block-size: 1.5rem;
@@ -11406,6 +11513,18 @@ button.c4p--add-select__global-filter-toggle--open {
   border-radius: 0.125rem;
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--skeleton__text--ai,
+  .cds--skeleton__placeholder--ai,
+  .cds--skeleton__icon--ai {
+    background: CanvasText;
+  }
+  .cds--skeleton__text--ai::before,
+  .cds--skeleton__placeholder--ai::before,
+  .cds--skeleton__icon--ai::before {
+    background: Canvas;
+  }
+}
 .cds--tag {
   --cds-layout-size-height-xs: 1.125rem;
   --cds-layout-size-height-sm: 1.125rem;
@@ -11898,6 +12017,15 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--tag.cds--skeleton {
+    background: CanvasText;
+  }
+  .cds--tag.cds--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 .cds--tag.cds--skeleton.cds--tag--operational {
   border: 1px solid var(--cds-skeleton-background, #e8e8e8);
 }
@@ -11910,11 +12038,9 @@ button.c4p--add-select__global-filter-toggle--open {
 .cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
   color: var(--cds-text-primary, #161616);
 }
-@media not all and (min-resolution >= 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .cds--tag.cds--skeleton {
-      transform: translateZ(0);
-    }
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  .cds--tag.cds--skeleton {
+    transform: translateZ(0);
   }
 }
 
@@ -13609,11 +13735,6 @@ button.c4p--add-select__global-filter-toggle--open {
   min-inline-size: initial;
   text-align: start;
 }
-.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__popover-trigger {
-  /* stylelint-disable-next-line declaration-no-important */
-  border: none !important;
-  font-family: inherit;
-}
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link.cds--link:visited {
   display: inline-block;
   margin: 0.5rem 0 0.25rem;
@@ -15583,6 +15704,19 @@ button.c4p--add-select__global-filter-toggle--open {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--search--lg.cds--skeleton .cds--search-input,
+  .cds--search--md.cds--skeleton .cds--search-input,
+  .cds--search--sm.cds--skeleton .cds--search-input {
+    background: CanvasText;
+  }
+  .cds--search--lg.cds--skeleton .cds--search-input::before,
+  .cds--search--md.cds--skeleton .cds--search-input::before,
+  .cds--search--sm.cds--skeleton .cds--search-input::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 .cds--search--lg.cds--skeleton .cds--search-input::placeholder,
 .cds--search--md.cds--skeleton .cds--search-input::placeholder,
 .cds--search--sm.cds--skeleton .cds--search-input::placeholder {
@@ -24121,6 +24255,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--accordion__heading[disabled] {
+  background-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
 }
@@ -24666,6 +24801,15 @@ li.cds--accordion__item--disabled:last-of-type {
     animation: none;
   }
 }
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--checkbox-label-text.cds--skeleton {
+    background: CanvasText;
+  }
+  .cds--checkbox-label-text.cds--skeleton::before {
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+}
 
 .cds--checkbox--inline {
   position: relative;