@carbon/styles 1.44.0-rc.0 → 1.44.0

package/css/styles.css

@@ -2844,9 +2844,19 @@ em {
   --cds-slug-background: #525252;
   --cds-slug-background-hover: #6f6f6f;
   --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
+  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
+  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
   --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
   --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
   --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -3028,9 +3038,19 @@ em {
   --cds-slug-background: #525252;
   --cds-slug-background-hover: #6f6f6f;
   --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
+  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
+  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
   --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
   --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
   --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -3211,9 +3231,17 @@ em {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
   --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -3393,9 +3421,17 @@ em {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
   --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -3529,7 +3565,6 @@ em {
   display: list-item;
   overflow: visible;
   border-block-start: 1px solid var(--cds-border-subtle);
-  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--accordion__item:last-child {
   border-block-end: 1px solid var(--cds-border-subtle);
@@ -3626,10 +3661,17 @@ li.cds--accordion__item--disabled:last-of-type {
   text-align: start;
 }
 
+.cds--accordion__wrapper {
+  padding: 0;
+  max-block-size: 0;
+  opacity: 0;
+  transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
+  writing-mode: horizontal-tb;
+}
+
 .cds--accordion__content {
-  display: none;
+  overflow: hidden;
   padding-inline: var(--cds-layout-density-padding-inline-local);
-  transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
 }
 @media (min-width: 480px) {
   .cds--accordion__content {
@@ -3671,46 +3713,13 @@ li.cds--accordion__item--disabled:last-of-type {
   display: block;
 }
 
-@keyframes collapse-accordion {
-  0% {
-    block-size: 100%;
-    opacity: 1;
-    visibility: inherit;
-  }
-  100% {
-    block-size: 0;
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-@keyframes expand-accordion {
-  0% {
-    block-size: 0;
-    opacity: 0;
-    visibility: hidden;
-  }
-  100% {
-    block-size: 100%;
-    opacity: 1;
-    visibility: inherit;
-  }
-}
-.cds--accordion__item--collapsing .cds--accordion__content {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) collapse-accordion;
-}
-
-.cds--accordion__item--expanding .cds--accordion__content {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) expand-accordion;
-}
-
 .cds--accordion__item--active {
   overflow: visible;
 }
-.cds--accordion__item--active .cds--accordion__content {
-  display: block;
+.cds--accordion__item--active .cds--accordion__wrapper {
+  opacity: 1;
   padding-block: 0.5rem;
   padding-block-end: 1.5rem;
-  transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms;
 }
 .cds--accordion__item--active .cds--accordion__arrow {
   fill: var(--cds-icon-primary, #161616);
@@ -6109,6 +6118,21 @@ fieldset[disabled] .cds--form__helper-text {
   transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
 }
 
+.cds--checkbox-group--slug legend.cds--label,
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text {
+  display: flex;
+}
+
+.cds--checkbox-group--slug legend.cds--label .cds--slug,
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .cds--copy-btn {
   position: relative;
   display: flex;
@@ -9746,6 +9770,21 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.5rem;
 }
 
+.cds--radio-button-group--slug legend.cds--label,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text {
+  display: flex;
+}
+
+.cds--radio-button-group--slug legend.cds--label .cds--slug,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .cds--data-table-container {
   position: relative;
   padding-block-start: 0.125rem;
@@ -20287,11 +20326,11 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slug.cds--slug--enabled .cds--slug-content {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
   border: 1px solid var(--cds-border-subtle);
   border-radius: 16px;
   -webkit-backdrop-filter: blur(25px);
           backdrop-filter: blur(25px);
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
   box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
   color: var(--cds-text-primary, #161616);
   min-inline-size: 17.5rem;
@@ -21529,6 +21568,98 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--tile > .cds--slug,
+.cds--tile--expandable > div > .cds--slug,
+.cds--tile--clickable .cds--tile--slug-icon {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+}
+
+.cds--tile.cds--tile--selectable > .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--tile.cds--tile--clickable > .cds--slug {
+  pointer-events: none;
+}
+
+.cds--tile--slug.cds--tile {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  border: 1px solid var(--cds-border-tile);
+}
+
+.cds--tile--slug.cds--tile--expandable:hover {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+}
+
+.cds--tile--slug.cds--tile--selectable::before,
+.cds--tile--slug.cds--tile--selectable::after,
+.cds--tile--slug.cds--tile--clickable::before {
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--tile--slug.cds--tile--selectable::before,
+.cds--tile--slug.cds--tile--clickable::before {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-01, rgba(255, 255, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-01, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-02, rgba(208, 226, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-02, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-hover, rgba(224, 224, 224, 0.55)) 0%, var(--cds-slug-callout-gradient-bottom-hover, rgba(209, 209, 209, 0.55)) 100%) rgba(0, 0, 0, 0.01);
+}
+
+.cds--tile--slug.cds--tile--selectable:hover::before,
+.cds--tile--slug.cds--tile--clickable:hover::before {
+  opacity: 1;
+}
+
+.cds--tile--slug.cds--tile--selectable::after {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-selected, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end-selected, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-selected, rgba(224, 224, 224, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom-selected, rgba(209, 209, 209, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+}
+
+.cds--tile--slug.cds--tile--is-selected::after {
+  opacity: 1;
+}
+
+.cds--tile--slug.cds--tile--is-selected {
+  border-color: var(--cds-border-inverse, #161616);
+}
+
+.cds--tile--slug.cds--tile--selectable .cds--tile-content,
+.cds--tile--slug.cds--tile--clickable .cds--tile-content {
+  position: relative;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.cds--tile--slug.cds--tile--selectable > .cds--slug,
+.cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark {
+  z-index: 1;
+}
+
+.cds--tile--expandable:has(.cds--slug > .cds--popover--open) {
+  overflow: visible;
+}
+
+.cds--tile--clickable .cds--tile--slug-icon rect {
+  stroke: var(--cds-icon-primary, #161616);
+}
+
+.cds--tile--clickable .cds--tile--slug-icon path {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--tile--slug-rounded,
+.cds--tile--slug-rounded.cds--tile--selectable::before,
+.cds--tile--slug-rounded.cds--tile--selectable::after,
+.cds--tile--slug-rounded.cds--tile--clickable::before {
+  border-radius: 1rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--tile__chevron svg,
   .cds--tile__checkmark svg,