@carbon/ibm-products 2.83.0 → 2.84.0

package/css/index.css

@@ -8415,7 +8415,7 @@ a.cds--overflow-menu-options__btn::before {
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
   100% {
     opacity: 1;
@@ -8426,7 +8426,7 @@ a.cds--overflow-menu-options__btn::before {
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
   100% {
     opacity: 1;
@@ -8441,7 +8441,7 @@ a.cds--overflow-menu-options__btn::before {
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
 }
 @keyframes side-panel-exit-left {
@@ -8452,7 +8452,7 @@ a.cds--overflow-menu-options__btn::before {
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 }
 @property --panel-transform {
@@ -8891,6 +8891,21 @@ 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 {
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, 16rem), 100%);
+}
+
+.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% {
@@ -9397,9 +9412,6 @@ a.cds--overflow-menu-options__btn::before {
     transition: none;
   }
 }
-.c4p--tearsheet.c4p--tearsheet:not(.is-visible).c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
-  transform: translate3d(0, min(95vh, 500px), 0);
-}
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
   /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
   background: initial;
@@ -9671,6 +9683,61 @@ a.cds--overflow-menu-options__btn::before {
   margin-block: 6px;
   margin-inline-end: 1rem;
 }
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet {
+  animation: c4p--tearsheet--presence-tearsheet__enter 240ms cubic-bezier(0, 0, 0.3, 1);
+  opacity: 1;
+}
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+  animation: c4p--tearsheet--presence-tearsheet--container__enter 240ms cubic-bezier(0, 0, 0.3, 1);
+  transform: translate3d(0, 0, 0);
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+    animation: none;
+  }
+}
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
+  transform: scale(var(--c4p--tearsheet--stacking-scale-factor-single));
+}
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
+  transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
+}
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet[data-tearsheet-exiting] {
+  animation: c4p--tearsheet--presence-tearsheet__exit 240ms cubic-bezier(0.4, 0.14, 1, 1) forwards;
+}
+.c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet[data-tearsheet-exiting].c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+  animation: c4p--tearsheet--presence-tearsheet--container__exit 240ms cubic-bezier(0, 0, 0.3, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet.c4p--tearsheet--tearsheet-enable-presence.c4p--tearsheet[data-tearsheet-exiting].c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+    animation: none;
+  }
+}
+@keyframes c4p--tearsheet--presence-tearsheet__enter {
+  from {
+    opacity: 0;
+    transition: none;
+  }
+}
+@keyframes c4p--tearsheet--presence-tearsheet__exit {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes c4p--tearsheet--presence-tearsheet--container__enter {
+  from {
+    transform: translate3d(0, min(95vh, 500px), 0);
+    transition: none;
+  }
+}
+@keyframes c4p--tearsheet--presence-tearsheet--container__exit {
+  to {
+    transform: translate3d(0, min(95vh, 500px), 0);
+  }
+}
+.c4p--tearsheet:not(.c4p--tearsheet--tearsheet-enable-presence).c4p--tearsheet:not(.is-visible).c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+  transform: translate3d(0, min(95vh, 500px), 0);
+}
 
 @keyframes step-content-entrance {
   0% {
@@ -11492,9 +11559,6 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--add-select__column-search-bar {
   display: flex;
 }
-.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);
 }
@@ -11746,6 +11810,7 @@ button.c4p--add-select__global-filter-toggle--open {
   border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
   border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
   box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(0, 0, 0, 0.6));
+  clip-path: inset(0 calc(-1 * var(--cds-spacing-01)) calc(-1 * var(--cds-spacing-02)) calc(-1 * var(--cds-spacing-01)));
   color: var(--cds-text-primary, #161616);
   inset-block-start: 3rem;
   inset-inline-end: 0;
@@ -14516,10 +14581,12 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item-content {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   inline-size: 100%;
 }
 .c4p--action-bar-overflow-items__options .c4p--action-bar-overflow-items__item svg {
+  flex-shrink: 0;
   margin: 0 0.25rem;
 }
 
@@ -14696,7 +14763,6 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--tag .cds--tag {
   background-color: var(--cds-background-inverse-hover, #474747);
-  margin-block-end: 0.125rem;
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default,
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default .cds--tag {
@@ -15309,7 +15375,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 1;
   background-color: var(--cds-layer);
-  block-size: 2.5rem;
+  block-size: to-rem(40px);
   /* stylelint-disable-next-line carbon/layout-use */
   inset-block-start: var(--c4p-page-header-breadcrumb-top);
 }
@@ -15318,11 +15384,11 @@ button.c4p--add-select__global-filter-toggle--open {
   block-size: 100%;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--css-grid .cds--css-grid-column {
-  block-size: 2.5rem;
+  block-size: to-rem(40px);
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--css-grid .cds--css-grid-column,
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .c4p--page-header__breadcrumb-container {
-  block-size: 2.5rem;
+  block-size: to-rem(40px);
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--css-grid .cds--css-grid-column .c4p--page-header__breadcrumb-wrapper,
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar .c4p--page-header__breadcrumb-container .c4p--page-header__breadcrumb-wrapper {
@@ -15357,7 +15423,7 @@ button.c4p--add-select__global-filter-toggle--open {
   inline-size: 100%;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb__content-actions {
-  inline-size: fit-content;
+  inline-size: 100%;
   margin-inline-end: 0.75rem;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper {
@@ -15394,7 +15460,7 @@ button.c4p--add-select__global-filter-toggle--open {
   gap: 1rem;
   grid-template-columns: auto minmax(var(--page-header-title-grid-width, 0), 1fr);
   margin-block-end: 1rem;
-  min-block-size: 2.5rem;
+  min-block-size: to-rem(40px);
 }
 .c4p--page-header__next .c4p--page-header__content__start {
   display: flex;
@@ -15419,7 +15485,7 @@ button.c4p--add-select__global-filter-toggle--open {
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  max-inline-size: 40rem;
+  max-inline-size: to-rem(640px);
   text-overflow: ellipsis;
   white-space: normal;
 }
@@ -15464,7 +15530,7 @@ button.c4p--add-select__global-filter-toggle--open {
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-block-start: 0.5rem;
-  max-inline-size: 40rem;
+  max-inline-size: to-rem(640px);
 }
 .c4p--page-header__next [data-hidden]:not([data-fixed]) {
   display: none;
@@ -20347,7 +20413,7 @@ a.cds--side-nav__link--current::before {
 }
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20427,7 +20493,7 @@ a.cds--side-nav__link--current::before {
 }
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20455,7 +20521,7 @@ a.cds--side-nav__link--current::before {
 }
 
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20714,7 +20780,7 @@ a.cds--side-nav__link--current::before {
 }
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20883,17 +20949,17 @@ a.cds--side-nav__link--current::before {
     inline-size: 0;
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
   100% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
 }
 @keyframes filter-panel-exit-left {
   0% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
@@ -20901,7 +20967,7 @@ a.cds--side-nav__link--current::before {
     inline-size: 0;
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 }
 @property --panel-transform {
@@ -21055,6 +21121,7 @@ a.cds--side-nav__link--current::before {
   inset-block-end: 0;
   margin-block-start: auto;
   opacity: 1;
+  /* stylelint-disable-next-line carbon/layout-use */
   transform: translateY(64px) translateZ(0);
 }
 .c4p--datagrid-filter-panel__action-set.c4p--datagrid-filter-panel__animationComplete {
@@ -21118,7 +21185,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21293,7 +21360,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21672,11 +21739,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 /* stylelint-disable max-nesting-depth */
-@property --panel-transform {
-  inherits: true;
-  initial-value: 16px;
-  syntax: "<length>";
-}
 .c4p--filter-summary {
   display: flex;
   align-items: center;