@carbon/styles 1.42.0 → 1.43.0-rc.0

package/css/styles.css

@@ -4804,6 +4804,12 @@ li.cds--accordion__item--disabled:last-of-type {
   box-shadow: none;
 }
 
+.cds--btn-set .cds--btn.cds--btn--loading {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn:focus {
     color: Highlight;
@@ -7426,6 +7432,28 @@ fieldset[disabled] .cds--form__helper-text {
   border-block-end-color: var(--cds-border-subtle);
 }
 
+.cds--text-input__field-wrapper .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 1rem;
+  transform: translateY(-50%);
+}
+
+.cds--text-input__field-wrapper--slug .cds--text-input {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 2.5rem;
+}
+
+.cds--text-input--invalid:has(~ .cds--slug),
+.cds--text-input--warning:has(~ .cds--slug) {
+  padding-inline-end: 4rem;
+}
+
+.cds--text-input--invalid ~ .cds--slug,
+.cds--text-input--warning ~ .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
@@ -8604,6 +8632,41 @@ fieldset[disabled] .cds--form__helper-text {
   text-overflow: ellipsis;
 }
 
+.cds--list-box__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  transform: translateY(-50%);
+}
+
+.cds--list-box__wrapper--slug .cds--list-box {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+}
+
+.cds--list-box__wrapper--slug .cds--list-box__field,
+.cds--list-box__wrapper--slug .cds--text-input {
+  padding-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
+  padding-inline-end: 6rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
+  inset-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
+  inset-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
+  inset-inline-end: 5.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--list-box__field,
   .cds--list-box__menu,
@@ -12698,7 +12761,7 @@ th .cds--table-sort__flex {
   align-items: center;
 }
 
-.cds--date-picker-input__wrapper span {
+.cds--date-picker-input__wrapper > span {
   position: relative;
 }
 
@@ -12831,7 +12894,6 @@ th .cds--table-sort__flex {
 
 .cds--date-picker__input:disabled ~ .cds--date-picker__icon {
   cursor: not-allowed;
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .cds--date-picker--range > .cds--date-picker-container:first-child {
@@ -12843,6 +12905,28 @@ th .cds--table-sort__flex {
   inline-size: 8.96875rem;
 }
 
+.cds--date-picker-input__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  transform: translateY(-50%);
+}
+
+.cds--date-picker-input__wrapper--slug .cds--date-picker__input {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 4rem;
+}
+
+.cds--date-picker__input[readonly] {
+  background: transparent;
+  border-block-end-color: var(--cds-border-subtle);
+  cursor: text;
+}
+
+.cds--date-picker__input[readonly] + .cds--date-picker__icon {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--date-picker.cds--skeleton input,
 .cds--date-picker__input.cds--skeleton {
   position: relative;
@@ -12921,16 +13005,6 @@ th .cds--table-sort__flex {
   }
 }
 
-.cds--date-picker__input[readonly] {
-  background: transparent;
-  border-block-end-color: var(--cds-border-subtle);
-  cursor: text;
-}
-
-.cds--date-picker__input[readonly] + .cds--date-picker__icon {
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
-}
-
 .cds--dropdown__wrapper--inline {
   display: inline-grid;
   align-items: center;
@@ -14530,6 +14604,14 @@ button.cds--dropdown-text:focus {
   border-inline-start-color: var(--cds-border-subtle);
 }
 
+.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--slug {
+  inset-block-start: 2.6875rem;
+}
+
+.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+}
+
 .cds--multi-select .cds--list-box__field--wrapper {
   display: inline-flex;
   align-items: center;
@@ -14852,21 +14934,6 @@ button.cds--dropdown-text:focus {
 .cds--number__control-btn::-moz-focus-inner {
   border: 0;
 }
-.cds--number__control-btn::before, .cds--number__control-btn::after {
-  position: absolute;
-  display: block;
-  background-color: var(--cds-field);
-  block-size: 2.25rem;
-  content: "";
-  inline-size: 0.125rem;
-  inset-block-start: 0.125rem;
-}
-.cds--number__control-btn::before {
-  inset-inline-start: 0;
-}
-.cds--number__control-btn::after {
-  inset-inline-end: 0;
-}
 .cds--number__control-btn svg {
   fill: currentColor;
 }
@@ -14886,12 +14953,6 @@ button.cds--dropdown-text:focus {
   color: var(--cds-icon-primary, #161616);
   cursor: pointer;
 }
-.cds--number__control-btn:hover::before, .cds--number__control-btn:hover::after {
-  background-color: var(--cds-field-hover);
-}
-.cds--number__control-btn:focus::before, .cds--number__control-btn:focus::after, .cds--number__control-btn:hover:focus::before, .cds--number__control-btn:hover:focus::after {
-  background-color: transparent;
-}
 .cds--number__control-btn:disabled {
   border-block-end-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -14906,46 +14967,37 @@ button.cds--dropdown-text:focus {
   order: 2;
 }
 
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: transparent;
+.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: var(--cds-support-error, #da1e28);
 }
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
+
+.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe);
 }
-@media screen and (prefers-contrast) {
-  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-    outline-style: dotted;
-  }
+
+.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: transparent;
+.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
+  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28), inset -2px 0 var(--cds-support-error, #da1e28);
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid var(--cds-support-error, #da1e28);
+  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28);
+}
+
+.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
+  outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
+  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
     outline-style: dotted;
   }
 }
 
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background-color: transparent;
-}
-
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background-color: var(--cds-support-error, #da1e28);
-}
-
-.cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after,
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn.up-icon:focus::after {
-  background-color: var(--cds-focus, #0f62fe);
-}
-
 .cds--number__rule-divider {
   position: absolute;
   z-index: 6000;
@@ -15026,30 +15078,6 @@ button.cds--dropdown-text:focus {
   opacity: 1;
 }
 
-.cds--number--light input[type=number] {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light input[type=number]:disabled {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light .cds--number__control-btn::before,
-.cds--number--light .cds--number__control-btn::after {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light .cds--number__control-btn:focus::before,
-.cds--number--light .cds--number__control-btn:focus::after {
-  background-color: transparent;
-}
-
-.cds--number--light .cds--number__control-btn:hover,
-.cds--number--light .cds--number__control-btn:not(:focus):hover::before,
-.cds--number--light .cds--number__control-btn:not(:focus):hover::after {
-  background-color: var(--cds-layer-hover-02, #e8e8e8);
-}
-
 .cds--number--lg input[type=number] {
   block-size: 3rem;
 }
@@ -15061,9 +15089,6 @@ button.cds--dropdown-text:focus {
 .cds--number--lg .cds--number__control-btn {
   inline-size: 3rem;
 }
-.cds--number--lg .cds--number__control-btn::before, .cds--number--lg .cds--number__control-btn::after {
-  block-size: 2.75rem;
-}
 
 .cds--number--sm input[type=number] {
   block-size: 2rem;
@@ -15076,9 +15101,6 @@ button.cds--dropdown-text:focus {
 .cds--number--sm .cds--number__control-btn {
   inline-size: 2rem;
 }
-.cds--number--sm .cds--number__control-btn::before, .cds--number--sm .cds--number__control-btn::after {
-  block-size: 1.75rem;
-}
 
 .cds--number--nolabel .cds--label + .cds--form__helper-text {
   margin-block-start: 0;
@@ -15105,23 +15127,37 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
   cursor: pointer;
 }
-.cds--number--readonly .cds--number__control-btn:hover::before, .cds--number--readonly .cds--number__control-btn:hover::after {
-  background-color: transparent;
-}
 
 .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
   outline: none;
 }
 
-.cds--number--readonly .cds--number__control-btn::before,
-.cds--number--readonly .cds--number__control-btn::after {
-  background: transparent;
-}
-
 .cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) {
   background-color: var(--cds-border-subtle);
 }
 
+.cds--number__input-wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 5.5rem;
+  transform: translateY(-50%);
+}
+
+.cds--number__input-wrapper--slug input[data-invalid] ~ .cds--slug,
+.cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
+  inset-inline-end: 7.5rem;
+}
+
+.cds--number .cds--number__input-wrapper--slug input[data-invalid],
+.cds--number .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
+  padding-inline-end: 9rem;
+}
+
+.cds--number__input-wrapper--slug input[type=number] {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 7rem;
+}
+
 .cds--number.cds--skeleton {
   position: relative;
   padding: 0;
@@ -15155,6 +15191,28 @@ button.cds--dropdown-text:focus {
   display: none;
 }
 
+/* stylelint-disable */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn:hover,
+  .cds--number__control-btn:focus {
+    color: Highlight;
+    outline: 1px solid Highlight;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn {
+    outline: 1px solid transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn svg {
+    fill: ButtonText;
+  }
+}
+
+/* stylelint-enable */
 .cds--number-input--fluid {
   position: relative;
   background: var(--cds-field);
@@ -15203,55 +15261,47 @@ button.cds--dropdown-text:focus {
   transform: translate(0);
 }
 
-.cds--number-input--fluid .cds--number__control-btn,
 .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end: 1px solid transparent;
+  border-block-end-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-}
-@media screen and (prefers-contrast) {
-  .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
-    outline-style: dotted;
-  }
+.cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number .cds--number__input-wrapper:not(.cds--number__input-wrapper--warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid transparent;
+.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
+.cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: transparent;
+  box-shadow: none;
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number .cds--number__input-wrapper:not(.cds--number__input-wrapper--warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover::before {
-  background: var(--cds-focus, #0f62fe);
-  block-size: 1px;
-  inline-size: 100%;
-  inset-block-end: 0;
-  inset-block-start: auto;
-  inset-inline-start: 0;
+.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  border-block-end: 1px solid var(--cds-focus, #0f62fe);
-  outline: none;
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
+  box-shadow: inset -2px 0 var(--cds-support-error, #da1e28);
 }
 
-.cds--number-input--fluid input[type=number] ~ .cds--number__controls .cds--number__control-btn::after {
-  block-size: calc(100% - 0.0625rem);
-  inset-block-start: 0;
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
+  box-shadow: none;
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background: var(--cds-focus, #0f62fe);
+.cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
 }
-
-.cds--number-input--fluid input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  block-size: 100%;
+@media screen and (prefers-contrast) {
+  .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
+    outline-style: dotted;
+  }
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon:hover::after {
-  background-color: var(--cds-focus, #0f62fe);
-  block-size: 100%;
+.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
+  border-block-end: 1px solid var(--cds-focus, #0f62fe);
+  outline: none;
 }
 
 .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
@@ -15344,6 +15394,14 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
 }
 
+.cds--number-input--fluid .cds--number__input-wrapper--slug .cds--slug {
+  inset-block-start: 2.6875rem;
+}
+
+.cds--number-input--fluid .cds--number__input-wrapper--slug {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+}
+
 .cds--search--fluid {
   block-size: 4rem;
 }
@@ -15591,7 +15649,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--select__invalid-icon--warning path[fill] {
-  fill: var(--cds-icon-primary, #161616);
+  fill: #000000;
   opacity: 1;
 }
 
@@ -15711,6 +15769,28 @@ optgroup.cds--select-optgroup:disabled,
   display: none;
 }
 
+.cds--select--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  transform: translateY(-50%);
+}
+
+.cds--select--slug .cds--select-input {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 4rem;
+}
+
+.cds--select--slug.cds--select--invalid .cds--select-input,
+.cds--select--slug.cds--select--warning .cds--select-input {
+  padding-inline-end: 6rem;
+}
+
+.cds--select--slug.cds--select--invalid .cds--slug,
+.cds--select--slug.cds--select--warning .cds--slug {
+  inset-inline-end: 4rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--select__arrow {
     fill: ButtonText;
@@ -15985,8 +16065,36 @@ optgroup.cds--select-optgroup:disabled,
   border-block-end-color: var(--cds-border-subtle);
 }
 
-.cds--text-area.cds--text-area--light:disabled {
-  background-color: var(--cds-field-02, #ffffff);
+.cds--text-area__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 1rem;
+}
+
+.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert {
+  inset-block-start: 0.25rem;
+  inset-inline-end: 0.5rem;
+  transform: translate(0);
+}
+
+.cds--text-area__wrapper--slug .cds--text-area {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 2.5rem;
+}
+
+.cds--text-area--invalid:has(~ .cds--slug),
+.cds--text-area--warn:has(~ .cds--slug) {
+  padding-inline-end: 4rem;
+}
+
+.cds--text-area--invalid ~ .cds--slug,
+.cds--text-area--warn ~ .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--text-area--invalid ~ .cds--slug.cds--slug--revert,
+.cds--text-area--warn ~ .cds--slug.cds--slug--revert {
+  inset-inline-end: 2rem;
 }
 
 .cds--text-area.cds--skeleton {
@@ -16194,6 +16302,10 @@ optgroup.cds--select-optgroup:disabled,
   inline-size: 80%;
 }
 
+.cds--text-area--fluid .cds--text-area__wrapper--slug {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+}
+
 .cds--text-input--fluid.cds--text-input-wrapper {
   position: relative;
   background: var(--cds-field);
@@ -16347,6 +16459,10 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-start: 1rem;
 }
 
+.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
+  inset-block-start: 2.6875rem;
+}
+
 .cds--time-picker--fluid {
   background: var(--cds-field);
 }
@@ -16588,6 +16704,16 @@ optgroup.cds--select-optgroup:disabled,
   stroke: var(--cds-interactive, #0f62fe);
 }
 
+.cds--btn .cds--inline-loading--btn {
+  min-block-size: 0;
+}
+.cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+}
+
 /* If IE11 Don't show check animation */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
   .cds--inline-loading__checkmark-container {
@@ -19888,6 +20014,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: flex;
 }
 
+.cds--slug:has(> .cds--popover--open) {
+  z-index: 2;
+}
+
 .cds--slug .cds--slug__button {
   position: relative;
   display: flex;
@@ -20197,6 +20327,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   border-end-end-radius: 1rem;
 }
 
+.cds--slug.cds--slug--revert {
+  transform: translate(0.5rem, -50%);
+}
+
+.cds--slug--revert .cds--btn--icon-only {
+  align-items: center;
+  padding-block-start: 0;
+}
+
+.cds--slug--revert .cds--btn--icon-only svg {
+  margin: 0;
+}
+
 .cds--stack-horizontal {
   display: inline-grid;
   -moz-column-gap: var(--cds-stack-gap, 0);
@@ -20292,7 +20435,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   font-size: 100%;
   vertical-align: baseline;
   display: table;
-  background-color: transparent;
+  background-color: var(--cds-layer) transparent;
   border-collapse: collapse;
   border-spacing: 0;
   inline-size: 100%;