@carbon/styles 1.50.0 → 1.51.0

package/css/styles.css

@@ -2773,6 +2773,9 @@ em {
   --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
   --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #b8d3ff;
+  --cds-ai-skeleton-element-background: #001141;
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -2993,6 +2996,9 @@ em {
   --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
   --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #b8d3ff;
+  --cds-ai-skeleton-element-background: #001141;
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -3212,6 +3218,9 @@ em {
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #0053ff;
+  --cds-ai-skeleton-element-background: #001141;
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -3428,6 +3437,9 @@ em {
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #0053ff;
+  --cds-ai-skeleton-element-background: #001141;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -3938,7 +3950,7 @@ li.cds--accordion__item--disabled:last-of-type {
   padding-block-start: 100%;
 }
 
-@keyframes hide-feedback {
+@keyframes cds--hide-feedback {
   0% {
     opacity: 1;
     visibility: inherit;
@@ -3948,7 +3960,7 @@ li.cds--accordion__item--disabled:last-of-type {
     visibility: hidden;
   }
 }
-@keyframes show-feedback {
+@keyframes cds--show-feedback {
   0% {
     opacity: 0;
     visibility: hidden;
@@ -3958,7 +3970,7 @@ li.cds--accordion__item--disabled:last-of-type {
     visibility: inherit;
   }
 }
-@keyframes skeleton {
+@keyframes cds--skeleton {
   0% {
     opacity: 0.3;
     transform: scaleX(0);
@@ -4867,7 +4879,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 .cds--btn.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -5502,7 +5514,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 .cds--breadcrumb.cds--skeleton .cds--link::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -5841,7 +5853,7 @@ textarea:-webkit-autofill:focus {
 }
 .cds--label.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -6264,7 +6276,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--checkbox-label-text.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -6410,10 +6422,10 @@ fieldset[disabled] .cds--form__helper-text {
   border: none;
 }
 .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
 }
 .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
 }
 
 .cds--copy-btn svg {
@@ -6567,12 +6579,12 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
 .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
 }
 
 .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
 .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
 }
 
 .cds--snippet--inline code {
@@ -7001,7 +7013,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--snippet.cds--skeleton span::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -7269,7 +7281,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after {
   opacity: 1;
 }
-@keyframes tooltip-fade {
+@keyframes cds--tooltip-fade {
   from {
     opacity: 0;
   }
@@ -7289,7 +7301,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text,
 .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text,
 .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
-  animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
   overflow: hidden;
@@ -7471,7 +7483,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--skeleton.cds--text-input::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -7954,7 +7966,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--tag.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -9951,7 +9963,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--radio-button__label.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -11193,7 +11205,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 .cds--search--md.cds--skeleton .cds--search-input::before,
 .cds--search--sm.cds--skeleton .cds--search-input::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -12279,7 +12291,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
 .cds--data-table.cds--skeleton th span::before,
 .cds--data-table.cds--skeleton td span::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -12332,7 +12344,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
 }
 .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -12363,7 +12375,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
 }
 .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -13372,7 +13384,7 @@ th .cds--table-sort__flex {
 .cds--date-picker.cds--skeleton input::before,
 .cds--date-picker__input.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -13410,7 +13422,7 @@ th .cds--table-sort__flex {
 }
 .cds--date-picker.cds--skeleton .cds--label::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -13880,7 +13892,7 @@ button.cds--dropdown-text:focus {
 .cds--dropdown-v2.cds--skeleton::before,
 .cds--dropdown.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -13938,7 +13950,7 @@ button.cds--dropdown-text:focus {
   animation-duration: 690ms;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: rotate;
+  animation-name: cds--rotate;
   animation-timing-function: linear;
   block-size: 5.5rem;
   inline-size: 5.5rem;
@@ -13950,7 +13962,7 @@ button.cds--dropdown-text:focus {
 }
 .cds--loading svg circle {
   animation-duration: 10ms;
-  animation-name: init-stroke;
+  animation-name: cds--init-stroke;
   animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 }
 @media screen and (prefers-reduced-motion: reduce) {
@@ -13979,13 +13991,13 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--loading--stop {
-  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
+  animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
 }
 .cds--loading--stop svg circle {
   animation-delay: 700ms;
   animation-duration: 700ms;
   animation-fill-mode: forwards;
-  animation-name: stroke-end;
+  animation-name: cds--stroke-end;
   animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
 }
 @media screen and (prefers-reduced-motion: reduce) {
@@ -14038,7 +14050,7 @@ button.cds--dropdown-text:focus {
   display: none;
 }
 
-@keyframes rotate {
+@keyframes cds--rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -14046,18 +14058,18 @@ button.cds--dropdown-text:focus {
     transform: rotate(360deg);
   }
 }
-@keyframes rotate-end-p1 {
+@keyframes cds--rotate-end-p1 {
   100% {
     transform: rotate(360deg);
   }
 }
-@keyframes rotate-end-p2 {
+@keyframes cds--rotate-end-p2 {
   100% {
     transform: rotate(-360deg);
   }
 }
 /* Stroke animations */
-@keyframes init-stroke {
+@keyframes cds--init-stroke {
   0% {
     stroke-dashoffset: 276.4608;
   }
@@ -14065,7 +14077,7 @@ button.cds--dropdown-text:focus {
     stroke-dashoffset: 52.527552;
   }
 }
-@keyframes stroke-end {
+@keyframes cds--stroke-end {
   0% {
     stroke-dashoffset: 52.527552;
   }
@@ -15651,7 +15663,7 @@ button.cds--dropdown-text:focus {
 }
 .cds--number.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -16240,7 +16252,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 .cds--select.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -16614,7 +16626,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 .cds--text-area.cds--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -17156,7 +17168,7 @@ optgroup.cds--select-optgroup:disabled,
   inline-size: 50%;
 }
 
-@keyframes stroke {
+@keyframes prefix--stroke {
   100% {
     stroke-dashoffset: 0;
   }
@@ -17199,7 +17211,7 @@ optgroup.cds--select-optgroup:disabled,
 .cds--inline-loading__checkmark {
   animation-duration: 250ms;
   animation-fill-mode: forwards;
-  animation-name: stroke;
+  animation-name: cds--stroke;
   fill: none;
   stroke: var(--cds-interactive, #0f62fe);
   stroke-dasharray: 12;
@@ -17665,52 +17677,14 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--modal-scroll-content {
   border-block-end: 2px solid transparent;
+  -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
+          mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
 }
 
 .cds--modal-scroll-content > *:last-child {
   padding-block-end: 1.5rem;
 }
 
-.cds--modal-content--overflow-indicator {
-  position: absolute;
-  background: var(--cds-layer);
-  block-size: 3rem;
-  grid-column: 1/-1;
-  grid-row: 2/-2;
-  inline-size: calc(100% - 1rem);
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  pointer-events: none;
-}
-.cds--modal-content--overflow-indicator::before {
-  position: absolute;
-  background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
-  block-size: 2rem;
-  content: "";
-  inline-size: 100%;
-  inset-block-start: -32px;
-  pointer-events: none;
-}
-
-@media not all and (min-resolution >= 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .cds--modal-content--overflow-indicator {
-      background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
-    }
-  }
-}
-.cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
-  margin: 0 2px 2px;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .cds--modal-scroll-content > *:last-child {
-    padding-block-end: 0;
-  }
-  .cds--modal-content--overflow-indicator {
-    display: none;
-  }
-}
 .cds--modal-footer {
   display: flex;
   justify-content: flex-end;
@@ -17782,14 +17756,20 @@ optgroup.cds--select-optgroup:disabled,
   margin: 0;
 }
 
+.cds--modal--slug.cds--modal {
+  background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
+}
+
 .cds--modal--slug .cds--modal-container {
-  background: linear-gradient(to top, 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-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-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.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
 }
 
-.cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
-  background: linear-gradient(to top, 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-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
-  background-color: var(--cds-layer);
+.cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-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.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
 }
 
 .cds--modal--slug .cds--slug {
@@ -17798,13 +17778,23 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-end: 0;
 }
 
+.cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
+  -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
+          mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
+}
+
 .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
 .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
 .cds--modal--slug .cds--modal-container-body > .cds--slug {
   inset-inline-end: 3rem;
 }
 
-/* stylelint-disable */
+.cds--modal--slug .cds--modal-content--overflow-indicator::before,
+.cds--modal--slug .cds--modal-content--overflow-indicator {
+  display: none;
+}
+
+/* stylelint-disable no-duplicate-selectors */
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--modal-close__icon {
     fill: ButtonText;
@@ -17818,7 +17808,7 @@ optgroup.cds--select-optgroup:disabled,
   }
 }
 
-/* stylelint-enable */
+/* stylelint-enable no-duplicate-selectors */
 .cds--inline-notification {
   position: relative;
   display: flex;
@@ -19655,7 +19645,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: absolute;
   animation-duration: 1400ms;
   animation-iteration-count: infinite;
-  animation-name: progress-bar-indeterminate;
+  animation-name: cds--progress-bar-indeterminate;
   animation-timing-function: linear;
   background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
   background-position-x: 0%;
@@ -19665,7 +19655,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
-  animation-name: progress-bar-indeterminate-rtl;
+  animation-name: cds--progress-bar-indeterminate-rtl;
 }
 
 .cds--progress-bar__helper-text {
@@ -19718,7 +19708,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   margin-inline-end: 0;
 }
 
-@keyframes progress-bar-indeterminate {
+@keyframes cds--progress-bar-indeterminate {
   0% {
     background-position-x: 25%;
   }
@@ -19726,7 +19716,7 @@ span.cds--pagination__text.cds--pagination__items-count {
     background-position-x: -105%;
   }
 }
-@keyframes progress-bar-indeterminate-rtl {
+@keyframes cds--progress-bar-indeterminate-rtl {
   0% {
     background-position-x: -105%;
   }
@@ -20032,7 +20022,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--progress.cds--skeleton .cds--progress-label::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -20101,6 +20091,14 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-inline-start: 0;
 }
 
+@keyframes ai-skeleton-animation {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
 .cds--icon--skeleton {
   position: relative;
   padding: 0;
@@ -20119,7 +20117,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--icon--skeleton::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -20149,7 +20147,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--skeleton__placeholder::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -20180,7 +20178,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--skeleton__text::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -20197,6 +20195,37 @@ span.cds--pagination__text.cds--pagination__items-count {
   block-size: 1.5rem;
 }
 
+.cds--skeleton__text--ai,
+.cds--skeleton__placeholder--ai,
+.cds--skeleton__icon--ai {
+  overflow: hidden;
+  background: var(--cds-ai-skeleton-background, #b8d3ff);
+}
+
+.cds--skeleton__text--ai::before,
+.cds--skeleton__placeholder--ai::before,
+.cds--skeleton__icon--ai::before {
+  animation: 1250ms ease-in-out ai-skeleton-animation infinite;
+  background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
+}
+
+.cds--skeleton__placeholder--ai::before,
+.cds--skeleton__icon--ai::before {
+  inline-size: 200%;
+}
+
+.cds--skeleton__placeholder--ai {
+  border-radius: 0.5rem;
+}
+
+.cds--skeleton__text--ai {
+  border-radius: 1rem;
+}
+
+.cds--skeleton__icon--ai {
+  border-radius: 0.125rem;
+}
+
 .cds--slider-container {
   position: relative;
   display: flex;
@@ -20571,7 +20600,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -20988,7 +21017,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slug.cds--slug--enabled .cds--slug-content {
-  background: linear-gradient(to top, 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-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-background, var(--cds-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-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
   border: 1px solid transparent;
   border-radius: 0.5rem;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -21465,7 +21494,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--structured-list.cds--skeleton span::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -21979,7 +22008,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -22283,10 +22312,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 
-.cds--tile-content__above-the-fold {
-  display: block;
-}
-
 .cds--tile-content__below-the-fold {
   display: block;
   opacity: 0;
@@ -22394,13 +22419,13 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--tile--slug.cds--tile {
-  background: linear-gradient(to top, 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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-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.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
 }
 
 .cds--tile--slug.cds--tile--expandable:hover {
-  background: linear-gradient(to top, 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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-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-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
 }
 
 .cds--tile--slug.cds--tile--selectable::before,
@@ -22785,7 +22810,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";
@@ -22816,7 +22841,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
   position: absolute;
-  animation: 3000ms ease-in-out skeleton infinite;
+  animation: 3000ms ease-in-out cds--skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
   block-size: 100%;
   content: "";