@carbon/ibm-products 2.36.0 → 2.38.0-alpha.5

package/css/index.css

@@ -2442,14 +2442,14 @@
 }
 
 .cds--modal--slug .cds--modal-container {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   background-color: var(--cds-layer);
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
 .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
@@ -3071,6 +3071,10 @@ fieldset[disabled] .cds--form__helper-text {
   transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--toggle-password-tooltip .cds--popover {
+  inset-inline-start: -2.5rem;
+}
+
 .cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
   inline-size: 2rem;
 }
@@ -7582,7 +7586,7 @@ a.cds--overflow-menu-options__btn::before {
   padding-top: 0.5rem;
 }
 .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 .c4p--side-panel .c4p--side-panel__action-toolbar {
@@ -7763,7 +7767,7 @@ a.cds--overflow-menu-options__btn::before {
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms;
+  transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
@@ -7988,7 +7992,7 @@ a.cds--overflow-menu-options__btn::before {
   flex-grow: 1;
 }
 .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content {
-  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%, 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;
+  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,
@@ -8869,7 +8873,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--card--has-slug {
-  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
@@ -18838,6 +18842,61 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 /* 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;
+  top: 0;
+  bottom: 0;
+  width: 2rem;
+  pointer-events: none;
+}
+
+.c4p--carousel__elements-container--scrolled {
+  left: 0;
+}
+
+.c4p--carousel__elements-container--scroll-max {
+  right: 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 */
+}
+@media (prefers-reduced-motion) {
+  .c4p--carousel__elements {
+    scroll-behavior: auto;
+  }
+}
+
+.c4p--carousel__elements::-webkit-scrollbar {
+  display: none;
+}
+
 .c4p--interstitial-screen {
   position: fixed;
   z-index: 6001;
@@ -22823,4 +22882,268 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   overflow-y: auto;
 }
 
+.c4p--condition-builder__content-container * {
+  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);
+}
+
+.c4p--condition-builder__condition-builder-item__content {
+  overflow: auto;
+  min-width: 12rem;
+  max-width: 20rem;
+  max-height: 22rem;
+}
+
+.c4p--condition-builder__condition-builder-item__title {
+  font-size: var(--cds-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-01-font-weight, 600);
+  line-height: var(--cds-heading-01-line-height, 1.42857);
+  letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
+  padding: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__search {
+  padding-block-end: 1rem;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option {
+  height: 2rem;
+  cursor: pointer;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: 0.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c4p--condition-builder__condition-builder-item-option > ul[aria-multiSelectable=true] .c4p--condition-builder__condition-builder-item-option__option-label {
+  justify-content: center;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:not(:first-of-type) .c4p--condition-builder__condition-builder-item-option__option-content {
+  border-block-start: 0.0625rem solid var(--cds-border-subtle);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:hover .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option:hover + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content,
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content {
+  border-block-start-color: transparent;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] {
+  background-color: var(--cds-layer-selected);
+}
+
+.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true]:hover {
+  background-color: var(--cds-layer-selected-hover);
+}
+
+.c4p--condition-builder__condition-builder-item-date,
+.c4p--condition-builder__condition-builder-item-text,
+.c4p--condition-builder__condition-builder-item-number,
+c4p--condition-builder__condition-builder-item-time {
+  padding-block-end: 1rem;
+  padding-inline: 1rem;
+}
+
+.c4p--condition-builder__condition-builder-checkmark {
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-builder-button {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  inline-size: 100%;
+  display: inline-flex;
+  height: 2rem;
+  align-items: center;
+  background-color: var(--cds-layer);
+  color: inherit;
+  column-gap: 0.25rem;
+  cursor: pointer;
+  padding-inline: 0.5rem;
+  white-space: nowrap;
+}
+.c4p--condition-builder__condition-builder-button *,
+.c4p--condition-builder__condition-builder-button *::before,
+.c4p--condition-builder__condition-builder-button *::after {
+  box-sizing: inherit;
+}
+.c4p--condition-builder__condition-builder-button::-moz-focus-inner {
+  border: 0;
+}
+
+.c4p--condition-builder__condition-builder-button:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder__group.hoveredConnector .c4p--condition-builder__condition-wrapper > .conditionBlockWrapper .c4p--condition-builder__connector-button {
+  background-color: var(--cds-layer-hover);
+}
+
+.c4p--condition-builder__condition-builder-button:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  content: "";
+  inset: 0;
+}
+@media screen and (prefers-contrast) {
+  .c4p--condition-builder__condition-builder-button:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button {
+  min-width: 4rem;
+  padding-inline: 0.5rem;
+}
+
+.c4p--condition-builder__property-field {
+  font-size: var(--cds-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-01-font-weight, 600);
+  line-height: var(--cds-heading-01-line-height, 1.42857);
+  letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
+  padding-left: 0.5rem;
+}
+
+.c4p--condition-builder__close-condition {
+  padding-right: 0.5rem;
+}
+
+.c4p--condition-builder__add-button {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c4p--condition-builder__conditionWrapper {
+  display: flex;
+}
+
+.c4p--condition-builder__multiselectSelectionStatusContainer {
+  display: flex;
+  align-items: center;
+  padding-inline: 1rem;
+}
+.c4p--condition-builder__multiselectSelectionStatusContainer .c4p--condition-builder__selectAll-button {
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-builder-item-option__option:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .c4p--condition-builder__condition-builder-item-option__option:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__groupOperatorConnector {
+  margin-bottom: 0.25rem;
+}
+
+.c4p--condition-builder__option-check-box {
+  display: flex;
+  margin-right: 0.5rem;
+}
+
+.c4p--condition-builder__option-icon {
+  align-self: center;
+  margin-left: auto;
+}
+
+.c4p--condition-builder__condition-block,
+.c4p--condition-builder__condition-block .c4p--condition-builder__block {
+  position: relative;
+  display: inline-flex;
+}
+
+[role=row]:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
+}
+@media screen and (prefers-contrast) {
+  [role=row]:focus {
+    outline-style: dotted;
+  }
+}
+
+.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button) {
+  background-color: var(--cds-tag-background-red, #ffd7d9);
+  color: var(--cds-tag-color-red, #750e13);
+}
+
+.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__connector-button):hover {
+  background-color: var(--cds-tag-hover-red, #ffc2c5);
+}
+
+.c4p--condition-builder__text-ellipsis {
+  display: block;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.c4p--condition-builder__condition-builder__group {
+  display: flex;
+}
+
+.c4p--condition-builder__condition-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.c4p--condition-builder__gap {
+  margin-right: 0.125rem;
+}
+
+.c4p--condition-builder__gap-bottom {
+  margin-bottom: 0.125rem;
+}
+
+.c4p--condition-builder__gap-left {
+  margin-left: 0.125rem;
+}
+
+.c4p--condition-builder__condition-block {
+  display: flex;
+  flex-direction: row;
+}
+
 /*# sourceMappingURL=index.css.map */