@carbon/ibm-products 2.70.0 → 2.71.0-rc.0

package/css/index-without-carbon-released-only.css

@@ -2531,6 +2531,61 @@ p.c4p--about-modal__copyright-text:first-child {
   white-space: nowrap;
 }
 
+/**
+ * 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.
+ */
+.clabs__resizer {
+  position: relative;
+  flex: none;
+  background-color: var(--cds-border-subtle);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .clabs__resizer:hover {
+    background-color: var(--cds-border-interactive, #0f62fe);
+    transition: background-color 150ms;
+  }
+}
+.clabs__resizer:focus {
+  background-color: var(--cds-border-interactive, #0f62fe);
+  outline: none;
+}
+.clabs__resizer:active {
+  background-color: var(--cds-border-interactive, #0f62fe);
+}
+.clabs__resizer:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+.clabs__resizer--horizontal {
+  block-size: 0.25rem;
+  cursor: ns-resize;
+}
+.clabs__resizer--vertical {
+  cursor: ew-resize;
+  inline-size: 0.25rem;
+}
+
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .smooth-resize {
+    transition: all 150ms linear;
+  }
+}
+
 @keyframes side-panel-entrance-reduced {
   0% {
     opacity: 0;
@@ -3097,49 +3152,6 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
-.clabs__resizer {
-  position: relative;
-  flex: none;
-  background-color: var(--cds-border-subtle-01, #c6c6c6);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .clabs__resizer:hover {
-    background-color: var(--cds-border-interactive, #0f62fe);
-    transition: background-color 150ms;
-  }
-}
-.clabs__resizer:focus {
-  background-color: var(--cds-border-interactive, #0f62fe);
-  outline: none;
-}
-.clabs__resizer:active {
-  background-color: var(--cds-border-interactive, #0f62fe);
-}
-.clabs__resizer:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: none;
-}
-.clabs__resizer--horizontal {
-  block-size: 0.25rem;
-  cursor: ns-resize;
-}
-.clabs__resizer--vertical {
-  cursor: ew-resize;
-  inline-size: 0.25rem;
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  white-space: nowrap;
-}
-
 .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
   padding-inline-end: calc(20% - 1rem);
 }
@@ -9603,6 +9615,163 @@ button.c4p--add-select__global-filter-toggle--open {
   min-inline-size: 0;
 }
 
+.c4p--page-header__next.c4p--page-header {
+  background-color: var(--cds-layer-01, #f4f4f4);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar {
+  block-size: 2.5rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--subgrid {
+  block-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions-flush .cds--css-grid {
+  padding-inline-end: 0;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions-flush .cds--css-grid-column {
+  margin-inline-end: 0;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar-border {
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__icon {
+  margin-inline-end: 0.5rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions {
+  display: inline-flex;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__content-actions {
+  margin-inline-end: 0.75rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper {
+  display: inline-flex;
+}
+.c4p--page-header__next .c4p--page-header__content {
+  padding: 1.5rem 0;
+}
+.c4p--page-header__next .c4p--page-header__content__title-wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto minmax(var(--page-header-title-grid-width, 0), 1fr);
+  margin-block-end: 1rem;
+  min-block-size: 2.5rem;
+}
+@media (max-width: 41.98rem) {
+  .c4p--page-header__next .c4p--page-header__content__title-wrapper {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+  }
+}
+.c4p--page-header__next .c4p--page-header__content__start {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__content__title-container {
+  display: flex;
+}
+.c4p--page-header__next .c4p--page-header__content__title-container .cds--definition-term {
+  border-block-end: none;
+}
+.c4p--page-header__next .c4p--page-header__content__contextual-actions {
+  display: flex;
+}
+.c4p--page-header__next .c4p--page-header__content__title {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-inline-size: 40rem;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+.c4p--page-header__next .c4p--page-header__content:has(.c4p--page-header__content__contextual-actions) .c4p--page-header__content__title {
+  -webkit-line-clamp: 1;
+}
+.c4p--page-header__next .c4p--page-header__content__icon {
+  margin-inline-end: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__content__page-actions {
+  display: flex;
+  justify-content: right;
+}
+@media (max-width: 41.98rem) {
+  .c4p--page-header__next .c4p--page-header__content__page-actions {
+    justify-content: left;
+    margin-block-start: 0;
+  }
+}
+.c4p--page-header__next .c4p--page-header__content__page-actions .cds--menu-button__trigger:not(.cds--btn--ghost) {
+  min-inline-size: 0;
+}
+.c4p--page-header__next .c4p--page-header__content__subtitle {
+  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-productive-heading-03-font-weight, 400);
+  line-height: var(--cds-productive-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+  margin-block-end: 0.5rem;
+}
+.c4p--page-header__next .c4p--page-header__content__body {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  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;
+}
+.c4p--page-header__next [data-hidden]:not([data-fixed]) {
+  display: none;
+}
+.c4p--page-header__next .c4p--page-header__hero-image {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar {
+  margin-inline-start: -1rem;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar--tablist {
+  display: grid;
+  grid-gap: 4rem;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button.cds--tab--overflow-nav-button--next::before {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-01, #f4f4f4));
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button.cds--tab--overflow-nav-button--previous::before {
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-01, #f4f4f4));
+}
+.c4p--page-header__next .c4p--page-header__tags {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+.c4p--page-header__next .c4p--page-header__tags-popover-list {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__tag-item {
+  flex-shrink: 0;
+}
+
 .c4p--card__productive {
   display: flex;
   flex-direction: column;
@@ -11700,4 +11869,179 @@ button.c4p--add-select__global-filter-toggle--open {
   inline-size: 1.5rem;
 }
 
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable declaration-no-important */
+.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;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.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;
+  }
+}
+@media (prefers-reduced-motion) {
+  .c4p--carousel__elements {
+    scroll-behavior: auto;
+  }
+}
+
+.c4p--carousel__elements::-webkit-scrollbar {
+  display: none;
+}
+
+.c4p--interstitial-screen--body {
+  overflow: hidden auto;
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+  background-color: var(--cds-background, #ffffff);
+}
+.c4p--interstitial-screen--progress {
+  margin-block-end: 0.75rem;
+}
+.c4p--interstitial-screen__carousel {
+  block-size: 100%;
+}
+.c4p--interstitial-screen__carousel .c4p--carousel__item {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+}
+.c4p--interstitial-screen--internal-body {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.c4p--interstitial-screen--content {
+  block-size: 100%;
+}
+.c4p--interstitial-screen--internal-header {
+  position: relative;
+  background-color: var(--cds-background, #ffffff);
+  margin-block-end: 0 !important;
+  min-block-size: 3rem;
+  padding-block-start: 1.5rem;
+  padding-inline-start: 2rem !important;
+}
+.c4p--interstitial-screen--internal-header:empty {
+  min-block-size: 0;
+}
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer {
+  margin-block-end: 1rem;
+}
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h1 {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+  margin-block-end: 0.5rem;
+}
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h1:empty {
+  padding: 0;
+}
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2 {
+  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-productive-heading-03-font-weight, 400);
+  line-height: var(--cds-productive-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+}
+.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2:empty {
+  padding: 0;
+}
+.c4p--interstitial-screen--internal-header--has-title {
+  background: var(--cds-layer-01, #f4f4f4);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+.c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
+  margin-block-start: 0;
+}
+.c4p--interstitial-screen--footer {
+  display: flex;
+  box-sizing: initial;
+  flex-direction: row;
+  justify-content: flex-end;
+  background: var(--cds-background, #ffffff);
+  border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  inline-size: 100%;
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--prev-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--next-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--start-btn {
+  inline-size: 18.75%;
+  min-inline-size: 12.5rem;
+  padding-block-end: 2rem;
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+  flex-grow: 1 !important;
+  max-inline-size: none;
+  padding-inline-start: 2rem;
+}
+.c4p--interstitial-screen--footer .cds--inline-loading {
+  position: absolute;
+  inline-size: 2rem;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+.c4p--interstitial-screen--footer-controls {
+  display: flex;
+  flex-direction: row;
+  margin-inline-start: auto;
+}
+.c4p--interstitial-screen--full-screen {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--container {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  block-size: 100vh;
+  max-inline-size: 100vw;
+}
+
 /*# sourceMappingURL=index-without-carbon-released-only.css.map */