@carbon/ibm-products 2.90.0 → 2.91.0

package/css/index-full-carbon.css

@@ -8190,8 +8190,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 {
@@ -8281,6 +8281,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;
@@ -16121,6 +16122,248 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable declaration-no-important */
+/**
+ * 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;
+  overflow: hidden;
+  block-size: 100%;
+  inline-size: 100%;
+  min-inline-size: 20vh;
+}
+
+: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;
+}
+
+:host(.carousel__view),
+.carousel__view {
+  visibility: hidden;
+}
+
+: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;
+}
+
+@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;
+  }
+}
+
+:host(.carousel__view:focus),
+.carousel__view:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@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) {
+  :host(.carousel__view-active:focus),
+  .carousel__view-active:focus {
+    outline-style: dotted;
+  }
+}
+
+: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: 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;
+  }
+}
+
+: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 {
   overflow: hidden auto;
   flex-grow: 1;