@carbon/ibm-products 2.3.2 → 2.4.1

package/css/index.css

@@ -820,15 +820,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xs {
+.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-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-constraint--size__max-xs {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
@@ -837,15 +837,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-sm {
+.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-constraint--size__min-sm {
   --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
 }
 
-.cds--layout-constraint--size\:max-sm {
+.cds--layout-constraint--size__max-sm {
   --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
 }
 
@@ -854,15 +854,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-md {
+.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-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-constraint--size__max-md {
   --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
 }
 
@@ -871,15 +871,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-lg {
+.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-constraint--size__min-lg {
   --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
 }
 
-.cds--layout-constraint--size\:max-lg {
+.cds--layout-constraint--size__max-lg {
   --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
 }
 
@@ -888,15 +888,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xl {
+.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-constraint--size__min-xl {
   --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
 }
 
-.cds--layout-constraint--size\:max-xl {
+.cds--layout-constraint--size__max-xl {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
 }
 
@@ -905,15 +905,15 @@
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-2xl {
+.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-constraint--size__min-2xl {
   --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
 }
 
-.cds--layout-constraint--size\:max-2xl {
+.cds--layout-constraint--size__max-2xl {
   --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
 }
 
@@ -922,15 +922,15 @@
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-condensed {
+.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-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-constraint--density__max-condensed {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
@@ -939,15 +939,15 @@
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-normal {
+.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-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-constraint--density__max-normal {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
@@ -1157,6 +1157,7 @@
   padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
 }
 .cds--btn--icon-only > :first-child {
+  min-width: 1rem;
   margin-block-start: 0.0625rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
@@ -1448,6 +1449,15 @@
 .cds--modal .cds--number__rule-divider {
   background-color: var(--cds-border-subtle-02, #e0e0e0);
 }
+.cds--modal .cds--list-box__menu-item__option {
+  border-top-color: var(--cds-border-subtle-02, #e0e0e0);
+}
+.cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
+  border-top-color: var(--cds-layer-hover);
+}
+.cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
+  border-top-color: var(--cds-layer-selected-hover);
+}
 .cds--modal .cds--text-input--fluid .cds--text-input,
 .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
 .cds--modal .cds--text-area--fluid .cds--text-area,
@@ -2780,6 +2790,20 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-button-danger-primary, #da1e28);
 }
 
+.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
+.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
+  margin-left: auto;
+}
+
 .cds--tabs {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -5937,8 +5961,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
-.cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
-.cds--toggle:active .cds--toggle__switch {
+.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
   box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
 }
 
@@ -6038,13 +6061,72 @@ a.cds--overflow-menu-options__btn::before {
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
-  .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
-  .cds--toggle:active .cds--toggle__switch {
+  .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
+.cds--toggle--skeleton {
+  display: flex;
+  align-items: center;
+}
+
+.cds--toggle--skeleton .cds--toggle__skeleton-circle {
+  position: relative;
+  overflow: hidden;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+}
+.cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
+  position: absolute;
+  width: 200%;
+  height: 100%;
+  animation: 3000ms ease-in-out skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  content: "";
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
+    animation: none;
+  }
+}
+
+.cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  box-shadow: none;
+  pointer-events: none;
+  width: 1.5rem;
+  height: 0.5rem;
+  margin-left: 0.5rem;
+}
+.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: 3000ms ease-in-out skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  content: "";
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
+    animation: none;
+  }
+}
+
 @keyframes influencer-menu-entrance {
   0% {
     opacity: 0;
@@ -6944,6 +7026,9 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
   width: 100%;
 }
+.c4p--tearsheet.c4p--tearsheet--wide .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
+  height: 5rem;
+}
 @media (min-width: 42rem) {
   .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
     width: calc(100% - (2 * 4rem));
@@ -12618,6 +12703,7 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-left: 0.625rem;
   /* stylelint-disable-next-line max-nesting-depth */
   /* stylelint-disable-next-line max-nesting-depth */
+  /* stylelint-disable-next-line max-nesting-depth */
 }
 .c4p--card__productive .c4p--card__actions-header-ghost-button::before {
   position: absolute;
@@ -12634,6 +12720,18 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
   opacity: 0;
 }
+.c4p--card__productive .c4p--card__actions-header-ghost-button:hover + .c4p--card__actions-header-ghost-button {
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.c4p--card__productive .c4p--card__actions-header-ghost-button:hover + .c4p--card__actions-header-ghost-button::before {
+  opacity: 0;
+}
+.c4p--card__productive .c4p--card__actions-header-ghost-button:first-child:not(:last-child) {
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.c4p--card__productive .c4p--card__actions-header-ghost-button:first-child:not(:last-child)::before {
+  display: none;
+}
 .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
 .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
   margin-top: 0;
@@ -13687,11 +13785,8 @@ button.c4p--add-select__global-filter-toggle--open {
 .cds--popover {
   position: absolute;
   z-index: 6000;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   filter: var(--cds-popover-drop-shadow, none);
+  inset: 0;
   pointer-events: none;
 }
 
@@ -17452,14 +17547,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
   display: none;
 }
-.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
-  left: 0.125rem;
-  width: 112px;
+
+.c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0;
 }
 
-.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
-  left: 0.125rem;
-  width: 112px;
+.c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
+  padding: 1rem;
+  background-color: var(--cds-layer);
 }
 
 .c4p--datagrid__datagridWrap-simple {
@@ -17478,6 +17578,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--edit-update-cards#c4p--edit-update-cards--edit {
   /* Used id for overriding the SVG path fill */
 }
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button,
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button {
+  color: #ffffff;
+}
 .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
 .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
   background-color: #0050e6;
@@ -17508,6 +17612,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
   background-color: transparent;
 }
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header-container {
+  align-items: center;
+}
 .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
   background-color: #0f62fe;
   color: #ffffff;