@carbon/ibm-products 2.90.0 → 2.91.0

package/css/index.css

@@ -15206,8 +15206,8 @@ button.c4p--add-select__global-filter-toggle--open {
   opacity: 1;
 }
 .c4p--page-header__next .c4p--page-header__content {
-  padding: 1.5rem 0;
   background-color: var(--cds-layer);
+  padding-block-start: 1.5rem;
 }
 @media (max-width: 41.98rem) {
   .c4p--page-header__next .c4p--page-header__content__title-wrapper {
@@ -15297,6 +15297,7 @@ button.c4p--add-select__global-filter-toggle--open {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-block-start: 0.5rem;
   max-inline-size: 40rem;
+  padding-block-end: 1.5rem;
 }
 .c4p--page-header__next [data-hidden]:not([data-fixed]) {
   display: none;
@@ -22394,69 +22395,246 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable declaration-no-important */
-.c4p--carousel {
+/**
+ * Copyright IBM Corp. 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.
+ **/
+/**
+ * Copyright IBM Corp. 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.
+ */
+/**
+ * Copyright IBM Corp. 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.
+ **/
+.carousel__view-stack .carousel__itemsWrapper {
   position: relative;
-  /* stylelint-disable-next-line max-nesting-depth */
-}
-.c4p--carousel:focus {
-  outline: none;
+  overflow: hidden;
+  block-size: 100%;
+  inline-size: 100%;
+  min-inline-size: 20vh;
 }
 
-.c4p--carousel__elements-container {
+:host(.carousel__live-region),
+.carousel__live-region {
+  position: absolute;
   overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  white-space: nowrap;
 }
 
-.c4p--carousel__elements-container--scrolled,
-.c4p--carousel__elements-container--scroll-max {
-  position: absolute;
-  z-index: 1;
-  inline-size: 2rem;
-  inset-block: 0;
-  pointer-events: none;
+:host(.carousel__view),
+.carousel__view {
+  visibility: hidden;
 }
 
-.c4p--carousel__elements-container--scrolled {
-  inset-inline-start: 0;
+:host(.carousel__view-active),
+.carousel__view-active,
+:host(.carousel__view-recycle-out),
+.carousel__view-recycle-out,
+:host(.carousel__view-recycle-in),
+.carousel__view-recycle-in {
+  visibility: visible;
 }
 
-.c4p--carousel__elements-container--scroll-max {
-  inset-inline-end: 0;
+@keyframes out-to-active {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(-200%);
+  }
+}
+@keyframes active-to-out {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+:host(.carousel__view),
+.carousel__view {
+  z-index: 80;
+  overflow: hidden auto;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-inline-start: 100%;
+  transform: translateX(0);
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host(.carousel__view),
+  .carousel__view {
+    transition: transform 240ms cubic-bezier(0.5, 0, 0.1, 1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host(.carousel__view),
+  .carousel__view {
+    animation: none;
+    transition: none;
+  }
 }
 
-.c4p--carousel__elements {
-  display: flex;
-  overflow: scroll;
-  -ms-overflow-style: none;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+:host(.carousel__view:focus),
+.carousel__view:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
 }
-.c4p--carousel__elements:focus {
+@media screen and (prefers-contrast) {
+  :host(.carousel__view:focus),
+  .carousel__view:focus {
+    outline-style: dotted;
+  }
+}
+
+:host(.carousel__view-active),
+.carousel__view-active {
+  z-index: 100;
+  overflow: hidden auto;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-inline-start: 100%;
+  transform: translateX(-100%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host(.carousel__view-active),
+  .carousel__view-active {
+    transition: transform 240ms cubic-bezier(0.5, 0, 0.1, 1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host(.carousel__view-active),
+  .carousel__view-active {
+    animation: none;
+    transition: none;
+  }
+}
+
+:host(.carousel__view-active:focus),
+.carousel__view-active:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .c4p--carousel__elements:focus {
+  :host(.carousel__view-active:focus),
+  .carousel__view-active:focus {
     outline-style: dotted;
   }
 }
-.c4p--carousel__elements {
-  /* stylelint-disable-next-line max-nesting-depth */
+
+:host(.carousel__view-in-stack),
+.carousel__view-in-stack {
+  z-index: 90;
+  overflow: hidden auto;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-inline-start: 100%;
+  transform: translateX(-200%);
 }
-@media (prefers-reduced-motion) {
-  .c4p--carousel__elements {
-    scroll-behavior: auto;
+@media (prefers-reduced-motion: no-preference) {
+  :host(.carousel__view-in-stack),
+  .carousel__view-in-stack {
+    transition: transform 240ms cubic-bezier(0.5, 0, 0.1, 1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host(.carousel__view-in-stack),
+  .carousel__view-in-stack {
+    animation: none;
+    transition: none;
   }
 }
 
-.c4p--carousel__elements::-webkit-scrollbar {
-  display: none;
+:host(.carousel__view-in-stack:focus),
+.carousel__view-in-stack:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  :host(.carousel__view-in-stack:focus),
+  .carousel__view-in-stack:focus {
+    outline-style: dotted;
+  }
+}
+
+:host(.carousel__view-recycle-in),
+.carousel__view-recycle-in {
+  z-index: 100;
+  overflow: hidden auto;
+  block-size: 100%;
+  inline-size: 100%;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host(.carousel__view-recycle-in),
+  .carousel__view-recycle-in {
+    animation: out-to-active 240ms cubic-bezier(0.5, 0, 0.1, 1) forwards;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host(.carousel__view-recycle-in),
+  .carousel__view-recycle-in {
+    animation: none;
+    transition: none;
+  }
+}
+
+:host(.carousel__view-recycle-in:focus),
+.carousel__view-recycle-in:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  :host(.carousel__view-recycle-in:focus),
+  .carousel__view-recycle-in:focus {
+    outline-style: dotted;
+  }
+}
+
+:host(.carousel__view-recycle-out),
+.carousel__view-recycle-out {
+  z-index: 90;
+  overflow: hidden auto;
+  block-size: 100%;
+  inline-size: 100%;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host(.carousel__view-recycle-out),
+  .carousel__view-recycle-out {
+    animation: active-to-out 240ms cubic-bezier(0.5, 0, 0.1, 1) forwards;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host(.carousel__view-recycle-out),
+  .carousel__view-recycle-out {
+    animation: none;
+    transition: none;
+  }
+}
+
+:host(.carousel__view-recycle-out:focus),
+.carousel__view-recycle-out:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  :host(.carousel__view-recycle-out:focus),
+  .carousel__view-recycle-out:focus {
+    outline-style: dotted;
+  }
 }
 
 .c4p--interstitial-screen--body {
@@ -23304,6 +23482,71 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 /* stylelint-disable max-nesting-depth */
+.c4p--carousel {
+  position: relative;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.c4p--carousel:focus {
+  outline: none;
+}
+
+.c4p--carousel__elements-container {
+  overflow: hidden;
+}
+
+.c4p--carousel__elements-container--scrolled,
+.c4p--carousel__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  inline-size: 2rem;
+  inset-block: 0;
+  pointer-events: none;
+}
+
+.c4p--carousel__elements-container--scrolled {
+  inset-inline-start: 0;
+}
+
+.c4p--carousel__elements-container--scroll-max {
+  inset-inline-end: 0;
+}
+
+.c4p--carousel__elements {
+  display: flex;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.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;
+  }
+}
+.c4p--carousel__elements {
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion) {
+  .c4p--carousel__elements {
+    scroll-behavior: auto;
+  }
+}
+
+.c4p--carousel__elements::-webkit-scrollbar {
+  display: none;
+}
+
 .c4p--coachmark-overlay-elements__element-stepped-media {
   padding: 0 1rem;
   /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */