@carbon/styles 1.69.0-rc.0 → 1.70.0-rc.0

package/scss/components/text-area/_text-area.scss

@@ -128,13 +128,21 @@
     border-block-end-color: $border-subtle;
   }
 
-  // Styles for `Slug` rendered inside `TextArea`
+  // Styles for `AILabel` rendered inside `TextArea`
+  .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--text-area__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: $spacing-04;
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area__wrapper--slug
     .#{$prefix}--slug.#{$prefix}--slug--revert {
     inset-block-start: $spacing-02;
@@ -142,23 +150,67 @@
     transform: translate(0);
   }
 
+  .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area:has(
+      ~ .#{$prefix}--text-area__inner-wrapper--decorator .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--text-area__inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
   .#{$prefix}--text-area__wrapper--slug
-    .#{$prefix}--text-area:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--text-area:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
+  }
 
+  .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area:has(
+      ~ .#{$prefix}--text-area__inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-area--invalid:has(
+      ~ .#{$prefix}--text-area__inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-area--warn:has(
+      ~ .#{$prefix}--text-area__inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-area--invalid:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-area--warn:has(~ .#{$prefix}--ai-label),
   .#{$prefix}--text-area--invalid:has(~ .#{$prefix}--slug),
   .#{$prefix}--text-area--warn:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-area--invalid ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-area--warn ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug,
   .#{$prefix}--text-area--warn ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
+  .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug.#{$prefix}--slug--revert,
   .#{$prefix}--text-area--warn ~ .#{$prefix}--slug.#{$prefix}--slug--revert {
     inset-inline-end: $spacing-07;

package/scss/components/text-input/_text-input.scss

@@ -443,7 +443,11 @@
     border-block-end-color: $border-subtle;
   }
 
-  // Styles for Slug rendered inside TextInput
+  // Styles for AILabel rendered inside TextInput
+  .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input__field-wrapper .#{$prefix}--ai-label,
   .#{$prefix}--text-input__field-wrapper .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -451,23 +455,73 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input:has(
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+        .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
   .#{$prefix}--text-input__field-wrapper--slug
-    .#{$prefix}--text-input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--text-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
+  }
 
+  .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input:has(
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-input--invalid:has(
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-input--warning:has(
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator > *
+    ),
+  .#{$prefix}--text-input--invalid:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--text-input--warning:has(~ .#{$prefix}--ai-label),
   .#{$prefix}--text-input--invalid:has(~ .#{$prefix}--slug),
   .#{$prefix}--text-input--warning:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--text-input--invalid
+    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input--warning
+    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input--invalid ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-input--warning ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-input--invalid ~ .#{$prefix}--slug,
   .#{$prefix}--text-input--warning ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  // Decorator
+  .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input__field-inner-wrapper--decorator:not(
+      :has(.#{$prefix}--ai-label)
+    )
+    > * {
+    block-size: 1rem;
+  }
+
   // Windows HCM fix
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg,

package/scss/components/tile/_tile.scss

@@ -387,7 +387,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--tile > .#{$prefix}--ai-label,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--ai-label,
   .#{$prefix}--tile > .#{$prefix}--slug,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
   .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
@@ -396,10 +398,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
     > .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
@@ -413,11 +418,14 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     }
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
     > .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
@@ -502,21 +510,28 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--slug {
     z-index: 1;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark {
     z-index: 1;
   }
 
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--ai-label > .#{$prefix}--popover--open
+    ),
   .#{$prefix}--tile--expandable:has(
       .#{$prefix}--slug > .#{$prefix}--popover--open
     ) {

package/scss/components/toggle/_toggle.scss

@@ -79,9 +79,16 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
     .#{$prefix}--toggle__switch {
-    box-shadow:
-      0 0 0 1px $focus-inset,
-      0 0 0 3px $focus;
+    &::after {
+      display: block;
+      border: 2px solid $focus;
+      border-radius: convert.to-rem(16px);
+      block-size: calc(100% + convert.to-rem(6px));
+      content: '';
+      inline-size: calc(100% + convert.to-rem(6px));
+      margin-block-start: convert.to-rem(-3px);
+      margin-inline-start: convert.to-rem(-3px);
+    }
   }
 
   .#{$prefix}--toggle__switch--checked {