@carbon/ibm-products 2.67.0 → 2.68.0

package/css/index-full-carbon.css

@@ -52,9 +52,11 @@
 }
 
 .c4p--about-modal .c4p--about-modal__header {
-  padding: 0 20% 0 1rem;
+  padding: 0;
   grid-row: auto;
   margin-block-end: 0;
+  padding-inline-end: 20%;
+  padding-inline-start: 1rem;
 }
 
 .c4p--about-modal .c4p--about-modal__title {
@@ -2299,6 +2301,232 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 /* stylelint-disable max-nesting-depth */
+@keyframes cds--hide-feedback {
+  0% {
+    opacity: 1;
+    visibility: inherit;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+@keyframes cds--show-feedback {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  100% {
+    opacity: 1;
+    visibility: inherit;
+  }
+}
+@keyframes cds--skeleton {
+  0% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  20% {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  28% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  51% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  58% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  82% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  83% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  96% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  100% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+.cds--layout--size-xs {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-xs {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
+}
+
+.cds--layout-constraint--size__min-xs {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout-constraint--size__max-xs {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout--size-sm {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-sm {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
+}
+
+.cds--layout-constraint--size__min-sm {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout-constraint--size__max-sm {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout--size-md {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-md {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
+}
+
+.cds--layout-constraint--size__min-md {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout-constraint--size__max-md {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout--size-lg {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-lg {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
+}
+
+.cds--layout-constraint--size__min-lg {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout-constraint--size__max-lg {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout--size-xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
+}
+
+.cds--layout-constraint--size__min-xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout-constraint--size__max-xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout--size-2xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size__default-2xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
+}
+
+.cds--layout-constraint--size__min-2xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout-constraint--size__max-2xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout--density-condensed {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density__default-condensed {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
+}
+
+.cds--layout-constraint--density__min-condensed {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout-constraint--density__max-condensed {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout--density-normal {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density__default-normal {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
+}
+
+.cds--layout-constraint--density__min-normal {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
+.cds--layout-constraint--density__max-normal {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
+:root {
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px;
+}
+
+.cds--assistive-text,
+.cds--visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  visibility: inherit;
+  white-space: nowrap;
+}
+
 .c4p--carousel {
   position: relative;
   /* stylelint-disable-next-line max-nesting-depth */
@@ -2343,6 +2571,15 @@ p.c4p--about-modal__copyright-text:first-child {
   user-select: none;
   /* stylelint-disable-next-line max-nesting-depth */
 }
+.c4p--carousel__elements:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .c4p--carousel__elements:focus {
+    outline-style: dotted;
+  }
+}
 @media (prefers-reduced-motion) {
   .c4p--carousel__elements {
     scroll-behavior: auto;
@@ -2850,232 +3087,6 @@ p.c4p--about-modal__copyright-text:first-child {
   * - width (first value)
   * - min-width (optional second value)
 */
-@keyframes cds--hide-feedback {
-  0% {
-    opacity: 1;
-    visibility: inherit;
-  }
-  100% {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-@keyframes cds--show-feedback {
-  0% {
-    opacity: 0;
-    visibility: hidden;
-  }
-  100% {
-    opacity: 1;
-    visibility: inherit;
-  }
-}
-@keyframes cds--skeleton {
-  0% {
-    opacity: 0.3;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  20% {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: left;
-  }
-  28% {
-    transform: scaleX(1);
-    transform-origin: right;
-  }
-  51% {
-    transform: scaleX(0);
-    transform-origin: right;
-  }
-  58% {
-    transform: scaleX(0);
-    transform-origin: right;
-  }
-  82% {
-    transform: scaleX(1);
-    transform-origin: right;
-  }
-  83% {
-    transform: scaleX(1);
-    transform-origin: left;
-  }
-  96% {
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  100% {
-    opacity: 0.3;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-}
-.cds--layout--size-xs {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-xs {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
-}
-
-.cds--layout-constraint--size__min-xs {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
-}
-
-.cds--layout-constraint--size__max-xs {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
-}
-
-.cds--layout--size-sm {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-sm {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
-}
-
-.cds--layout-constraint--size__min-sm {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
-}
-
-.cds--layout-constraint--size__max-sm {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
-}
-
-.cds--layout--size-md {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-md {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
-}
-
-.cds--layout-constraint--size__min-md {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
-}
-
-.cds--layout-constraint--size__max-md {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
-}
-
-.cds--layout--size-lg {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-lg {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
-}
-
-.cds--layout-constraint--size__min-lg {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
-}
-
-.cds--layout-constraint--size__max-lg {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
-}
-
-.cds--layout--size-xl {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-xl {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
-}
-
-.cds--layout-constraint--size__min-xl {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
-}
-
-.cds--layout-constraint--size__max-xl {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
-}
-
-.cds--layout--size-2xl {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
-.cds--layout-constraint--size__default-2xl {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
-}
-
-.cds--layout-constraint--size__min-2xl {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
-}
-
-.cds--layout-constraint--size__max-2xl {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
-}
-
-.cds--layout--density-condensed {
-  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
-  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
-}
-
-.cds--layout-constraint--density__default-condensed {
-  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
-}
-
-.cds--layout-constraint--density__min-condensed {
-  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
-}
-
-.cds--layout-constraint--density__max-condensed {
-  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
-}
-
-.cds--layout--density-normal {
-  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
-  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
-}
-
-.cds--layout-constraint--density__default-normal {
-  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
-}
-
-.cds--layout-constraint--density__min-normal {
-  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
-}
-
-.cds--layout-constraint--density__max-normal {
-  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
-}
-
-:root {
-  --cds-layout-size-height-xs: 1.5rem;
-  --cds-layout-size-height-sm: 2rem;
-  --cds-layout-size-height-md: 2.5rem;
-  --cds-layout-size-height-lg: 3rem;
-  --cds-layout-size-height-xl: 4rem;
-  --cds-layout-size-height-2xl: 5rem;
-  --cds-layout-size-height-min: 0px;
-  --cds-layout-size-height-max: 999999999px;
-  --cds-layout-density-padding-inline-condensed: 0.5rem;
-  --cds-layout-density-padding-inline-normal: 1rem;
-  --cds-layout-density-padding-inline-min: 0px;
-  --cds-layout-density-padding-inline-max: 999999999px;
-}
-
-.cds--assistive-text,
-.cds--visually-hidden {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  visibility: inherit;
-  white-space: nowrap;
-}
-
 @keyframes side-panel-entrance-reduced {
   0% {
     opacity: 0;
@@ -4411,19 +4422,6 @@ p.c4p--about-modal__copyright-text:first-child {
   letter-spacing: var(--cds-heading-03-letter-spacing, 0);
 }
 
-@keyframes filter-summary-enter {
-  0% {
-    block-size: 0;
-    opacity: 0;
-    /* Move from top */
-    transform: translateY(calc(var(--panel-transform) * -1));
-  }
-  100% {
-    block-size: var(--panel-transform);
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 @property --panel-transform {
   inherits: true;
   initial-value: 16px;
@@ -4442,9 +4440,6 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--filter-summary.c4p--filter-summary__expanded {
   block-size: fit-content;
 }
-.c4p--filter-summary .c4p--tag-set__tag-container {
-  animation: filter-summary-enter 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
-}
 
 .c4p--filter-summary .c4p--tag-set.c4p--tag-set.c4p--filter-summary__clear-button-inline {
   inline-size: auto;
@@ -6948,7 +6943,6 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
   display: inline-flex;
-  overflow: hidden;
 }
 .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .cds--link {
   display: inline-block;
@@ -11276,11 +11270,6 @@ button.c4p--add-select__global-filter-toggle--open {
   justify-content: center;
 }
 
-.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-visible-label {
-  /* stylelint-disable-next-line */
-  padding-inline-start: 0.375rem;
-}
-
 .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
   margin-block-end: 0;
 }
@@ -11794,12 +11783,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .c4p--datagrid__draggable-handleStyle {
-  display: flex;
-  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: grab;
   margin-inline-end: 0.5rem;
 }
 
+.c4p--datagrid__draggable-handleStyle:active,
+.c4p--datagrid__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
 .c4p--datagrid__draggable-handleStyle.disabled {
+  cursor: none;
   pointer-events: none;
 }
 
@@ -11826,7 +11823,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background-color: var(--cds-layer);
   block-size: 3rem;
   border-block-end: 1px solid var(--cds-layer-active);
-  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleHolder:hover {
@@ -11849,11 +11845,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   outline: none;
 }
 
-.c4p--datagrid__draggable-handleHolder:active,
-.c4p--datagrid__draggable-handleHolder--dragging {
-  cursor: grabbing;
-}
-
 .c4p--datagrid__draggable-handleHolder-selected:hover {
   background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
 }
@@ -14224,23 +14215,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer {
   margin-block-end: 1rem;
 }
-.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2 {
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h1 {
   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);
   margin-block-end: 0.5rem;
 }
-.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2:empty {
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h1:empty {
   padding: 0;
 }
-.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3 {
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2 {
   font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
   font-weight: var(--cds-productive-heading-03-font-weight, 400);
   line-height: var(--cds-productive-heading-03-line-height, 1.4);
   letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
 }
-.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3:empty {
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2:empty {
   padding: 0;
 }
 .c4p--interstitial-screen--internal-header--has-title {