@carbon/ibm-products-styles 2.57.0 → 2.58.0-rc.0

package/css/index.css

@@ -7922,20 +7922,20 @@ a.cds--overflow-menu-options__btn::before {
   .c4p--side-panel {
     /* styles to apply if a user's device settings are set to reduced motion */
   }
-  .c4p--side-panel.c4p--side-panel--open {
+  .c4p--side-panel.c4p--side-panel--open.c4p--side-panel--right-placement, .c4p--side-panel.c4p--side-panel--open.c4p--side-panel--left-placement {
     animation: side-panel-entrance-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
   }
   @starting-style {
-    .c4p--side-panel.c4p--side-panel--open {
+    .c4p--side-panel.c4p--side-panel--open.c4p--side-panel--right-placement, .c4p--side-panel.c4p--side-panel--open.c4p--side-panel--left-placement {
       opacity: 0;
       transform: translateX(0);
     }
   }
-  .c4p--side-panel.c4p--side-panel--closing {
+  .c4p--side-panel.c4p--side-panel--closing.c4p--side-panel--left-placement, .c4p--side-panel.c4p--side-panel--closing.c4p--side-panel--right-placement {
     animation: side-panel-exit-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
   }
   @starting-style {
-    .c4p--side-panel.c4p--side-panel--closing {
+    .c4p--side-panel.c4p--side-panel--closing.c4p--side-panel--left-placement, .c4p--side-panel.c4p--side-panel--closing.c4p--side-panel--right-placement {
       opacity: 1;
       transform: translateX(0);
     }
@@ -8573,17 +8573,8 @@ a.cds--overflow-menu-options__btn::before {
   background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
 }
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-area,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--search-input,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select-input,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
-  background-color: var(--cds-field);
+.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--radio-button[readonly] + .cds--radio-button__label .cds--radio-button__appearance {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
   background-color: transparent;
@@ -10610,7 +10601,7 @@ button.c4p--add-select__global-filter-toggle--open {
   z-index: 9000;
 }
 
-@keyframes fade-in {
+@keyframes notifications-panel-fade-in {
   0% {
     opacity: 0;
     transform: translateY(-38.5rem);
@@ -10620,7 +10611,7 @@ button.c4p--add-select__global-filter-toggle--open {
     transform: translateY(0);
   }
 }
-@keyframes fade-out {
+@keyframes notifications-panel-fade-out {
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -10630,20 +10621,38 @@ button.c4p--add-select__global-filter-toggle--open {
     transform: translateY(-38.5rem);
   }
 }
+@keyframes notifications-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes notifications-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 .c4p--notifications-panel__entrance {
-  animation: fade-in 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation: notifications-panel-fade-in 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .c4p--notifications-panel__exit {
-  animation: fade-out forwards 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation: notifications-panel-fade-out 240ms cubic-bezier(0.2, 0, 0.38, 0.9) forwards;
 }
 
 @media (prefers-reduced-motion) {
-  .c4p--notifications-panel {
-    animation: none;
+  .c4p--notifications-panel__entrance {
+    animation: notifications-panel-entrance-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
+  }
+  .c4p--notifications-panel__exit {
+    animation: notifications-panel-exit-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
   }
 }
-
 .c4p--notifications-panel__container {
   position: fixed;
   z-index: 2;
@@ -18986,6 +18995,109 @@ a.cds--side-nav__link--current::before {
   grid-template-columns: 1fr;
 }
 
+@keyframes filter-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes filter-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes filter-panel-entrance-left {
+  0% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+  100% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes filter-panel-exit-left {
+  0% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+}
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: "<integer>";
+}
+.c4p--datagrid-filter-panel {
+  --panel-transform: 320px;
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity, transform;
+}
+@starting-style {
+  .c4p--datagrid-filter-panel {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+}
+.c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--open.c4p--datagrid-filter-panel--left-placement {
+  animation: filter-panel-entrance-left 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
+}
+.c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--closing.c4p--datagrid-filter-panel--left-placement {
+  animation: filter-panel-exit-left 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
+}
+@supports (transition-behavior: allow-discrete) {
+  .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--closing {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform, 320px));
+    transition-duration: 150ms;
+  }
+  .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--closing.c4p--datagrid-filter-panel--left-placement {
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(-1 * var(--panel-transform, 320px)));
+  }
+}
+@media (prefers-reduced-motion) {
+  .c4p--datagrid-filter-panel {
+    /* styles to apply if a user's device settings are set to reduced motion */
+  }
+  .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--open.c4p--datagrid-filter-panel--left-placement {
+    animation: filter-panel-entrance-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
+  }
+  @starting-style {
+    .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--open.c4p--datagrid-filter-panel--left-placement {
+      opacity: 0;
+      transform: translateX(0);
+    }
+  }
+  .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--closing.c4p--datagrid-filter-panel--left-placement {
+    animation: filter-panel-exit-reduced 150ms cubic-bezier(0.2, 0, 1, 0.9) forwards;
+  }
+  @starting-style {
+    .c4p--datagrid-filter-panel.c4p--datagrid-filter-panel--closing.c4p--datagrid-filter-panel--left-placement {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
 .c4p--datagrid-filter-panel__container {
   position: relative;
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -19075,6 +19187,14 @@ a.cds--side-nav__link--current::before {
   block-size: 4rem;
   inset-block-end: 0;
   margin-block-start: auto;
+  opacity: 1;
+  transform: translateY(64px) translateZ(0);
+}
+.c4p--datagrid-filter-panel__action-set.c4p--datagrid-filter-panel__animationComplete {
+  transform: none;
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity, transform;
 }
 
 .c4p--datagrid-filter-panel__container .cds--accordion__title {
@@ -19681,6 +19801,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 /* stylelint-disable max-nesting-depth */
+@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;
+  syntax: "<length>";
+}
 .c4p--filter-summary {
   display: flex;
   align-items: flex-start;
@@ -19694,6 +19832,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .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;
@@ -22369,6 +22510,13 @@ th.c4p--datagrid__select-all-toggle-on.button {
   margin-block-end: 2rem;
 }
 
+.c4p--full-page-error__body {
+  font-size: var(--cds-body-02-font-size, 1rem);
+  font-weight: var(--cds-body-02-font-weight, 400);
+  line-height: var(--cds-body-02-line-height, 1.5);
+  letter-spacing: var(--cds-body-02-letter-spacing, 0);
+}
+
 .c4p--full-page-error__svg-container svg.c4p--full-page-error__svg {
   inline-size: 100%;
 }